Widget Gallery Example

This tutorial will create the following mockup.

Click on the image to enlarge it.

In order to complete this tutorial, you will need to download, then upload, the following images (pictured just below, shrunk in size) into your Maqetta workspace.


masthead_blue_gradient.png	wg_swoosh.jpg	powered_by_dojo.png	wg_hero_dojo.gif

To download, then upload, the above images, perform the following steps:

For each image above, put the mouse over the given image, and bring up the browser's context menu using right-mouse-button (or equivalent). Issue a "Save image as..." command. Save each of the above images into a folder on your local file system.
In Maqetta, go to the Files menu, and put the mouse into the content area of the Files palette and click-select one of the files in the root area of your workspace (e.g., Sample1.html).
With the mouse over one of the files listed (e.g., Sample1.html), bring up the browser's context menu using right-mouse-button (or equivalent). Issue an "Upload files..." command. Within the dialog that appears, click on the Select Files... button, and then navigate to the folder where you saved the images, choose the four image files, then click on the Upload button. After this operation, you should see the four image files listed in the Files palette.

Outer BorderContainer:

Drag a BorderContainer onto a blank canvas.
In the BorderContainer Dialog select: Headline, Top, Bottom, Center.
Top pane:
- Height: 27px
- Overflow: hidden
- background-image url: img/masthead_blue_gradient.png
- repeat: repeat-x
- font-family: Arial
- color: #ffffff;
- Splitter: off
Bottom pane:
- Height: 30px
- Overflow: hidden
- border-top: 1px solid gray
- Splitter: off
BorderContainer:
- Gutters: off

Bottom Pane Content:

Drag image file: "img/powered_by_dojo.png" onto the pane.
- margin-top: 8px
- margin-left: 5px

Nested BorderContainer

Drag a BorderContainer onto the center pane of Outer BorderContainer
In the BorderContainer Dialog select: Headline, Top, Left, Center.
Top pane:
- Splitter: off
- Height: 55px
- Overflow: hidden
- border-bottom: 1px solid gray
- background-image url: img/wg_swoosh.jpg
- repeat: no-repeat
- background-position: right top
Left pane:
- Width: 322px
- border-right: 1px solid gray
- font-family: Arial
Center pane:
- font-family: Arial
BorderContainer:
- Gutters: off

Left Pane Content:

Create the left pane as shown to the right:

Create the Search div:
1. Drag a div onto the pane.
2. Set the following properties on the div:
  - height: 50px
  - width: 261px
  - padding-bottom: 1em
  - padding-left: 1em
3. Add the following content to the div:
  1. Add a TextBox.
  2. Add a Button with the text "Search".
  3. Set the following property on the Button:
    - margin-left: 2px
  4. Drag a nested div inside the outer div
  5. Double-click on the div to bring up the data entry popup.
  6. Enter "Enter a one-word search term".
  7. Set the following properties on the div:
    - height: 13px
    - width: 164px
    - font: Arial
    - font-size: 0.8em

Create the Tree widget:

Drag a Tree onto the left pane.

Enter the following data for the Tree:

Charts
>3D Clustered Bar
>3D Stacked Columns
>3D Bar Chart
>3D Clustered Column Bar Chart
>3D Columns Bar Chart
>3D Pie Chart
>Baguette Chart
Gauges
>Bar Percent Gauge
Grids
>Data Grid
>Data Grid Filter

Set the following properties on the Tree:
- height: 369px
- width: 262px
- padding-top: 2em
- padding-left: 1em

Center Pane Content:

Drag a div onto the center pane.
Set the following property on the div:
- margin-bottom: 1em
Add the following content to the div:
1. Add a Button with the label "Thumbnails".
2. Set the following properties on the Button:
  - float: right
  - margin-right: 5px
  - margin-left: 5px
3. Add a Button with the label "List".
4. Set the following properties on the Button:
  - float: right
5. Add a Button with the label "Add a widget..."
Drag a TabContainer onto the center pane.
Set the Tab Titles to: "Charts, Guages, Grids"
Set the following properties on the TabContainer:
- width: 90%
- height: 90%
Create the "Charts" tab Content:
1. Drag an HTML table onto the Charts tab.
2. Drag the bottom right corner of the table to make it larger.
3. Click on one of the table cells to select it.
4. Right-click or Cmd-click on the table cell to bring up the Context menu.
5. Select "Insert row after" to create a new row.
6. Create two more rows so there are 5 rows in all.
7. Select "Insert column after" to create a new column.
8. Use the Outline palette to select the <table> widget.
9. Set the width and height on the table:
  - width: 505px
  - height: 243px
10. Set the properties on the top row as follows:
  - Click on row 1, column 1
  - Click on row 1, column 2
  - Click on row 1, column 3

Previous / Next