Programacion BlackBerry 10
-
Upload
eury-martinez -
Category
Documents
-
view
23 -
download
2
description
Transcript of Programacion BlackBerry 10
![Page 1: Programacion BlackBerry 10](https://reader034.fdocuments.net/reader034/viewer/2022051515/5540450f4a7959e10e8b49c6/html5/thumbnails/1.jpg)
NDK UI/UX Basics using Cascades
![Page 2: Programacion BlackBerry 10](https://reader034.fdocuments.net/reader034/viewer/2022051515/5540450f4a7959e10e8b49c6/html5/thumbnails/2.jpg)
The Game
Demo
2
![Page 3: Programacion BlackBerry 10](https://reader034.fdocuments.net/reader034/viewer/2022051515/5540450f4a7959e10e8b49c6/html5/thumbnails/3.jpg)
Agenda
IDE introduction
Layouting basics
Lists & list items
Screen navigation
3
![Page 4: Programacion BlackBerry 10](https://reader034.fdocuments.net/reader034/viewer/2022051515/5540450f4a7959e10e8b49c6/html5/thumbnails/4.jpg)
4
![Page 5: Programacion BlackBerry 10](https://reader034.fdocuments.net/reader034/viewer/2022051515/5540450f4a7959e10e8b49c6/html5/thumbnails/5.jpg)
Create your first app
NDK icon
NDK start up script
5
![Page 6: Programacion BlackBerry 10](https://reader034.fdocuments.net/reader034/viewer/2022051515/5540450f4a7959e10e8b49c6/html5/thumbnails/6.jpg)
Create your first app
6
![Page 7: Programacion BlackBerry 10](https://reader034.fdocuments.net/reader034/viewer/2022051515/5540450f4a7959e10e8b49c6/html5/thumbnails/7.jpg)
Create your first app
7
![Page 8: Programacion BlackBerry 10](https://reader034.fdocuments.net/reader034/viewer/2022051515/5540450f4a7959e10e8b49c6/html5/thumbnails/8.jpg)
Create your first app
8
![Page 9: Programacion BlackBerry 10](https://reader034.fdocuments.net/reader034/viewer/2022051515/5540450f4a7959e10e8b49c6/html5/thumbnails/9.jpg)
Create your first app
9
![Page 10: Programacion BlackBerry 10](https://reader034.fdocuments.net/reader034/viewer/2022051515/5540450f4a7959e10e8b49c6/html5/thumbnails/10.jpg)
Create your first app
10
![Page 11: Programacion BlackBerry 10](https://reader034.fdocuments.net/reader034/viewer/2022051515/5540450f4a7959e10e8b49c6/html5/thumbnails/11.jpg)
Create your first app
11
![Page 12: Programacion BlackBerry 10](https://reader034.fdocuments.net/reader034/viewer/2022051515/5540450f4a7959e10e8b49c6/html5/thumbnails/12.jpg)
Development mode
12
![Page 13: Programacion BlackBerry 10](https://reader034.fdocuments.net/reader034/viewer/2022051515/5540450f4a7959e10e8b49c6/html5/thumbnails/13.jpg)
Create your first app
13
![Page 14: Programacion BlackBerry 10](https://reader034.fdocuments.net/reader034/viewer/2022051515/5540450f4a7959e10e8b49c6/html5/thumbnails/14.jpg)
Create your first app
14
![Page 15: Programacion BlackBerry 10](https://reader034.fdocuments.net/reader034/viewer/2022051515/5540450f4a7959e10e8b49c6/html5/thumbnails/15.jpg)
Create your first app
15
![Page 16: Programacion BlackBerry 10](https://reader034.fdocuments.net/reader034/viewer/2022051515/5540450f4a7959e10e8b49c6/html5/thumbnails/16.jpg)
Create your first app
16
![Page 17: Programacion BlackBerry 10](https://reader034.fdocuments.net/reader034/viewer/2022051515/5540450f4a7959e10e8b49c6/html5/thumbnails/17.jpg)
Create your first app
17
![Page 18: Programacion BlackBerry 10](https://reader034.fdocuments.net/reader034/viewer/2022051515/5540450f4a7959e10e8b49c6/html5/thumbnails/18.jpg)
Preview
18
![Page 19: Programacion BlackBerry 10](https://reader034.fdocuments.net/reader034/viewer/2022051515/5540450f4a7959e10e8b49c6/html5/thumbnails/19.jpg)
19
![Page 20: Programacion BlackBerry 10](https://reader034.fdocuments.net/reader034/viewer/2022051515/5540450f4a7959e10e8b49c6/html5/thumbnails/20.jpg)
20
![Page 21: Programacion BlackBerry 10](https://reader034.fdocuments.net/reader034/viewer/2022051515/5540450f4a7959e10e8b49c6/html5/thumbnails/21.jpg)
Debugging on Device
Debug using Breakpoints
Or log messages
C++: qDebug()<<“Console message”
QML: console.log(“Console Message”)
24
![Page 22: Programacion BlackBerry 10](https://reader034.fdocuments.net/reader034/viewer/2022051515/5540450f4a7959e10e8b49c6/html5/thumbnails/22.jpg)
Questions?
25
![Page 23: Programacion BlackBerry 10](https://reader034.fdocuments.net/reader034/viewer/2022051515/5540450f4a7959e10e8b49c6/html5/thumbnails/23.jpg)
Core Controls
Standard UI components
Pre-packaged design
Available in QML and C++
26
![Page 24: Programacion BlackBerry 10](https://reader034.fdocuments.net/reader034/viewer/2022051515/5540450f4a7959e10e8b49c6/html5/thumbnails/24.jpg)
Start screen
Controls covered:
Page
Container
Button
ImageView
Layouts covered:
DockLayout
StackLayout
27
![Page 25: Programacion BlackBerry 10](https://reader034.fdocuments.net/reader034/viewer/2022051515/5540450f4a7959e10e8b49c6/html5/thumbnails/25.jpg)
StartScreen.qml
28
import bb.cascades 1.0 Page { Container { Button { text: "Play" } ImageView { imageSource: "asset:///images/bg_turtle.png" } } }
![Page 26: Programacion BlackBerry 10](https://reader034.fdocuments.net/reader034/viewer/2022051515/5540450f4a7959e10e8b49c6/html5/thumbnails/26.jpg)
StartScreen.qml
29
![Page 27: Programacion BlackBerry 10](https://reader034.fdocuments.net/reader034/viewer/2022051515/5540450f4a7959e10e8b49c6/html5/thumbnails/27.jpg)
Layouts
UI that scales
Screen sizes
Resolutions
Help with control positioning
StackLayout – Relation to other Controls
DockLayout – Relation to the parent Container
30
![Page 28: Programacion BlackBerry 10](https://reader034.fdocuments.net/reader034/viewer/2022051515/5540450f4a7959e10e8b49c6/html5/thumbnails/28.jpg)
Start screen
StackLayout:
Buttons
DockLayout:
Header
Turtle
31
![Page 29: Programacion BlackBerry 10](https://reader034.fdocuments.net/reader034/viewer/2022051515/5540450f4a7959e10e8b49c6/html5/thumbnails/29.jpg)
StartScreen.qml
32
Page { Container { layout: DockLayout { } ImageView { imageSource: "asset:///images/bg.png" } Button { text: "Play" } ImageView { imageSource: "asset:///images/bg_turtle.png" } } }
![Page 30: Programacion BlackBerry 10](https://reader034.fdocuments.net/reader034/viewer/2022051515/5540450f4a7959e10e8b49c6/html5/thumbnails/30.jpg)
StartScreen.qml
33
Page { Container { layout: DockLayout { } ImageView { imageSource: "asset:///images/bg.png" } Button { text: "Play" } ImageView { imageSource: "asset:///images/bg_turtle.png" } } }
![Page 31: Programacion BlackBerry 10](https://reader034.fdocuments.net/reader034/viewer/2022051515/5540450f4a7959e10e8b49c6/html5/thumbnails/31.jpg)
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" } } } }
![Page 32: Programacion BlackBerry 10](https://reader034.fdocuments.net/reader034/viewer/2022051515/5540450f4a7959e10e8b49c6/html5/thumbnails/32.jpg)
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" } } } }
![Page 33: Programacion BlackBerry 10](https://reader034.fdocuments.net/reader034/viewer/2022051515/5540450f4a7959e10e8b49c6/html5/thumbnails/33.jpg)
StartScreen.qml
Alignment example
36
Button { horizontalAlignment: HorizontalAlignment.Left verticalAlignment: VerticalAlignment.Bottom }
![Page 34: Programacion BlackBerry 10](https://reader034.fdocuments.net/reader034/viewer/2022051515/5540450f4a7959e10e8b49c6/html5/thumbnails/34.jpg)
StartScreen.qml
...
Container {
layout: StackLayout {}
horizontalAlignment: HorizontalAlignment.Center
verticalAlignment: VerticalAlignment.Center
Button {
text: "Play"
}
ImageView {
imageSource: "asset:///images/bg_turtle.png"
}
}
...
37
![Page 35: Programacion BlackBerry 10](https://reader034.fdocuments.net/reader034/viewer/2022051515/5540450f4a7959e10e8b49c6/html5/thumbnails/35.jpg)
StartScreen.qml
...
Container {
layout: StackLayout {}
horizontalAlignment: HorizontalAlignment.Center
verticalAlignment: VerticalAlignment.Center
Button {
text: "Play"
}
ImageView {
imageSource: "asset:///images/bg_turtle.png"
}
}
...
38
![Page 36: Programacion BlackBerry 10](https://reader034.fdocuments.net/reader034/viewer/2022051515/5540450f4a7959e10e8b49c6/html5/thumbnails/36.jpg)
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" } } }
![Page 37: Programacion BlackBerry 10](https://reader034.fdocuments.net/reader034/viewer/2022051515/5540450f4a7959e10e8b49c6/html5/thumbnails/37.jpg)
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" } } }
![Page 38: Programacion BlackBerry 10](https://reader034.fdocuments.net/reader034/viewer/2022051515/5540450f4a7959e10e8b49c6/html5/thumbnails/38.jpg)
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
![Page 39: Programacion BlackBerry 10](https://reader034.fdocuments.net/reader034/viewer/2022051515/5540450f4a7959e10e8b49c6/html5/thumbnails/39.jpg)
Importing a project
42
![Page 40: Programacion BlackBerry 10](https://reader034.fdocuments.net/reader034/viewer/2022051515/5540450f4a7959e10e8b49c6/html5/thumbnails/40.jpg)
QML Components
Group QML into Components
Project overview
Readable code
Reusable code
43
![Page 41: Programacion BlackBerry 10](https://reader034.fdocuments.net/reader034/viewer/2022051515/5540450f4a7959e10e8b49c6/html5/thumbnails/41.jpg)
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 {} }
![Page 42: Programacion BlackBerry 10](https://reader034.fdocuments.net/reader034/viewer/2022051515/5540450f4a7959e10e8b49c6/html5/thumbnails/42.jpg)
High Score Screen
Label
ListView
ListItemComponents
XmlDataModel
45
![Page 43: Programacion BlackBerry 10](https://reader034.fdocuments.net/reader034/viewer/2022051515/5540450f4a7959e10e8b49c6/html5/thumbnails/43.jpg)
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
![Page 44: Programacion BlackBerry 10](https://reader034.fdocuments.net/reader034/viewer/2022051515/5540450f4a7959e10e8b49c6/html5/thumbnails/44.jpg)
ListView
47
ListView { dataModel: XmlDataModel { source: "highscoredb/highscore.xml" } listItemComponents: [ ListItemComponent { type: "item" StandardListItem { title: ListItemData.name } } ] }
![Page 45: Programacion BlackBerry 10](https://reader034.fdocuments.net/reader034/viewer/2022051515/5540450f4a7959e10e8b49c6/html5/thumbnails/45.jpg)
Custom List Item
...
ListItemComponent {
type: "item"
Container {
layout: StackLayout {
orientation: LayoutOrientation.LeftToRight
}
Label {
text: ListItemData.name
}
}
}
...
48
![Page 46: Programacion BlackBerry 10](https://reader034.fdocuments.net/reader034/viewer/2022051515/5540450f4a7959e10e8b49c6/html5/thumbnails/46.jpg)
QML Component as List Item
// file: HighscoreListItem.qml
import bb.cascades 1.0
Container {
layout: StackLayout {
orientation: LayoutOrientation.LeftToRight
}
Label {
text: ListItemData.name
}
}
49
![Page 47: Programacion BlackBerry 10](https://reader034.fdocuments.net/reader034/viewer/2022051515/5540450f4a7959e10e8b49c6/html5/thumbnails/47.jpg)
QML Component as List Item
ListView {
dataModel: XmlDataModel {
source: "highscoredb/highscore.xml"
}
listItemComponents: [
ListItemComponent {
type: "item"
HighscoreListItem {
}
}
]
} 50
![Page 48: Programacion BlackBerry 10](https://reader034.fdocuments.net/reader034/viewer/2022051515/5540450f4a7959e10e8b49c6/html5/thumbnails/48.jpg)
Label layouting
List items
StackLayout
spaceQuota
51
sQ = 1 sQ = 5 sQ = 2 sQ = 2
![Page 49: Programacion BlackBerry 10](https://reader034.fdocuments.net/reader034/viewer/2022051515/5540450f4a7959e10e8b49c6/html5/thumbnails/49.jpg)
Label layouting
Container {
layout: StackLayout {
orientation: LayoutOrientation.LeftToRight
}
Label {
layoutProperties: StackLayoutProperties {
spaceQuota: 1
}
}
Label {
layoutProperties: StackLayoutProperties {
spaceQuota: 3
}
}
52
![Page 50: Programacion BlackBerry 10](https://reader034.fdocuments.net/reader034/viewer/2022051515/5540450f4a7959e10e8b49c6/html5/thumbnails/50.jpg)
HighScoreScreen - Exercise
53
Create a ListView with an XML data model and your own List Item
![Page 51: Programacion BlackBerry 10](https://reader034.fdocuments.net/reader034/viewer/2022051515/5540450f4a7959e10e8b49c6/html5/thumbnails/51.jpg)
Navigation
54
push push
pop pop
![Page 52: Programacion BlackBerry 10](https://reader034.fdocuments.net/reader034/viewer/2022051515/5540450f4a7959e10e8b49c6/html5/thumbnails/52.jpg)
NavigationPane
import bb.cascades 1.0
NavigationPane {
Page {
id: firstPage
Container {
Button {
text: "Do Something"
}
}
}
}
55
![Page 53: Programacion BlackBerry 10](https://reader034.fdocuments.net/reader034/viewer/2022051515/5540450f4a7959e10e8b49c6/html5/thumbnails/53.jpg)
Attached Objects
import bb.cascades 1.0
NavigationPane {
Page {
id: firstPage
Container {
Button {
text: "Do Something"
}
}
}
attachedObjects: [
...
]
} 56
![Page 54: Programacion BlackBerry 10](https://reader034.fdocuments.net/reader034/viewer/2022051515/5540450f4a7959e10e8b49c6/html5/thumbnails/54.jpg)
Attached Objects
attachedObjects: [
Page {
id: secondPage
...
},
Page {
id: thirdPage
...
}
]
57
![Page 55: Programacion BlackBerry 10](https://reader034.fdocuments.net/reader034/viewer/2022051515/5540450f4a7959e10e8b49c6/html5/thumbnails/55.jpg)
ComponentDefinition
attachedObjects: [
ComponentDefinition {
id: secondPage
source: "MySecondPage.qml"
},
ComponentDefinition {
id: thirdPage
source: "MyThirdPage.qml"
},
]
secondPage.createObject()
58
![Page 56: Programacion BlackBerry 10](https://reader034.fdocuments.net/reader034/viewer/2022051515/5540450f4a7959e10e8b49c6/html5/thumbnails/56.jpg)
Signals
Button {
text: "Do Something"
onClicked: {
console.debug(“Click")
nav.push(secondPage.createObject());
}
}
59
![Page 57: Programacion BlackBerry 10](https://reader034.fdocuments.net/reader034/viewer/2022051515/5540450f4a7959e10e8b49c6/html5/thumbnails/57.jpg)
NavigationPane - Exercise
Set up navigation
between the two
Pages you create
in the previous
exercises.
60
![Page 58: Programacion BlackBerry 10](https://reader034.fdocuments.net/reader034/viewer/2022051515/5540450f4a7959e10e8b49c6/html5/thumbnails/58.jpg)
Summary
IDE introduction
Layouting basics
Lists & list items
Screen navigation
61
![Page 59: Programacion BlackBerry 10](https://reader034.fdocuments.net/reader034/viewer/2022051515/5540450f4a7959e10e8b49c6/html5/thumbnails/59.jpg)
Questions?
62
![Page 60: Programacion BlackBerry 10](https://reader034.fdocuments.net/reader034/viewer/2022051515/5540450f4a7959e10e8b49c6/html5/thumbnails/60.jpg)
Thank You
![Page 61: Programacion BlackBerry 10](https://reader034.fdocuments.net/reader034/viewer/2022051515/5540450f4a7959e10e8b49c6/html5/thumbnails/61.jpg)
Navigation continued
64 TabbedPane Side bar Sheet
Contextual menu/
Action overflow menu
![Page 62: Programacion BlackBerry 10](https://reader034.fdocuments.net/reader034/viewer/2022051515/5540450f4a7959e10e8b49c6/html5/thumbnails/62.jpg)
Core Controls
65
SegmentedControl
ProgressIndicator
ActivityIndicator
DateTimePicker
Slider
ToggleButton
WebView
ForeignWindow
…