FLTK && fluid In Motion

A tutorial using fluid 1.1.5

Part 1

Ok, that was a nice warm up but now we really need to get to work. You should now have an understanding of how to get your design in fluid out to a finished product. Today we will rebuild from scratch in fluid and not do any hand coding in and editor. Remember we hand coded the main() and moved it to a separate file? Today we will have fluid create the main in the .cxx file. Since our imaginary client Mr Smith (can ya give me a MR Annndersonnn) suggested to add a button to post the file. I interpret that as saving to a text file for future use. We will not add the functionality just yet (I still have more studying to do ) but we will plan for this need. We also need a clear button to empty all the fields and let me suggest set the radios back to personal. To to that we will need to do a few things.

1. Create a new fluid project (file/new)
2. Create a main() function (new/code/function-method)
3. Create a main window <with main selected> (new/group/window)
4. Create six text fields with labels <with window selected> (new/text/input)
5. Create a group of 3 radio buttons <with window selected>[(new/buttons/round button)
6. Group the 3 radio buttons <highlight all three radios> (edit/group or F7)
7. Create 3 buttons across the bottom of the window <with window selected> (new/buttons/button)
8. Add all our additional code to start giving this some functionality <use our brains> (think and do)

Luckily we have that example of the tabs file to glean from!

A few things to know. In fluid (edit/project settings) you can define what your output file will be. You could put in an absolute filename and suffix or just your own suffix. I like to change the .cxx to .cpp. Eventually we will move blocks of the code into our own classes and have some for real C++ but for now it is just because I like it better. Be your own judge. I just like the fact that it is in there.

1. Create a new fluid project (file/new)

To start, open the tab_order.fld file for reference. Now open another fluid and name it ContactList.fld (or .f or .fl). This is our project we will be working on. Everything I am talking about doing will be to this project. The tab example is just so we can get an idea of what we need to show in the window.

2. Create a main() function (new/code/function-method)

If you look at the dialog that pops up you will see that by leaving the input field blank a main() will be created. Now, as you do the next few steps don't get discouraged. Fluid seems to be very picky about what is highlighted and what you can an cannot do because of it. I had a rough time as I was building this getting code above the main. That is why I made the list of what order to build in. It is also the same order as things appear in our window from top to bottom and left to right. This will come into play for using tab to go from field to field. As a Sgt of mine used to say, "ProperPlanningPreventsPissPoorPerformance." Just like that. All one word. Humorous alliteration, what has the army become. If you care to read more on the order of tabs follow the thread here in the FLTK forums and you will see what I mean.

Check out this screen shot for what we are looking for. Remember, you can modify to your tastes but just remember the order your objects are created will determine their tab order.

3. Create a main window <with main selected> (new/group/window)

Under the C++ in the properties editor (double click on window) give the window the name window_main. I changed the type from double to single (I think this is buffering) and then clicked on the GUI tab. For a label enter "FLTK Contact List" <no quotes>. This will be displayed in the title bar of the window. You can play around with the look here and in the style tabs. Changes are displayed in real time.

4. Create six text fields with labels <with window selected> (new/text/input)

The easiest way to do this is to create one and copy. Place your first input widget and open the properties editor. In the C++ tab give it the name in_name. In user data put the string "name". In the GUI tab give it a label of "Name : " <no quotes>. Make sure only the left alignment arrow is selected. You may have to unselect another one. That is our basic input widget and label. Select it and control-c to copy (or use menu) and control-v to paste repeat until you have six fields lined up. Go through each and make the appropriate changes.

1. in_name, user string "name", label Name :
2. in_phone, user string "phone", label Phone :
3. in_company, user string "company", label Company :
4. in_address, user string "address", label Address :
5. in_state, user string "state", label State :
6. in_zipcode, user string "zipcode", label Zip Code :

5. Create a group of 3 radio buttons <with window selected> (new/buttons/round button)

Use the same copy and paste technique with the radio buttons. Once you have the three lined up add the following to each item. In the C++ tab you will be concerned with the subtype in the top right (change to radio). The extra code line for the first one to set it's created default (what a great place for a constructor ). The call back and user data. In the style tab the Box and Down Box choose no box for both. Finally in the GUI tab the label. See the list below.

1. radio_personal, extra code : "radio_personal -> value( true);" <no quotes>,
   callback is bt_callback, user data is "personal", label is Personal and use the square alignment.
2. radio_professional, no extra code, callback is bt_callback, user data is "professional", label
   is Professional with the square alignment.
3. radio_other, no extra code, callback is bt_callback, user data is "other", label is Other
   and use the square alignment.

6. Group the 3 radio buttons <highlight all three radios> (edit/group or F7)

This is one of those things that sounds worse than it is. Simply select all three radio buttons and hit F7. Your buttons are now part of a group and will react to each other accordingly. Give the group the name of group_contact_type and user data of "contact_type". I used the engraved box and gave it a label of Contact Type with the up arrow alignment.

7. Create 3 buttons across the bottom of the window <with window selected> (new/buttons/button)

Once again, copy and paste is your friend. If you add all your code and make your adjustments to the button and then copy/paste then copy will have all the properties of the first except its location in the window. Then you can just change the names, user data, and label for your button.

1. but_clear, bt_callback, "clear", Round up Box, Round Down Box, square alignment, label of Clear.
2. but_save, bt_callback, "save", Round UP Box, Round Down Box, square alignment, label of Save.
3. but_quit, bt_callback, "exit", Round UP Box, Round Down Box, square alignment, label of Exit.

8. Add all our additional code to start giving this some functionality <use our brains> (think and do)

Well, congratulations. You have created the entire thing from scratch. All we have to do to finish is add some code to get a little usefulness out of those lazy widgets! I'm just going to plow on through. Grab my belt loop if you have to, but I don't have much steam left.



Ahhhhhh, that's better.

Go to (new/code/function-method) and call it bt_callback. Here is the function.
Give it a return type of static void and make it public. With the function selected go to (new/code/code) and put this there:

Use F2 to 'slide' the function above main. You can use F3 to move down. Since we are calling exit() we need to add iostream. To do this select (new/code/declaration). Enter:
Move it to the top of the list. Create another one and enter the code :
Slide that below the include. Compile with this, or whatever you have been using.

If you have any problems make sure you have all your code correct. There is a screen shot of my partially working app and one of the fluid project screen. Make sure everything is cascaded correctly.

I hope everyone enjoyed this tutorial. If you have any problems post them and I will try to help you get back to the bottom of it. I know some of the material was duplicated but I kind of got a little ahead of myself and thought it would be a good idea to do it all as one fell swoop just so I knew I had it. As I teach myself more I will create more of these tutorials based on this project. There are still a few things to get done. If anyone has any suggestion, additions or corrections please come forward with them. If anyone has any complaints please direct them to the nearest person who is wearing a purple hat and has a tail. I'm sure they can help.

Like I said, let me know how you liked this, good or bad and if there are a few people interested I will keep writing these up. I will start to move from the hand holding and just expect you can perform these simple operations we have done so far. Remember, we did not use the editor at all today. We will have to, but not today.

one more for the road

__________________

"A happy person is not a person in a certain set of circumstances, but rather a person with a certain set of attitudes."
--Hugh Downs

Stories from the NICU Blog

Here are the screen shots for the above tutorial. I couldn't attach them (they still were in the old thread ) when I posted the info.

dsmith - the files ContactList.jpg and FluidProjectWindow.jpg still seem to exist in the old thread. I will attach them here in zip form and if you could just delete the others I would appreciate it.

Attached Files

ScreenShots.zip (75.2 KB, 658 views)

__________________

"A happy person is not a person in a certain set of circumstances, but rather a person with a certain set of attitudes."
--Hugh Downs

Stories from the NICU Blog

thanks cable guy, that was really useful.

Hello and Welcome to GIDForums™ rbp, home of the unknowing guru.


Your very welcome. I got your note and am a little intrigued. I have recently had the chance to pick FLTK back up and it could be time to put forth another tutorial.

Do you have something in mind that,

• Is hard to understand using the docs.
• You haven't found intuitive.
• Can't be found at fltk.org
• Isn't covered by the test apps
• Something you are intererested in.
• any of the above or something else.

Suggest away, perhaps there is something useful and fun in the future...

Mark

__________________

"A happy person is not a person in a certain set of circumstances, but rather a person with a certain set of attitudes."
--Hugh Downs

Stories from the NICU Blog

Hi!!

I am interested in learning FLUID. Where can I download it from?

thanks!

Pam