Learn how to design and navigate across pages and use rich themes to your WaveMaker apps.
In this section, you wil learn about page components and how you can customize it. You can choose a Page Layout for composition of Widgets or UI Elements.
A page is divided automatically into different areas, with the content of all areas except the main area, repeated across all pages of the app. This helps achieve UI consistency throughout the app, easily.
WaveMaker supports responsive design, i.e. the apps are rendered automatically based upon the device they are viewed on.
The responsiveness of apps is achieved using the 12-column grid layout defined by bootstrap. For more information, see Grid Layout.
Dragging-and-dropping of UI Components
Widgets are the building block for any application. WaveMaker Pages are built using the drag-n-drop approach by placing widgets in the corresponding responsive layout grids. Widgets enable users to interact with the App and can get their data (binding) from backend Services.
They can be dropped into the Grids or Containers, making UI well-aligned and ready for consumption.
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 upon the app platform the layout will differ.
Page Layout can be set at the time of Page Creation or can be changed from the Workspace Toolbar.
Each page can be designed by selecting an appropriate layout and arranging widgets in it which is suitable for web apps. For more information, see Responsive Web Page Layout.
Similarly for Mobile apps, each page can be designed by selecting an appropriate layout and arranging widgets in it. For more information, see Hybrid Mobile Page Layout.
Themes are style elements which work at the widget or UI component level. For more information, see Themes.
By default, Material Theme is set for Page and can be changed from the Workspace Toolbar.
Templates are editable pages with content pre-defined for the ease of UI development. For more information, see Page Templates.
Templates are selected at the time of Page Creation and cannot be changed later.