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 = WYSIWYG Designer Palette = Drag-n-drop UI 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 To drop-down menu

7 Page Designer Overview Palette Canvas Variable Editor Property Editor Studio Version Design Toolbar

8 Page Designer Layout Palette Canvas Variable Editor Property Editor Studio Version Design Toolbar

9 Page Designer Toolbar Page Designer Code Editors: JavaScript, CSS, HTML Page: new, save, save as, import GoTo page: navigate to other pages SaveCut Undo Paste 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