![Page 1: WaveMaker Visual AJAX Studio 4.0 Training Pages, Layers and Navigation](https://reader035.vdocuments.us/reader035/viewer/2022062805/5697bff51a28abf838cbd5d5/html5/thumbnails/1.jpg)
WaveMaker Visual AJAX Studio 4.0 Training
Pages, Layers and Navigation
![Page 2: WaveMaker Visual AJAX Studio 4.0 Training Pages, Layers and Navigation](https://reader035.vdocuments.us/reader035/viewer/2022062805/5697bff51a28abf838cbd5d5/html5/thumbnails/2.jpg)
2
What are Pages
● A single addressable unit that allows you to arrange and display a group of widgets.
– You can navigate from Page to Page
– All widgets on a Page share the same scope
– When a new Page is loaded the current page is destroyed and a new page is fetched from the sever with a new context.
● Used to logically group functionality– Makes team development easier
![Page 3: WaveMaker Visual AJAX Studio 4.0 Training Pages, Layers and Navigation](https://reader035.vdocuments.us/reader035/viewer/2022062805/5697bff51a28abf838cbd5d5/html5/thumbnails/3.jpg)
3
How to Create a New Page
● Under Create Page or Under the Page Tools Menu you can:– Create a new Page
– Save the current Page
– Save the current Page As
– Import a Page from another project
– Set as Home Page ( the first page to load when the application is run
– Delete a Page
● To open a Page– Select the Go to Page Icon you will see a list
of pages
– Selecting a page will load it into the canvas
![Page 4: WaveMaker Visual AJAX Studio 4.0 Training Pages, Layers and Navigation](https://reader035.vdocuments.us/reader035/viewer/2022062805/5697bff51a28abf838cbd5d5/html5/thumbnails/4.jpg)
4
Navigating to a Page
● Add a New Navigation– gotoPage2
● Scoping– Page Level Scoping
– The navigation is only available to the current page
– Project Level Scoping
– The navigation is available from any page anytime
![Page 5: WaveMaker Visual AJAX Studio 4.0 Training Pages, Layers and Navigation](https://reader035.vdocuments.us/reader035/viewer/2022062805/5697bff51a28abf838cbd5d5/html5/thumbnails/5.jpg)
5
Calling the Navigation Service
● Add a Button widget– Set the onClick event to execute
the navigation
● When the new the Page if you want to return to the calling page you must create another Navigation
![Page 6: WaveMaker Visual AJAX Studio 4.0 Training Pages, Layers and Navigation](https://reader035.vdocuments.us/reader035/viewer/2022062805/5697bff51a28abf838cbd5d5/html5/thumbnails/6.jpg)
6
Using Pages as SubPages
● From the Common tab of the Palette, add a PageContainer widget– In the Properties Editor, must set the
pageName to display the subpage
● From the Pages tab of the Palette, add the desired subpage– Creates a PageContainer with the
pageName set
![Page 7: WaveMaker Visual AJAX Studio 4.0 Training Pages, Layers and Navigation](https://reader035.vdocuments.us/reader035/viewer/2022062805/5697bff51a28abf838cbd5d5/html5/thumbnails/7.jpg)
7
Using Pages as SubPages
● Page Container is added to the current page– Defines the area where a subpage will be displayed
– On the Canvas, the subpage is displayed with cross marks through it
● Service calls and data are not shared between pages and subpages unless they are scoped globally.
![Page 8: WaveMaker Visual AJAX Studio 4.0 Training Pages, Layers and Navigation](https://reader035.vdocuments.us/reader035/viewer/2022062805/5697bff51a28abf838cbd5d5/html5/thumbnails/8.jpg)
8
What are Layers
● Layers allow you to hide and show groups of widgets all on the same page. – Example: Tabs and Accordions
● Layers are addressable and navigable
● All layers are part of the same logical page– They share local variables
● A page can contain many layers that can be dynamically displayed or hidden.
![Page 9: WaveMaker Visual AJAX Studio 4.0 Training Pages, Layers and Navigation](https://reader035.vdocuments.us/reader035/viewer/2022062805/5697bff51a28abf838cbd5d5/html5/thumbnails/9.jpg)
9
How to add Layers to a Page
● From the Palette select one of the following widgets– Layers – no visual clues that other
layers exist; users navigate via events, clicking a button or link
– Tabs – each layer has a titled tab; users can navigate through layers by clicking tabs
– Accordion – each titled layer is expandable and collapsible; users can navigate through layers by clicking the arrow
![Page 10: WaveMaker Visual AJAX Studio 4.0 Training Pages, Layers and Navigation](https://reader035.vdocuments.us/reader035/viewer/2022062805/5697bff51a28abf838cbd5d5/html5/thumbnails/10.jpg)
10
Layers Container
● Has 1 more layers
● Container Properties– Showing: is the layer visible
– Disable: is the layer available to navigate to
– defaultLayer – specify which layer to show upon rendering
– layersType – specify style of Layers
– Layers, Tabs, Accordion
– Can be modified without changing functionality
– add – adds a new layer to the Layers container
![Page 11: WaveMaker Visual AJAX Studio 4.0 Training Pages, Layers and Navigation](https://reader035.vdocuments.us/reader035/viewer/2022062805/5697bff51a28abf838cbd5d5/html5/thumbnails/11.jpg)
11
Layers Container Events
● Layers Events– oncanchange - fires when
Layers widget is about to change the active layer
– can be used to prevent navigation to another layer until some logic is performed
– onchange – fires after Layers widgets changes the active layer
![Page 12: WaveMaker Visual AJAX Studio 4.0 Training Pages, Layers and Navigation](https://reader035.vdocuments.us/reader035/viewer/2022062805/5697bff51a28abf838cbd5d5/html5/thumbnails/12.jpg)
12
Individual Layer
● Within the Layers container are individual layers on which you add widgets
● Once a layer is added you can use the properties to configure
– caption – title displayed on Tab or Accordion menu; not shown on Layers
– moveNext – move the current layer down in the Layers container
– movePrevious – move the current layer up in the Layers container
![Page 13: WaveMaker Visual AJAX Studio 4.0 Training Pages, Layers and Navigation](https://reader035.vdocuments.us/reader035/viewer/2022062805/5697bff51a28abf838cbd5d5/html5/thumbnails/13.jpg)
13
Layer Events
● Layer Events– onShow – fires when Layer
becomes active layer
– Allows you to execute logic just before displaying a layer.
![Page 14: WaveMaker Visual AJAX Studio 4.0 Training Pages, Layers and Navigation](https://reader035.vdocuments.us/reader035/viewer/2022062805/5697bff51a28abf838cbd5d5/html5/thumbnails/14.jpg)
14
Navigating to a Layer
● Add a New Navigation– gotoLayer1
● Scoping– Page Level Scoping
– The navigation is only available to the current page
– Project Level Scoping
– The navigation is available from any page anytime
![Page 15: WaveMaker Visual AJAX Studio 4.0 Training Pages, Layers and Navigation](https://reader035.vdocuments.us/reader035/viewer/2022062805/5697bff51a28abf838cbd5d5/html5/thumbnails/15.jpg)
15
Setting Navigation Properties
● Navigation Properties– Name – human readable name set by
default, but can be changed
– Configure – allows you to change the Page or Layer to navigate to
– Queue – ability to automatically call additional service calls once the navigation has been completed.
– Example: gotoPage1 then gotoLayer3
![Page 16: WaveMaker Visual AJAX Studio 4.0 Training Pages, Layers and Navigation](https://reader035.vdocuments.us/reader035/viewer/2022062805/5697bff51a28abf838cbd5d5/html5/thumbnails/16.jpg)
16
Understanding Navigation Events
● Navigation Events– onBeforeUpdate – fires just before
the ServiceCall is made
– onResult – fires whenever a service returns, whether the service returned successfully or reported an error.
– onSuccess– fires whenever a service returns successfully.
– onError– fires whenever a service reports an error.
![Page 17: WaveMaker Visual AJAX Studio 4.0 Training Pages, Layers and Navigation](https://reader035.vdocuments.us/reader035/viewer/2022062805/5697bff51a28abf838cbd5d5/html5/thumbnails/17.jpg)
17
Questions?
![Page 18: WaveMaker Visual AJAX Studio 4.0 Training Pages, Layers and Navigation](https://reader035.vdocuments.us/reader035/viewer/2022062805/5697bff51a28abf838cbd5d5/html5/thumbnails/18.jpg)
18
Exercise 14
● Add additional pages to your project
● Add a Layers container to your project
● Configure a Navigation Call