You are on page 1of 62

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 .

log(“Console Message”) 24 .Debugging on Device  Debug using Breakpoints  Or log messages C++: QML: qDebug()<<“Console message” console.

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

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

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 .

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

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

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

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

Bottom } 36 .StartScreen.qml Alignment example Button { horizontalAlignment: HorizontalAlignment.Left verticalAlignment: VerticalAlignment.

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

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

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

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

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

Importing a project 42 .

QML Components Group QML into Components  Project overview  Readable code  Reusable code 43 .

qml import bb.QML Components – Exercise  New file: StartScreen.qml  Move the content of your Page to StartScreen.0 Page { StartScreen {} } 44 .cascades 1.cascades in all QML files) // file: main.qml  (import bb.

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 .

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

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

QML Component as List Item // file: HighscoreListItem.0 Container { layout: StackLayout { orientation: LayoutOrientation.LeftToRight } Label { text: ListItemData.cascades 1.qml import bb.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 .

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

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

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

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

} } 59 .createObject()).Signals Button { text: "Do Something" onClicked: { console.push(secondPage.debug(“Click") nav.

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 .