TextLabel control

SCADE 2.0 - Working with Labels

📘

Sourcecode

Please see the UgTextLabelDemo project for the source code created in this chapter. See Installing examples for information on how to download the examples.

Introduction

The text label control is used to display text. We support a variety of functionality. Some important aspects in respect to text label are:

  • We support TTF (true type fonts) for the label's font only. This make sure that the look and feel across platforms is identical
  • Our text label control wraps the respective iOS (UILabe) and Android (TextView) controls

General properties

Basic properties of TextLabel control are displayed in the General section

PropertyExplanation_Comment
NameName/ID of the text labelUse standard naming scheme for any control. We use camelCase starting with lb, i.e. lbLastName
AccessibilityProvides Accessibility shortcutSpecify the word that should be read out if VoiceOver is enabled

See [Accessibility]
TextThe text that is displayed on the screen
BaselineType SCDWidgetsBaselineAlignment

Vertical arrangement of text line. Supported values are
middle
alphabetic
* hanging
More information can be found here https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/alignment-baseline
Text alignmentType SCDLayoutHorizontalAlignment


left, left aligned with the area covered by the label control
center, centered within the area covered by the label control
* right, right aligned within the area covered by the label control
If the wrap text option is used, these settings will have no affect as the area covered by the label will wrap around the text and the alignment value will make no visible difference
EnableIf control is enabled or not
VisibleIf control is visible or not
Wrap TextIf Wrap Text is enabled, the text label's size shrinks to the minimal size so that it tightly wraps the text
MultilineIf enabled, text is displayed across multiple lines depending on the value of the text For iOS, we use NSLineBreakMode.byWordWrapping

For Android, we use WordWrapping

API

Here we set the text alignment and baseline programmatically.

import ScadeKit

class MainPageAdapter: SCDLatticePageAdapter {

	var label1 : SCDWidgetsLabel!
  
	// page adapter initialization
	override func load(_ path: String) {		
		super.load(path)
		
		// Print label properties
		getTextLabelVariables(label:self.label1)
		
		// A little bit more complicated API to set the style. We will simplify it shortly
		let style = SCDWidgetsTextStyle()
		let textstyle = label1.getStyle(style.eClass()) as! SCDWidgetsTextStyle
		
		// Align text center
		textstyle.horizontalAlignment = SCDLayoutHorizontalAlignment.center
		textstyle.baselineAlignment = SCDWidgetsBaselineAlignment.alphabetic
	}
	
	override init() {
		self.horizontalAlignment = SCDLayoutHorizontalAlignment.left
	}
	
	func getTextLabelVariables(label:SCDWidgetsLabel) {
		
		print("name \(label.name)")
		print("text \(label.text)")
		print("isEnabled : \(label.isEnable)")
		print("isVisible : \(label.isVisible)")
		print("isMultiline : \(label.isMultiline)")
		print("isWrapText : \(label.isWrapText)")
		print("label.drawing.accessibilityLabel : \(label.drawing.accessibilityLabel)")
	}
  ...
}

Font Properties

The font is selected through the IDE and then copied into the mobile app project. The font properties are pretty self explanatory: You can set some font properties dynamically:

func setFontProperties() {
	let style = SCDWidgetsFontStyle()
	let fontstyle = label1.getStyle(style.eClass()) as! SCDWidgetsFontStyle
	fontstyle.isBold = true
	fontstyle.isItalic = true
	fontstyle.isLineThrough = true
 }