Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
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