Using FLUID to generate our UI

Although being able to use FLTK from within Lua is great it is a pain to have to learn all those widgets and work out the coordinates and sizes ...

Wouldn't it be nice if we could use the UI designer FLTK has to create our UI's ?

The problem is that FLTK is a C++ toolkit, and as a consequence C++ is what FLUID generates.

Enter "convertFluidToMurgaLua" ... My effort at a generic FLUID C++ to Lua converter :-)

Now superseded by lua_from_fluid ...

Anyway, lets take a look at how to create UI's in FLUID for Lua.

Run the FLUID executable that you'll find in "bin", and you should see something like this :

Note : It is all too easy to "loose" the widget bin, in this case go to the "Edit / Show Widget Bin" menu or hit CTRL-B.

Anyway, the FLTK distribution contains a tutorial on how to use FLUID, but in order to use it for LUA code generation you'll be better off following these simple instructions. Lets go through it step-by-step ...

Creating the Window

1. First of all start FLUID (duh!)
2. Click the "Function" button in the "Widget Bin".
3. Just press OK in the "Function/Method Properties" dialog that appears.
4. Now click the "Window" button in the "Widget Bin".
5. Double click inside the new window that was created.
6. Type "My first window" as the "Label:" for the new window.
   You may want to re-size the created window so you can see the title).

And now it's time to ...

Put some stuff on the window :

1. Lets start by making sure we have clicked back on the window we created.
2. Click the "Return Button" button in the "Widget Bin", enter a caption of "A return button", press ENTER ...
   You may want to resize according the the screen shot :-)
3. Click the "Check Browser" button in the "Widget Bin", enter a caption of "Some Choices", press ENTER ...
   And again resize to allow room for the input field.
4. Now click the "Input" button in the "Widget Bin" and press ENTER,.
5. Place the input button between the "Check Browser" and the "Return Button" so that things look like the do in the screen shot.
6. Try double clicking on the input field, you'll see that the "Properties" dialog comes up, you can close it again by pressing ENTER.

Create the files

OK, now you can save your design and generate the code :

• Go to the "File" menu and click "Save As ..." (or press SHIFT-CTRL-S).
  (I recommend saving to the "examples" directory).
• Navigate to the correct directory and enter "MyApp.f" as the filename.

Now just go to the command line and try the following (if you saved to the "examples" directory) :

$ ../bin/Windows/murgaLua.exe ../tools/lua_from_fluid.lua MyApp.fl - > MyApp.lua

$ ../bin/Windows/murgaLua.exe MyApp.lua

The first command creates a LUA file from the FLUID GUI definition.

So after running the second line you should see something like this (depending on your design) :

The contents of "MyApp.lua" should be something like this :
(More or less as the converter has improved)

       do

               local object = fltk:Fl_Double_Window(166, 165, "My App");

               window = object;

               fltk:Fl_Return_Button(5, 130, 155, 30, "A return button");

               fltk:Fl_Check_Browser(5, 5, 155, 70, "Some choices");

               fltk:Fl_Input(5, 95, 155, 30);

       end

       window:show();

       Fl:run()

The next thing is to put some logic ... Make the UI do something.

For example we could :

1. Name the objects so that can manipulate them (as seen in previous examples).
2. Add some values to the controls.
3. Maybe add some callback logic so that we can see things happen.

After about 5 minutes things would look like this :

       do

               local object = fltk:Fl_Double_Window(166, 165, "My App");

               window = object;

               fltk:Fl_Return_Button(5, 130, 155, 30, "A return button");

               -- Step one, name the objects

               myOptions = fltk:Fl_Check_Browser(5, 5, 155, 70, "Some choices");

               myField = fltk:Fl_Input(5, 95, 155, 30);

               -- Step two, add some values to the check browser ...

               myOptions:add("Shower and shave")

               myOptions:add("Breakfast")

               myOptions:add("Watch TV")

               myOptions:add("Go to work")

               myOptions:add("Call the plumber")

               -- Step tree, put in some code to react to a value-change

               myField:callback(

                 function(myField)

                       fltk.fl_message("Changed the value to \"" .. myField:value() .. "\"")

                 end)

       end

       window:show();

       Fl:run();

This is a simple example, and hopefully took just a few minutes to complete.

Once you have the code above you should see the following when running it.

       

Now on to something more complicated ...