Menu
Home
Log in / Register
 
Home arrow Computer Science arrow Learn BlackBerry 10 App Development
< Prev   CONTENTS   Next >

AbsoluteLayout

AbsoluteLayout allows you to precisely set the X and Y coordinates of controls within a container. In practice, unless you are designing your UI for a very specific screen resolution and orientation, you should not use an absolute layout. As mentioned, the main advantage of the absolute layout is that you have complete control on positioning the UI elements. However, the major downside is that your UI will not gracefully handle different screen resolutions and orientations (there are cases, however, where using an absolute layout makes sense; for example, when you are designing a

custom control and need to position the UI elements precisely). Listing 4-4 shows you how to use an absolute layout for positioning a button on the screen.

Listing 4-4. Absolute Layout

Container {

layout: AbsoluteLayout {}

Button {

text: "Button"

layoutProperties: AbsoluteLayoutProperties { positionX: 100

positionY: 100

}

}

}

DockLayout

You can use a DockLayout in order to dock child controls to a specific area of the parent container. The child control's docking area is specified by its horizontalAlignment and verticalAlignment properties, as illustrated in Listing 4-5 and Figure 4-4.

Listing 4-5. Dock layout

Page {

Container {

layout: DockLayout {}

Button {

text: "b1"

}

Button {

text: "b2"

verticalAlignment: VerticalAlignment.Center

}

Button {

text: "b3"

horizontalAlignment: HorizontalAlignment.Center verticalAlignment: VerticalAlignment.Bottom

}

}

}

Figure 4-4. Dock layout

A DockLayout also has the following interesting characteristics:

n Controls can overlap (see Figure 4-5 and Figure 4-6). (The “z-order” determines which control is on top. Note that we used the overlapping property in the HelloCascades app from Chapter 1 in order to “hide” one image behind another.)

Figure 4-5. Dock layout with overlapping controls

n A DockLayout preserves the relative control positions if the screen orientation changes (see Figure 4-6).

Figure 4-6. Dock layout with overlapping controls

Finally, Listing 4-6 shows the QML document corresponding to Figure 4-5 and Figure 4-6.

Listing 4-6. Dock layout with overlapping controls

import bb.cascades 1.2

Page{

Container {

leftPadding: 20 rightPadding:20 topPadding: 20

bottomPadding: 20 layout: DockLayout {} ImageView {

horizontalAlignment: HorizontalAlignment.Right; imageSource:"asset:///swissalpsnight.png" preferredWidth: 600

}

ImageView {

horizontalAlignment: HorizontalAlignment.Center; verticalAlignment: VerticalAlignment.Center; imageSource:"asset:///swissalpsday.png" preferredWidth: 600

rotationZ: 10

}

TextField {

verticalAlignment: VerticalAlignment.Bottom;

}

}

}

 
Found a mistake? Please highlight the word and press Shift + Enter  
< Prev   CONTENTS   Next >
 
Subjects
Accounting
Business & Finance
Communication
Computer Science
Economics
Education
Engineering
Environment
Geography
Health
History
Language & Literature
Law
Management
Marketing
Philosophy
Political science
Psychology
Religion
Sociology
Travel