The Page Builder is a tool in AppBase for designing pages to use in your application. Using drag-and-drop and wizards, you can design complex pages and modify the page's markup if needed. 

When entering the Page Builder, the page looks very similar to this:

Data Sources tab

The Data Source tab holds all the data sources that interact with your page. To add a data source, click on the arrow on the Add button. To edit a data source, select it and click on Settings in the Properties panel. Data Sources allow your page to interact with other data, like business objects and other pages.

Sections tab

The Sections tab is a good place from which to navigate among the various panels within your page. Clicking on a panel will make its components appear on the Design surface.

DOM tab

All new pages come pre-populated with the following four components 

  • Head1 - this corresponds with the <head> tags of any HTML page
  • PageManager - this manages custom C# code and resources such as the JavaScript navigation library
  • ResourceManager1 - this manages the following listeners
    • AjaxRequestComplete
    • AjaxRequestExcption
    • BeforeAjaxRequest
    • DocumentReady
    • TextResize
    • WindowResize
    • WindowScroll
    • WindowUpload
  • vwViewPort1 - all of the UI components, such as panels, textfields, and buttons are arranged within the ViewPort in a folder structure

All of a page's stores can also be found here.

Design surface

The Design surface is the core of the visual page builder. Drag page elements onto the design surface, arrange elements on the design surface and delete them from the design surface.

Preview surface

The preview displays the web page with live data. Across the top of the screen, you can select the environment in which you will see this page. 

Source surface

The source surface holds all the source code that is generated to create the page. To customize a page beyond the capabilities of the page builder drag and drop wizard it is possible to edit this code.

Toolbox

The Toolbox displays all the elements that can be added to a particular container, such as a panel or a top bar.

For more information about these elements and additional ones, see

Properties

The Properties panel allows for the configuration of settings, listeners, data bindings, etc. 

  • No labels