Programacion BlackBerry 10
62
NDK UI/UX Basics using Cascades
-
Upload
eury-martinez -
Category
Documents
-
view
22 -
download
2
description
Programacion BlackBerry 10
Transcript of 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++: qDebug()<<“Console message”
QML: 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
28
import bb.cascades 1.0 Page { Container { Button { text: "Play" } ImageView { imageSource: "asset:///images/bg_turtle.png" } } }
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
32
Page { Container { layout: DockLayout { } ImageView { imageSource: "asset:///images/bg.png" } Button { text: "Play" } ImageView { imageSource: "asset:///images/bg_turtle.png" } } }
StartScreen.qml
33
Page { Container { layout: DockLayout { } ImageView { imageSource: "asset:///images/bg.png" } Button { text: "Play" } ImageView { imageSource: "asset:///images/bg_turtle.png" } } }
StartScreen.qml
34
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" } } } }
StartScreen.qml
35
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" } } } }
StartScreen.qml
Alignment example
36
Button { horizontalAlignment: HorizontalAlignment.Left verticalAlignment: VerticalAlignment.Bottom }
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
39
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" } } }
StartScreen.qml
40
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" } } }
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)
44
// file: main.qml import bb.cascades 1.0 Page { StartScreen {} }
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
47
ListView { dataModel: XmlDataModel { source: "highscoredb/highscore.xml" } listItemComponents: [ ListItemComponent { type: "item" StandardListItem { title: ListItemData.name } } ] }
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
51
sQ = 1 sQ = 5 sQ = 2 sQ = 2
Label layouting
Container {
layout: StackLayout {
orientation: LayoutOrientation.LeftToRight
}
Label {
layoutProperties: StackLayoutProperties {
spaceQuota: 1
}
}
Label {
layoutProperties: StackLayoutProperties {
spaceQuota: 3
}
}
52
HighScoreScreen - Exercise
53
Create a ListView with an XML data model and your own List Item
Navigation
54
push push
pop pop
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
64 TabbedPane Side bar Sheet
Contextual menu/
Action overflow menu
Core Controls
65
SegmentedControl
ProgressIndicator
ActivityIndicator
DateTimePicker
Slider
ToggleButton
WebView
ForeignWindow
…
