App Maker's page editor is an easy, visual way to build an interface for your apps. Drag widgets onto the canvas, bind them to data, and you've got a UI.
The page editor has three main parts—the canvas where you construct your UI, a Widgets palette with all the UI elements you need, and a right sidebar that lets you control the details.
The canvas lets you position and adjust components called widgets that make up your app's UI. The canvas is WYSIWYG ("what you see is what you get"), except for databound widget properties that render with placeholders until you publish or preview the app.
As you add widgets to the canvas, you can resize the canvas to see how your app will appear for different screen sizes. For more information, see Styling for different screen sizes.
Drag widgets from the Widgets palette onto the canvas. Some widgets have wizards that help you to bind them to data. Some data binding is automatic, if the default datasource is set for a page.
The right sidebar has three different tools that you need to build your UI:
|Property Editor||A list of properties that determine how a selected widget interacts with data, responds to events, loads on the page, and more.|
|Style Editor||A panel that controls the appearance of widgets on the canvas. Select a built-in theme and create your own styles with CSS.|
|Outline||A list that displays relationships between the page's widgets and allows you to hide widgets and lock them in position.|
Data binding with the Property Editor
The Property Editor lets you edit properties that control most aspects of a widget—where it's placed, what it displays, and even how it behaves. For example, label widgets have a
text property that determines the text they display.
There are three ways to set a property. When you can set a property in more than one way, click the drop-down list iconto select how to set the property.
Static value ()—Static values are convenient, because you can enter them directly, but they can't change as a user interacts with your app.
Binding expression()—Bindings expressions are powerful, as they let you connect your UI to your data models, allowing them to dynamically respond as data is entered or edited.
Choice ()—Choose among preset options or define (and choose) one or more options. For example, select a datasource for a page or add a list of class names to a
Canvas quick tips
Here are some tips and tricks when working with the canvas:
Hold shift and drag the mouse to select multiple widgets.
With multiple widgets selected, you can move them as a group, edit shared properties, and more.
Right-click the widgets or the canvas to bring up a context-sensitive menu.
Hold control while rearranging widgets to temporarily disable the canvas snap-to alignment guidelines.
Use arrow keys to move a widget one pixel at a time.