Log in / Register

Home arrow Computer Science arrow Learn BlackBerry 10 App Development
< Prev   CONTENTS   Next >


Controls provide the fundamental UI building blocks of Cascades applications. By learning how to use them effectively, you will be able to design shiny applications where information is presented to the user in a polished and clear manner. This chapter will review the most essential Cascades controls and show you how to use them in your own applications. Considering that you will build your UI in QML most of the time, I will use QML exclusively in this chapter (you can also build your

UI using C++, but that should rarely be the case in practice). UI best practices are another important topic that I will cover throughout the topics presented here. After having read this chapter, you will

n Understand how to use layouts in order to effectively arrange your application's controls on the screen.

n Have a broad perspective of the Cascades core set of controls that you can use in your own applications.

n Apply best practices when selecting controls and creating your UIs.


Control is the base class for all UI controls and contains common properties that you can set in order to specify the control's visual appearance on the screen:

n Preferred dimensions: A control's preferred dimensions is specified by the preferredWidth and preferredHeight properties. Some controls, such as TextField or Button, have a fixed height. Therefore, setting the preferredHeight will have no effect. The preferredWidth and preferredHeight properties are used by the parent container's layout to position the control (I will explain containers and layouts shortly). Note that the values are indications to the layout object and could be ignored altogether.

n Maximum and minimum dimensions: Just like preferred dimensions, you can also set maximum and minimum dimensions using the maxWidth, maxHeight, minWidth, and minHeight properties.

n Layout properties: You can further refine how a control is laid out by its parent container using the control's layoutProperties property. The value must match the parent container's layout object. For example, if the parent container's layout is a StackLayout, the corresponding settable layout property for a control is StackLayoutProperties (which defines the control's relative size to other controls using space quotas).

n Alignment: You can set a control's vertical and horizontal alignment within a container by setting its verticalAlignment and horizontalAlignment properties (the properties are taken into account only if the parent container uses a StackLayout or DockLayout). For example, using a stack layout, you can specify that the control will be vertically centered in the parent container by setting the control's verticalAlignment property to VerticalAlignment.Center. Note that the alignment property is taken into account only if its direction is perpendicular to the current layout direction (in other words, the control's vertical alignment in the previous example will be respected only if the parent container's stack layout orientation is left to right or right to left).

n Margins: Margins specify some extra space around the control. The corresponding properties are leftMargin, rightMargin, topMargin, and bottomMargin. The parent container's layout manager uses these values during layout.

n Padding: For controls such as Container, ListView, TextArea, and TextField, you can set a padding value, which specifies space between the control's edge and its children. (Note that this is different from margins, which specify space between adjacent controls in a container.) If you don't specify paddings for a container, the child controls will be positioned at the container's edges.

The best way to understand the effects of these properties on the UI's layout is to use the QML properties view under Momentics and play with the various parameters (see Figure 4-1, where a Container control has been selected).

Figure 4-1. QML properties view with a Container selected

Found a mistake? Please highlight the word and press Shift + Enter  
< Prev   CONTENTS   Next >
Business & Finance
Computer Science
Language & Literature
Political science