Designing Pages

Building a Page

To design a page in WaveMaker, you drag widgets from the Palette and arrange them in the Canvas. Widgets are the building blocks of your pages. The Palette provides many different types of widgets, such as text editors, grids, containers, pictures and so on. Once you drop a widget into the Page Builder, you can drag it around as you like.

Each Page always has a "top container" called the layoutBox. The layoutBox holds all the other widgets that you drop into the Page Builder. You cannot delete the layoutBox or drag a new one into the Page Builder, but you can apply padding, margins, backgrounds and other styling to the layoutBox, just as you would to any other container widget. Like other containers, the layoutBox has a layoutKind property which you can set to display the contents either horizontally (left-to-right) or vertically (top-to-bottom).

Many widgets can be used as containers for other widgets, so you can nest them one inside the other. The Panel widget is a generic container widget that it very useful in structuring widgets on a Page.

Each widget has its own set of properties that define how it looks and how it behaves. For descriptions of the most widgets and their properties, see Widget Documentation? or Foo?. Panel

For more on using widgets on your page, see Widgets.

Styling Pages

You can edit the style for an entire page in the CSS subtab under Source. However, sometimes the Page-defined styles are overridden:

• When you load a Page in a pageContainer widget in the another Page, the sub-Page inherits CSS from the Page that contains the pageContainer. So, if Page A is loaded in a pageContainer widget in Page B, then Page A inherits styles from Page B.
• Similarly, any styles that are set on the pageContainer widget itself will override original styles set for widgets within the loaded Page.
• Widgets inherit applicable styles from the Page (and from any other Parent Containers) but when you explicitly set styles for the child widget, you override those inherited styles.

To define styles at the application level, you can put CSS in the CSS section of the index.html file in the webapproot directory for the project. This will affect all pages in the application.