Lesson: Page Turning Lesson

• In the New Project dialog box, type Pageturn in the Name field, set the Page width to 200, the Page height to 170, then click on the OK button.

The Background Page

• Select the Picture Push Button tool from the Objects Palette.

  

Note that if you position the cursor over a button and wait a moment, Jamba displays a tool tip to tell you the name of the button.

• Draw a Picture Push Button (called BgPicturePushButton1) in the lower left corner of the page.
  • Right click on the object and select Properties from the pop-up menu.

  The Object Editor displays the properties for BgPicturePushButton1. First, you'll rename the object so that it has a simpler name.

  • Set the Name property to BackwardButton. Hint: Type the new name and press Return.

  Note that in the Object List, Jamba always places the characters "Bg" in front of the object name to identify it as an object on a background page.

  You're almost ready to set up the rest of the object, but before you continue, you need to learn a little about how Picture Push Buttons work. At runtime, the object will contain the image of a left-pointing arrow. When the button is enabled, it will appear as follows:

  

  Note however, that the graphic file you load into the object actually contains three distinct images, each showing the button in its three possible states: Up, Down and Disabled. In its entirety, the actual graphic file appears as follows:

  

  First, you'll set the ButtonStyle property to let Jamba know how many states are represented by the images in the file. This property can be set to Up, UpDown, or UpDownDisabled. Jamba divides the graphic depending on the state you choose, so all images must be of equal size and in one file.

  • Set BgBackwardButton's ButtonStyle property to UpDownDisabled.

  Now you can load the file into the object.

  • Set BgBackwardButton's Filename property to Rnd_bk.gif. Hint: You can find this file in the Jamba\lessons\Graphics directory.

  To complete the object, you need to set its Enabled property to False. Remember, when the application first runs, you want the user to be able to advance, but not go backwards. (The Backward button will be enabled only when the user is viewing the second page.)

  • Set BgBackwardButton's Enabled property to False.

  The button appears in the Disabled state.

  Now you are ready to create the second Picture Push Button that lets the user advance to the next page. To save time, you'll make a copy of BgBackwardButton and make minor changes to it.

  • Right click on BgBackwardButton and choose Copy from the popup menu.

  • Right click on the page and choose Paste from the popup menu.

  A new Picture Push Button, once again called BgPicturePushButton1, is pasted directly over the original button.

  • Drag the new button to the bottom right corner of the page.

  • Set the Name property of BgPicturePushButton1 to ForwardButton.

  The file that you will load into BgForwardButton appears as follows:

  

  Note that the object's ButtonStyle property is already set. Now you'll load the new file.

  • Set the BgForwardButton's Filename property to Rnd_fwd.gif. Hint: You can find this file in the Jamba\lessons\Graphics directory.

  The last task is to set the object's Enabled property to True. Because when the page first displays, this Forward button should be available to the user.

  • Set the BgPicturePushButton2 object's Enabled property to True.

  The Background page is complete, except for its To Do Lists. You'll come back to this page later on, after you finish setting up the other two pages.

  • Click on the X in the top right corner of the Background1 page window.

  The Content Pages

  The content pages are the standard pages that the application displays when the user navigates backward and forward. You'll use the StartPage to create the first content page, but you'll rename it Page1.

  • Click on StartPage in the Project window.

  The Object Editor shows the properties for the page.

  

  • Set the Name property to Page1.

  • Double-click on Page1 in the Project Window.

  The page opens in the Page Layout Editor. The first task you'll do is to associate the Background1 page with Page1. This way, when Page1 displays at runtime, Background1 will also display. To do associate a background with a standard page, you use the BackgroundPage property.

  • Click anywhere in the Page Layout Editor.

  The Object Editor appears as follows:

  

  • Set the BackgroundPage property to Background1. Hint: You can select Background1 from the drop-down list in the Value field.

  Since the View Background button is automatically selected when you assign a background to a page, the objects on the Background1 page become visible. Note however, that the objects do not appear in the Object List for the current page. To set properties or the To Do List for background page objects, the background page must be open in the Page Layout Editor.

  You are ready to set up Page1. For simplicity, this page will contain just one Graphic object.

  • Draw a Graphic object called Graphic1.

  • Click in the Value field for the Filename property.

  • Use the Open dialog box to search for Jamba\lessons\Graphics\flowers.gif.

  The object automatically resizes to show the whole graphic. This is because the DrawStyle property is set to SizeByGraphic.

  • Position the object so that it is centered on the page.

  Now you are ready to set up the second content page. Because it too will just have one Graphic object, you'll make a copy of Page1 and call it Page2. You need to close Page1 in order to copy it.

  • Close Page1 by clicking on the X in the top right corner of the window.

  • Make sure Page1 is selected in the Project window, then right-click and choose Copy from the pop-up menu.

  • Choose Paste from the pop-up menu.

  The copy of Page1 is called Page11 and is added to the page list in the Project window. (Each time you copy an existing page, Jamba appends a number to the name (1, 2, 3, and so on). You'll rename the new page to call it Page2.

  • Set the new page's Name property to Page2.

  • In the Project window, double-click on Page2.

  Page2 opens in the Page Layout Editor. Because Page2 is a copy of Page1, it too is associated with Background1. It also contains a single Graphic object. Just to distinguish Page2 from Page1, you'll load a different graphic into the Graphic object.

  • Select the Graphic object and click in the Value field for the Filename property.

  • Use the Open dialog box to search for Jamba\lessons\Graphics\mountain.gif.

  Again the object automatically resizes to fit the graphic. Page2 is complete.

  • Close Page2 by clicking on the X in the top right corner of the window.

  The Navigation Buttons

  The last task to perform is to set up the buttons on the Background1 page so that the user can move back and forth between the two pages. Here's how it should work.

  When the application runs, Page1 appears with the buttons from Background1. The BgBackwardButton is disabled (because there is no previous page) and the BgForwardButton is enabled. When the user clicks on the BgForwardButton, Page2 appears in place of Page1. BgForwardButton is disabled and the BgBackwardButton becomes enabled.

  • In the Project window, double-click on Background1.

  Background1 opens in the Page Layout Editor. Remember, the left-pointing arrow is BgBackwardButton and the right-pointing arrow is BgForwardButton. You've already set the objects' Enabled property so that initially BgBackwardButton is disabled and BgForwardButton is enabled.

  You'll begin by setting up the To Do List for BgForwardButton. When the user clicks, the object should do the following:

  • Enable BgBackwardButton.
  • Go to Page2.
  • Disable BgForwardButton.

  Now you'll open the To Do List for BgForwardButton.

  • Select BgForwardButton (the right-pointing arrow) and click on the To Do List tab.

  Because you want the actions to occur when the user clicks on the object, you'll leave the event set to Click.

  • Leave the event list set to Click.

  The first To Do item will enable BgBackwardButton.

  • Click on the New To Do Item button.

    

  A drop-down list opens in the first line of the Object field.

  

  • Select BgBackwardButton from the drop-down list.

  The What To Do list opens automatically.

  

  • Select Enabled from the What To Do list.

  Radio buttons appear in the Value field allowing you to select between True and False.

  

  • Click on True.

  The first To Do item is complete. Next you'll add an item that instructs the application to display Page2 if this object is clicked.

  • Click on the New To Do Item button.

    

  A drop-down list opens in the first line of the Object field. This time you want to affect the entire application (by displaying another page), so you'll select the Application item from the list.

  • Select Application from the drop-down list.

  The What To Do list opens automatically.

  • Select GoToPage() from the What To Do list.

  The Value field displays a drop-down list of all the standard pages that can be displayed.

  • In the Value field, select Page2 from the drop-down list.

  The second To Do item is complete. Next you'll add an item that instructs the disable the BgForwardButton when the user clicks on it.

  • Click on the New To Do Item button.

  • Select BgForwardButton from the drop-down list.

  • Select Enabled from the What To Do list.

  Radio buttons appear in the Value field allowing you to select between True and False.

  • Click on False.

  The final To Do item is complete. Next you'll use the same basic procedure to set up BgBackwardButton. When the user clicks, the BgBackwardButton should do the following:

  • Enable BgForwardButton.
  • Go to Page1.
  • Disable BgBackwardButton.

  Now you'll open the To Do List for BgBackwardButton.

  • Select BgBackwardButton (the left-pointing arrow).

  Because you want the actions to occur when the user clicks on the object, you'll leave the event set to Click.

  • Leave the event list set to Click.

  The first To Do item will enable BgForwardButton.

  • Click on the New To Do Item button.

    

  • Select BgForwardButton from the drop-down list.

  The What To Do list opens automatically.

  • Select Enabled from the What To Do list.

  Radio buttons appear in the Value field allowing you to select between True and False.

  • Click on True.

  The first To Do item is complete. Next you'll add an item that instructs the application to display Page1 if this object is clicked.

  • Click on the New To Do Item button.

  A drop-down list opens in the first line of the Object field. This time you want to affect the entire application (by displaying another page), so you'll select the Application item from the list.

  • Select Application from the drop-down list.

  The What To Do list opens automatically.

  • Select GoToPage() from the What To Do list.

  The Value field displays a drop-down list of all the standard pages that can be displayed.

  • In the Value field, select Page1 from the drop-down list.

  The second To Do item is complete. Next you'll add an item that instructs the disable the BgBackwardButton when the user clicks on it.

  • Click on the New To Do Item button.

  • Select BgBackwardButton from the drop-down list.

  • Select Enabled from the What To Do list.

  Radio buttons appear in the Value field allowing you to select between True and False.

  • Click on False.

  The final To Do item is complete. The application is complete.

  • Choose Save All and run the application.
    • To see an example of what the completed applet should look like, click on the start button.

      ---

      ---

    Back to Lesson: Using a Template to Create a Page

    Up to Table of Contents