WaveMaker Visual AJAX Studio 4.0 Training

Pages, Layers and Navigation

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

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

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

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

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

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

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

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

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

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

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

Layer Events

● Layer Events– onShow – fires when Layer

becomes active layer

– Allows you to execute logic just before displaying a layer.

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

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

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

Questions?

18

Exercise 14

● Add additional pages to your project

● Add a Layers container to your project

● Configure a Navigation Call