GIDForums  

Go Back   GIDForums > Computer Programming Forums > FLTK Forum
User Name
Password
Register FAQ Members List Calendar Search Today's Posts Mark Forums Read
 
 
Thread Tools Search this Thread Rating: Thread Rating: 2 votes, 5.00 average.
  #1  
Old 02-Nov-2004, 07:29
cable_guy_67's Avatar
cable_guy_67 cable_guy_67 is offline
Senior Member
 
Join Date: Oct 2004
Location: Florina, Greece
Posts: 1,112
cable_guy_67 is a jewel in the roughcable_guy_67 is a jewel in the roughcable_guy_67 is a jewel in the roughcable_guy_67 is a jewel in the rough

FLTK && fluid In Motion


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.

Work list for Today
  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.
Code:
// //////////////////////////////////////// // Name : ______________________ // // Phone : ______________________ // // Company : ______________________ // // Address : ______________________ // // State : ______________________ // // Zip Code : ______________________ // // Contact Type : // // ---------------------- // // | 0 Personal | // // | 0 Professional | // // | 0 Other | // // ---------------------- // // _______ _______ _______ // // ( clear ) ( save ) ( exit ) // // ------- ------- ------- // ////////////////////////////////////////

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.
CPP / C++ / C Code:
bt_callback(Fl_Widget*, void*userdata)
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:
CPP / C++ / C Code:
if (userdata=="clear"){
    in_name->value("");
    in_phone->value("");
    in_company->value("");
    in_address->value("");
    in_state->value("");
    in_zipcode->value("");
    radio_personal->value(true);
    radio_professional->value(false);
    radio_other->value(false);
}
else if (userdata=="save"){
    // This is where we will save our information
    // to fltk_data.txt
}
if (userdata=="exit") exit(0);

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:
CPP / C++ / C Code:
#include <iostream>
Move it to the top of the list. Create another one and enter the code :
CPP / C++ / C Code:
using namespace std;
Slide that below the include. Compile with this, or whatever you have been using.
Code:
$ g++ Contact_List.cpp `fltk-config --ldflags --cxxflags` -o ../Contact_List

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
  #2  
Old 02-Nov-2004, 14:34
cable_guy_67's Avatar
cable_guy_67 cable_guy_67 is offline
Senior Member
 
Join Date: Oct 2004
Location: Florina, Greece
Posts: 1,112
cable_guy_67 is a jewel in the roughcable_guy_67 is a jewel in the roughcable_guy_67 is a jewel in the roughcable_guy_67 is a jewel in the rough
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
File Type: zip ScreenShots.zip (75.2 KB, 682 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
  #3  
Old 25-Nov-2005, 20:27
rbp rbp is offline
Junior Member
 
Join Date: Nov 2005
Location: Melbourne, Australia
Posts: 67
rbp will become famous soon enough

Re: FLTK && fluid In Motion


thanks cable guy, that was really useful.
  #4  
Old 26-Nov-2005, 13:01
cable_guy_67's Avatar
cable_guy_67 cable_guy_67 is offline
Senior Member
 
Join Date: Oct 2004
Location: Florina, Greece
Posts: 1,112
cable_guy_67 is a jewel in the roughcable_guy_67 is a jewel in the roughcable_guy_67 is a jewel in the roughcable_guy_67 is a jewel in the rough

Re: FLTK && fluid In Motion


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

Quote:
Originally Posted by rbp
thanks cable guy, that was really useful.

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
  #5  
Old 20-Mar-2008, 03:52
Pam Pam is offline
New Member
 
Join Date: Mar 2008
Posts: 9
Pam is on a distinguished road

Re: FLTK && fluid In Motion


Hi!!

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

thanks!

Pam
 


Thread Tools Search this Thread
Search this Thread:

Advanced Search
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
[Tutorial] GUI programming with FLTK dsmith FLTK Forum 10 03-Oct-2005 15:41
FLTK with GLUT usmsci FLTK Forum 4 26-Nov-2004 16:21
Welcome to the FLTK Forums dsmith FLTK Forum 0 08-Sep-2004 06:58

Network Sites: GIDNetwork · GIDApp · GIDBlog · Learning Journal by J de Silva, The

All times are GMT -6. The time now is 18:17.


vBulletin, Copyright © 2000 - 2014, Jelsoft Enterprises Ltd.