WaveMaker Visual AJAX Studio 4'0 Training

1
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