WaveMaker Studio Cloud Edition Tutorial

This tutorial walks you through the steps for creating an application in WaveMaker Visual AJAX Studio™ Cloud Edition. The simple application that you build here will include AJAX widgets, a database and a Web Service. The application is broken down into three separate tutorials, the first of which should take about 30 minutes to complete:

1. Create a New WaveMaker Studio Application  [30 minutes]
2. Add a Customer Detail Tab  [15 minutes]
3. Add an Orders Tab  [15 minutes]
4. Add a Web Service Call  [15 minutes]

Before you begin these tutorials, review the requirements in the following section (WaveMaker Studio Orientation).

Beta Version: For the Beta Version of the WaveMaker Studio Cloud Edition, please note the following limitations:

• each user is limited to a single project
• you cannot upload custom code; instead you must edit custom code directly in the studio
• you cannot deploy the application. you can use test run to validate the application behavior

WaveMaker Studio Orientation

This section provides a quick orientation to the major elements of the WaveMaker Studio product. It includes the following topics:

• Supported Browsers
• How to Change Your Password
• Studio Overview

Supported Browsers

WaveMaker Studio is a web application that runs in your browser. FireFox 2 with Firebug is the recommended browser configuration for creating your applications with WaveMaker Studio. Other browsers are supported but do not provide the same tools for debugging. Supported browsers include Internet Explorer (IE) 7.0, Safari 2.x, Safari 3.x, and FireFox 3.

Note: The restrictions on browsers pertain to development time only. Once you have created your application, you should be able to run it on most browsers.

How to Change Your Password

To change your password, click on your email address at the top right corner of the WaveMaker Studio.

The User Settings dialog appears. You can change your password here.

Studio Overview

WaveMaker Studio includes a variety of editors that allow you to import databases or web services, set up security, edit underlying code, and so on. You can access these editors from the Studio toolbar that is always visible across the top left of the Studio.

Each editor is represented by an icon. The following table shows the icons for each editor, as well as the other options in the Main Toolbar.

Icon	Description
	Page Designer. This is where you lay out your pages
	LiveTables Editor. This editor shows all the tables you've imported from your databases. In the studio, these tables are represented by LiveTables. LiveTables are automatically generated for you when you import a database.
	LiveViews Editor. This editor shows all the LiveViews available in this project. LiveViews are just collections of columns from related tables. You create LiveViews yourself; they are not generated automatically.
	Queries Editor. This editor allows you to create and edit database queries. You can then use your queries as data sources for widgets and service components.
	Java Services Editor. This editor allows you to create and edit your own custom Java services.
	Web Services Editor. This editor shows all the web services that are available to the project. You can also import new web services from here.
	Security Editor. This editor allows you to set up authentication for your application. You can also set up roles-based access for individual widgets.

To the right of Toolbar, the Main Studio menu provides the following menu options:

• GoTo: From here you can open any of the WaveMaker Studio editors.
• Create: From here you can create new pages or import new services and database into your project.
• Admin: From here you can edit database connection settings, or deploy your application to Amazon EC2.
• Help: From here you can get to WaveMaker Studio help. This menu includes:
  • Tutorial (this guide)
  • User Guide (WaveMaker Studio User's Guide)
  • Community (access the WaveMaker developer community)
  • Java (Server) documentation (Java APIs)
  • JavaScript (Client) documentation (JavaScript APIs)
• Run: Test-run your application.
• Logout: Log out of the Studio.

The most important editor is the Page Designer, which you use to build your application pages. You can open the Page Designer from the Studio toolbar (click the "Page Designer" icon ).

To build a page, you drag widgets from the Palette onto the Canvas and then configure them by editing their properties in the Property Editor. The following illustration shows the main parts of the Page Designer.

• Canvas: The large area in the center of the Page Designer represents the page itself. Drag widgets from the Palette onto the page. The whole page is contained in a container called "layoutBox1" widget. The LayoutBox widget is a special container widget that forms the top container of each page. It cannot be removed, but you can edit its properties.
• Palette: The Palette is located on the left side of the Page Designer. The Palette allows you to add content to your application, such as widgets, gadgets and sub-pages. In the Palette, select a category to expand the list of items in that category.  The top category, called "Common" contains commonly-used page widgets. These common page widgets are also included in their logical groups, such as "Form Elements" or "Controls".
• Model Tree: Access the Model Tree from the Model tab, located on the left side of the Page Designer. The Model Tree shows a hierarchical tree of all the widgets in the current page. When you select a widget in this tree, that widget is also selected in the Canvas.
• Design Toolbar: This toolbar provides buttons for common Page Designer functions. A few useful functions to note:
  • The cut and paste buttons allow you to cut a widget out of one panel and paste it into another.
  • The exploded view puts a bit of padding between all the widgets so that they are easy to select. You can toggle it off and on with the exploded view button in the Page Designer toolbar. The exploded view can obscure widget alignment, so use it only when you need it.
  • The "outline" toggle button allows you to see your page without the widget outlines (the run-time look, rather than the design-time look). You typically work with the outlines on, then toggle them off to see what the page would look like at run time.

The following table lists all the buttons in the Designer Toolbar:

Icon	Description
	Go to Page Tools Menu. Page Tools menu allows you to: Create a New Page Save Current Page Save Current Page under a different name Import a Page from another project Set the current Page as the "home" Page for this project Delete current Page
	Save.
	Go to Page Menu. Displays all pages in the project other than the current page. Select a page from this menu to load it in the Page Designer.
	LiveLayout. WaveMaker Studio's LiveLayout™ feature allows you to see live data in the Page Designer as you are working with your pages.
	Toggle Outlined View. The outline toggle button allows you to see your page without the widget outlines (the run-time look, rather than the design-time look). You typically work with the outlines on, then toggle them off to see what the page would look like at run time.
	Toggle Exploded View. The exploded view puts a bit of padding between all the widgets so that they are easy to select. You can toggle it off and on with this button. The exploded view can obscure widget alignment, so use it only when you need it.
	Cut. Cut the selected widget. You can then paste the widget into another panel or page.
	Copy. Copy the selected widget. You can then paste the widget into another panel or page.
	Paste. Paste a widget that you have copied or cut.
	Delete. Delete the selected widget or component.
	Undo. Undo the last operation.

• Component Tree: The Component Tree is located on the upper right side of the Page Designer. It shows the Variables and Navigation components available to your page. Click on a component to see its properties in the Property Editor. Click on the icons at the top of the panel to create new Components.
• Property Tree and Editor: The Property Tree is located in the middle editor right side of the Page Designer and the Property Editor is located directly below it. The items displayed in the Property Tree and Property Editor depend on what object selected in the Page Designer.

In the Property Tree you select what type of properties you want to set in the Property Editor. The property types that are available depend on what type of object is selected in the Page Designer. For example, not all objects have Styles properties and not all objects have Events.

You have completed the WaveMaker Studio Orientation. The first tutorial (Create a New WaveMaker Studio Application) shows you how to create an application using WaveMaker.