MOBILE COMPUTING WAHLPFLICHTFACH BLACKBERRY Sommersemester 2013 Dipl.-Ing. Andre Pura Source: https://developer.blackberry.com/cascades/documentation/ OVERVIEW • • • • • • • • • • • • • Introduction BlackBerry Enterprise Server Basics in BB10 and IDE BlackBerry 10 Concepts Cascades GUI Invocation Framework Cards Menu-Integration Data Storage Communication Location Services More ... andre.pura@mappau.com 2 INTRODUCTION: BB10 andre.pura@mappau.com 3 WHAT IS BLACKBERRY10 (BB10) • BlackBerry 10 is an operation system for mobile devices • Based on QNX • QNX was bought in 2010 by BlackBerry (vormals Research in Motion) • Micro Kernel Betriebssystem • First used by BlackBerry in the BlackBerry PlayBook (BlackBerry Tablet OS) Quelle: http://www.qnx.com andre.pura@mappau.com 4 DIFFERENCE TO MONOLITHIC KERNEL • Most components run in their own processes • Each process runs in its own area Monolithic Kernel Memory of Process B Process A Process B Process A Process B Micro Kernel Close process andre.pura@mappau.com Quelle: Embedded systems security, by Kleidermacher and Kleidermacher, Elsevier 2012 5 ADVANTAGES AND DISADVANTAGES • Advantages – If a component crashes, the system stays alive – Drivers must not be a part of the kernel • Disadvantages – Performance, a lot of context changes are necessarly – Synchronize of the processes andre.pura@mappau.com 6 DIFFERENCE TO OTHER PLATFORMS • Competitors: – iOS – Android – Windows Phone – Symbian andre.pura@mappau.com 7 DIFFERENCE TO OTHER PLATFORMS Android iOS BlackBerry OS BlackBerry 10 Windows Phone Symbian Language Java, C++ Objective C Java ME, C++ C# C++, Java ME Models 900+ 11 60+ 21 1000+ Available Apps (Feb. 2013) 845 000+ 770 000+ 100 000+ 120 000+ 115 000+ Advantages Open Source, A few devices, a lot of Good API examples and code Good support, fast growing market Small High market amount of penetration Apps, good support, few devices Disadvantag es Many apps, a lot of different devices Small API, documentation Low market penetration • Unterschied zu anderen Plattformen Many Apps, restrictive market policy andre.pura@mappau.com A lot of differnt devices 8 BLACKBERRY10 PLATFORM • Up to now, you had to use Java to develop for BlackBerry • Now: Android Emulator Adobe Air Cascades / QT HTML 5 Native / C++ Source: https://developer.blackberry.com/develop/platform_choice/index.html andre.pura@mappau.com 9 THE „OTHERS“ • HTML – Webworks, JavaScript and HTML based • Adobe Air – Actionscript / Flex based • Android Emulator – Java/Android based, Android 2.3.3 andre.pura@mappau.com 10 CASCADES VS NATIVE Cascades • QT/C++ • A lot of BB10 APIs • Fast development • GUI is seperated from logic Native • Fast porting of existing C++ / openGL applications • Longer development process • Pure „code“ • POSIX compliance • Simple integration of OpenSource Libraries Quelle: https://developer.blackberry.com/develop/platform_choice/ndk.html andre.pura@mappau.com 11 CASCADES • Supported by tat • Integrated Animations • Interface to Photoshop – Direct export from Photoshop to QML • • • • • • • Simple communication with C++ classes Native Multi-Language support Qt integragted Eclipse GUI Plugin Hard to port applications A little bit less performance than pure native More information: https://developer.blackberry.com/cascades/ andre.pura@mappau.com 12 Ing. Elmar Jilka, MSc BLACKBERRY ENTERPRISE SERVER andre.pura@mappau.com 13 BASICS: BB10 PROGRAMMING AND GUI andre.pura@mappau.com 14 COMPONENTS OF A BB10 CASCADES APPLICATION • A Cascades Application has 3 parts: – bar-descriptor.xml – main.cpp – .qml File andre.pura@mappau.com 15 DAS BAR-DESCRIPTOR.XML • Descriptes the basics of an application – – – – – – – – – Name ID Versionsnumber Author Plattform Icon Splashscreen Application Files Permissions andre.pura@mappau.com 16 MAIN.CPP • Startpoint of each BB10 Cascades Application • It can consist of the application itself or call an object, inherit from application andre.pura@mappau.com 17 .QML LAYOUT FILE • • • • A QML File describes a layout Save it in the assets folder A layout should have at least one component Define the mayor layout in the first file andre.pura@mappau.com 18 FLOW • User is king ! • Organize the information in a logical way • What will the user do next ? • Adapt the menu to the current screen • Invoke other applications and funcitons • Use shortcuts Source: https://developer.blackberry.com/cascades/documentation/ andre.pura@mappau.com 19 BASIC ELEMENTS • BB10 has 2 typical sctructures – Tabs – Drill-Down (Navigation Pane) • It is possible to combine both Source: https://developer.blackberry.com/cascades/documentation/ andre.pura@mappau.com 20 TABS • Using tabs, it is possible to access screens directly • 4 Tabs can be placed on the bottom bar • There is more space in the sidebar Source: https://developer.blackberry.com/cascades/documentation/ andre.pura@mappau.com 21 DRILL-DOWN • Drill-Down (Navigation Pane) a hierachical structure of screens • Screens are pushed over each other Source: https://developer.blackberry.com/cascades/documentation/ 22 RESOLUTIONS ? Source: https://developer.blackberry.com/cascades/documentation/ 23 HANDLING DIFFERENT RESOLUTIONS (10.1) Verschiedene Auflösungen Ein Layout für alle Pro Auflösung ein Layout Anpassung per relativem Layout Ordner mit Layout für Scrollview 720x720 Dynamische Skalierung 1280x768 1280x720 andre.pura@mappau.com 24 KEYBOARD • There are physical (Q10) and virtual keyboards • Since 10.1 both types should be supported • Use shortcuts for physical keyboards • Think about the space for a virtual keyboard Source: https://developer.blackberry.com/cascades/documentation/ andre.pura@mappau.com 25 BASICS • Everything in QML is possible in C++ • But not everytihng in C++ is possible in QML • Simple GUI Elements: – Button – Label – TextField – CheckBox – ToggleButton – Slider andre.pura@mappau.com 26 GENERATE THE GUI • Using QML • Using C++ andre.pura@mappau.com 27 CASCADES EVENT SYSTEM • Signals & Slots (Qt based) • Every GUI interaction emits a Signal, which can be connected to n slots Slot Click on Button Signal Slot N obects, Are connected to a signal Slot andre.pura@mappau.com 28 LAYOUTS • There are threee kinds of layouts Stack Layout Dock Layout Absolute Layout Source: https://developer.blackberry.com/cascades/documentation/ andre.pura@mappau.com 29 QML AND C++ INTEGRATION • Load QML from C++ Source: https://developer.blackberry.com/cascades/documentation/ andre.pura@mappau.com 30 CHANGE QML ATTRIBUTES PROGRAMMATICALLY • It is simple to change QML attributes from C++ QML Code andre.pura@mappau.com 31 QML ATTRIBUTES andre.pura@mappau.com 32 USING C++ VALUES IN QML • Connection with a QDeclarativePropertyMap Registrier the Map in QML andre.pura@mappau.com 33 ACCESS CUSTOM OBJECTS IN QML I • It is possible to acces C++ objects from QML andre.pura@mappau.com 34 ZUGRIFF AUF CUSTOM OBJECTS IN QML I • It is possible to acces C++ objects from QML Macro for Qt Signals / Slots andre.pura@mappau.com 35 ZUGRIFF AUF CUSTOM OBJECTS IN QML I • It is possible to acces C++ objects from QML Variablename in QML andre.pura@mappau.com 36 ZUGRIFF AUF CUSTOM OBJECTS IN QML I • It is possible to acces C++ objects from QML Called, when the variable is read andre.pura@mappau.com 37 ZUGRIFF AUF CUSTOM OBJECTS IN QML I • It is possible to acces C++ objects from QML Called, when the variable is changed in QML andre.pura@mappau.com 38 ZUGRIFF AUF CUSTOM OBJECTS IN QML I • It is possible to acces C++ objects from QML Signal to emit andre.pura@mappau.com 39 ZUGRIFF AUF CUSTOM OBJECTS IN QML I • Es kann auch ein eigenes Objekt in QML verwendet werden Signal to emit Variablename in QML Called, when the variable is read Called, when the variable is changed in QML andre.pura@mappau.com 40 ZUGRIFF AUF CUSTOM OBJECTS IN QML I • Es kann auch ein eigenes Objekt in QML verwendet werden Function used in QML andre.pura@mappau.com 41 ZUGRIFF AUF CUSTOM OBJECTS IN QML II • Register the C++ object to use it in QML • It is simple to access values from the object in QML andre.pura@mappau.com 42 INSTALLATION OF THE IDE andre.pura@mappau.com 43 DOWNLOAD • SDK download: – https://developer.blackberry.com/cascades/downl oad 44 CODE SIGNING KEYS • Order Code Signing Keys : – https://www.blackberry.com/SignedKeys/codesig ning.html • Important: Backup the keys ! andre.pura@mappau.com 45 SIMULATOR DOWNLOAD AND INSTALL • Download the simulator – https://developer.blackberry.com/develop/simula tor/index.html andre.pura@mappau.com 46 START IDE andre.pura@mappau.com 47 IDE - MENU Menü andre.pura@mappau.com 48 IDE – DIRECTORIES AND FILES Projects and files of the projects andre.pura@mappau.com 49 IDE – FUNCTIONS AND VARIABLES Functions and variables andre.pura@mappau.com 50 IDE - INFORMATION Information andre.pura@mappau.com 51 IDE - ACTIONS Actions andre.pura@mappau.com 52 IDE ACTIONS Choose SDK Version andre.pura@mappau.com 53 IDE ACTIONS SDK Version wählen SDK Version nachladen andre.pura@mappau.com 54 IDE ACTIONS SDK Version wählen SDK Version nachladen Neues Projekt, neue Klasse, neues Sourcefile anlegen andre.pura@mappau.com 55 IDE ACTIONS SDK Version wählen SDK Version nachladen Projekt kompilieren Neues Projekt, neue Klasse, neues Sourcefile anlegen andre.pura@mappau.com 56 IDE ACTIONS SDK Version wählen SDK Version nachladen Projekt kompilieren Neues Projekt, neue Klasse, neues Sourcefile anlegen Konfiguration ändern andre.pura@mappau.com 57 IDE ACTIONS SDK Version wählen SDK Version nachladen Projekt kompilieren Neues Projekt, neue Klasse, neues Sourcefile anlegen Debugging starten Konfiguration ändern andre.pura@mappau.com 58 IDE ACTIONS SDK Version wählen SDK Version nachladen Projekt kompilieren Neues Projekt, neue Klasse, neues Sourcefile anlegen Debugging starten Konfiguration ändern andre.pura@mappau.com Ausführen ohne Debugging 59 IDE ACTIONS SDK Version wählen SDK Version nachladen Sicht ändern Projekt kompilieren Neues Projekt, neue Klasse, neues Sourcefile anlegen Debugging starten Konfiguration ändern andre.pura@mappau.com Ausführen ohne Debugging 60 IDE - VIEWS • • • • • Application Profiler QML Editing C++ Editing Debug System Information andre.pura@mappau.com 61 QML EDITOR Schematic layout QML Code Cascades Components QML Eigenschaften andre.pura@mappau.com 62 SYSTEM INFORMATION Code Target Target Information andre.pura@mappau.com 63 SYSTEM INFORMATION - SUMMARY andre.pura@mappau.com 64 SYSTEM INFORMATION – PROCESS INFO andre.pura@mappau.com 65 SYSTEM INFORMATION – MEMORY INFO andre.pura@mappau.com 66 SYSTEM INFORMATION – MALLOC INFO andre.pura@mappau.com 67 SYSTEM INFORMATION – FILE EXPLORER andre.pura@mappau.com 68 FIRST BB10 APP andre.pura@mappau.com 69 FIRST APP • • • • Installation done? Keys ordered? Simulator installed? Device in Developer Mode? – (Settings / Security and Privacy / Developermode) andre.pura@mappau.com 70 STEPS • • • • • • Create a new project Signing Keys Backup the Signing Keys Connect Device Create Debug Token Deploy and debug the application andre.pura@mappau.com 71 CREATE A NEW PROJECT andre.pura@mappau.com 72 CREATE A NEW PROJECT andre.pura@mappau.com 73 CREATE A NEW PROJECT andre.pura@mappau.com 74 SIGNING KEYS AND CERTIFICATE Unter Windows: Extras -> Einstellungen andre.pura@mappau.com 75 SIGNING KEYS AND CERTIFICATE andre.pura@mappau.com 76 SIGNING KEYS AND CERTIFICATE Register the Signing Keys andre.pura@mappau.com 77 SIGNING KEYS AND CERTIFICATE Generate the developer certificate andre.pura@mappau.com 78 SIGNING KEYS AND CERTIFICATE - BACKUP Backup keys andre.pura@mappau.com 79 CONNECT THE DEVICE/SIMULATOR • Connect the device via Micro USB or start the simulator • To start the simulator use VMWare Fusion • Connect the device with the IDE andre.pura@mappau.com 80 START DEBUGGING andre.pura@mappau.com 81 START DEBUGGING andre.pura@mappau.com 82 START DEBUGGING Activate and click apply andre.pura@mappau.com 83 START DEBUGGING Start Debugging andre.pura@mappau.com 84 START DEBUGGING andre.pura@mappau.com 85 START DEBUGGING andre.pura@mappau.com 86 THE DEBUGGING VIEW OPENS • Open the device log messesage Project ID Process ID andre.pura@mappau.com 87 APPLICATION STOPS AT THE „BREAK POINT“ • The applications stops at the beginning or the first break-point • To resume the application press F8 or the Software key • Shortcuts: – F5 : Step Into – F6 : Step over – F7 : Step return andre.pura@mappau.com 88 EXC1 • Erzeugen Sie in der „Hello World“ Applikation ein zweites Textfeld • Dieses soll in roter Schrift oben-mittig platziert sein • Rotieren Sie das erste, schwarze Textfeld um 90° gegen den Uhrzeigersinn • Geben Sie den Textfeldern IDs: – lblSchwarz – lblRot andre.pura@mappau.com 89 MOBILE COMPUTING WAHLPFLICHTFACH BLACKBERRY Sommersemester 2013 Dipl.-Ing. Andre Pura BLACKBERRY 10 CONCEPTS andre.pura@mappau.com 91 USE C++ CLASSES IN QML • Yesterday, the object was generated in C++ and used in QML • But it is also possible to generate an object in QML Source: https://developer.blackberry.com/cascades/documentation/ andre.pura@mappau.com 92 USE C++ CLASSES IN QML • The object must be registered and can be used in QML directly andre.pura@mappau.com 93 andre.pura@mappau.com 94 extends andre.pura@mappau.com 95 andre.pura@mappau.com 96 andre.pura@mappau.com 97 andre.pura@mappau.com 98 andre.pura@mappau.com 99 HOW CAN WE ACCESS C++ FROM QML ? andre.pura@mappau.com 100 HOW CAN WE ACCESS C++ FROM QML ? 1. Create C++ Object in QML – Register Class in QML, create the object in C++ 2. Pass a C++ Object to QML – Create object in C++, pass it to qml 3. Using the PropertyMap (Gleich 2.) – Generate a PropertyMap and push it to QML andre.pura@mappau.com 101 HOW CAN WE ACCESS QML FROM C++ ? andre.pura@mappau.com 102 HOW CAN WE ACCESS QML FROM C++ ? 1. C++ Objekt nach QML übergeben – Objekt in C++ erzeugen, Objekt nach QML übergeben 2. Property direkt im Code ändern – Das Objekt aus dem Root-Objekt extrahieren und die Property setzen andre.pura@mappau.com 103 APPLICATION LIFETIME andre.pura@mappau.com 104 APPLICATION LIFETIME Source: https://developer.blackberry.com/cascades/documentation/ andre.pura@mappau.com 105 APPLICATION LIFETIME • Each application runs through the cyclus • At the moment it is not possible to generate an application without a GUI (should be possible with 10.2) • An application in the „background“ is alwaysa visible as an „Active Frame“ • If the permission „run in background“ is enabled, the „stopped“ state does not exist andre.pura@mappau.com 106 APPLICATION LIFETIME • Each application has 3 different states: – Fullscreen – Thumbnail – Invisible Source: https://developer.blackberry.com/cascades/documentation/ andre.pura@mappau.com 107 APPLICATION LIFETIME • Each application has 3 different states: – Fullscreen – Thumbnail – Invisible Source: https://developer.blackberry.com/cascades/documentation/ andre.pura@mappau.com 108 APPLICATION LIFETIME • Each application has 3 different states: – Fullscreen – Thumbnail – Invisible Source: https://developer.blackberry.com/cascades/documentation/ andre.pura@mappau.com 109 CASCADES JAVASCRIPT andre.pura@mappau.com 110 CASCADES • • • • JAVASCRIPT JavaScript can be used in QML Inline Code Using an external library Usually JavaScript is used to react on signals Source: http://www.crackberry.com andre.pura@mappau.com 111 JAVASCRIPT IN CASCADES andre.pura@mappau.com 112 INLINE JAVASCRIPT IN CASCADES Signal JavaScript andre.pura@mappau.com 113 JAVASCRIPT IN CASCADES - FUNKTION JavaScript andre.pura@mappau.com 114 JAVASCRIPT IN CASCADES - FUNKTION andre.pura@mappau.com 115 CONNECT A SIGNAL TO A JAVASCRIPT FUNCTION andre.pura@mappau.com 116 CONNECT A SIGNAL TO A JAVASCRIPT FUNCTION Signal Function andre.pura@mappau.com 117 CONNECT A SIGNAL TO A JAVASCRIPT FUNCTION andre.pura@mappau.com 118 CONNECT A SIGNAL TO A JAVASCRIPT FUNCTION onClicked:{ root.changeTest(); } andre.pura@mappau.com 119 GUI ELEMENTS andre.pura@mappau.com 120 BASICS ON GUI ELEMENTS • QML Components are always on the same level in a container • Each component can have properties and signals • Use JavaScript to react on signals • You can design your own components andre.pura@mappau.com 121 BASICS ON GUI ELEMENTS Components Property Additional objects andre.pura@mappau.com 122 Component BASICS ON GUI ELEMENTS Property Signal andre.pura@mappau.com 123 GUI ELEMENTS- CONTAINER • A Container is used to goupe other GUI elements • Only a container can have childs • The alignement of the elements can be adjusted in a container (Standard: StackLayout) • Is a container deleted from a scene, all ist childs are deleted andre.pura@mappau.com 124 GUI ELEMENTS- CONTAINER • The size of the container is defined by ist childs • Width and height can be modified with: – preferredWidth, preferredHeight – minWidth, minHeight – maxWidth, maxHeight • Usually the background is tranparent andre.pura@mappau.com 125 GUI ELEMENTS- CONTAINER • Signals: – onControlAdded – onControlReplaced – onControlRemoved – onControlMoved – onLayoutChanged – onBackgroundChanged – onClipContentToBoundsChanged andre.pura@mappau.com 126 Components GUI ELEMENTS- CONTAINER Attached objects andre.pura@mappau.com 127 GUI ELEMENTS- LABEL • A label is used to show a short text • Not interactive • The visual appearance (z.B. Color) is extended by AbstractTextControl • Important properties: – text – multiline • Important signals: – onMultilineChanged Source: https://developer.blackberry.com/cascades/documentation/ andre.pura@mappau.com 128 GUI ELEMENTS- BUTTON • • • • A button is an interactive GUI component It is used for „click“ actions Triggers actions 3 different appearances: – Ein Bild und einen Text – Nur ein Text – Nur ein Bild Source: https://developer.blackberry.com/cascades/documentation/ andre.pura@mappau.com 129 GUI ELEMENTS- BUTTON • Important signal – onClicked (extended by AbstractButton) • Properties – imageSource – image – text andre.pura@mappau.com 130 GUI ELEMENTS- TEXTFIELD • A TextField is an input field to interact with the user • It can be configured for different kinds of inputs – eMail Adresse – Password – Chat – Url Source: https://developer.blackberry.com/cascades/documentation/ andre.pura@mappau.com 131 GUI ELEMENTS- TEXTFIELD • Important Properties – – – – hintText inputMode validator Input (Mit TextInputProperties) • submitKey • flags (Spellcheck, PredictionOff) • Important signals – onTextChanging – onValidatorChanged andre.pura@mappau.com 132 GUI ELEMENTS- SLIDER • A Slider enables the user to select a value from a defined range • It is better to use a Slider instead of a TextField • Intuitive • Important properties – fromValue – toValue – value • Important signal – onValueChanged andre.pura@mappau.com 133 GUI ELEMENTS– SEGMENTED CONTROL • A horizontal selector for up to 4 different actions • Is used to change the view of the current page • Important property – selectedIndex • Important Signal – onSelectedIndexChanged Source: https://developer.blackberry.com/cascades/documentation/ andre.pura@mappau.com 134 GUI ELEMENTS– SCROLL VIEW • A ScrollView is related to the Containers • It enables scrollig and zooming • Like all other components, a single element in a ScrollView is allowed (But you can use a Container in it) • Important properties – content – scrollViewProperties andre.pura@mappau.com 135 GUI ELEMENTS– IMAGEVIEW • The ImageView is used to display images • A ScrollView is used for pitch-to-zoom • Important properties – scalingMethod – imageSource andre.pura@mappau.com 136 GUI ELEMENTS– WEBVIEW • There are a lot of use cases, where it is necessary to show html or load external websites • It is possible to load locale content and external content • Important property – Html and/or url • Important signals – onUrlChanged – onLoadingChanged – onMessageReceived andre.pura@mappau.com 137 GUI ELEMENTS– WEBVIEW • html: • url: andre.pura@mappau.com 138 GUI ELEMENTS– WEBVIEW • Cascades can communicate with JavaScript in a WebView • JavaScript must be enabled in the WebView • Messages are used for the communication • postMessage is used to sent a message to JavaScript, which is embedded in a WebView • onMessageReceived is used to receive a message from an embedded Javascript andre.pura@mappau.com 139 GUI ELEMENTS– WEBVIEW • JavaScript, which is embedded in a WebView, can react with onmessage() and postMessage andre.pura@mappau.com 140 GUI ELEMENTS– WEBVIEW • JavaScript, which is embedded in a WebView, can react with onmessage() and postMessage andre.pura@mappau.com 141 WHY IS IT IMPORTANT TO COMMUNICATE WITH EMBEDDED JAVASCRIPT? andre.pura@mappau.com 142 WARUM MIT JAVASCRIPT KOMMUNIZIEREN? • Integrate existing content fro the Internet to the application • Use native GUI elements to trigger actions on a webpage • Using native GUI elements is more intuitve • Fast Cross-Platform-Developing – 1 Update for all operation systems andre.pura@mappau.com 143 GUI ELEMENTS– ACTIVITY INDICATOR • An ActivityIndicator is used to inform the user, that a background thread is working • It is used (in difference to a progress bar), when the duration of the loading is unknown • Important Properties – running • Important Signals – onStarted – onStopped • Functions – Start – Stop Source: https://developer.blackberry.com/cascades/documentation/ andre.pura@mappau.com 144 GUI ELEMENTS– ACTIVITY INDICATOR Initalize the ActivityIndicator andre.pura@mappau.com 145 GUI ELEMENTS– ACTIVITY INDICATOR Initalize the ActivityIndicator Start the ActivityIndicator Stop the ActivityIndicator andre.pura@mappau.com 146 GUI ELEMENTS– ACTIONITEM • ActionItems are used to define additional actions • These Actions can be for the whole Page or a specific component (Context Menu) • Each Action can be defined with an icon and a text • An ActionSet combines actions to a set Source: https://developer.blackberry.com/cascades/documentation/ andre.pura@mappau.com 147 GUI ELEMENTS– ACTIONITEM CONTEXTACTION Source: https://developer.blackberry.com/cascades/documentation/ andre.pura@mappau.com 148 GUI ELEMENTS– ACTIONITEM CONTEXTACTION andre.pura@mappau.com 149 GUI ELEMENTS– ACTIONITEM CONTEXTACTION andre.pura@mappau.com 150 GUI ELEMENTS– ACTIONITEM – PAGE ACTION • ActionItems placed on a Page er used to define additional actions • Important properties – ActionItem.placement Source: https://developer.blackberry.com/cascades/documentation/ andre.pura@mappau.com 151 APPLICATIONMENU • The Application menu is not directly connected to a single page • Usually settings and additional information about the application can be bound in the menu • The menu is on the top • Swipe-down at the top shows/hides the menu • Important properties of the entries – title – imageSource • Important signal – onTriggered Source: https://developer.blackberry.com/cascades/documentation/ andre.pura@mappau.com 152 APPLICATIONMENU Source: https://developer.blackberry.com/cascades/documentation/ andre.pura@mappau.com 153 APPLICATIONMENU andre.pura@mappau.com 154 ORIENTATION HANDLING • There are two different orientations: – Portrait – Landscape • Tablets usually use the landscape orientation • Smartphones usually use the portrait orientation Hint: Q10: Portrait == Landscape Mode Source: https://developer.blackberry.com/cascades/documentation/ 155 ORIENTATION HANDLING • Define the usage of both orientations in the manifest Source: https://developer.blackberry.com/cascades/documentation/ 156 ORIENTATION HANDLING • Define the support in QML to react on orientation changes (when the GUI is loaded) • Use the OrientationHandler to react on the orientation change andre.pura@mappau.com 157 ORIENTATION HANDLING • onOrientationAboutToChange in the handler is used to react on changes andre.pura@mappau.com 158 ADD GUI ELEMENTS PROGRAMMATICALLY • In some use cases it is necessary to add GUI elements programmatically • Remember: Use containers to add elements on the same level Source: https://developer.blackberry.com/cascades/documentation/ andre.pura@mappau.com 159 ADD GUI ELEMENTS PROGRAMMATICALLY • Add a container in QML and define a name for the obecjt • Initialize the container in C++ and add the elements andre.pura@mappau.com 160 ADD GUI ELEMENTS PROGRAMMATICALLY andre.pura@mappau.com 161 BEISPIEL DER GUI ELEMENTE andre.pura@mappau.com 162 EX 1 • • • • Create a new BlackBerry Cascades Projekt Create a Button and a Label Write 0 (zero) in the Label If the button is clicked, increase the number in the label by 1 andre.pura@mappau.com 163 EX 1 • Write a function in JavaScript, which calculates the nth Fibonacci Number (If you do not know how to calculate the Fibonacci Numbers, search the internet) • Generate a slider from 2 - 20 • Generate an additional label • When the user changes the value with the slider, calculate the nth Fiboncci Number and show it in the label andre.pura@mappau.com 164 HINT andre.pura@mappau.com 165 EX 2 • Download Lena – http://sipi.usc.edu/database/preview/misc/4.2.04 .png • Create a new Cascades Projekt • Create an ImageView with Lena • Create an ActionItem in the context of the ImageView – Rotate the Image on each click on the action item andre.pura@mappau.com 166 EX 2 • Create an ActionItem for a Page-Action • If it is triggered, change the visibility of Lena – If Lena is visibile -> invisibile – If Lena is invisibile -> visibile • Change the text of the ActionItem on each click („visible“ <-> „invisible“) andre.pura@mappau.com 167 EX 3 • Create a new BlackBerry Projekt with a Navigation Pane • Study the sourcecode • Create a new Button and create an other Page as a new qml file • If the new button is clicked, open the new page • If there isn‘t a back button on the page, add it. andre.pura@mappau.com 168 EX 3 • Create on the new page a button, which opens another page • Create an application menu with an ActionItem • If it is triggered, pop all pages until the first page is reached andre.pura@mappau.com 169 MOBILE COMPUTING WAHLPFLICHTFACH BLACKBERRY Sommersemester 2013 Dipl.-Ing. Andre Pura RECAPITULATION • Development in BB10 – – – – – HTML Native C++ Adobe Air Cascades Android Emulator • Elements of an application – – – – – GUI in QML Code in C++ Description Files (z.B. Mainfest) Assets You can use JavaScript in QML andre.pura@mappau.com 171 RECAPITULATION • 2 types of applications – Drill-Down – Tabs • Important GUI Elements – Container – Label – ImageView – Button – TextField andre.pura@mappau.com 172 RECAPITULATION • Menus – Context Menu – Page Context Menu – Application Menu • ActionItem andre.pura@mappau.com 173 RECAPITULATION • Communication between QML and C++ – Generate Object in C++ and pass it to QML – PropertyMap – Import C++ Class in QML and generate objects andre.pura@mappau.com 174 INVOCATION FRAMEWORK andre.pura@mappau.com 175 INVOCATION FRAMEWORK • Use the invocation framework to call an other application • Messages can be used to pass data • Configure your own application to be invokable from other applications • It is possible to invoke an application without knowing the name of the other application. Only the task is necessary andre.pura@mappau.com 176 INVOCATION FRAMEWORK • An Invocation Request is the message sent to the system to inform the system that an application should be invoked • Invocation Request can be used to inform another application about changes • Attributes of a message – Target – Action – Data andre.pura@mappau.com 177 INVOCATION FRAMEWORK - ATTRIBUTE • Target – Each target application has an unique identifier – The „reverse DNS“ scheme is used (eg com.example.myapp) • Action – Descripts the task which should be done – To call an defined action, the „reverse DNS“ scheme is used (eg com.example.myapp.VIEW) – There are some predefined actions – These actions start with bb.action. andre.pura@mappau.com 178 INVOCATION FRAMEWORK - ATTRIBUTE • Data – Data is passed as MIME type or URI • URI describes where the data can be found • MIME type descripes the kind of data – A small amout of data (< 16kb) can be sent directly, if the URI is data://local – Own MIME Types start with application/vnd (eg application/vnd.mycompany.mydata) andre.pura@mappau.com 179 INVOCATION FRAMEWORK – BOUND VS UNBOUND INVOCATIONS • Bound Invocation – Knwon target – Start a known application directly • Unbound Invocation – Known task – If no task is defined, the Invocation Framework calls bb.action.VIEW Source: https://developer.blackberry.com/cascades/documentation/ andre.pura@mappau.com 180 INVOCATION FRAMEWORK – BOUND INVOCATION Quelle: http://devblog.blackberry.com/2012/11/bbm-invocation-framework/ andre.pura@mappau.com 181 INVOCATION FRAMEWORK – UNBOUND INVOCATION Quelle: http://supportforums.blackberry.com/t5/Cascades-Development/Open-browser-from-app/td-p/1952547 andre.pura@mappau.com 182 INVOCATION FRAMEWORK – PROBLEMS SENDING DATA • A small amount of data can be sent directly • If the URI is used, be aware, that the called application can access the data • If the called application cannot access the file directly, it is copied to the called application‘s directory • It is possible to control this behaviour using the following attributes: – – – – Preserve CopyReadOnly CopyReadWrite Link andre.pura@mappau.com 183 INVOCATION FRAMEWORK – MULTIPLE FILES • Sent multiple files, adapt the MIME type – filelist/mixed – filelist/document – filelist/media • If all files in the same directory, the URI is the path to this directory • If the files are in different directories, a JSON with the paths is required andre.pura@mappau.com 184 INVOCATION FRAMEWORK – CORE APPLICATIONS • A lot of the standard applications can invoked using the invocation framework Quelle: http://supportforums.blackberry.com/t5/Cascades-Development/Open-browser-from-app/td-p/1952547 andre.pura@mappau.com 185 INVOCATION FRAMEWORK – RECEIVING INVOCATIONS • It is possible to receive Invocation Requests from other applications • Therefore you have to define your application as a target in the bar-descriptor.xml (Manifest) andre.pura@mappau.com 186 INVOCATION FRAMEWORK – RECEIVING INVOCATIONS • In addition, some lines of C++ code is required • The application have to known in which state it was started andre.pura@mappau.com 187 andre.pura@mappau.com 188 Connect to the InvocationManager andre.pura@mappau.com 189 React on the kind of start andre.pura@mappau.com 190 INVOCATION FRAMEWORK – TARGET FILTER • Applications, which can do the job, will be identified by target filters • These Filters are a part of <invoke-target> in the Manifest • Attribute – Filter: Descripts the criteria of a filter – Action: The action, which can be called – MIME Type: The kind of file/data which can be opened – Uris: A scheme for the URI – Exts: the allowed extensions andre.pura@mappau.com 191 INVOCATION FRAMEWORK – TARGET FILTER • There are some rules: – The URI cannot only be a Wildcard-Character (*) – If bb.action.VIEW or bb.action.OPEN is defined as an action and if the MIME type is a wildcard , the URI cannot be data:// or file:// – If URI equals to data:// or file:// and the MIME type is a wildcard, there must be at least an extension that is not a wildcard • If a rule is violated, you are not able to install the application on the device (Error: 884 Restricted Invoke Filter) andre.pura@mappau.com 192 EXAMPLES TARGET FILTER • Allowed – actions=bb.action.OPEN; types=*;uris=http://; – actions=bb.action.OPEN,bb.action.VIEW; types=*; uris=file://; exts=jpg,gif,tif; – actions=bb.action.VIEW; types=*; uris=data://; exts=jpg,gif,tif; • Not allowed – actions=bb.action.OPEN,bb.action.VIEW,bb.action.SET; types=*; uris=file://; – actions=bb.action.OPEN; types=*; uris=data://; – actions=bb.action.VIEW; types=*; uris=*; – actions=bb.action.VIEW; types=*; – actions=bb.action.OPEN,bb.action.VIEW; types=*; uris=file://; exts=*; andre.pura@mappau.com 193 EXAMPLES TARGET FILTER andre.pura@mappau.com 194 EXAMPLES TARGET FILTER 2 Filter andre.pura@mappau.com 195 EXAMPLE TARGET FILTER Filter for PNG or JPEG files which are in the data or in a message Filter for a URI with the extension of .png or .jpg andre.pura@mappau.com 196 INVOCATION FRAMEWORK – HOW CAN THE FRAMEWORK DETERMINE THE RIGHT TARGET? • If an unbound invoke is sent to the Invocation Framework, it tries to determine the right target (Process is called Invocation Brokering) • An application is used in the process if ... – the action matches – every application used for the process, if no action is defined andre.pura@mappau.com 197 INVOCATION FRAMEWORK – HOW CAN THE FRAMEWORK DETERMINE THE RIGHT TARGET? • At this point the MIME type and URI schemes are compared – URI Schema is equal? (if the extension is set, only if it matches too) – MIME Type equal? • Sorting the applications – Most matching URI scheme (from the number of matching characteristics) – If there are equal filters, the MIME type is compared – An explicit match is better than a wildcard – If there are equal filters at this point, the URI extensions are compared – If there are equal filters, the system default is used – If there is no system default, the oldest filter is used andre.pura@mappau.com 198 INVOCATION FRAMEWORK – CARD OR APPLICATION • There are 2 options showing a preview – External application – Card • The difference can be defined in the task: – Do you plan to make a „simple“ action with the data and come back to the application ? -> Card – Do you want to process the data with a lot of different methods and proceed working in the new application ? -> external application andre.pura@mappau.com 199 CARDS andre.pura@mappau.com 200 CARDS • Cards can be used to provide the whole functionality or a part of it to another application • Usually specialised tasks are used for cards • The card is pushed over the calling application without closing it • An application can only call a single card by the time. But a card can call another card andre.pura@mappau.com 201 CARDS - KINDS • There are three kinds of cards: Picker Composer Previewer Source: https://developer.blackberry.com/cascades/documentation/ andre.pura@mappau.com 202 CARDS - KINDS • Picker – Pick existing content to use in the application (eg Files) • Composer – Generate or edit existing content • Previewer – Preview content • The kind of the card defined the animation of the card and how peek is handled. andre.pura@mappau.com 203 CARDS – TRANSITION – COMPOSER AND PICKER • The transition between the application and the card is defined by the kind Source: https://developer.blackberry.com/cascades/documentation/ andre.pura@mappau.com 204 CARDS – TRANSITION - PREVIEWER Source: https://developer.blackberry.com/cascades/documentation/ andre.pura@mappau.com 205 CARDS – PEEKING • The Previewer support full peeking • The Composer and Picker only support peeking on the action bar Source: https://developer.blackberry.com/cascades/documentation/ 206 CARDS - DESIGN • BlackBerry defines in the GUI Guidelines some rules • Cards must support both orientations andre.pura@mappau.com 207 CARDS • Cards are called using invocations • If the user closes the card, an signal is emitted and can be used by the calling application • Previewer closes without an signal • Emitting the closing signal for a Composer is optional • Usually you want to have a closing signal when a Picker is used • It is also possible to close a card from the calling application andre.pura@mappau.com 208 CARDS - CODE • React on peek andre.pura@mappau.com 209 CARDS - CODE • React on response andre.pura@mappau.com 210 CARDS - REGISTER • Card must be registered in the manifest andre.pura@mappau.com 211 CARDS - STARTMODE • If an application is started, it must be identified, if the application was called by another application as a card or not andre.pura@mappau.com 212 andre.pura@mappau.com 213 Connect to „invoked“ signal andre.pura@mappau.com 214 Is the application called as a card? andre.pura@mappau.com 215 CARDS - STARTMODE • Wait for the „invoked“ signal and react on it andre.pura@mappau.com 216 CARDS – SEND A RESPONSE • If the card is closed, you can/must provide dan response andre.pura@mappau.com 217 CARDS – RESIZE AND ORIENTATION • Each card must support both orientations • It is possible, that the card is resized (eg if a virtual keyboard is required). The card must react on these kind of changes andre.pura@mappau.com 218 andre.pura@mappau.com 219 Connect to resize signal andre.pura@mappau.com 220 Function, which is called on an emitted signal andre.pura@mappau.com 221 EXAMPLES OF INVOCATIONS andre.pura@mappau.com 222 MENU INTEGRATION andre.pura@mappau.com 223 INTEGRATION IN THE CONTEXT MENU • As we have learned, it is possible generate a context menu • But it is possible that the operation system BB10 adds more elements automatically • And what is even better: It is possible to be added in other applications as well andre.pura@mappau.com 224 INTEGRATION INS CONTEXT MENU • „Normal“ integration in the contextmenu • Integrate the selection of the operation system • Which applications are integrated is decided by BB10 using the filters andre.pura@mappau.com 225 ACTIVE FRAME andre.pura@mappau.com 226 ACTIVE FRAME • An Active Frame visual state of the thubnailed application • The frame can be static or dynamic • A simple static cover is better than a missing cover • The cover itself cannot be interactive: if the user clicks on it, the application is going to the fullscreen state Source: https://developer.blackberry.com/cascades/documentation/ andre.pura@mappau.com 227 ACTIVE FRAME • A dynamic active frame should be updated rarely • Different resolutions require different active frames • Sometimes less information is more ... • Style: SlatePro, regular weight, 30px height Source: https://developer.blackberry.com/cascades/documentation/ andre.pura@mappau.com 228 ACTIVE FRAME – STYLE GUIDELINES Source: https://developer.blackberry.com/cascades/documentation/ andre.pura@mappau.com 229 ACTIVE FRAME – STYLE GUIDELINES Source: https://developer.blackberry.com/cascades/documentation/ andre.pura@mappau.com 230 ACTIVE FRAME - STATIC • Register the components to use them in QML • Generate the Cover for the active frame in QML andre.pura@mappau.com 231 ACTIVE FRAME - STATISCH • Initialize the cover • Set the cover andre.pura@mappau.com 232 ACTIVE FRAME - DYNAMIC • Usually an dynamic active frame is set in C++ • Be aware of the update cycles • The dynamic content must provide additional information for the user • The first update can be triggers by calling update() or by connect to the thumb nailed signal (preferred) andre.pura@mappau.com 233 ACTIVE FRAME - DYNAMIC andre.pura@mappau.com 234 ACTIVE FRAME - DYNAMIC Load GUI from QML andre.pura@mappau.com 235 ACTIVE FRAME - DYNAMIC Trigger first update andre.pura@mappau.com 236 ACTIVE FRAME - DYNAMIC andre.pura@mappau.com 237 ACTIVE FRAME - DYNAMIC Trigger the update every 2 hours Call the first update, when the appication is thumbnailed andre.pura@mappau.com 238 ACTIVE FRAME – DYNAMIC- SET andre.pura@mappau.com 239 EXAMPLES OF ACTIVE FRAMES andre.pura@mappau.com 240 PROJECT • • • • Groups of 4 Think about a small project Development time per person: 10 -15h Kick Off Presentation on Thursday – – – – – – 5-10 min about your project 1st Slide: Name of the group, members Which steps do you need to reach your goal? Who is responsible for which part ? Which API do you want to use Is there an equal application in the market? If there is an equal application, why is your application „better“? • Send me your commented project until the 5th of July – Source – Compiled BAR File – PDF with more information about your project (Members, goal, achievements) andre.pura@mappau.com 241 EX 1 • Create a new BB Cascades Projekt • Create 5 Buttons • Use the invocation framework to connect the clicked signal from the buttons to: – Open a browser with orf.at – Create an eMail with: subject: „Hallo Composer“, text: „how are you doing ?“ – Open an image – Open the BlackBerry World – Generate a new „Remember“ message with: „VO nicht vergessen“ and the description: „Das darf ich einfach nicht vergessen“ andre.pura@mappau.com 242 EX 1 • Create another button • This button is used in Ex2 andre.pura@mappau.com 243 EX 2 • • • • Create a new BB Cascades Projekt Create an ImageView Set an Invoke Filter for this application If the application is Invoked, the ImageView should show the passed image. andre.pura@mappau.com 244 EX 2 • Add the following function to the additional button from Ex1 – Start application from Ex2 with an image using the invocation framework • Try to start application2 from the first application andre.pura@mappau.com 245 EX 3 • Create a new BB Cascades Projekt • Generate a QML file for an active frame • Set the active frame for the application • Additional: – Replace the static active frame with a dynamic frame – Create a timer and count a number up in the active frame andre.pura@mappau.com 246 MOBILE COMPUTING WAHLPFLICHTFACH BLACKBERRY Sommersemester 2013 Dipl.-Ing. Andre Pura RECAPITULATION • Development in BB10 – – – – – HTML Native C++ Adobe Air Cascades Android Emulator • Elements of an application – – – – GUI in QML Code in C++ Description Files (z.B. Mainfest) Assets (wobei GUIs auch Assets sind) • You can use JavaScript in QML andre.pura@mappau.com 248 RECAPITULATION • 2 types of applications – Drill-Down – Tabs • Important GUI Elements – Container – Label – ImageView – Button – TextField andre.pura@mappau.com 249 RECAPITULATION • Menus – Context Menu – Page Context Menu – Application Menu • ActionItem andre.pura@mappau.com 250 RECAPITULATION • Communication between QML and C++ – Generate Object in C++ and pass it to QML – PropertyMap – Import C++ Class in QML and generate objects andre.pura@mappau.com 251 RECAPITULATION • ActiveFrame can be static and dynamic • Usually, dynamic frames are generated in C++ • An ActiveFrame must support both orientations and resizing • A lot of updates drain the battery andre.pura@mappau.com 252 DATA STORAGE andre.pura@mappau.com 253 CASCADES ACCES DATA • Cascades has an advanced system access data • This system has different elements andre.pura@mappau.com 254 CASCADES ACCES DATA- ELEMENTE Raw Daten, eg JSON andre.pura@mappau.com 255 CASCADES ACCES DATA- ELEMENTE Access to the raw data Eg to generate new files andre.pura@mappau.com 256 CASCADES ACCES DATA- ELEMENTE Adapter to connect the GUI to acces data from QML simple and fast andre.pura@mappau.com 257 CASCADES ACCES DATA- ELEMENTE Sorts and organizes the data to show it in the best way andre.pura@mappau.com 258 CASCADES ACCES DATA- ELEMENTE The graphical representation of the data andre.pura@mappau.com 259 FILE SYSTEM • There are different permissions for different folders and files • Data, which is deployed within the application, must be in the assets directory • The „working directory“ (application root) is the directory where the application is executed • It is not allowed to place any data in the „working directory“ programmatically andre.pura@mappau.com 260 FILE SYSTEM - STRUCTUR Source: https://developer.blackberry.com/cascades/documentation/ andre.pura@mappau.com 261 FILE SYSTEM - STRUCTUR Application root (r)1 1 andre.pura@mappau.com r = read w = write s = symbolic 262 FILE SYSTEM - STRUCTUR Installation directory (r) 1 andre.pura@mappau.com r = read w = write s = symbolic 263 FILE SYSTEM - STRUCTUR Binary Files and other application ressources (r) 1 andre.pura@mappau.com r = read w = write s = symbolic 264 FILE SYSTEM - STRUCTUR Images, media files and qml documents (r) 1 andre.pura@mappau.com r = read w = write s = symbolic 265 FILE SYSTEM - STRUCTUR The application has full access to this directory. It is application‘s „Home“ directory (rw) 1 andre.pura@mappau.com r = read w = write s = symbolic 266 FILE SYSTEM - STRUCTUR Databases (rw) 1 andre.pura@mappau.com r = read w = write s = symbolic 267 FILE SYSTEM - STRUCTUR Log Files (r) 1 andre.pura@mappau.com r = read w = write s = symbolic 268 Shared Folder: The - STRUCTUR FILE SYSTEM subfolders contain the shared files for all applications. If the permission „access_shared“ is set, the application is allowed to write. (rws) 1 andre.pura@mappau.com r = read w = write s = symbolic 269 FILE SYSTEM - STRUCTUR This folder contains data, which is shared with other applications using the invocation framework (rw) 1 andre.pura@mappau.com r = read w = write s = symbolic 270 FILE SYSTEM - STRUCTUR Temporary folder: This directory is used to save temporary files. QNX can delete this directory, if the appication is closed (rw) 1 andre.pura@mappau.com r = read w = write s = symbolic 271 FILESYSTEM – WORKING DIRECTORY • Different names – Application Root – Current Directory – Sandbox • Access data using relative or absolute path – ./data – /accounts/1000/appdata/namespace.application/ data andre.pura@mappau.com 272 FILESYSTEM – WORKING DIRECTORY • Access the directories using QDir • currentPath – Path to the Working Directory of the application • homePath – Path to the data directory of the application • tempPath – Path to the temp directory andre.pura@mappau.com 273 FILESYSTEM - ASSETS • The assets directory is read only • If a non source code file should be deployed with the application, it must be placed in the assets folder • If you try to change a file in the assets directory, it must be copied to an other directory with the appropriate persmissions (eg ./data) • The folder can be accessed from QML using „asset:///name“ andre.pura@mappau.com 274 FILESYSTEM – ASSETS - EXAMPLE • Example: An image should be packed with the application, changed when the application is called the first time and showed an the following starts of the application andre.pura@mappau.com 275 FILESYSTEM – ASSETS - EXAMPLE • Example: An image should be packed with the application, changed when the application is called the first time and showed an the following starts of the application – Copy the image to ./data and then manipulate it – Or change the image and save it to ./data andre.pura@mappau.com 276 FILESYSTEM – ASSETS - EXAMPLE • Example: An image should be packed with the application, changed when the application is called the first time and showed an the following starts of the application – Copy the image to ./data and then manipulate it – Or change the image and save it to ./data – When the application is started, check if the image exists in ./data. If it exists, load it from ./data. Otherwise it must be loaded from the assets folder andre.pura@mappau.com 277 FILESYSTEM – READ/WRITE • Before you can access a file, it must be checked if the parent directory exists. • QDir can be used – Use QDir::cd(QString) to check if a directory exists – Use QDir::mkpath(QString) to generate a directory and all its non-existing parent directories • Use QFile to access files andre.pura@mappau.com 278 FILESYSTEM – READ/WRITE • Write • Read andre.pura@mappau.com 279 JSON DATA • JSON is often used to save data • Name:Value Pairs are saved or a batch of objects (more information: http://www.json.org/) • It is possible to load JSON data and pass it to da datamodel • For processing JsonDataAccess is used • Arrays are read as QVariantList • Objects are read as QVariantMap • The bb::data library is required for processing JSON data (LIBS += -lbbdata) andre.pura@mappau.com 280 JSON - CODE andre.pura@mappau.com 281 JSON - CODE Generate the data model Attributes of a JSON object andre.pura@mappau.com 282 JSON - CODE Load JSON andre.pura@mappau.com 283 JSON - CODE Connect the datamodel with JSON andre.pura@mappau.com 284 JSON - QML andre.pura@mappau.com 285 XML DATA • It is also possible to store data in a structured way using the XML scheme • Is very common • Easier for humans to read • HTML is in the XML scheme • Accessing data in QML can be done using XMLDataAccess • It is necessary to link against bb::data Library (LIBS += -lbbdata) andre.pura@mappau.com 286 XML DATA Source: https://developer.blackberry.com/cascades/documentation/ andre.pura@mappau.com 287 XML DATA- CODE andre.pura@mappau.com 288 READ XML IN QML andre.pura@mappau.com 289 SQL - DATA • It is better to store a higher amount of data in a „real“ database • Tables • External and local databases • SqlDataAcces to access the data • The bb::data library is required (LIBS += lbbdata) andre.pura@mappau.com 290 SQL READ andre.pura@mappau.com 291 SQL WRITE andre.pura@mappau.com 292 SQL WRITE Generate database andre.pura@mappau.com 293 SQL WRITE Open database andre.pura@mappau.com 294 SQL WRITE Connect to database andre.pura@mappau.com 295 SQL WRITE Generate table and instert data andre.pura@mappau.com 296 DATASOURCE QML • SQL, JSON or XML can be loaded using QML only • DataSource must be imported • Local and external DataSource can accessed • A DataSource can be used to organize the data in QML andre.pura@mappau.com 297 DATASOURCE QML – EXTERNAL XML andre.pura@mappau.com 298 GROUPEDATAMODEL • This model is required to sort data for a list • It is possible to sort by different attributes • A combination of attributes is also possible – z.B. Name, Date of Birth • The following data types cen be sort: Char, Date, Datetime, Double, Int, LongLong, String, Time, UInt, ULongLong, Url andre.pura@mappau.com 299 GROUPEDATAMODEL • It is possible to group elments Source: https://developer.blackberry.com/cascades/documentation/ andre.pura@mappau.com 300 GROUPEDATAMODEL - QML andre.pura@mappau.com 301 GROUPEDATAMODEL - QML Sort by: firstName lastName, if the firstName is equal andre.pura@mappau.com 302 GROUPEDATAMODEL - QML How should the entry look like? andre.pura@mappau.com 303 STANDARDLISTITEM • A StandardListItem can have the following attributes – Image – ImageSource – Title – Status – Description Source: https://developer.blackberry.com/cascades/documentation/ andre.pura@mappau.com 304 STANDARDLISTITEM • A StandardListItem can have the following attributes – Image – ImageSource – Title – Status – Description Source: https://developer.blackberry.com/cascades/documentation/ andre.pura@mappau.com 305 EXAMPLE: HOW TO READ A RSS FEED? • • • • • • • • RSS = XML External source Linking against –lbbdata is required Register the type to use in QML Generate DataSource and Groupmodel Generate a list Load Done andre.pura@mappau.com 306 EXAMPLE: HOW TO READ A RSS FEED? • • • • • • • • RSS = XML External source Linking against –lbbdata is required Register the type to use in QML Generate DataSource and Groupmodel Generate a list Load Done andre.pura@mappau.com 307 EXAMPLE: HOW TO READ A RSS FEED? andre.pura@mappau.com 308 EXAMPLE: HOW TO READ A RSS FEED? andre.pura@mappau.com 309 EXAMPLE: HOW TO READ A RSS FEED? No grouping and sort by the date of publishing url to the RSS feed and where the single items can be found andre.pura@mappau.com 310 EXAMPLE: HOW TO READ A RSS FEED? andre.pura@mappau.com 311 EXAMPLE: HOW TO READ A RSS FEED? /rss/channel/item andre.pura@mappau.com 312 EXAMPLE: HOW TO READ A RSS FEED? If there is existing data, delete it and add the new data andre.pura@mappau.com 313 EXAMPLE: HOW TO READ A RSS FEED? andre.pura@mappau.com 314 EXAMPLE: HOW TO READ A RSS FEED? Connect the list with the DataModel How a ListItem looks like andre.pura@mappau.com 315 EXAMPLE: HOW TO READ A RSS FEED? Load RSS Feed andre.pura@mappau.com 316 EXAMPLE: HOW TO READ A RSS FEED? Load RSS Feed andre.pura@mappau.com 317 COMMUNICATION andre.pura@mappau.com 318 NETWORKING • In mobile computing it is in a lot of cases necessary to communicate with a server • A request is sent to a server • A reply is received • It is necessary to allow the application access the internet by setting the permission Source: https://developer.blackberry.com/cascades/documentation/ andre.pura@mappau.com 319 NETWORKING Source: https://developer.blackberry.com/cascades/documentation/ andre.pura@mappau.com 320 NETWORKING Source: https://developer.blackberry.com/cascades/documentation/ andre.pura@mappau.com 321 NETWORKING Source: https://developer.blackberry.com/cascades/documentation/ andre.pura@mappau.com 322 PUSH • Push is used to send a small amount of data to n devices • It is possible to push up to 8kb of data • A server distributes the push notification to n devices • Usually push is used to inform the user about new information • A new push message should be displayed using notifications andre.pura@mappau.com 323 PUSH 1. The Content Provider sends PushRequest 2. The BlackBerry server replies 3. The BlackBerry server sends data to the devices 4. The devices reply 5. The BlackBerry server passes the replies to the Content Provider 6. The Content Provider approves the receiving of the replies Source: https://developer.blackberry.com/cascades/documentation/ andre.pura@mappau.com 324 PUSH • It is possible to send a message to – A single device (unicast) – All registered devices (broadcast) – A part of the registered devices (multicast) • It is better to use push, than pulling content in the background • BIS (BlackBerry Internet Service) BES (BlackBerry Enterprise Service) Push • To use BIS push, an application must be registered andre.pura@mappau.com 325 PUSH - MANIFEST • Permessions to receive push messages • Using the invocation framework, the application is startet with the pushed data andre.pura@mappau.com 326 PUSH - MANIFEST • Permissions to receive push messages Using the bb.action.push, it is possible to identify, that the application was started using push • Using the invocation framework, the application is started with the pushed data andre.pura@mappau.com 327 PUSH - MANIFEST • To start the application, when the notification is clicked: andre.pura@mappau.com 328 PUSH - MANIFEST • To start the application, when the notification is clicked: The BlackBerry Hub tries to launch BB_OPEN_INVOCATION_ACTION, which is equal to bb.action.OPEN andre.pura@mappau.com 329 PUSH - CODE • If BB10 receives a push notification, it passes it to the registered application • The application decides what happens with the message andre.pura@mappau.com 330 PUSH - CODE • If BB10 receives a push notification, it passes it to the registered application • The application decides what happens with the message If a push notification is send to the application, a notification in the hub can be initialized andre.pura@mappau.com 331 PUSH - CODE • If the user clicks on a notification in the BlackBerry Hub the application is invoked using BB_OPEN_INVOCATION_ACTION andre.pura@mappau.com 332 PUSH - CODE • If the user clicks on a notification in the BlackBerry Hub the application is invoked using BB_OPEN_INVOCATION_ACTION The application was called form the Hub using an invocation from a notification andre.pura@mappau.com 333 NOTIFICATIONS • Notifications are used to inform the user about an incoming event • An event can be e.g. a message, an update, ... Source: https://developer.blackberry.com/cascades/documentation/ andre.pura@mappau.com 334 SET A NOTIFICATION PROGRAMMATICALLY • It is easy so set an notification programmatically andre.pura@mappau.com 335 SET A NOTIFICATION PROGRAMMATICALLY • It is easy so set an notification programmatically Initialize the notification Set title and text Initialize the invocation Sent the notification to the BlackBerry Hub andre.pura@mappau.com 336 DELETE A NOTIFICATION • You should delete the notification from the hub, if it was consumed • Single notification • All notifications andre.pura@mappau.com 337 NOTIFICATION - QML • Notifications can be initializied using WML • Configure it: • And deliver it to the hub andre.pura@mappau.com 338 EX 1 • • • • Create a new BB Cascades Projekt Create a txt file in the assets folder Generate 2 buttons If Button1 is clicked, load the content of the textfile and save it to a QString • Show the content in a textarea (editable) • If Button2 is clicked, copy the content of the textarea to a new file in the shared documents folder andre.pura@mappau.com 339 EX 2 • Create a new BB Cascades Projekt • Read the RSS Feed from the FH Hagenberghttp://www.fhooe.at/index.php?id=94&type=100 • Show the title and publisher date in a list • Sort the list by publishing date • Optional: group the entries by categories andre.pura@mappau.com 340 EX 3 • Create a new BB Cascades Projekt • Create 2 Buttons • If button1 is clicked, generate a notification and send it to the hub • If button2 is clicked, dismiss the notifications andre.pura@mappau.com 341 MOBILE COMPUTING WAHLPFLICHTFACH BLACKBERRY Sommersemester 2013 Dipl.-Ing. Andre Pura RECAPITULATION • Development in BB10 – – – – – HTML Native C++ Adobe Air Cascades Android Emulator • Elements of an application – – – – GUI in QML Code in C++ Description Files (z.B. Mainfest) Assets (wobei GUIs auch Assets sind) • You can use JavaScript in QML andre.pura@mappau.com 343 RECAPITULATION • 2 types of applications – Drill-Down – Tabs • Important GUI Elements – Container – Label – ImageView – Button – TextField andre.pura@mappau.com 344 RECAPITULATION • Menus – Context Menu – Page Context Menu – Application Menu • ActionItem andre.pura@mappau.com 345 RECAPITULATION • Communication between QML and C++ – Generate Object in C++ and pass it to QML – PropertyMap – Import C++ Class in QML and generate objects andre.pura@mappau.com 346 RECAPITULATION • ActiveFrame can be static and dynamic • Usually, dynamic frames are generated in C++ • An ActiveFrame must support both orientations and resizing • A lot of updates drain the battery andre.pura@mappau.com 347 RECAPITULATION • The file system has three different areas – Shared – Shared Invoke – Application area • The different areas have different permissions • It is possible to access XML, JSON and SQL from QML directly • DataSources are used to get content • The DataModel organizes and sorts the data • Lists are used to show content andre.pura@mappau.com 348 RECAPITULATION • A small amount of data can be sent to a device / devices using push • Applications can be called using a push message • In the hub push messages can be showed as a notification • Notifications are visible in the hub • On click on a notification an invoke is sent to the invocation framework andre.pura@mappau.com 349 COMMUNICATION andre.pura@mappau.com 350 NFC (NEAR FIELD COMMUNICATION) • • • • • • A lot of mobile devices have NFC It is possible to exchange data in a short range NFC can be used C++ and Cascades/Qt Not all interfaces can be found in Cascades/Qt Simpler using Cascades/Qt Best way: Invocation Framework andre.pura@mappau.com 351 NFC – INVOCATION FRAMEWORK • Usually NFC is used to exchange simple data • NFC Share Card using Invocation • Action for the Invocation: bb.action.SHARE • If the user chooses NFC, a preview of the content is shown Source: https://developer.blackberry.com/cascades/documentation/ andre.pura@mappau.com 352 NFC – INVOCATION FRAMEWORK • If the sent data is too big using NFC, a Bluetooth handshake is initialized • The content is submitted using Bluetooth • Files are always sent using Bluetooth • Data can be sent using NFC Source: https://developer.blackberry.com/cascades/documentation/ andre.pura@mappau.com 353 NFC – INVOCATION FRAMEWORK: FILE Source: https://developer.blackberry.com/cascades/documentation/ andre.pura@mappau.com 354 NFC – INVOCATION FRAMEWORK: DATA andre.pura@mappau.com 355 NFC – INVOCATION FRAMEWORK: SQUENCEDIAGRAM andre.pura@mappau.com 356 Source: https://developer.blackberry.com/cascades/documentation/ NFC – INVOCATION FRAMEWORK DATA • Direct connection, if data < 1 kb • If the receiving device can handle the incoming data • Sender: – mimeType = application/vnd.rim.nfc.ndef – uri is empty – data = <byte array representation of custom NDEF message> – action = bb.action.SHARE andre.pura@mappau.com 357 NFC – INVOCATION FRAMEWORK DATA • Receiver: – Registered with the Invocation Framework bb.action.OPEN – mimeType = application/vnd.rim.nfc.ndef – uri = <filter>, z.B. <property var="uris" value="ndef://1/Sp"/> andre.pura@mappau.com 358 NFC – INVOCATION FRAMEWORK DATA • Data should be sent to a known application (z.B. Browser) – mimeType = “text/plain” or mimeType = “text/URI-list” – uri is Empty. – data = <text representation of your payload> – action = bb.action.SHARE andre.pura@mappau.com 359 NFC – INVOCATION FRAMEWORK DATA • NDEF schemes known by BlackBerry: andre.pura@mappau.com 360 NFC – INVOCATION FRAMEWORK EXAMPLE DATA andre.pura@mappau.com 361 NFC – INVOCATION FRAMEWORK EXAMPLE DATA andre.pura@mappau.com 362 NFC – INVOCATION FRAMEWORK FILE • mimeType = <your custom mime Type>. Example:application/myapp1. • uri = <URI encoded string to a local file located on sending device>. Example: file:///shared/myapp1/sound1.mp3 • data = “” • action = bb.action.SHARE andre.pura@mappau.com 363 NFC – INVOCATION FRAMEWORK EXAMPLE FILE andre.pura@mappau.com 364 NFC – CASCADES/QT • Using Data or File • NfcShareManager • You have to inform the user about the different steps • It is necessary to handle alle sharing events andre.pura@mappau.com 365 NFC – CASCADES/QT: DATA Source: https://developer.blackberry.com/cascades/documentation/ andre.pura@mappau.com 366 NFC – CASCADES/QT: FILE Source: https://developer.blackberry.com/cascades/documentation/ andre.pura@mappau.com 367 NFC – CASCADES/QT: SEND • It is possible to share data and files – NfcShareDataContent – NfcShareFilesContent andre.pura@mappau.com 368 NFC – CASCADES/QT: SEND • It is possible to share data and files – NfcShareDataContent – NfcShareFilesContent andre.pura@mappau.com 369 NFC – CASCADES/QT: SEND • Data is passed to NfcShareManager • Data is valid until – Is was used – the ShareMode is set to disabled andre.pura@mappau.com 370 NFC – CASCADES/QT: SEND • Data is passed to NfcShareManager • Data is valid until – Is was used share data – the ShareModeExample is settoto disabled andre.pura@mappau.com 371 NFC – CASCADES/QT: SEND andre.pura@mappau.com 372 NFC – CASCADES/QT: SEND In difference to sending data, uri is passed here. Bluetooth will be activated and the data is sent using it andre.pura@mappau.com 373 NFC – CASCADES/QT: RECEIVE • To receive a NFC invocation, register the application andre.pura@mappau.com 374 NFC – CASCADES/QT: RECEIVE • To receive a NFC invocation, register the application Types which are supported by the application andre.pura@mappau.com 375 NFC – CASCADES/QT: RECEIVE Source: https://developer.blackberry.com/cascades/documentation/ andre.pura@mappau.com 376 NFC – CASCADES/QT: RECEIVE 377 Source: https://developer.blackberry.com/cascades/documentation/ BLACKBERRYMESSENGER (BBM) • Beside other communication channels, BlackBerry Messanger provides a unique way for communication • encrypted • BBM has a lot of features – – – – – – – Status updates Video calls Voice calls Pin-To-Pin Messeging Screen sharing Text messeges Groups andre.pura@mappau.com 378 BBM CONNECT • It is possible to connect applications to BBM • Event driven • It is possible to access – BBM user profile – Contact list – Messaging – Application profile box andre.pura@mappau.com 379 BBM – BEST PRACTISE • Sending invitations and messages – Make sure that users are the ones who initiate requests to engage other users. – If users want to invite others to join games, forums, or chats, you can allow users to enter their own text or you can provide default text – Include a contextual link in messages that recipients receive, where possible. andre.pura@mappau.com 380 BBM – BEST PRACTISE • Choosing contacts – Provide contacts with filter options, if possible and if meaningful to the task. – Allow users to filter contacts by contact categories that they created in BBM. andre.pura@mappau.com 381 BBM – BEST PRACTISE • Chats – Make sure that users have the ability to choose the people that they want to chat with. – When a chat begins, expose the chat interface – Make sure that you design your screens so that users can access key features when the chat interface is open. – Make a chat interface available on multiple screens in your application – If your application supports multiple chats, make sure that users have a way to switch between chats. andre.pura@mappau.com 382 BBM – BEST PRACTISE • Profile boxes – Give users the option to add information – Always ask permission before updating – If users allow your application to update their personal message, use the personal message field to describe a quality that is attributed to the user – Include only new events that users accomplish or specific activities that are meaningful milestones in a profile box. – Provide a succinct description for each event in the profile box – Include a meaningful icon for the activity or event. – Create icons that are 119 x 119 pixels. andre.pura@mappau.com 383 BBM CONNECT • Register application with BBM • Update BBM status andre.pura@mappau.com 384 BBM CONNECT • Register application with BBM • Update BBM status Call the C++ function to update the BBM status andre.pura@mappau.com 385 BBM CONNECT • Register application with BBM • Update BBM status Update the status andre.pura@mappau.com 386 LOCATION SERVICES • Location services are very important do the users andre.pura@mappau.com 387 LOCATION SERVICES • Location services are very important to the users – Provide location based services – Provide location based advertisment – Routing – Maps enriched applications – Combine location services with other services andre.pura@mappau.com 388 LOCATION SERVICES • Three different parts: – Positioning: Find the location of a device using GPS satellites, cell ID, or Wi-Fi positioning. – Geocoding: Find coordinates for a street address (geocoding), or find a street address for geospatial coordinates (reverse geocoding). – Mapping: Display a location in a MapView or integrate with the BlackBerry Maps application. andre.pura@mappau.com 389 LOCATION SERVICES • Difference between – GPS Positioning – Celluar Positioning – WiFi Positioning andre.pura@mappau.com 390 LOCATION SERVICES • Init location service • Retrieve a single position andre.pura@mappau.com 391 LOCATION SERVICES • Continues updates andre.pura@mappau.com 392 LOCATION SERVICES • Continues updates andre.pura@mappau.com 393 LOCATION SERVICES • If continuous updates are received, connect to the timeout signal andre.pura@mappau.com 394 LOCATION SERVICES • If continuous updates are received, connect to the timeout signal andre.pura@mappau.com 395 LOCATION SERVICES • Updates are provided every 5 seconds – Set the interval • Are updates required in „background“ andre.pura@mappau.com 396 GEOPOSITIONS • Information from the geo position – QGeoCoordinate – Direction – GroundSpeed – VerticalSpeed – MagneticVariation – HorizontalAccuracy – Vertical Accuracy – Timestamp andre.pura@mappau.com 397 (REVERSE) GEOCODING • Reverse geocoding is used to convert a GPS position into an address – Used to make a position human readable • Geocoding is used to find coordinates for a given address – Used to make an address machine readable andre.pura@mappau.com 398 REVERSE GEOCODING andre.pura@mappau.com 399 REVERSE GEOCODING andre.pura@mappau.com 400 REVERSE GEOCODING Get the service providers andre.pura@mappau.com 401 REVERSE GEOCODING Set the coordinates for the reverse process andre.pura@mappau.com 402 REVERSE GEOCODING Connect to the error and finished signal andre.pura@mappau.com 403 REVERSE GEOCODING Slots for the signals andre.pura@mappau.com 404 GEOCODING andre.pura@mappau.com 405 REVERSE GEOCODING andre.pura@mappau.com 406 REVERSE GEOCODING Get the service providers andre.pura@mappau.com 407 REVERSE GEOCODING Set the coordinates for the coding process andre.pura@mappau.com 408 REVERSE GEOCODING Connect to the error and finished signal andre.pura@mappau.com 409 REVERSE GEOCODING Slots for the signals andre.pura@mappau.com 410 MAPS • BlackBerry maps is installed on all BlackBerry 10 devices • It can be used in a static or dynamic way – MapView – MapGenerator andre.pura@mappau.com 411 Source: https://developer.blackberry.com/cascades/documentation/ STATIC MAP • Initialize the map generator • Process the reply andre.pura@mappau.com 412 STATIC MAP • Initialize the map generator • Process the reply andre.pura@mappau.com 413 MAPVIEW • Link against LIBS += -lbbcascadesmaps • A graphics user interface (GUI) control that displays a map along with user-defined geographic elements, which can be points of interest or other location-aware elements. • All data shown on the map is provided by the MapData object • It still exists, if the MapView is destroyed andre.pura@mappau.com 414 MAPVIEW andre.pura@mappau.com 415 MAPVIEW Initialize the first position andre.pura@mappau.com 416 MAPVIEW Connect to the signal andre.pura@mappau.com 417 ADVERTISMENT SERVICE • Provides ads from different platforms • Simple to integrate • A lot of statistics about the usage andre.pura@mappau.com 418 ADVERTISMENT SERVICE Source: https://developer.blackberry.com/cascades/documentation/ andre.pura@mappau.com 419 ADVERTISMENT SERVICE : STEPS • Register at http://adservices.blackberry.com/register/ • LIBS += -lbbcascadesadvertisement • Set persmissions – Device Identifying – GPS Location (optional) • Register type andre.pura@mappau.com 420 ADVERTISMENT SERVICE : STEPS • Import in QML • QML andre.pura@mappau.com 421 ADDTIONAL INFORMATION andre.pura@mappau.com 422 BUILD FOR BB • Criteria – – – – – – User Benefits User Experience Performance Service Integration Security Internationalization • Benefits – Additional area in the BlackBerry World – Additional advertisment at different events – A „thank you“ gift • https://developer.blackberry.com/builtforblackberry/ andre.pura@mappau.com 423 CASCADES ROADMAP https://developer.blackberry.com/cascades/download/roadmap/ andre.pura@mappau.com 424 VENDOR REGISTRATION • No registration or submission fees. None. $0.00 • Multiple monetization opportunities with in-app purchasing, subscription billing, and mobile ad services • Crystal clear, transparent submission process • Increase the discoverability of your apps with a range of "Top 25" lists that end users can search on both the mobile and desktop storefront versions of BlackBerry World • Make it easy for end users to purchase your apps and digital goods by providing popular payment methods like PayPal, credit card, and direct to carrier billing (carrier dependent see below...) • https://developer.blackberry.com/devzone/blackberryworld/apply_ for_a_blackberry_world_membership_account.html#pde13504060 51752 Source: https://developer.blackberry.com/devzone/blackberryworld/ andre.pura@mappau.com 425 RELEASE CHECKLIST • Review tips that can help smooth the approval process and get your app up on BlackBerry World faster. • Start with our guidelines for naming your app, then go on to create great descriptions and images to help get your app noticed. • Check that your release is ready. Make decisions about app security, digital rights, export regulations and similar details. • If you don't already have one, apply for a membership account on the vendor portal. • Review guidelines and criteria to give your app the best chance for a quick approval for sale on BlackBerry World. • Submit your app, create a release, and add any digital goods you want to sell in your app. Source: https://developer.blackberry.com/devzone/blackberryworld/ andre.pura@mappau.com 426 ADDITIONAL LINKS • Documentation – https://developer.blackberry.com/cascades/documentation/ • BlackBerry News – http://crackberry.com/ • Developer Forum – http://supportforums.blackberry.com/t5/Cascades-Development/bdp/Cascades • Samples – https://github.com/blackberry/ • Code Snippets – http://cascadescode.tumblr.com/ • Vendor Portal – https://appworld.blackberry.com/isvportal/login_input.do?pageId=0 andre.pura@mappau.com 427 COPYRIGHT andre.pura@mappau.com 428 EX 1 • Create a new BlackBerry Cascades Project • Read the JSON Data from – http://dienststellen.bmf.gv.at/finanzamtsliste.json • Show the data in a list, sorted by the name • Generate a second page, which shows the details of the selected name • If an entry in the list is triggered, open the second page with the details for the selected name andre.pura@mappau.com 429 EX 1 • Think about useful invocations and include them (at least 1). If you define the invocation as a context action, define also an icon! (search for the bb standard icons on the web) • Is grouping possible? What would be a good grouping argument • Optional: – Generate a static map of the location and add it to the details page – Load the image data included in the json asynchronously – Implement an Activity Indicator as a loading sign andre.pura@mappau.com 430 HINT andre.pura@mappau.com 431 HINT 0 1 2 3 4 5 6 7 8 9 10 andre.pura@mappau.com 432 HINT 0 1 2 3 4 5 6 7 8 9 10 indexPath andre.pura@mappau.com 433 HINT 0 1 2 andre.pura@mappau.com 434 PROJECT: CERTIFICATE SIGNING • Signing documents directly an the smartphone • Used for – Sign a document on the smartphone to use it in govermental transactions – Time logging systems – Banking application • Signing server structural is provided • Usage using the „share“ invocation • Supported by – – – – – BlackBerry Austria BlackBerry Germany mappau Bundeskanzleramt (BKA) Genoa andre.pura@mappau.com 435