wavemaker visual ajax studio 4.0 training studio overview
TRANSCRIPT
![Page 1: WaveMaker Visual AJAX Studio 4.0 Training Studio Overview](https://reader036.vdocuments.us/reader036/viewer/2022062407/56649e0f5503460f94afaa93/html5/thumbnails/1.jpg)
WaveMaker Visual AJAX Studio 4.0 Training
Studio Overview
![Page 2: WaveMaker Visual AJAX Studio 4.0 Training Studio Overview](https://reader036.vdocuments.us/reader036/viewer/2022062407/56649e0f5503460f94afaa93/html5/thumbnails/2.jpg)
2
Studio Overview – Getting Started
● WaveMaker Development process
● Launching WaveMaker
● Page Designer introduction
● WaveMaker Toolbar introduction
![Page 3: WaveMaker Visual AJAX Studio 4.0 Training Studio Overview](https://reader036.vdocuments.us/reader036/viewer/2022062407/56649e0f5503460f94afaa93/html5/thumbnails/3.jpg)
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
![Page 4: WaveMaker Visual AJAX Studio 4.0 Training Studio Overview](https://reader036.vdocuments.us/reader036/viewer/2022062407/56649e0f5503460f94afaa93/html5/thumbnails/4.jpg)
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
![Page 5: WaveMaker Visual AJAX Studio 4.0 Training Studio Overview](https://reader036.vdocuments.us/reader036/viewer/2022062407/56649e0f5503460f94afaa93/html5/thumbnails/5.jpg)
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
![Page 6: WaveMaker Visual AJAX Studio 4.0 Training Studio Overview](https://reader036.vdocuments.us/reader036/viewer/2022062407/56649e0f5503460f94afaa93/html5/thumbnails/6.jpg)
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
![Page 7: WaveMaker Visual AJAX Studio 4.0 Training Studio Overview](https://reader036.vdocuments.us/reader036/viewer/2022062407/56649e0f5503460f94afaa93/html5/thumbnails/7.jpg)
7
Page Designer Overview
Palette
Canvas
Variable Editor
Property Editor
StudioVersion
Design Toolbar
![Page 8: WaveMaker Visual AJAX Studio 4.0 Training Studio Overview](https://reader036.vdocuments.us/reader036/viewer/2022062407/56649e0f5503460f94afaa93/html5/thumbnails/8.jpg)
8
Page Designer Layout
Palette
Canvas
Variable Editor
Property Editor
StudioVersion
Design Toolbar
![Page 9: WaveMaker Visual AJAX Studio 4.0 Training Studio Overview](https://reader036.vdocuments.us/reader036/viewer/2022062407/56649e0f5503460f94afaa93/html5/thumbnails/9.jpg)
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
![Page 10: WaveMaker Visual AJAX Studio 4.0 Training Studio Overview](https://reader036.vdocuments.us/reader036/viewer/2022062407/56649e0f5503460f94afaa93/html5/thumbnails/10.jpg)
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.
![Page 11: WaveMaker Visual AJAX Studio 4.0 Training Studio Overview](https://reader036.vdocuments.us/reader036/viewer/2022062407/56649e0f5503460f94afaa93/html5/thumbnails/11.jpg)
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.
![Page 12: WaveMaker Visual AJAX Studio 4.0 Training Studio Overview](https://reader036.vdocuments.us/reader036/viewer/2022062407/56649e0f5503460f94afaa93/html5/thumbnails/12.jpg)
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.
![Page 13: WaveMaker Visual AJAX Studio 4.0 Training Studio Overview](https://reader036.vdocuments.us/reader036/viewer/2022062407/56649e0f5503460f94afaa93/html5/thumbnails/13.jpg)
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
![Page 14: WaveMaker Visual AJAX Studio 4.0 Training Studio Overview](https://reader036.vdocuments.us/reader036/viewer/2022062407/56649e0f5503460f94afaa93/html5/thumbnails/14.jpg)
14
Page Designer Save, Open Page
● Save page: saves all files associated with page
● Page drop-down: closes current page and opens selected page
![Page 15: WaveMaker Visual AJAX Studio 4.0 Training Studio Overview](https://reader036.vdocuments.us/reader036/viewer/2022062407/56649e0f5503460f94afaa93/html5/thumbnails/15.jpg)
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
![Page 16: WaveMaker Visual AJAX Studio 4.0 Training Studio Overview](https://reader036.vdocuments.us/reader036/viewer/2022062407/56649e0f5503460f94afaa93/html5/thumbnails/16.jpg)
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.
![Page 17: WaveMaker Visual AJAX Studio 4.0 Training Studio Overview](https://reader036.vdocuments.us/reader036/viewer/2022062407/56649e0f5503460f94afaa93/html5/thumbnails/17.jpg)
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)
![Page 18: WaveMaker Visual AJAX Studio 4.0 Training Studio Overview](https://reader036.vdocuments.us/reader036/viewer/2022062407/56649e0f5503460f94afaa93/html5/thumbnails/18.jpg)
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
![Page 19: WaveMaker Visual AJAX Studio 4.0 Training Studio Overview](https://reader036.vdocuments.us/reader036/viewer/2022062407/56649e0f5503460f94afaa93/html5/thumbnails/19.jpg)
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
![Page 20: WaveMaker Visual AJAX Studio 4.0 Training Studio Overview](https://reader036.vdocuments.us/reader036/viewer/2022062407/56649e0f5503460f94afaa93/html5/thumbnails/20.jpg)
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.
![Page 21: WaveMaker Visual AJAX Studio 4.0 Training Studio Overview](https://reader036.vdocuments.us/reader036/viewer/2022062407/56649e0f5503460f94afaa93/html5/thumbnails/21.jpg)
21
Live Queries Designer
● Live Queries = database queries– Create arbitrary query
– Preview immediately = “live”
– Limitation: need define query using Hibernate HQL
![Page 22: WaveMaker Visual AJAX Studio 4.0 Training Studio Overview](https://reader036.vdocuments.us/reader036/viewer/2022062407/56649e0f5503460f94afaa93/html5/thumbnails/22.jpg)
22
Java Services Designer
● Java Services = any java class or method– Import from JAR file
– Invoke as service from WaveMaker application
![Page 23: WaveMaker Visual AJAX Studio 4.0 Training Studio Overview](https://reader036.vdocuments.us/reader036/viewer/2022062407/56649e0f5503460f94afaa93/html5/thumbnails/23.jpg)
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
![Page 24: WaveMaker Visual AJAX Studio 4.0 Training Studio Overview](https://reader036.vdocuments.us/reader036/viewer/2022062407/56649e0f5503460f94afaa93/html5/thumbnails/24.jpg)
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.
![Page 25: WaveMaker Visual AJAX Studio 4.0 Training Studio Overview](https://reader036.vdocuments.us/reader036/viewer/2022062407/56649e0f5503460f94afaa93/html5/thumbnails/25.jpg)
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.
![Page 26: WaveMaker Visual AJAX Studio 4.0 Training Studio Overview](https://reader036.vdocuments.us/reader036/viewer/2022062407/56649e0f5503460f94afaa93/html5/thumbnails/26.jpg)
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.
![Page 27: WaveMaker Visual AJAX Studio 4.0 Training Studio Overview](https://reader036.vdocuments.us/reader036/viewer/2022062407/56649e0f5503460f94afaa93/html5/thumbnails/27.jpg)
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
![Page 28: WaveMaker Visual AJAX Studio 4.0 Training Studio Overview](https://reader036.vdocuments.us/reader036/viewer/2022062407/56649e0f5503460f94afaa93/html5/thumbnails/28.jpg)
28
Questions?
![Page 29: WaveMaker Visual AJAX Studio 4.0 Training Studio Overview](https://reader036.vdocuments.us/reader036/viewer/2022062407/56649e0f5503460f94afaa93/html5/thumbnails/29.jpg)
29
Exercise 1
● Browse the Studio
● Check out all the different screens and editors