Photon Tutorial: Radio Buttons

This is not the most exciting demonstration, but it does at least illustrate how to create radio buttons in about as concise a way as is possible. Radio buttons are buttons that are mutually exclusive in that setting one resets any others that are associated with the button just set. Radio buttons are not a standalone widget in Photon; instead, you have to use a toggle button, set it to work 'exclusively', then group together the buttons that are to work in mutual exclusion.

  1. Run Photon Application Builder.
  2. Click on the File menu, and click New.
  3. PhAB presents a list of window styles to chose from, the default “Plain” is fine, so just click “Done”.
  4. Name and save this project by clicking on the File menu, then clicking “Save As...”. Enter demo_radbut in the “Name” box, then click “Save”.
  5. In the PhAB control panel, click on the “Resources” tab.
  6. Click in the name window at the top of the resources control panel (this will contain the text “base” to begin with). Enter a name for the window by typing wndBase.
  7. Click on “Window Title” in the resource list, and enter the text Radio Button Demo then click “Done”.
  8. Click on the “Widgets” control panel tab.
  9. Click on “Toggle Button”, then click on the window you just created at the position where you want the button to appear.
  10. Click on the control panel's “Resources” tab.
  11. Click on the name box in the control panel, which should currently contain “PtToggleButton” and type btnRadioSW.
  12. Click on “Toggle Text” in the resources list, type in Short Wave, and click “Done”. Below is a screenshot of how my screen appears at this stage.
  13. Click on “Indicator Type” in the resource list, select “Pt_TOGGLE_RADIO”, then click “Done”.
  14. Right-click on the radio button you just created, and click “Copy”.
  15. Right-click on the wndBase window, and click “Paste”. The mouse pointer will change and you should now click on the position where you want the next radio button to appear.
  16. With this button still selected, click in the name box in the Resources control panel, and type btnRadioMW.
  17. Click on “Toggle Text”, type Medium Wave, and click “Done”.
  18. Create a third button by right-clicking in the window again, click “Paste”, then click where you want this button to appear.
  19. With this button still selected, click in the name box in the Resources control panel, type btnRadioLW.
  20. Click on “Toggle Text”, type Long Wave, then click “Done”.
  21. To align the buttons, first move the mouse above and to the left of the buttons then click–and–drag to form a box around the buttons. Release the mouse button and a single set of resize markers will appear around the three buttons.
  22. Click on “Align” in the toolbar on the left of PhAB's window and click “Align left”.
  23. Click the “Group” button in the toolbar under PhAB's main menu; this creates a new PtGroup widget, which will automatically contain our selected radio buttons. Below is a screenshot of how my system appears at this point.
  24. Click in the name box of the Resources control panel (which should currently contain “PtGroup”, and type grpWaveband
  25. Click on “Group Flags” in the resources list, select “Pt_GROUP_EXCLUSIVE”, then click “Done”.
  26. Click “Application” in PhAB's main menu and select “Startup Info/Modules...”.
  27. In the “Global header” box (the cursor should already be in this box), type globals and click the edit icon on the right.
  28. Using the editor, enter the code shown below, then save the file and quit the editor. 
    
#ifdef DEFINE_GLOBALS
#define GLOBAL
#else
#define GLOBAL extern
#endif

#define BAND_LONGWAVE 1
#define BAND_MEDIUMWAVE 2
#define BAND_SHORTWAVE 3

GLOBAL int waveband;
  29. In the editor, open the file indHfiles, and append the string ../globals.h to the single line (which should start with MYHDR = ). This tells PhAB to ensure that our header file is included in the Makefile, so that any files that #include it are recompiled when it changes.
  30. You should now be back in the Startup Info dialog box. In the Initialisation function box, type init and click the edit icon.
  31. Using the editor, enter the code #define DEFINE_GLOBALS outside the init() function definition. Also, add the code waveband = BAND_SHORTWAVE within the init() function definition. This piece of code merely sets the default (start–up) value for the waveband variable. This value will be used later to initialise the state of the radio buttons on program start–up. Note that waveband is a global variable shared by more than one file. Therefore, we have to define it once (i.e. create its storage space, which done in the init.c file) and then in each file that uses it, we have to declare it (merely report that we may use it, in this case, we use the extern keyword). This is achieved using the DEFINE_GLOBALS coding technique.
  32. Save the file and quit the editor.
  33. Back in the Startup Info dialog box, click “Done”.
  34. Our group of radio buttons should still be selected (the resize markers are visible around them). Select the “Callbacks” tab in the control panel then click on “Realized”.
  35. In the “Function” text box, type initRadioButtons and click on the “Apply” button at the bottom edge of the dialog box.
  36. Click the create icon next to the “Function” text box. In the editor, add 
    
   switch ( waveband )
   {
      case BAND_LONGWAVE:
      PtSetResource( ABW_btnRadioLW, Pt_ARG_FLAGS, Pt_TRUE, Pt_SET);
      
      break;
      case BAND_MEDIUMWAVE:
      PtSetResource( ABW_btnRadioMW, Pt_ARG_FLAGS, Pt_TRUE, Pt_SET);
      break;
      
      case BAND_SHORTWAVE:
      PtSetResource( ABW_btnRadioSW, Pt_ARG_FLAGS, Pt_TRUE, Pt_SET);
      break;
   }
  37. Save the file and quit the editor.
  38. You should now be back in the Callback dialog box. Click the “Done” button in the bottom right hand corner of the dialog box.
  39. Click on the control panel's “Module Tree” tab. You should see a list of the main widgets in your application. “baseWindow” and “grpWaveband” should be visible, with “grpWaveband” already selected.
  40. There should be a small triangle next to “grpWaveband” that points to the right. Click this triangle and the three radio button widgets should be listed.
  41. Select “btnBandSW” then click on the control panel's tab and select “Callbacks”.
  42. From the list of events, click “Activate” and in the function text box type setBandSW. Click Apply (at the bottom edge of the dialog) and then click on the create icon.
  43. Using the editor, add the code waveband = BAND_SHORTWAVE; within the body of the function.
  44. Save the file and quit the editor.
  45. You should now be back in the Callbacks dialog box. Click “Done” in the bottom right.
  46. Press the F10 key to change to the next button in the tab order, and you should see the “btnRadioMW” become selected.
  47. Click on “Activate” in the event list and type setBandMW in the “Function” text box.
  48. Click “Apply”, then click the create button. Enter the code waveband = BAND_MEDIUMWAVE; in the editor
  49. Save the file and close the editor.
  50. Press F10 again to select “btnBandLW” and repeat the steps, using LW or LONGWAVE in the obvious places in the function name and its contents. Save the file and quit the editor.
  51. Once back in the Callbacks dialog box, click “Done”.
  52. Save your work so far, by clicking on “File” in the menu, then clicking “Save”.
  53. Click “Application” in PhAB's main menu, then select “Build & Run”.
  54. Click “Generate” and a dialog box will appear where you select which target platform you want to compile for.
  55. Click “Generate...” in the new dialog box. When the generation has been completed, click “Done”.
  56. Click “Make” to compile the code. Once this is complete, click “Done”.
  57. The program is now ready to run, so click “Run”.

Now, when you click any of the radio buttons, if it is not already set, it will become set, and the other button that was set will become unset. The use of the global variable allows the multiple files to keep track of the state that the variable (and thus the program) is in. Here's the finished product:

Home About Me
Copyright © Neil Carter

Content last updated: 2004-03-22