1. WaveMaker Visual AJAX Studio 4.0 Training Pages, Layers and Navigation

2. 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

3. 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

4. 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

5. 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

6. 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

7. 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.

8. 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.

9. 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

10. 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

11. 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

12. 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

13. 13 Layer Events ● Layer Events –onShow – fires when Layer becomes active layer –Allows you to execute logic just before displaying a layer.

14. 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

15. 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

16. 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.

17. 17 Questions?

18. 18 Exercise 14 ● Add additional pages to your project ● Add a Layers container to your project ● Configure a Navigation Call