Porting: ios. JAM 811 Gary Fioret November 29-30, 2012

Transcription

1 Porting: ios JAM 811 Gary Fioret November 29-30, 2012

2 Agenda Agenda : Welcome / Introduction Platform Design Development Language Tools on Cross Platform Design Tools User Experience/User Interface Application UI a closer look A Simple Project Summary Questions 2

3 Welcome! This session you will to learn how to get started with porting apps that use ios UIKIt to BlackBerry 10 using the Cascades framework. 3

4 Welcome Hi, I m Gary What I do at RIM Share some of my experiences Compare and Contrast the two platforms This presentation is a guide, a starting point, vast topic Generic Overview Q&A at the end, but feel free to ask as I present 4

5 Welcome Why port to BlackBerry 10? Revenue generation for you! another platform, another stream A lot of great apps on ios that we d like to see on BlackBerry 10 A lot of similarities in the languages which lend to porting Highlight similarities and differences Some of the key concepts in the SDK Some of the key concepts in the UI 5

6 Welcome Why port to BlackBerry 10? Challenge yourself as a programmer the polyglot programmer Opening your mind to another platform/language is stimulating You enhance your abilities and your resume! You may find opportunities 6

7 Welcome How? No magic wand, but we put together a terrific set of resources to get you started! Porting Guide Mapping APIs Forums to ask and answer questions This presentation! 7

8 Platform Design 8

9 The Platforms Compare and Contrast UIKit Application Frameworks [Maps, Message ] Graphics and Audio Core Services ios (Kernel) & Drivers Webkit Posix Cascades / QML Application Frameworks [Qt, Maps, PIM, Share ] Graphics and Audio Core Services (/BPS) BlackBerry 10 (QNX microkernel) & Drivers 9

10 Types of Apps Native (Objective C and Cocoa Touch UIKit, OpenGL) Android Runtime, AIR Native (C/C++, QML, Cascades, OpenGL) Web Apps Native with Webview PhoneGap Web Apps Native with Webview WebWorks, PhoneGap 10

11 Development Language 11

12 ios Native Development USER INTERFACE DEVELOPMENT Cocoa Touch UI Framework UIKit Use Objective-C APPLICATION LOGIC Objective-C or Objective-C++ and C++ (rename your.m file to.mm and add wrappers) 12

13 Map classes (porting guide ) Porting ios NS classes You will find it relatively easy to map NS classes to equivalents in BlackBerry 10. The table below gives some examples. ios NS Class BlackBerry 10 Class Description NSArray/NSMutableArray QByteArray An array of bytes. The size of a QByteArray can be set in the class constructor or via the size() method. It can be changed using the resize() method NSDate QDate Stores a date and provides helper methods to for example calculate date differences. QDateTime is used to store date and Time NSString/NSMutableString QString Used to contain and manipulate strings. There is no separate class for strings that cannot be modified in BlackBerry 10 NSURL QUrl Stores and manipulates a URL Table 5: Mapping ios NS Classes 13

14 Tips on Cross Platform Design 14

15 Cross Platform Design? Why? Easier to port More code reuse across projects Easily identify platform dependent code How? Avoid platform dependent functionality Use cross-platform libraries, frameworks or engines Isolate platform dependent code >> We live in a multi-platform World << 15

16 C/C++ for cross platform C/C++ is used widely due to it s portability. It s a true cross-platform language (combined with POSIX) Enables Lots of BlackBerry 10 Open Source Frameworks ios can also run C/C++ apps (Objective-C++). Developers are starting to look into this option for cross-platform savings. Rename your.m file into.mm and add objective-c++ Write objective-c++ to Objective-C wrappers >>Open Source Libraries<< 16

17 Avoid Platform Dependent Code Use libraries that are available on all platforms BlackBerry Platform Image Libraries QNX Image Library (libimg) Libpng Libjpeg May require Research Compiling/loading 3 rd Party Libraries 17

18 Isolate Platform Dependent Code Application November 29, 2012 App Logic Device and Platform Device ios Device QNX App Code Interfaces Platform Dependent Code UI Platform ios Platform QNX main 18

19 Low level Graphics OpenGL ES 1.1 / 2.0 support Simple EGL initialization using GLView Similar to ios GLKit/GLKView Screen considerations Device Resolution Ratio iphone 1136x :9 BlackBerry 10 Touch 1280 x :9 BlackBerry 10 QWERTY 720 x 720 1:1 19

20 Porting Audio Porting ios audio code Use BlackBerry 10 audio APIs Go multiplatform by switching to OpenAL (Highly Recommended) ios BB10 Multiplatform AV Foundation MMRenderer, QSA OpenAL Audio Toolbox QSA OpenAL 20

21 Tools 21

22 Momentics IDE 22

23 XCode 23

24 User Experience and User Interface 24

25 ios Interact with One app at a time In/Out Paradigm Most of UI app interaction is based on taps and gestures An app is a collection of screens through which the user navigates a window always fills the device main screen

26 Common ground Apple Says The Display is Paramount Regardless of its size Apps Respond to Gestures, Not Clicks RIM Says Content is King Apps must Flow 26

27 BlackBerry 10 Peek and ios (curl) ios concept of partial-curl 27

28 A key difference Apple Says People interact with One App at a Time RIM Says Extend/Connect BlackBerry people Multi-Task Combine that with Peek and Viewers/Cards 28

