1 / 18

WaveMaker Visual AJAX Studio 4.0 Training

WaveMaker Visual AJAX Studio 4.0 Training. Pages, Layers and Navigation. 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

lilah
Download Presentation

WaveMaker Visual AJAX Studio 4.0 Training

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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

More Related