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

Text Controls

Text is probably the most ubiquitous control in any UI. Cascades therefore gives you lots of flexibility in handling text, as well as its appearance. You can customize the text styles by creating your

own text style definitions. This section will review the three main text controls, which are Label,

TextField, and TextArea, and show you how to customize their corresponding text style.

Text Styles

You can customize a text control's appearance by setting its textStyle.base property, which is an instance of the TextStyle object. In practice, you will use a TextStyleDefinition attached object to create a new TextStyle instance (in other words, the TextStyleDefinition object is a factory for TextStyle objects).Using a TextStyleDefinition, you can customize visual attributes such as font

weight (light, normal, and bold), color, size, and alignment. When specifying a TextStyleDefinition, you will always start with a system default base, TextStyle, which gives you an initial set of attributes to work from. The SystemDefaults.TextStyles class gives you the following default text styles:

n SystemDefaults.TextStyles.BigText: The default text style for large text.

n SystemDefaults.TextStyles.BodyText: The default text style for body text.

n SystemDefaults.TextStyles.PrimaryText: The default text style for primary text.

n SystemDefaults.TextStyles.SmallText: The default text style for small text.

n SystemDefaults.TextStyles.SubtitleText: The default text style for subtitle text.

n SystemDefaults.TextStyles.TitleText: The default text style for title text. Listing 4-7 shows you how you can use the default system text styles with a Label.

Listing 4-7. System Text Styles

import bb.cascades 1.2 Page {

Container {

Label {

text: "This is big text"

textStyle.base: SystemDefaults.TextStyles.BigText

}

Label {

text: "This is title text"

textStyle.base: SystemDefaults.TextStyles.TitleText

}

Label {

text: "This is subtitle text"

textStyle.base: SystemDefaults.TextStyles.SubtitleText

}

Label {

text: "This is body text"

textStyle.base: SystemDefaults.TextStyles.BodyText

}

Label{

text: "This is primary text"

textStyle.base: SystemDefaults.TextStyles.PrimaryText

}

Label{

text: "This is small text"

textStyle.base: SystemDefaults.TextStyles.SmallText

}

}

}

Listing 4-8 shows you how to customize a text style using a TextStyleDefintion.

Listing 4-8. Custom Text Style

import bb.cascades 1.2 Page {

Container {

attachedObjects: [ TextStyleDefinition {

id: myStyle

base: SystemDefaults.TextStyles.BigText color: Color.DarkBlue

fontWeight: FontWeight.Bold

}

]

Label {

text: "Some bold text" textStyle.base: myStyle.style

}

}

}

The advantage of specifying a TextStyleDefinition object is that you will be able to reuse it throughout your UI without redefining text styles for each control.

Inline HTML and CSS

Besides using TextStyleDefinition objects for customizing text appearance, you can also resort to inline HTML and CSS. The supported HTML tags are: <a>, <b>, <br/>, <i>, <span>, <p>, <div>, <em>, and

<strong>. Listing 4-9 shows you how to apply inline HTML text styling to a label.

Listing 4-9. Custom Text Style

import bb.cascades 1.2

Page {

Label {

text: "<html><b>Cascades</b> is <i>awesome!</i></html>"

}

}

You can also embed a <style> tag inside <span> or <div> tags in order to apply CSS styling to your text, as shown in Listing 4-10.

Listing 4-10. CSS Styling

import bb.cascades 1.2

Page {

Label {

text: "<html><span>Cascades</span> is"+

"<span>awesome!</span>

</html>"

}

}

Note that not all CSS attributes are supported in style definitions, but you can rely on the following ones (for additional details on how to use the attributes, refer to one of the numerous online CSS tutorials; a good starting point is w3schools.com/css/):

n background-color: Sets the text background color.

n color: Sets the text color (for example: red, green, gray, etc…).

n direction: Sets the text direction (for example: ltr which is left to right or rtl which is right to left)

n font-family: Specifies the text font family (for example: font-family:"Courier New", Courier, monospace;). The font-family property should hold several font names as a fallback system. You should always start with the font you want and end with a generic family.

n font-size: Specifies the font size (for example: medium, large, x-large, xx-large).

n font-style: Specifies the font style (normal, italic, oblique).

n font-weight: Specifies the font weight (normal, bold, lighter, bolder, 100, 200, 300, 400, 500, 600, 700, 800, 900). A normal font weight is 400 and bold is 700.

n line-height: Specifies the height of a line of text.

n text-align: Specifies the text's horizontal alignment (left, right, center, justify).

n text-decoration: Specifies whether the text should be underlined or strike-through (none, underline, line-through).

n letter-spacing: Adjusts the space between letters in the text (see

w3schools.com/cssref/pr_text_letter-spacing.asp).

 
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