FLTK and You

1
FLTK and You

• Friends for Life

2
Why GUI Programming?

• In 1983, Matthew Broderick nearly destroyed the
  world when he launched a Global Thermonuclear War
• Thanks to the help of Ally Sheedy and the WOPR's
  realization that the only way to win was not to
  play, war was averted

3
Why GUI Programming?

• Could something else have been done to prevent
  this?
• I believe that if Broderick had been given a GUI
  that was not a simple command line, a crisis
  could have been averted
• Since then, GUIs have been improved greatly, and
  Matthew Broderick has not threatened the world
  (QED!)

4
Why GUI Programming?

• In all seriousness, virtually every meaningful
  program you use today (or will develop when you
  get a job) has a Graphical User Interface (GUI)
• Despite this, most programming classes do not
  deal with GUI programming
• This presentation will hopefully help you get
  started in GUI programming, which could be
  applied to your final project to give it a
  professional look

5
Your Options

• When developing GUIs, you should consider two
  things (among others)
• Your target platform
• Your target audience
• Some GUI development kits are platform specific
  (MFC), and some are platform independent (Java)

6
A Brief Aside

• If your employer ever approaches you in the
  summer of 2002 and says that he needs help
  programming a GUI using MFC, your best bet is to
  tender your resignation
• MFC is a terrible, terrible beast to program, but
  oddly enough, it is probably the GUI that you
  most interact with (if you are a windows user)

7
Your Options

• Some of you may have experience programming with
  the Java Swing classes
• Java is platform independent, which is good, but
  ...

8
Your Options

• Many programs were written pre-Java, and many
  programs are still written in C
• Programs like this would interact much more
  easily with a GUI that was written in C
• So what choices do you have now?

9
Your Options

• Myth Only GUIs written in Java are platform
  independent.
• zOMG FALSE!
• There are plenty of GUI packages you can use that
  are written in C AND work on many platforms
• FLTK, TCL/TK, QT are just a few examples

10
FLTK Strictly for my GUIs

• FLTK is the Fast, Light Toolkit
• It is incredibly lightweight due to the fact that
  it only implements GUI functionality
• Other widget toolkits implement non-GUI related
  features, which makes them a little bloated
• Due to its light weight, FLTK is often linked
  statically without significantly increasing the
  size of the executable

11
FLTK Strictly for my GUIs

• I know this isn't the most exciting, but the best
  way to get a taste of FLTK is to look at a sample
  program, so here goes

12
FLTK An intimate portrait

• This program will build a window and not much
  else
• Very small!

• include ltFL/Fl.hgt
• include ltFL/fl_window.hgt
• int main()
• Fl_Window win(720,486)
• win.show()
• Return Flrun()

13
FLTK An intimate portrait

• Standard includes

• include ltFL/Fl.hgt
• include ltFL/fl_window.hgt
• int main()
• Fl_Window win(720,486)
• win.show()
• Return Flrun()

14
FLTK An intimate portrait

• Creates the window using the parameter as width
  and height

• include ltFL/Fl.hgt
• include ltFL/fl_window.hgt
• int main()
• Fl_Window win(720,486)
• win.show()
• Return Flrun()

15
FLTK An intimate portrait

• Displays your window

• include ltFL/Fl.hgt
• include ltFL/fl_window.hgt
• int main()
• Fl_Window win(720,486)
• win.show()
• Return Flrun()

16
FLTK An intimate portrait

• Begins the execution loop
• The GUI will run until the user stops it, at
  which point this program will end

• include ltFL/Fl.hgt
• include ltFL/fl_window.hgt
• int main()
• Fl_Window win(720,486)
• win.show()
• Return Flrun()

17
FLTK example
18
Less Talk More Rokk

• FLUID is a GUI visual editor that comes with FLTK
• It can be used to write an entire application, or
  just get you started
• We will now attempt a demo of FLUID to show you
  how easy it is to slap together a decent GUI

19
Fin

• Hopefully this can inspire some of you to write a
  GUI for your final project
• It really can make an average project into a
  pretty cool one

20
References

• http//fltk.org
• FLTK homepage
• Contains the source code you will need to run
  FLTK programs
• http//seriss.com/people/erco/fltk-videos/
• Has some really cool videos discussing how to use
  FLTK
• I used the Visual Studio one to configure my
  Visual Studio setup

21
References

• http//www.gidforums.com/t-3979.html
• Has a good tutorial on using FLUID

22
My FLUID Demo

• Start FLUID, which should be in the FLUID
  directory of your FLTK extraction
• Select (New-gtCode-gtFunction/Method)
• When creating main, leave both fields blank.
  main will be created by default
• Select (New-gtGroup-gtWindow)
• Double click on the Window you just created
• In the property dialog box, click on the GUI tab
• In the label box, give your Window a label. It
  should show up immediately on your window
• Now click on the C tab, and in the name box
  give your Window a Cy name (i.e. myWindow)

23
My FLUID Demo

• Press (New-gtValuators-gtDial)
• This gives you a new Dial
• Label and Name your dial like you did with the
  Window
• Under the C tab, in the callback section give
  the name of the 'callback' function
• Note Under the callback box there is a field
  that says, 'When'. This tells the program when
  to call the callback. For different widgets you
  can set this to different values
• The callback function will be called whenever the
  dial is changed
• You may also want to change the size of the dial,
  which you can do in the GUI tab

24
My FLUID Demo

• Press (New-gtText-gtOutput)
• This will add a Text_Output field, which can be
  used to display the results of something
• Name it and label it as before

25
My FLUID Demo

• At this point, you can save your project and
  'write code'
• Write code will turn your GUI into actual C
  code
• We will do this now so that we can edit our
  callback function
• Right now, we do not know the parameters of the
  callback function, but we can easily find them in
  our code

26
My FLUID Demo

• The callback function's parameters should be
  (Fl_Dial, void)
• Let's go back to FLUID and edit the callback
  function

27
My FLUID Demo

• Press (New-gtCode-gtFunction/Method)
• In the first field, give the name of the callback
  function and the arguments
• Note the name you put here should be the same
  name that you put in the callback section of the
  Dial
• Set the return type to void

28
My FLUID Demo

• Now it's time to add code to that function
• With your new function selected, press
  (New-gtCode-gtCode)
• You can now type in the code you want to use for
  the callback
• For our callback, whenever the dial is moved,
  we're going to take in the dial value and put it
  in the textbox

29
My FLUID Demo

• The code to do that looks like this
• char text (char) malloc(sizeof(text)100)
• double temp myDial-gtvalue()
• sprintf(text,f,temp)
• textBox-gtvalue(text)

30
My FLUID Demo

• Couple of notes on that code
• something-gtvalue will usually return the value of
  the widget. In our case, myDial-gtvalue() returns
  the current value of the dial, while
  textBox-gtvalue(text) will set the text of
  textBox to 'text'
• Each widget has specific member functions that
  operate on it
• You can find all of them online

31
My FLUID Demo

• We're almost done
• We now need to add in the includes that we'll
  need for malloc and sprintf
• Press (New-gtCode-gtDeclaration)
• Type in include ltstdlib.hgt
• Repeat for ltstdio.hgt
• On the main menu, you'll notice that your
  includes appear at the bottom
• Select one, and press F2 to move it up above main
• Repeat for the other

32
My FLUID Demo

• Now write your code and compile it in your usual
  way
• You should have a textbox that updates with the
  value of the dial
• Rejoice