Introduction to WaveMaker

What is WaveMaker?

WaveMaker is a graphical application development environment. WaveMaker provides rapid application development tools for building web apps, such as order entry, project management and web forms.

  • WaveMaker studio runs in a browser. Applications built with WaveMaker are actually running while you are building them, making it much easier to test and debug web applications.
  • WaveMaker builds apps using widgets. The user interface of a WaveMaker application consists of pages and widgets that users interact with. WaveMaker applications includes two types of widgets: 1) form widgets - such as buttons, checkboxes, dropdown lists, grids and editors; and 2) container widgets - such as pages, panels, layers and tabs for organizing how to display other widgets.
  • WaveMaker data object widgets are powerful widgets tied to the database. After defining a new database or importing an existing database, WaveMaker automatically creates a data object widget for each table in the database. Data object widgets make it easy to build web forms that create, read, update and delete records from a database with no coding.
  • WaveMaker apps are event-driven. In a WaveMaker application, users control what happens by actions they take. For example, when a user clicks a button, chooses an item from a menu or enters data into an editor widget, one or more events are triggered. These events cause the program to respond, for example by navigating to a new page or inserting a record in a database.
  • Widget properties define behavior. Most development in WaveMaker is done by setting properties on widgets in the WaveMaker studio. Drag a widget onto the canvas to position it and then set properties on the widget to specify its behavior.
  • Widget functions extend behavior. Widgets also have functions that can be called directly using Javascript. This allows advanced developers to extend a widget's behavior.

Who should use WaveMaker?

WaveMaker is useful for a variety of users to accomplish a variety of tasks. Here are several examples of typoes of users and the kinds of applications they can build with WaveMaker:

  • Analyst: a business analyst can use WaveMaker to prototype web applications and document requirements with no coding and no knowledge of databases.
  • Citizen developer: an developer with basic knowledge of databases can use WaveMaker to build form-driven web applications with no coding.
  • Business Developer: a developer with knowledge of Javascript can use WaveMaker to build rich internet applications quickly and with no knowledge of Java.
  • Software Developer: an IT expert or packaged software developer with knowledge of Java can use WaveMaker to build scalable SaaS and enterprise applications

WaveMaker Products

WaveMaker is a rapid application development environment that includes two components:

  1. WaveMaker Studio: visual, drag-and-drop development environment that runs in a browser
  2. WaveMaker Runtime Framework: runtime server and client frameworks that are embedded in the application created by Studio. WaveMaker applications are deployed using standard Java WAR files that can run in any Java server.

WaveMaker Studio Orientation

WaveMaker Studio includes a variety of editors that allow you to import databases or web services, set up security, edit underlying code, and manage project resources. You can navigate to these editors using either the menus (at the top of Studio) or from the palette (on the left of Studio). The main editor is the Canvas (also called Page Designer). Use the Canvas to define the visual layout of the pages in your application.

WaveMaker Studio menus provide the following options:

  • File: Project actions and settings: new project, open project, close project, copy project, delete project, export project, import project, deploy project, and set preferences.
  • Edit: Standard cut, copy, paste, delete, and undo operations.
  • View: View the canvas, source code, or application resources; toggle widget outline.
  • Insert: Insert variables, navigations, properties, publishers, or image lists.
  • Page: New page, save as, import page from another project, set current page as the home page for the project
  • Services: manage services including databases, database queries, and LiveViews; web services; Java services; and security
  • Help: From here you can get to WaveMaker Studio help. This menu includes: Tutorials, Documentation (WaveMaker Studio User's Guide), Community (access the WaveMaker developer community), Java (Server) documentation (Java APIs), and JavaScript (Client) documentation (JavaScript APIs)
  • Test: Test-run your application with debugging enabled.
  • Run: Run your application.
To build a page, you drag widgets from the Palette onto the Canvas. Configure the behaviors, events, style of each widget using the Property Tree and Property Editor. The following illustration shows the main parts of the Page Designer.

Overview.png

  • 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. The area at the bottom of the Canvas provides information about the currently selected widget: it's name and size. The area at the top of the Canvas provides buttons for common Canvas operations:
IconDescription
SaveIcon.pngSave: Save the current state of the canvas.
Cut: Cut the selected widget. You can then paste the widget into another panel or page. If a widget contains other widgets then all contained widgets are included in the cut action.
Copy: Copy the selected widget. You can then paste the widget into another panel or page. If a widget contains other widgets then all contained widgets are included in the copy action.
Paste: Paste a widget that you have copied or cut.
Delete: Delete the selected widget or component.
Undo: Undo the previous canvas operation.
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.

  • 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, templates, gadgets and sub-pages. You can also access Components (variables, navigation calls, properties, and publishers) and Services (database, web services, java, and security) from the Palette. In the Palette, select a category to expand the list of items in that category.
    palette.jpg
  • 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 components in the current page. The Model Tree is divided into two sections: Non-visual components (services, variables, properties, publishers) and visual components (widgets). When you select a widget in this tree, that widget is also selected in the Canvas and the Property Tree and Property Editor displays the information for the widget. When you select a non-visual component the relevant information is displayed for the component. For example, if you select a database service then the data model editor is displayed.
    model.jpg
  • Property Tree: The Property Tree displays the categories of properties available for the selected widget or non-visual component. Select an element from the Property Tree to view and edit properties in the Property Editor.
    property.jpg
  • Property Editor: Use the Property Editor to customize the properties of the selected widget or non-visual component. Use Properties to tailor your application's behavior and visual look and feel. To get more information about any property select the "?" to the right of the Property.
    propedit.jpg
See Also: 3.Page Designer

Printing Documentation

You may print the documentation using Print link provided in the upper left corner of this page. You can chose to save these docs in pdf or rtf format.

Go to Tutorials

Once you have installed WaveMaker, work through the tutorials to get an understanding of how WaveMaker works.

WaveMaker Tutorials


      Share/Bookmark
© 2012 VMware, Inc. All Rights Reserved.