WaveMaker Visual AJAX Studio 4.0 Training

Studio Overview

2

Studio Overview – Getting Started

● WaveMaker Development process

● Launching WaveMaker

● Page Designer introduction

● WaveMaker Toolbar introduction

3

WaveMaker Development Process

Import data in Live Tables

Drag-n-drop widgets in Page Designer

Connect data to widgets in Page Designer

1.Define Data

2. Build GUI

3. Bind data to GUI

Can also import Java and Web Services

Can deploy app to any Java server

** Steps 1 and 2 can be reversed – you can design first then add data

4

Welcome Screen

● New – creates a new project directory and all artifacts

● Open – opens an existing project in the Page Designer

● Delete – removes project directory

● Copy – creates a duplicate project with a new name

● Settings – change Project folder and Demo applications folder

● Help – link to online documentation

5

WaveMaker Studio Overview

● Open / New Project brings you into the page Designer

Canvas =WYSIWYGDesigner

Palette =Drag-n-dropUI widgets

Variables =connect to data

Properties =Change widget behavior/ appearance

Undo = oops button

6

WaveMaker Studio Toolbar

Page Designer

Data Designers:Tables, Views, Queries

Services Designers: Web, Java, Security

Create menu: DB import, page, java svc, web svc

Admin menu: export project, deploy WAR file

Run App in new window

For quick navigation, use the Go Todrop-down menu

7

Page Designer Overview

Palette

Canvas

Variable Editor

Property Editor

StudioVersion

Design Toolbar

8

Page Designer Layout

Palette

Canvas

Variable Editor

Property Editor

StudioVersion

Design Toolbar

9

Page Designer Toolbar

Page Designer

Code Editors:JavaScript, CSS, HTML

Page: new, save, save as, import

GoTo page: navigateto other pages

Save Cut UndoPaste

Toggle view: outline, exploded

10

Page Designer - Palette

● Widgets = UI elements used to create a web page– Common Widgets: most used widgets

– Form Elements: input editors

– Templates: pre-packaged page layouts

– Controls: calendar, tree, list

– Web Content: Google Gadget, Stocks, Weather

– Example: custom widget examples

– Pages: pages available in the application

10 | © 2008 nGenera. All Rights Reserved.

11

Page Designer - Canvas

● Drag-n-Drop widgets from Palette onto canvas

● Size and move widgets using mouse

● Ctrl-f = flex current object (maximize size)

● Ctrl-c, ctrl-x, ctrl-v = copy, cut, paste

11 | © 2008 nGenera. All Rights Reserved.

12

Page Designer - Model Tree

● Tree view of all Widgets on the current page

● Select a Widget in tree to highlight in designer

● Esc key = select container of current widget (next level up in tree)

12 | © 2008 nGenera. All Rights Reserved.

13

Page Designer – Page Manager

● New: create new page

● Save: save current page

● Save as: save copy as page with a different name

● Import: copy page from another project

● Set as home page: makes this first page when application starts

14

Page Designer Save, Open Page

● Save page: saves all files associated with page

● Page drop-down: closes current page and opens selected page

15

Page Designer – Variable Editor

● Variable: simple data

● Live data: table or view

● Service data: query, Java or web service call

● New navigation: move from one page to another

Variables are used to connect graphic widgets to back end data and web services

16

Page Designer – Properties Editor

● Each widget has its own set of properties– Properties: set display size,

caption, etc

– Events: define widget response to events like button clicks

– Styles: define the look using built in styles or custom CSS

– Security: role-based access control (commercial product only)

16 | © 2008 nGenera. All Rights Reserved.

17

Source Code Editor

● JavaScript: custom code for client

● CSS: custom styling for widgets

● Markup: html content to display in web app

● Widgets: configuration for app widgets (read only)

● Application: JavaScript client code (read only)

18

Live Table Designer

● Live Table = database schema– Column definitions

– Primary keys: including auto-generated keys

– Foreign keys: including delete constraints

– Can rename columns for use within WaveMaker

– Can import existing schema or create new one

19

Database Import Overview

● Enter properties to login to database

● Test connection: confirm you can connect to DB

● Import: read data dictionary – tables, keys, foreign key relationships

20

Live Views Designer

● Live Views = WaveMaker data view– Create view which includes

columns from several tables

– Preview immediately = “live”

– Limitation: need to select class containing foreign keys to start.

21

Live Queries Designer

● Live Queries = database queries– Create arbitrary query

– Preview immediately = “live”

– Limitation: need define query using Hibernate HQL

22

Java Services Designer

● Java Services = any java class or method– Import from JAR file

– Invoke as service from WaveMaker application

23

Web Services Designer

● Web Services = SOAP, REST, RSS– Import from url or xml file

– Import WSDL, WADL or event sample REST output!

– Invoke as service from WaveMaker application

24

Project Security

● Used to Configure Authentication– Support for LDAP, DB

authentication

– Includes an internal Demo database for testing

– Commercial product allows role-based security (RBAC)

24 | © 2008 nGenera. All Rights Reserved.

25

Toolbar – GoTo, Create, Admin Menus

● GoTo menu: drop-down navigation to designers (LiveTable, etc)

● Create menu: create web pages, import java service, web service, database schema

● Admin menu: generate WAR file, export project file (.zip format)

BP Export then rename your .zip file – subsequent exports will overwrite

25 | © 2008 nGenera. All Rights Reserved.

26

Toolbar – Help

● Tutorial – detailed walk-through (pdf)

● User Guide (pdf)

● Community (dev.wavemaker.com)

● Java server API docs (html)

● Javascript client API docs (html)

26 | © 2008 nGenera. All Rights Reserved.

27

Toolbar – Run, Close

● Run: deploy application to Tomcat server, open application in another tab

● Close: un-deploy application from Tomcat server, return to WaveMaker Start page

28

Questions?

29

Exercise 1

● Browse the Studio

● Check out all the different screens and editors