NDK UI/UX Basics using Cascades

The Game
Demo

Agenda
IDE introduction Layouting basics

Lists & list items

Screen navigation
3

Create your first app

NDK icon NDK start up script

Create your first app

Create your first app

Create your first app

Create your first app

Create your first app

10

Create your first app

11

Development mode

12

Create your first app

13

Create your first app

14

Create your first app

15

Create your first app

16

Create your first app

17

Preview

18

19

20

Debugging on Device
Debug using Breakpoints Or log messages

C++:
QML:

qDebug()<<Console message
console.log(Console Message)
24

Questions?

25

Core Controls

Standard UI components Pre-packaged design Available in QML and C++

26

Start screen
Controls covered: Page Container Button ImageView Layouts covered: DockLayout StackLayout

27

StartScreen.qml
import bb.cascades 1.0
Page { Container { Button { text: "Play" } ImageView { imageSource: "asset:///images/bg_turtle.png" } } }
28

StartScreen.qml

29

Layouts

UI that scales
Screen sizes Resolutions

Help with control positioning

StackLayout Relation to other Controls DockLayout Relation to the parent Container

30

Start screen
StackLayout:

Buttons

DockLayout:
Header Turtle

31

StartScreen.qml
Page { Container { layout: DockLayout { } ImageView { imageSource: "asset:///images/bg.png" } Button { text: "Play" } ImageView { imageSource: "asset:///images/bg_turtle.png" } } }

32

StartScreen.qml
Page { Container { layout: DockLayout { } ImageView { imageSource: "asset:///images/bg.png" } Button { text: "Play" } ImageView { imageSource: "asset:///images/bg_turtle.png" } } }

33

StartScreen.qml
Page { Container { layout: DockLayout {} ImageView { imageSource: "asset:///images/bg.png" } Container { // our added container. StackLayout is default Button { text: "Play" } ImageView { imageSource: "asset:///images/bg_turtle.png" } } } }

34

StartScreen.qml
Page { Container { layout: DockLayout {} ImageView { imageSource: "asset:///images/bg.png" } Container { // our added container. StackLayout is default Button { text: "Play" } ImageView { imageSource: "asset:///images/bg_turtle.png" } } } }

35

StartScreen.qml
Alignment example

Button { horizontalAlignment: HorizontalAlignment.Left verticalAlignment: VerticalAlignment.Bottom }

36

StartScreen.qml
... Container { layout: StackLayout {} horizontalAlignment: HorizontalAlignment.Center verticalAlignment: VerticalAlignment.Center Button { text: "Play" } ImageView { imageSource: "asset:///images/bg_turtle.png" } } ...
37

StartScreen.qml
... Container { layout: StackLayout {} horizontalAlignment: HorizontalAlignment.Center verticalAlignment: VerticalAlignment.Center Button { text: "Play" } ImageView { imageSource: "asset:///images/bg_turtle.png" } } ...
38

StartScreen.qml
import bb.cascades 1.0 Page { Container { layout: DockLayout {} ImageView { imageSource: "asset:///images/bg.png" } Container { horizontalAlignment: HorizontalAlignment.Center verticalAlignment: VerticalAlignment.Center Button { text: "Play" } } ImageView { horizontalAlignment: HorizontalAlignment.Left verticalAlignment: VerticalAlignment.Center imageSource: "asset:///images/bg_turtle.png" } } }

39

StartScreen.qml
import bb.cascades 1.0 Page { Container { layout: DockLayout {} ImageView { imageSource: "asset:///images/bg.png" } Container { horizontalAlignment: HorizontalAlignment.Center verticalAlignment: VerticalAlignment.Center Button { text: "Play" } } ImageView { horizontalAlignment: HorizontalAlignment.Left verticalAlignment: VerticalAlignment.Center imageSource: "asset:///images/bg_turtle.png" } } }

40

Start screen - Exercise

Try to replicate the screen to the right by using layouts, image and buttons
horizontalAlignment: HorizontalAlignment.Fill / HorizontalAlignment.Center / HorizontalAlignment.Left / HorizontalAlignment.Right verticalAlignment: VerticalAlignment.Fill / VerticalAlignmentt.Center / VerticalAlignmentt.Left / VerticalAlignment.Right
41

Importing a project

42

QML Components
Group QML into Components Project overview Readable code Reusable code

43

QML Components Exercise

New file: StartScreen.qml Move the content of your Page to StartScreen.qml (import bb.cascades in all QML files)
// file: main.qml import bb.cascades 1.0 Page { StartScreen {} }
44

High Score Screen

Label ListView ListItemComponents XmlDataModel

45

ListView
Highscore xml data model:
<root> <item name="Mattias" time="50000" moves="15"/> <item name="Olof" time="49800" moves="8"/> <item name="Shailesh" time="37500" moves="54"/> </root>

46

ListView
ListView { dataModel: XmlDataModel { source: "highscoredb/highscore.xml" } listItemComponents: [ ListItemComponent { type: "item" StandardListItem { title: ListItemData.name } } ] }
47

Custom List Item

... ListItemComponent { type: "item" Container { layout: StackLayout { orientation: LayoutOrientation.LeftToRight } Label { text: ListItemData.name } } } ...
48

QML Component as List Item

// file: HighscoreListItem.qml import bb.cascades 1.0 Container { layout: StackLayout { orientation: LayoutOrientation.LeftToRight } Label { text: ListItemData.name } }

49

QML Component as List Item

ListView { dataModel: XmlDataModel { source: "highscoredb/highscore.xml" } listItemComponents: [ ListItemComponent { type: "item" HighscoreListItem { } } ] }
50

Label layouting
List items

StackLayout spaceQuota
sQ = 1 sQ = 5 sQ = 2 sQ = 2

51

Label layouting
Container { layout: StackLayout { orientation: LayoutOrientation.LeftToRight } Label { layoutProperties: StackLayoutProperties { spaceQuota: 1 } } Label { layoutProperties: StackLayoutProperties { spaceQuota: 3 } }

52

HighScoreScreen - Exercise
Create a ListView with an XML data model and your own List Item

53

Navigation

push

push

pop

pop
54

NavigationPane
import bb.cascades 1.0 NavigationPane { Page { id: firstPage Container { Button { text: "Do Something" } } } }

55

Attached Objects
import bb.cascades 1.0 NavigationPane { Page { id: firstPage Container { Button { text: "Do Something" } } } attachedObjects: [ ... ] }

56

Attached Objects
attachedObjects: [ Page { id: secondPage ... }, Page { id: thirdPage ... } ]

57

ComponentDefinition
attachedObjects: [ ComponentDefinition { id: secondPage source: "MySecondPage.qml" }, ComponentDefinition { id: thirdPage source: "MyThirdPage.qml" }, ] secondPage.createObject()
58

Signals

Button { text: "Do Something"

onClicked: { console.debug(Click") nav.push(secondPage.createObject()); } }

59

NavigationPane - Exercise
Set up navigation between the two Pages you create in the previous exercises.

60

Summary
IDE introduction Layouting basics

Lists & list items

Screen navigation
61

Questions?

62

Thank You

Navigation continued

TabbedPane

Sheet

Side bar

Contextual menu/ 64 Action overflow menu

Core Controls
SegmentedControl ProgressIndicator ActivityIndicator DateTimePicker Slider ToggleButton WebView ForeignWindow

65