29 BlackBerry 10 Unique: Introducing Cards Cards enable flow I created a previewer card I could use that Not an app and not a viewer Like apps: Invoked (full screen) Like viewers but app defined and system managed Enable Peeking 29

30 Application UI a closer look 30

31 Navigation Bar / Action Bar 31

32 Settings / App Menu 32

33 Tab Bar 33

34 Tab Overflows (BlackBerry 10 Sidebar) 34

35 Context Menu Custom buttons in the navigation bar toolbar 35

36 BlackBerry 10 action bar overflow 36

37 Action Sheets / Sheets 37

38 Cascades Controls

39 ios Controls 39

40 A Simple Project 40

41 Starting: Development Tools 41

42 UI Design (ios storyboards) 42

43 BlackBerry 10 Qt/QML 43

44 Lists (ListView) Container {.. ListView { datamodel: XmlDataModel { source: "models/items.xml" } listitemcomponents: [ ListItemComponent { type: "header HeaderListItem { titletext: ListItemData.title subtitletext: ListItemData.subtitle } }, ListItemComponent { type: "listitem StandardListItem { titletext: ListItemData.title descriptiontext: ListItemData.subtitle statustext: ListItemData.status }}}}}}

45 Lists Summary ios Storyboards are Visually appealing QML/Qt is descriptive Data binding to Lists is easier in Cascades than on ios 45

46 Similar UI 46

47 Navigation (Navigation Controller) 47

48 Navigation Pane 48

49 Summary 49

50 Summary Know the Dev Tool(QNX Momentics Cascades/Native SDK) to get started Know the Dev language (C/C++, QML) to develop crossplatform application Know BlackBerry 10 Platform to take advantages of the platform features (e.g. Gestures, Hub, UIB etc) Know BlackBerry 10 UX to provide users the best experience Submit your BlackBerry 10 app to App World and Collect Money! 50

51 Summary You can do it! Lets make it happen! Share your successes with me If you have a good porting success story then please send me an . I ll working with marketing to try to get your name out there gfioret@rim.com 51

52 And a few Quick Notes Download the Mobile Conference Guide from BlackBerry World and start exploring BlackBerry Jam Asia! Have more questions? Visit Ask the Experts at 6pm tonight by the coding lounge in the Jam Space. Check out the winners of the JamHack events in Asia at the JamHack Finals and vote for your favourite app at 6pm in Meeting Room 2. Don t forget to relax and unwind at the Appreciation Event tonight in the Retro Café 52

53 Questions? 53

54 THANK YOU JAM811 Gary Fioret November 29-30, 2012

55 Additional Slides If time permits 55

56 Platform Services & Features 56

57 Platform Services & Features Similarities multimedia webview push and notifications Invoke and handlers storage networking Security/cryptography Some differences Application behaviour BlackBerry 10 Application Covers 57

58 Multimedia MPMoviePlayerController *player = [[MPMoviePlayerController alloc] initwithcontenturl:videourl]; [[player view] setframe:[self.view bounds]]; [self.view addsubview:[player view]]; InvokeRequest cardrequest; cardrequest.seturi(videourl); InvokeManager invokemanager; invokemanager.invoke(cardrequest); BlackBerry 10 invoke framework with cards 58

59 WebView (webkit) 59

60 Push and Notifications 60

61 Invoke and handlers I need to open this.doc file. Anyone? I can open.doc files Invocation Framework UIDocumentInteractionControlle r InvokeManager 61

62 Storage /Inbox Sandbox data logs tmp app shared Application Installation User Shared SQLite 62

63 Networking REST NSURL *url = [NSURL URLWithString:@" r.com/search.json?q=@suavekz"]; NSURLRequest *request = [[NSURLRequest alloc] initwithurl:url]; or use RestKit library QNetworkRequest request=qnetworkrequest(); request.seturl(qurl(" r.com/search.json?q=@suavekz")); QNetworkAccessManager *m = new QNetworkAccessManager(this); QObject::connect(m, SIGNAL(finished(QNetworkReply*)), this, SLOT(requestFinished(QNetworkReply*))); networkaccessmanager->get(request); 63

64 Security/Cryptography ios and BlackBerry 10 similar features AES,DES,3DES Key difference BlackBerry 10 crypto algorithms are FIPS certified Only Modules validated as conforming to FIPS are accepted by the Federal Agencies of Canada/US for the protection of sensitive information.

65 Application Behavior Lifecycle and when to store your data Normal (Active) Start Hidden (Inactive) Must respond correctly to lifecycle events Can drain battery Must store data efficiently Thumbnail (Active/Inactive) Exit 65

66 BlackBerry 10 Application Covers void App::onThumbnail() { if (!m_ptimer) { m_plabel = Label::create(); m_pscenecover = SceneCover::create().content(m_pLabel) Application::instance()->setCover(m_pSceneCover); } m_ptimer = new QTimer(this); connect(m_ptimer, SIGNAL(timeout()), this, SLOT(updateCover())); m_ptimer->start(1000); } m_plabel->settext(qtime::currenttime().tostring()); 66

67 ios Lifecycle Long-Running Background Tasks Audio Location/Navigation VOIP Newsstand apps (downloads etc ) Accessory apps 67