Introducing Cascades: the BlackBerry 10 native framework - KÁMEL LAJILI @KLAJILI Developer ...

Introducing Cascades: the
BlackBerry 10 native framework
KÁMEL LAJILI
BlackBerry Developer Evangelist

KLAJILI@BLACKBERRY.COM
@KLAJILI
HTTP://KLAJILI.COM
BBM Channel: C002BF0A8
                                  1

Re-designed.
Re-engineered.
Re-invented.

Z10 Launched on January 30th, 2013

November 12, 2013   5
                        5

November 12, 2013   6
                                                        6

What you get

               Fact: 80% of BlackBerry’s
               >78M users are consumers
               many female between 15-30

BlackBerry 10
SDKs

 C++/Qt      C/C++      HTML5 BlackBerry®    ActionScript     Java
Cascades   Native SDK    WebWorks™          Adobe® AIR®     Android™
                                                            Runtime

THE QNX
NEUTRINO RTOS

Questionable reliability
Traditional monolithic architecture
• Model for most OSes available today like                  App                  App
  Windows, Linux, Android
                                                                            File
                                                                            system

• OS contains tremendous amount of functionality
                                                   App             Monolithic             App
  with unrestricted CPU privileges                       Network      OS         Driver
                                                          stack

• A fault in one OS component can damage any                        Multimedia
                                                                      stack
  other, leading to system-wide corruption
                                                           App                   App
  – System reliability is as good as your worst
    driver developer
  – Reboot is only recovery possible

Mission-critical reliability
QNX microkernel architecture
• Microkernel minimizes execution with
                                                           App                  App
  unrestricted “kernel” CPU privileges
                                                                           File
• All processes run in isolated process space                              system

  – Includes drivers, file systems, stacks                        Micro-
                                                  App                                   App
  – All QNX processes are “applications”                Network   kernel       Driver
                                                         stack

• Faults are contained so that they only affect                   Multimedia
                                                                    stack
  the faulty component
  – Failed components can be dynamically                  App                  App
    recovered while the system continues to
    operate

Native SDK
OSS & Developer Experience
     Cascades Developers   QtGui Developers   Game Developers

       UI

                                    QtGui
                                   QtQuick

            BPS

Cascades SDK
Out-of-the-Box Elegance

Mature C++ application framework
Good APIs
Signals and Slots
Many help classes
QML
QtGui Cascades

C++ or QML                                          C++   QML

You can choose!

No difference between UI created in QML or C++

They can be combined
   Typically, UI in QML and business logic in C++

QML supports JavaScript for signal handling

Cascades SDK
Hello World
import bb.cascades 1.0

Page {
    content: Label {
        text: "Hello World"
    }
}

Cascades SDK
Hello World

Page* root = new Page;
Label* label = Label::create()
                .text("Hello World");
root->setContent(label);
Application::instance()->setScene(root);

What is QML?

   “Qt Meta Language”   Label {
                            id: myLabel
   Declarative             text: “Hello Orlando”
   JavaScript           }

   Tooling friendly
                         “Label” – Element
   Designer friendly    “id”, “text” - Properties

                                      20

60 FPS!

App logic                                                 UI in separate thread
                                                    28°
                                                                   Cascades

       Photos by rumpleteaser and whologwy Flickr

Scene Graph

                Root
              Container

                                           RotationZ
                           Hello World     Scale
                                           Opacity

                          Container

                                  Text: “Hello World”

Core Controls

 Label           Checkbox           Text field        Date/time picker
                Radio group
                              Button, Toggle button     ImageView
                                Slider, Text area

Custom controls

Coding Demo: Hello World, pure QML

Events

Qt uses signals & slots paradigm

Cascades events are mapped to Qt signals

Handling Touch Events in QML
ImageView {
              imageSource: "asset:///images/cow.png"
              verticalAlignment: VerticalAlignment.Center
              horizontalAlignment: HorizontalAlignment.Center

              onTouch: {
                  if (event.isDown()) {
                      scaleX = 2
                      scaleY = 2
                      rotationZ = 45
                  } else if (event.isUp()) {
                      scaleX = 1
                      scaleY = 1
                      rotationZ = 0
                  }
              }
       }

Handling Touch Events in C++
               ImageView {
                        objectName: "cow_iv“
                        imageSource: "asset:///images/cow.png"
                        verticalAlignment: VerticalAlignment.Center
                        horizontalAlignment: HorizontalAlignment.Center
                        rotationZ: 360*text_rotation.immediateValue * turbo
                      }

               #include 

               private slots:
                       void touched(bb::cascades::TouchEvent* t);
               private:
                   bb::cascades::ImageView* m_pCow_iv;

