Transcript D Studio Overview - Developers

WaveMaker Visual AJAX
Studio 4.0 Training
Studio Overview
Studio Overview – Getting Started
2
●
WaveMaker Development process
●
Launching WaveMaker
●
Page Designer introduction
●
WaveMaker Toolbar introduction
WaveMaker Development Process
1.Define
Data
Import data in
Live Tables
Can also import
Java and Web
Services
2. Build
GUI
Drag-n-drop widgets
in Page Designer
3. Bind data
to GUI
Connect data to widgets
in Page Designer
Can deploy app
to any Java
server
** Steps 1 and 2 can be reversed – you can design first then add data
3
Welcome Screen
4
●
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
WaveMaker Studio Overview
●
Open / New Project brings you into the page
Designer
Undo = oops button
Canvas =
WYSIWYG
Designer
Palette =
Drag-n-drop
UI widgets
5
Variables =
connect to
data
Properties =
Change
widget
behavior/
appearance
WaveMaker Studio Toolbar
Page
Designer
Services Designers:
Web, Java, Security
Data Designers:
Tables, Views, Queries
Admin menu: export
project, deploy WAR file
Create menu: DB import,
page, java svc, web svc
For quick navigation,
use the Go To
drop-down menu
6
Run App in
new window
Page Designer Overview
Design
Toolbar
Variable
Editor
Canvas
Palette
Property
Editor
Studio
Version
7
Page Designer Layout
Design
Toolbar
Variable
Editor
Canvas
Palette
Property
Editor
Studio
Version
8
Page Designer Toolbar
Page
Designer
Page: new, save,
save as, import
Toggle view: outline,
exploded
Save
Code Editors:
GoTo page: navigate
JavaScript, CSS, HTML to other pages
9
Cut
Paste
Undo
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
10 | © 2008 nGenera. All Rights Reserved.
Page Designer - Canvas
11
●
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 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
12 | © 2008 nGenera. All Rights Reserved.
Page Designer – Page Manager
13
●
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 Designer Save, Open Page
●
●
14
Save page: saves all files
associated with page
Page drop-down: closes
current page and opens
selected page
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
15
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
16 | © 2008 nGenera. All Rights Reserved.
Source Code Editor
●
●
●
●
●
17
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)
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
18
Database Import Overview
19
●
Enter properties to login to
database
●
Test connection: confirm you
can connect to DB
●
Import: read data dictionary
– tables, keys, foreign key
relationships
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.
20
Live Queries Designer
●
Live Queries = database
queries
– Create arbitrary query
– Preview immediately = “live”
– Limitation: need define
query using Hibernate HQL
21
Java Services Designer
●
Java Services = any java
class or method
– Import from JAR file
– Invoke as service from
WaveMaker application
22
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
23
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
24 | © 2008 nGenera. All Rights Reserved.
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
25 | © 2008 nGenera. All Rights Reserved.
Toolbar – Help
26
●
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.
Toolbar – Run, Close
27
●
Run: deploy application to
Tomcat server, open
application in another tab
●
Close: un-deploy
application from Tomcat
server, return to WaveMaker
Start page
Questions?
28
Exercise 1
29
●
Browse the Studio
●
Check out all the different screens and editors