Tutorial 17 - Project Templates

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.

This tutorial introduces Maqetta's project templates states feature.

The project templates feature allows you to set up a standard set of initial files (HTML, CSS, JavaScript, images, etc) that you want to be available whenever you or a colleague composes new HTML pages.

The typical way that project templates are used:

• User A runs Maqetta and uses its various features (e.g., upload files, create new files) to set up his current Maqetta project to have a set of files that he or other users will want to use in other projects.
• User A then issues a "Save as project template" command to persist his current project on the Maqetta server. If the server allows sharing of project templates, then User A can choose to share his project template with other users.
• User A (or, if the project template was shared, some other user) then can create new Maqetta projects and specify that the new project should be initialized with the previously saved project template.

The tutorial below walks through the steps needed to create a project template and how to subsequently use a project template.

1. ⇒ Using the Create menu at the top of the application, issue a Create Project... command. In the Create Project dialog, enter "tutorialproject1" as the name of the new project and leave all of the checkboxes unchecked. Then, click the Create button to create a new default project named "tutorialproject1".
   
   After creating or switching projects, Maqetta will refresh the browser page.
2. ⇒ Open the Files palette. (If it's not open, click on the "Files" button) on the left side of the application to open the palette.) The project name at the top of the Files palette should be "tutorialproject1".
   
3. ⇒ Click on the "New Folder" icon at the bottom left of the Files palette toolbar. In the New Folder dialog that appears, enter the name "standard_pages", then click Create. You should now see folder "standard_pages" in the Files palette.
   
4. ⇒ If "standard_pages" is not selected already, click on "standard_pages" in the Files palette to select it. Then using the Create menu at the top of the application, issue a Create->Desktop Application... command. When the "Create Desktop Application" dialog comes up, enter "standard_page_1.html" as the file name and click "Create".
5. ⇒ In the Palette, go into the Containers section and then the Dojo sub-section. Drag/drop a BorderContainer widget onto the page canvas. In the dialog that appears, set the following options:
   • headline
   • top and left checked
   • bottom and right unchecked
   The dialog should look like this:
   
   Click OK and then your canvas should look like this:
   
6. ⇒ Click on the inside of the topmost section of the BorderContainer to select the top ContentPane. Open up the Padding palette (by clicking on its tab name) and verify that the correct widget is selected by verifying that the text at the top of the Layout palette says "for: dijit/layout/ContentPane [region=top]". Enter the value "0px" for the "padding" property and hit the Enter or Return key to commit that value.
7. ⇒ Click on the inside of the leftmost section of the BorderContainer to select the left ContentPane. Open up the Layout palette (by clicking on its tab name) and verify that the correct widget is selected by verifying that the text at the top of the Layout palette says "for: dijit/layout/ContentPane [region=left]". In the type-in box for "width", enter "150px" and hit the Enter or Return key to commit that value.
8. ⇒ Go to the Files palette and click on the "+" icon next to "samples" to open up the "samples" folder.
9. ⇒ Put the mouse over "SampleBanner.jpg", mouse down, and then drag all the way to the top of the canvas, and drop into the top section of the BorderContainer.
10. ⇒ With SampleBanner.jpg still selected, go to the Layout palette. Using the dropdown menu for the "width" and "height" properties, set both width and height to 100%. Your canvas should look like this:
    
11. ⇒ In the Palette, go into the Other section. Drag/drop a Tree widget onto the page canvas and drop into the left section of the BorderContainer. In the dialog that appears, click OK to accept the default set of tree nodes. Your canvas should look like this
    
12. ⇒ In the Palette, go into the Controls section and then the Toolbars, ButtonBars sub-section. Drag/drop a Toolbar widget into the BorderContainer's larger "center" region. After dropping the Toolbar widget onto the canvas, in the dialog that appears, set the following options:

    		New, Edit, View, Help
    	

    Then click OK to create a Toolbar with four buttons.
13. ⇒ Click-select the "Help" button on the canvas. Go to the Layout palette and use the dropdown menu next to the "float" property to choose the value "right" for the "float" property. Your canvas should look like this:
    
14. ⇒ Click on the "Save" icon found on the page editor's toolbar to save your current file. In the top/left of the application, just above the page editor toolbar, find the editor tab for "standard_page_1.html". Click on the close icon to close the editor for "standard_page_1.html".

1. ⇒ On the toolbar for the Files palette, press and hold on the "Project menu" icon" to show the Project menu, and choose the command "Save as project template...". The "Save as project template" dialog will appear. Enter the name of "tutorialtemplate" as the name of the template and leave any other options with their default values.
   
   Click Save to save your current project as a reusable project template. After clicking Save, you should see an alert confirming that the project template was saved.

1. ⇒ First off, we will create a default new project. Issue a Create->Project command. Enter the name "tutorialproject2" and leave all checkboxes unchecked.
   
   Click on the Create button to create a new project with default content. After the Maqetta browser page refreshes, the Files palette should show the following set of default files:
   
2. ⇒ Now, we will create a new project using the project template we created earlier. Issue a Create->Project command. Enter the name "tutorialproject3". Check the "Use project template" checkbox, and then choose "tutorialtemplate" from the list of project templates. Leave the other checkboxes unchecked.
   
   Click on the Create button to create a new project with default content. After the Maqetta browser page refreshes, the Files palette should initialize the new project to have all of the same files that were present when the project template was saved:
   
   In particular, notice the difference between the picture of tutorialproject2 and tutorialproject3: tutorialproject3 includes the "standard_pages" folder.

Previous / Next