Handling Touch Events in C++
m_pCow_iv = new ImageView();
m_pCow_iv = root->findChild("cow_iv");
QObject::connect(
         m_pCow_iv,
         SIGNAL(touch(bb::cascades::TouchEvent*)),
         this,
         SLOT(touched(bb::cascades::TouchEvent*)));

                            void ApplicationUI::touched(bb::cascades::TouchEvent* t)
                            {
                                     if(t->isDown()){
                                               m_pCow_iv->setScale(2);
                                               m_pCow_iv->setRotationZ(45);
                                     }
                                     else if(t->isUp()){
                                               m_pCow_iv->setScale(1);
                                               m_pCow_iv->setRotationZ(0);
                                     }
                            }

Animations
 Any Cascades UI element can be
  animated

 Animations are “running” on the
  engine thread

 Implicit animations, Explicit animations

Lesson 3:
 Explicit Animations

                       32

Grouped Animation
             SequentialAnimation {
                id: turner
                repeatCount: AnimationRepeatCount.Forever
                animations: [
                   RotateTransition {
                      fromAngleZ: 0
                      toAngleZ: 90
                      duration: 1000
                   },
                RotateTransition {
                      fromAngleZ: 90
                      toAngleZ: 0
                      duration: 1000
                   }
                ]
             }

     0 ms                  1000 ms                          2000 ms

Easing Curves
ParallelAnimation {
   id: bouncer
   repeatCount: AnimationRepeatCount.Forever
   animations: [
      TranslateTransition {
         fromY: 0
         toY: 500
         duration: 2000
         easingCurve: StockCurve.DoubleBounceOut
      },
      TranslateTransition {
         fromX: 0
         toX: 300
         duration: 1000
         easingCurve: StockCurve.QuarticOut
      }
   ]
}

Coding Demo: Cascades Cookbook App

The Invocation Framework

    Apps can use the Invocation Framework
     to improve user’s flow
     •   Launching Core and 3rd party Apps
     •   Registering URIs and MIME types
     •   Cards and content viewers

                                             36

Invocation Framework
Unbound Invocation

                                              I can open
                                              .doc files
     I need to open
     this .doc file.
        Anyone?

                                              I can open
                                              .doc files

                       Invocation Framework   I can open
                                               .png files

                                                            38

Invoke Basics

 Client
     Initiates the invocation
 Target
     Handles the invocation
 Action
     Identifies the action to be performed
 Data
     The data to be acted on

                                              39

Invocation Framework
Cards

 Embeds a Screen from Target
     Instead of launching the full app
 No App Grid presence
 Supports peeking
     A leap ahead of the competition
     BlackBerry 10 Flow at its best!
 Invoked in the same way!

                                          40

Invocation Framework
Card Styles

 Three styles
     Picker
     Composer
     Previewer

 Determines
     Peek behavior
     Transition style

                         41

Coding Demo: Using the Invocation Framework

Accessing C++ from QML
   In main.qml add menu bar       actions:[
    by adding an action to start          ActionItem {
    the camera and an action                  title: qsTr("Camera")
    to delete a picture                       onTriggered: {
                                                  //invoke the camera
                                                  myApp.showCamera()
                                              }
                                          }
                                      ]

   In applicationui.cpp           Q_INVOKABLE void showCamera(void);
    implement the
    Q_INVOKABLE method
    that triggers the invocation
    framework to show the
    camera                                                  43

Accessing C++ from QML

                                   #include 
   applicationui.cpp add          #include 
    needed includes and            #include 
    namespaces
                                   using namespace bb::system;

   In applicationui.cpp, in the    qml->setContextProperty("myApp", this);
    constructor expose the
    application object to QML

                                                             44

Accessing C++ from QML
                                   void ApplicationUI::showCamera() {
   In applicationui.cpp              InvokeManager manager;
    implement the                     InvokeRequest request;
    Q_INVOKABLE method                request.setMimeType("image/jpg");
    that triggers the invocation      request.setTarget("sys.camera.card");
                                      request.setAction("bb.action.CAPTURE");
    framework to show the
                                      InvokeTargetReply *targetReply =
    camera                         manager.invoke(request);
                                      manager.setParent(this);
                                      if (targetReply != NULL)
                                         targetReply->setParent(this);
                                   }

   Use the “add lib” menu to
    add the libbbsystem lib to
    the project
                                                             45

Standard List Items

 Prepackaged item types
     Header
     StandardListItem

Custom list items

 Prepackaged item types
     Header
     StandardListItem

 Custom list item
     “Anything”

Data binding

       Anything
         JSON
          XML
          SQL

Sample Apps

              49

Application Guidelines
Sample Apps https://developer.blackberry.com/native/sampleapps/
                   :

For More Information:

  developer.blackberry.com/cascades

230%
Increase in daily downloads

190%
Increase in daily revenues

What we did…

The 10.000 $
Developer
Commitment

12.000 Limited Edition
Z10 devices

BlackBerry university “Jam Camp”

“First on BlackBerry” startups

Stay tuned…

Thank you

            61