Simple FLTK dialog box sample

cable_guy_67 · #1 31-Oct-2004, 07:30

Quote:

Originally Posted by dsmith

Any comments, suggestions, additions or improvements to this would be most welcome. You may even want to play with the tab order thing a bit more because it is much simpler. You could add a clear button and a post button and implement the callbacks for those, just to get a feel for how it all works...

Yes, the tab order is the place to begin just by a matter of scale. If you get a chance could you post the tabOrder.fl file. I find it easier to understand when I can jump from fluid to the source and see just what is going on.

Is there an easy way to get offline content d/l'ed from here. I thought maybe I could get my subscriptions to read offline but don't seem to see how to do it. Forum search didn't get me any relevent hits. (read+offline search) When my subscribed threads are emailed to me they have all the vb code stripped.

BTW, Steelers vs Patriots @ 4 EST (don't forget to set your clock back

) on ch 2 here. Since I was born and raised in Buffalo I ALWAYS like to see the Pats lose! Go Steelers!!! I'll put in a cheer for you while watching.

dsmith · #2 31-Oct-2004, 08:01

Okay, I am splitting this thread now. I would greatly appreciate if you posted any changes and experimentation that you do with the tab order program. I think it may be a great little sample for those that are just beginning with FLTK. I think it will also show how simple FLTK is compared to other toolkits.

Quote:

Originally Posted by cable_guy_67

BTW, Steelers vs Patriots @ 4 EST (don't forget to set your clock back

) on ch 2 here. Since I was born and raised in Buffalo I ALWAYS like to see the Pats lose! Go Steelers!!! I'll put in a cheer for you while watching.

You, sir, just stepped up several notches in my estimation. You will always get first priority from me

Attached is the fluid file that I started the tab_order with.

cable_guy_67 · #3 31-Oct-2004, 08:23

I will post any work here. To begin I will start from here:

Quote:

Originally Posted by dsmith

Any comments, suggestions, additions or improvements to this would be most welcome. You may even want to play with the tab order thing a bit more because it is much simpler. You could add a clear button and a post button and implement the callbacks for those, just to get a feel for how it all works...

In case anyone else here is following along lets use this for our first stage:

Add two buttons to the UI.
A "CLEAR" button that will clear all editable fields on the form.
A "POST" button that will save all the forms fields to a txt file.
Future: add a left and right arrow for scrolling through the txt file.

I guess it is off to work. Thanks for the start dsmith.

cable_guy_67 · #4 31-Oct-2004, 14:00

Ok, since we are working from scratch let's all get on the same page shall we? To start with, get the files that are attached and we will all be on the same page. The FLTKtutorial.zip contains dsmith's example for correcting the tabs of objects on your form. It also contains all the logic to make it work. The .fld file is a fluid project that has all the widgets defined but they just look nice, they don't do anything yet. From this jump off point I will begin my quest to add all the functionality in trying to use fluid to write the code. dsmith made many modifications by hand but we will try to do them in fluid.

Go Steelers!!!

I will assume that you have downloaded the files and created a new directory to work in. I use the /workspace/projectName/fluidCreated structure to work in. Do what you will but remember that when I am referring to the work I am referring to the above convention. With that, let's get started.

Ya gotta start on a happy note

To Start using the tab_order.fld project file, run fluid and write code. This will create the files tab_order.cxx and tab_order.h. Of course if you named your project something else it would be reflected here. Now we need some way to display the amazing creation. For this we will create a main() function at the end of the .cxx file.

Add the code:

CPP / C++ / C Code:

int main(){

    Fl_Double_Window  *mywin;
    mywin = make_window();
    mywin->show();

    return Fl::run();
}

note:this is the bare bones example of how to use the created code to show the results.

Now to compile our example. There are a few ways to do this and I hope to add a makefile to help with the process as this gets more and more complex. Adjust to your setup since I am using a cygwin gcc installation and fltk 1.1.5.

$ fltk-config --compile tab_order.cxx

This will create tab_order.cxx in the same directory. I like a little more control of the output so I use:

$ g++ tab_order.cxx `fltk-config --ldflags --cxxflags` -o ../TabOrder_mark_1

I guess a little explanation is in order. I have a workspace off the root. In that are the individual project directories. In my project dir I make a directory called FluidCreated (remember, avoid spaces. They look terrible in bash, and can cause trouble) that I store the .fld file. That way, when fluid writes the code there is less of a problem of stepping a fluid created file you have modified. In our example, we would lose all of our main() changes the next time we would write the code. To see this in action hit the write code button in fluid. (You did make a copy of tab_order.cxx right?) What I like to do is just rename the .cxx file to .cpp as I go. If you are not using an IDE and use an editor like I do I would like to make a plug for the one I use. ConTEXT editor because it is great and it is free. Check out fixedsys.com/context. You can set up your project and have ConTEXT keep an eye on changes. That way, if you inadvertently smash a file you were working on you can say no to updating the file and save to another filename.
Ok, since we compiled TabOrder_mark_1 to one dir higher ( ../ ) use ../taborder_mark_1 to run the file. Then you don't clutter your work dir but you will stay in your current location.

Saa Weet. When you execute the exe we now have a window up on the screen.

Pretty cool, take a moment to remind yourself how cool you are. That enough. After all, this is a pretty boring example. Why don't the radio buttons work. Why won't the program quit when you hit the quit button. I'll tell you why. Because dsmith wants us to learn for ourselves that's why.

That is where we will find the rest of the logic we need to add into fluid. Close our nearly useless program with the window close widget and get that mess off your screen.

Since we will be creating and creating again the .cxx and .h files lets take the time to move the main function to it's own file and include the .cxx (therefor the .h file) without worrying about changes. Create a new file called tab_order.cpp and enter the following code.

CPP / C++ / C Code:

#include "tab_order.cxx"

int main(){

    Fl_Double_Window  *mywin;
    mywin = make_window();
    mywin->show();


    return Fl::run();
}

Now you can compile with the line:

Code:

$ g++ tab_order.cpp `fltk-config --ldflags --cxxflags` -o ../TabOrder_mark_1

This will allow fluid to do it's thing and you to do yours. As my brother is likely to say,

"Niiiiice".

Now, let's make that done button work shall we...

If you look in the fluid project window near the bottom of the list you will see a button named bu_exit. If you double click on that the properties window will open and you will be able to add the needed code. In the call back section add :

CPP / C++ / C Code:

cb_exit()

and hit ok. Select new/code/function-method. Name that,

CPP / C++ / C Code:

cb_exit()

With cb_exit highlighted select new/code/code and enter,

CPP / C++ / C Code:

exit(0);

To use exit() we will need to select new/code/declaration and enter

CPP / C++ / C Code:

#include <iostream>

With the declaration highlighted use 'f2' to move it up to the top. Do the same with the cb_exit function and put it just below the include. Hit
write code and compile. Run the program and now the exit button works!

Let's take a break here so I can get all caught up in the thread.

dsmith · #5 02-Nov-2004, 08:46

What started out as a little experiment here has turned into a full blown tutorial of how to use fluid in creating a FLTK program. This tutorial can be found here. I highly recommend anyone at all interested in GUI programming and/or FLTK to take a look at it. It very simply and elegantly sets up the full program from scratch all through fluid, with very minimal coding by the user.

Thanks Cable Guy!

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search
Rate This Thread
Rate This Thread: