Previous / Next

Tutorial 4 - Cloud Workspace, Files, Projects and Orion Navigator

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 provides an overview of the features in Maqetta having to do with your cloud workspace. Topics covered:

The Files palette
Creating Files
Opening Files from the Files Palette
Files Palette Toolbar
Files Palette Context Menu
Creating and Switching Projects
Orion Navigator

Files Palette

⇒ Open up the Files palette (found in the left/bottom corner of the application). If the palette isn't showing, click on the large-size Files palette icon to show the Files palette. The Files palette should look something like this:

Under the Files palette toolbar, what you are seeing is your personal cloud workspace. Maqetta creates a default project (project1) for each new user, and puts a set of default files in the newly created project:

app.css - This file is the default location for project-level CSS style rules. Maqetta includes app.css in all of the HTML files it creates.

Some of the advanced features found in Maqetta's various properties palettes (found at the right/top of the application, such as Layout, Margins, etc) will automatically add CSS style rules to this file. You can also double-click on this file to bring up Maqetta's source editor so that you can add CSS style rules manually.
app.js - This file is the default location for project-level JavaScript logic. Maqetta includes app.js in all of the HTML files it creates.

Beginning users typically do not touch this file, but advanced users often find the need to put custom JavaScript logic in this file.
lib - Holds the JavaScript libraries (e.g., Dojo) that will be used by the HTML files you create.
samples - Contains various sample files, including various files that are used as part of Maqetta's tutorials.
themes - Contains various CSS themes, both the ones that ship standard with Maqetta, and user-created themes.

Creating Files

⇒ Go to the Create menu at the top of the application. Choose the command Create -> Desktop Application.... In the dialog that appears, accept the defaults and click on the "Create" button.
⇒ Go to the Palette and find the section labelled "Containers". Click on the "Containers" section to show its contents, and then click on the "Dojo" sub-section to show its contents.

⇒ You should see various widget icons. Find the TabContainer widget. With the mouse, drag the icon for the TabContainer widget from the Palette onto the white canvas (in the middle of the application). Drop the TabContainer somewhere inside of the white canvas. A TabContainer widget should appear at the top/left of the canvas, and a popup dialog should appear. Click OK in that popup dialog to accept its default values. Your canvas should look something like this:

Now let's look at the various parts of the Maqetta user interface. Observe the following:

Files palette - Observe that the filename of the file you just created (e.g., file1.html) is now listed in the Files palette.
File tabs - Look at the file tab area at the top of the application (just under the main menubar and just above the page editor's toolbar). Find the file tab for the file you just created. Observe that it contains an asterisk next to the filename to indicate that the file has unsaved changes.

⇒ Click on the Save button on the page editor toolbar to save your document. Notice that the asterisk goes away after the save operation.

Previewing Files

⇒ Click on the Preview icon on the page editor toolbar. Notice that a new browser tab (or window) opens showing the TabContainer widget. (In Maqetta, this is called "Preview in browser".)
⇒ In the browser tab that just opened, select the full URL from the browser's URL address bar, and issue a system copy command (e.g., Ctrl-C on Windows or Cmd-C on Mac) to put the URL onto the system clipboard.
⇒ Open a different browser (if you have multiple browsers on your system), open up a new browser tab in that browser, and issue a paste command into that browser's URL bar. You should see your file previewed in the other browser.

What this shows is that each of your files in your cloud workspace has its own URL that you can share with others (assuming your colleagues also can access the Maqetta server).

⇒ Click on the file tab's close button - - to close the page editor.

Opening Files from the Files Palette

⇒ Go to the Files palette and double-click on the file you just created to reopen that file.

When you double-click on an HTML file in the Files palette, Maqetta opens in the visual page editor.

⇒ In the Files palette, double-click on the app.css file. Maqetta will open up a source editor where you can edit the source code of that CSS file.
⇒ Now, double-click on the app.js file. Maqetta will open up a source editor where you can edit the source code of that JavaScript file.

When you double-click on CSS (*.css), JavaScript (*.js) or JSON file (*.json) in the Files palette, Maqetta opens up a source editor for the given file.

⇒ For each of the open files, click on the file tab's close button - - to close all of the editors.

Files Palette Toolbar

In the Files palette, you can create folders, delete files, rename files, upload files, and download files.

The Files palette toolbar contains several important features.

Toolbar row 1: project and project template actions - The first row in the Files palette toolbar contains project-related actions.
- Project selection control - At the left of the first row is the project selection control. It displays the currently active project ("project1" in the picture above) and provides a dropdown menu that shows all of your projects. To change projects, choose a different project name from the dropdown menu.
- New project icon - Allows you to create a new project.
- Project menu - The icon at the right side of the first row brings up the project menu, which includes these commands:
  - New project... - Allows you to create a new project. (Equivalent to New Project icon.)
  - Delete this project... - Allows you to delete the currently open project.
  - Rename this project... - Allows you to rename the currently open project.
  - Save as project template... - Takes a snapshot of your current project and saves it as a re-usable "project template".
  - Manage project templates... - Brings up a dialog that lists the project templates you have created and allows you to delete or modify (rename the template or modify whether the template is shared) the project templates that you created.
Toolbar row 2: file actions - The second row in the Files palette toolbar contains icons for various file-related actions.
- New folder - Creates a sub-folder inside the currently selected folder
- Delete selected files
- Rename selected file
- Download entire project - creates a ZIP containing your entire project
- Download selected files - creates a ZIP containing the currently selected files
- Upload files - allows you to upload files from your local file system into the currently selected folder
- Upload ZIP - allows you to upload a ZIP file from your local file system and optionally expand the contents of the ZIP into the currently selected folder

Files Palette Context Menu

⇒ Go to the Files palette, put the mouse over the app.css file, and bring up the context menu (e.g., using right-mouse-button or Ctrl-click on a Mac). You should see the following commands in the popup menu.

Rename... - Allows you to rename files.
Delete - Allows you to delete files.
Download - Allows you to download selected files.

⇒ Go to the Files palette, click-select the app.css file. Click on the "New Folder" icon on the Files palette toolbar.

⇒ The Create New Folder dialog will appear. Accept the default values and click on the "Create"" button. A new folder with an automatically generated name (e.g., "folder1") will appear in the Files palette.

⇒ In the Files palette, put the mouse over the folder you just created (e.g., "folder1"), bring up the context menu, and choose the "Rename..." command. Enter "images" as the new name for the folder, and click on the Rename button. Notice in the Files palette that the folder has been renamed to "images".

⇒ In the Files palette, click-select the "images" folder. Click on the "New Folder" icon on the Files palette toolbar. In the Create New Folder dialog, type "abc" into the folder name textbox, then click on the Create button. Note that new folder "abc" is now a child of folder "images".

⇒ In the Files palette, put the mouse over the "abc" folder, bring up the context menu, and choose the "Delete..." command. An "Are you sure" dialog will appear. Click OK. Notice that folder "abc" has been removed from the Files palette.

⇒ Outside of Maqetta, find one or more image files on your computer (preferably, not massive). Back in Maqetta, click-select the "images" folder. Then click on the "Upload files..." icon on the Files palette toolbar. The Upload Files dialog will apepar.

⇒ In the dialog, click on the "Select Files" button to bring up a file selection dialog. In the file selection dialog, choose one or more image files from your computer, and click on the "OK or "Open" button. The files you selected will now appear in the Upload Files dialog.

⇒ Click on the Upload button to upload the files to your workspace. Look in the Files palette and you will see the files you just uploaded.

You can click on the "Select Files" command again if you want to upload more files.

⇒ Click on the close box at the top/right of the dialog or click on "Cancel" to close the Upload Files dialog.

⇒ In the Files palette, click-select the "images" folder. Then click on the "Download selected files..." icon on the Files palette toolbar. The Download dialog will appear.

⇒ The Download dialog will provide a default file name for a ZIP file that will hold the currently selected files (e.g., project1.zip), and it will show the list of files you have selected (in this case, "images"). Click on the Download button.

File project1.zip will now be in your browser's Downloads folder. The ZIP file will contain the full contents of your "images" folder.

⇒ In the Files palette, put the mouse over the "images" folder, bring up the context menu, and choose the "Delete..." command. An "Are you sure" dialog will appear. Click OK. Notice that folder "images" has been removed from the Files palette.

Creating and Switching Projects

When a user launches Maqetta for the first time, Maqetta creates a default project (named "project1"). Maqetta includes a Create -> New Project command that allows users to create whole new projects.

⇒ Go to the Create menu at the top of the application. Choose the command Create -> Project.... In the dialog that appears, enter "temp1" as the name of the new project, and click the "Create button".
⇒ The Maqetta browser window will now redraw. Go to the Files palette, and you will see that the project name (listed at the top of the Files palette) is now "temp1". Also note that the Files palette contents shows the same default contents (app.css, app.js, libs, samples, themes) as when you first launched the Maqetta application.

The Create -> Project... command is useful if you are using Maqetta for different work projects, or if you find the need to restart work from scratch.

⇒ Let's now delete the "temp1" project. Bring up the project menu by pressing and holding the project menu icon at the top/right of the Files palette. On the menu, choose the "Delete this project..." command. After deleting this project, Maqetta will switch back to one of your other existing projects (e.g., "project1").

Depending on your particular sequence of operations, you may find it difficult to transfer files from one project to another project. One possible strategy to transfer files is to switch to the project that has your old files, download selected files as a ZIP onto your local file system, expand the ZIP into a folder on your local file system, switch to your new project in Maqetta, and then upload files into your new project. Note that you have to be careful to upload files into the same locations in the new project as they were in the old project for the relative URL references in your HTML files to work properly.

Orion Navigator

Maqetta embeds a version of Eclipse Orion, which is an open source platform for cloud-based web development. With Orion, you can edit source files stored in cloud workspaces directly in the browser. Maqetta includes Orion inside so that Maqetta users can take advantage of Orion's various features, including its source editor technology that runs in the browser.

⇒ In Maqetta, make sure all files are closed. For each of the open files, click on the file tab's close button - - to close all of the editors.
⇒ Go to the Open menu at the top of the application. Choose the command Open -> Orion Navigator. A new browser tab/window will open that is running Eclipse Orion, with the Orion navigator user interface showing the contents of your personal cloud workspace.

In the Orion navigator, at the top level, you will see all of your projects. In the picture above, there is only one project ("project1").

⇒ Click on the small right-pointing arrow just to the left of "project1" to open up that folder. You should see nearly the same list of HTML, CSS, JavaScript files and folders as the Maqetta Files palette.

The Orion Navigator will not show all of the same files as you see in the Maqetta workspace. This is because that Maqetta injects some files and folders into user workspaces that are read-only, such as the samples folders. Read-only files and folders do not appear in the Orion Navigator.

⇒ Click on file1.html (assuming it is in your workspace due to previous steps in this tutorial). Orion will now switch to its source editor and show the HTML contents of file1.html. Find the line of source code that has "Tab 1" on it.

<div data-dojo-type="dijit.layout.ContentPane" title="Tab 1" extractContent="false" preventCache="false" preload="false" refreshOnShow="false" selected="true" closable="false" doLayout="false"></div>

⇒ In the Orion source editor, change the string "Tab 1" to "Reports" (for the title attribute). Then click on the Save button to save your changes.
⇒ Return to the Maqetta browser window. In the Files palette, double-click on file1.html. On the visual editor canvas, you should see that the first tab now says "Reports" instead of "Tab 1".

NOTE: Be very careful with source code changes. If you modify HTML, CSS or JavaScript files using source editors, and the revised code is not valid HTML, CSS or JavaScript, Maqetta might not be able to open your files.

⇒ Return to the Orion window. At the top/left, click on the hyperlink for "project1" to return to the file navigator. You should once again see the list of files in "project1", such as app.css, app.js and file1.html.
⇒ In the Orion window, click on the "New folder" button. In the type-in box, enter "img". After completing the operation, you should see a new "img" folder in your project. Go back to the Maqetta window. Hit browser refresh, which will cause Maqetta to restart and update the Files palette. You should see the "img" folder in the Maqetta Files palette.
⇒ Return to the Orion window. Click just to the right (not directly on) the string "img" to select the "img" folder. You should see an orange highlight on the "img" line to show that it is selected.

In Orion, clicking on a file or folder name will cause Orion to open that file or folder. Clicking to the right of a file or folder name will cause Orion to select that file or folder.

⇒ In the Actions menu, choose "Import local file". You should see this dialog:

This dialog provides an alternate way for you to upload files into your Maqetta workspace. Orion's upload feature includes various features that Maqetta's upload feature does not, including the ability to upload a ZIP file.

⇒ Click on the close box (the "x") at the top/right of the Import files dialog. This will return you to the Orion navigator.
⇒ Click just to the right (not directly on) the string "file1.html" to select that file. Press and hold on the "Actions" menu. You should see the following:

As you can see, the Orion navigator offers various useful file management features, such as the ability to move files to different folders.

⇒ Click just to the right (not directly on) the folder "img" to select that folder. From the Actions menu, choose "Delete" to delete that file. You'll see the "img" is no longer visible in the Orion navigator. Go back to the Maqetta window. Hit browser refresh, which will cause Maqetta to restart and update the Files palette. You should see that the "img" folder is no longer visible in the Maqetta Files palette.
⇒ Close the browser tab containing the Orion navigator.

Previous / Next