An app is divided into multiple pages to segregate the functionality of the app. Various aspects of a Page are used to unite these segregated functionalities to form an app flow. In this document we will discuss:
Page Layouts help you design the structure of the page by demarcating the header, footer, navigation and one or more content columns. Based on the Page construction system WaveMaker provides different options for Page Layouts, which can be picked based on the interaction required for the app. Depending on the app platform – web or mobile, the layout will differ. Here we will be discussing web platform, for mobile platform refer here. Page
A layout can be selected at the time of Page Creation or later from the Change Layout option on the Workspace Toolbar.
A Page Layout has the following containers – a header, navigation bar, content, and footer. The content can have one, two or three columns. To change the layout of a page, simply click on the desired layout to see it take effect on the design canvas.
There are four Page Layout options:
- Blank Layout – without any header or a footer.
- Header, content, and footer: The content along with a header and a footer.
- Header, topnav, content and footer: The content along with a header, a footer, and a top navigation bar.
- Header, content, leftnav and footer: The content along with a header, a footer, and a left navigation bar.
- Header, topnav, leftnav, content, and footer: The content along with a header, a footer and a top and left navigation bar.
- Header, leftnav, content, rightnav and footer: The content along with a header, a footer and a left and right navigation bar.
- Header, topnav, leftnav, content, rightnav and footer: The content along with a header, a footer and a top, left and right navigation bar.
A typical page layout with header, footer, topnav, leftnav and rightnav has the following structure, as can be seen from the Page Structure for the selected page:
Widgets can be added to the content. The header, footer, top-nav, left and right panels are partial pages and can be customized using the edit button on each of the panels.
Note: WaveMaker automatically adjusts the layout rendering for mobile devices.
You can use the Container Widgets to arrange the widgets on a web page. Know more.
There are several ways for the user to move from one page to another. A Navigation Action is triggered when an event occurs. You can change what is displayed when an event occurs, for example:
- Button click – Use the button’s On click event to trigger a move to a new page.
- Grid selection – Use the grid’s On select event to trigger a navigation.
Navigation Action specifies exactly how the user should move from one page to another when an event occurs.
Navigation Action is a component you can add to your project and provide the following options:
- Page – Navigates to the specified page.
- Previous Page – Navigates to the previous page.
- Accordion – Navigates to the specified accordion of the specified page.
- Tab – Navigates to the specified tab of the specified page.
Navigation in the application happens using a Navigation Action. Whenever a page is created a corresponding gotoPage navigation action is generated or one can create the action manually.
Navigation can be to a page or to a component like a tab or accordion pane on a page.
Navigation Action can be invoked in two ways:
- Binding the Navigation Action to a Widget event – For example Button click – Use the button’s onClick event to trigger a Navigation Action to move to a new page or view.
Events provide a way for you to define the actions that take place when something occurs in your application. There are many events that occur within a WaveMaker application. The most common events are user interface events, such as when a user clicks a button. Events are also triggered when an editor’s value changes, and even when a Variable gets new data from the server. You have several options for specifying what will happen when a button is clicked.
- No Event: Take no action.
- New Action: For example, a help dialog automatically displays when a help button is clicked. Or the user clicks a Next Page button, and the Navigation Action you select for your event loads a new page.
- New Variable: For example, a user clicks a Search button. A Service is invoked whenever the button is pressed, causing the service to be executed and the data of the corresponding Variable is updated. Or the user clicks a Save button, and the corresponding Variable you select for your event will automatically write its current source data to the database.
- Stop Propagation: If applied for an event it stops event propagating to its parent.
Ex: – Button is present inside a container. Both ‘Container’ and ‘Button’ have click events and you don’t want to propagate click of the button to its parent ie. to trigger container click. You can add ‘Stop Propagation’ after the click of ‘Button’. With ‘Stop Propagation’ only ‘Button’ click is triggered. Without ‘Stop Propagation’ both click events will be triggered.
One exception is for ‘List’ widget as click on any widget inside list will trigger first the click of ‘List’ widget as it is being done in capturing stage.
For sake of convenience, the events are categorized as follows:
- Common events which are triggered by multiple actions. These include Change, Focus, Blur etc.
- Mouse Events which capture the mouse activity on your application. These include Click, Double Click, Mouse Enter, Mouse Leave etc.
- Touch Events which get triggered when running the app on a mobile or tablet or any other smart device. These events include: Swipe Up, Swipe Down, Swipe Left, Swipe Right, Pinch In, Pinch Out, etc.
- KeyBoard Events which capture the key strokes. These include Enter Key Press, etc.
- CallBack Events which are widget-specific special events. Like Record Delete, on Select, on Deselect for a grid widget; Before Records Update for Data Navigator; etc.
Multiple Event Handling
WaveMaker supports multi-event handling. One can assign a series of actions to be triggered by a single event. Click on the “+” next to the event name to add more actions. When you use a series of variables to trigger on an event ensure that you handle eventualities like one callback was a success and other failed.
We have seen how Page Layouts, Navigation, and Events help in defining the flow of the app. Check out these use cases to further your experience.
2. Design UI
- 2.1 Overview
- 2.2 Page Concepts
- 2.3 Project Shell
- 2.4 Page Artefacts
- 2.5 Themes