Tutorial 11 - Desktop Apps and States (1)

When going through Maqetta's tutorials, it is suggested that you have two side-by-side browser windows open, one showing the tutorial, and the other where you run the application and perform the steps listed in the tutorial.

In this exercise we will create a mock-up of a Task Manager, with three "states" as shown below:

A completed version of the Task Manager mock-up is provided in Sample1.html, located in the Files palette. Preview the mock-up as follows:

1. ⇒ Open Sample1.html from the Files palette (found in the "samples" folder).
2. ⇒ In the page editor toolbar, click the Preview in Browser icon. This will launch a new browser window that contains the HTML page you just created.
3. ⇒ Click on the button. The Add Task dialog should appear.
4. ⇒ Click on the button. The task list should appear.
5. ⇒ Close the preview window to return to the Maqetta page editor.
6. ⇒ Close Sample1.html

In this exercise we will mock up the content for each of the three "states" on the Task Manager. In the next exercise we will add interactivity by defining the states, and then wiring the states to onclick events.

Create a Tab Container

1. ⇒ Issue a Create > Desktop Application... on the Maqetta menubar to bring up the Create dialog, then click on the Create button.
2. ⇒ In the Palette, open Containers and drag a Tab Container onto the canvas.
3. ⇒ The Tab Container's data entry popup will pop up with the default tab titles "Tab 1, Tab 2".

Click on the image to enlarge it.


4. ⇒ Change the text in the data entry popup to:
   

   Click on the image to enlarge it.
   
   then click on the OK button, hit Enter or click outside the edit box to close the popup.
   
   
5. ⇒ You should now see a Tab Container with three tabs:

Click on the image to enlarge it.


6. ⇒ Open the Layout palette, found on the right side of the application.
   • Set width: 300px
   • Set height: 250px
   
   
7. ⇒ Click on the Save icon on the page editor toolbar to save your changes.

Create the New and Delete buttons

1. ⇒ In the Widgets palette, close Containers and open HTML section and Common sub-section.
2. ⇒ Drag a <div> from the Widgets palette onto the Tab Container.
3. ⇒ Close the HTML section and open the Controls section and Buttons sub-section.
4. ⇒ Drag a Button from the Widgets palette onto the <div> you just created.
5. ⇒ Enter "New" in the data entry popup.


6. ⇒ Drag another Button from the Widget palette into the <div>, next to the New button.
7. ⇒ Enter "Del" in the data entry popup.
8. ⇒ Click on the white space to the side of the 2 Buttons. This will select the <div> that contains the Buttons.
   
9. ⇒ Open the Fonts/Text palette.
10. ⇒ Set text-align: right. This will shift the Buttons to the right side of the <div>.
    

    Click on the image to enlarge it.
    
    
11. ⇒ Click on the Save button on the toolbar to save your changes.

Create the Sort-by row

1. ⇒ Drag another <div> (in HTML section and Common sub-section) onto the Tab Container and drop it into the area below the buttons.
2. ⇒ With the <div> still selected:
   1. Open the Padding palette. In the Padding palette, click on the "show t/r/b/l:" check box.
   2. Set the padding to padding-top: 10px and padding-bottom: 10px. (Hit Enter or click outside of each input field to apply the changes.)
      

      Click on the image to enlarge it.
      
      
3. ⇒ Drag a <label> (in HTML section and Common sub-section) onto the <div> you just created.
4. ⇒ Enter "Sort-by:" in the data entry popup.
5. ⇒ Drag a ComboBox (in Controls section and TextBox sub-section) onto the <div>, to the right of Sort-by:
6. ⇒ In the data entry popup, enter values below (hit Enter to create a new line):
   

   Click on the image to enlarge it.
   
   then click on the OK button or click outside the edit box to close the popup.
   Note: The "+" indicates the default selection.
   
   
7. ⇒ With the ComboBox still selected:
   1. Place your mouse over the resize knob on the right side of the ComboBox and drag the knob to the left, making the ComboBox smaller.
   2. Open the Margins palette.
   3. Click on the "show t/r/b/l:" check box under (margin).
   4. Set the margin to margin-left: 5px.

Create the Task List

1. ⇒ Drag a Multi Select (found in Controls section, Select sub-section) onto the Tab Container and drop it in the empty space below the last <div>.
   
2. ⇒ In the widget's data entry popup, change the values to:

   

   
   then click on the OK button or click outside the edit box to close the popup.
   Note: After you close the data entry popup, you can re-open it by double-clicking on the widget.
   
   
3. ⇒ Click on the Save button on the toolbar to save your changes.
4. ⇒ Click the Preview in Browser icon (in the toolbar) to see your how your page looks so far. This will launch a new browser window that contains the HTML page you just created. Your Tab Container widget should look like this:

   

5. ⇒ Close the preview window to return to Maqetta.

Create the New Task dialog's frame

1. ⇒ Drag a Content Pane (in Containers section and Dojo sub-section) onto the canvas below the Tab Container.
2. ⇒ Keep the Content Pane selected for the remainder of this section.
3. ⇒ Open the Border palette:
   1. Set show: props
   2. Set border-width: 1px
   3. Set border-style: solid
   4. Set border-color: blue

      Maqetta offers multiple options for specifying a color. Color properties offer a drop-down menu that allows easy selection of common colors such as black, white, red, green and blue. You can bring up a color picker dialog either by selecting "Choose color..." from the menu or clicking on the color swatch rectangle to the right of the property value. You can also type in a CSS color specification into the type-in area, such as a color name (e.g., "purple") or a CSS color hex value (e.g., "#FE8834").

4. ⇒ On the canvas, resize the Content Pane to roughly 350px wide by 75px tall (using the bottom-right-corner resize knob).
5. ⇒ Note how the width and height values change in the Layout palette after you resize.

   

Add content to the Add Task dialog

1. ⇒ Drag a <div> (in HTML section and Common sub-section) into the ContentPane you just created.
2. ⇒ Double-click on the div to bring up the data entry popup.
3. ⇒ In the data entry popup enter "Add new task".
4. ⇒ Open the Fonts/Text palette:
   1. Set font-weight: bold.
   2. Set text-align: center.

   
5. ⇒ Open the Padding palette:
   1. Click the "show t/r/b/l:" check box under (padding).
   2. Set padding-top: 6px.
   3. Set padding-bottom: 6px

   
6. ⇒ Drag another <div> (in HTML section and Common sub-section) onto the Content Pane, below the first <div>.
7. ⇒ With the new <div> still selected:
   1. Drag a <label> (in HTML section and Common sub-section) onto the selected <div>.
   2. In the data entry popup enter "Task name:".
   3. Drag a TextBox (in Controls section and TextBox sub-section) onto the <div>, to the right of "Task name:".
   4. Drag a Button (in Controls section and Button sub-section) onto the <div>, to the right of the TextBox.
   5. In the data entry popup enter "Add".
8. ⇒ Click on the Save button on the toolbar to save your changes.
9. ⇒ Select the Content Pane either by clicking on its border or clicking on white space within the Content Pane that has no widgets covering that area.
10. ⇒ Open the Layout palette and set position: absolute.
11. ⇒ Drag the Content Pane over the Tab Container, placing the top of the ContentPane just below the New button:
    1. Place the mouse on the top border of the Content Pane, between the resize knobs.
    2. Drag the Content Pane up using the mouse.
    
    
12. ⇒ Open the Background palette
13. ⇒ Set the background-color to white choosing white from from the property's drop-down menu.





14. ⇒ Click on the Save button on the toolbar to save your changes.

Previous / Next