Programacion BlackBerry 10

NDK UI/UX Basics using Cascades

The Game
Demo

2

Agenda
 IDE introduction  Layouting basics

 Lists & list items
 Screen navigation
3

4

Create your first app
 NDK icon  NDK start up script

5

Create your first app

6

Create your first app

7

Create your first app

8

Create your first app

9

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