(Michal karnicki & alex chiang) canonical

22
Introducing Ubuntu Phone OS (and its app ecosystem) Alex Chiang Canonical, Inc.

Transcript of (Michal karnicki & alex chiang) canonical

Page 1: (Michal karnicki & alex chiang) canonical

Introducing Ubuntu Phone OS (and its app ecosystem)

Alex Chiang Canonical, Inc.

Page 2: (Michal karnicki & alex chiang) canonical

Unity

•  A journey since 2010

•  Flexible, responsive UI

Page 3: (Michal karnicki & alex chiang) canonical

*

A convergent future

Page 4: (Michal karnicki & alex chiang) canonical

*

Focus on content

Page 5: (Michal karnicki & alex chiang) canonical

Scopes: content/context engines

Multiple content sources

Context specific search

Browse and filter by category

Page 6: (Michal karnicki & alex chiang) canonical

All scopes, all the time

Page 7: (Michal karnicki & alex chiang) canonical

*

Design + open source = beautiful

Page 8: (Michal karnicki & alex chiang) canonical

*

Native language

Page 9: (Michal karnicki & alex chiang) canonical

import QtQuick 2.0 import Ubuntu.Components 0.1 import "components" MainView { applicationName: "com.ubuntu.developer.achiang.deview" width: units.gu(15) height: units.gu(10) Page { Button { id: label anchors.centerIn: parent text: i18n.tr("Hello...") onClicked: { label.text = i18n.tr("World!") } } } }

I do declare: “Hello World”

Page 10: (Michal karnicki & alex chiang) canonical

*

Responsive UI

●  Grid units ●  Switch stages

dynamically

Page 11: (Michal karnicki & alex chiang) canonical

ProgressBar { id: progress width: parent.width SequentialAnimation on value { loops: Animation.Infinite NumberAnimation { from: progress.minimumValue to: progress.maximumValue duration: 2000 } PauseAnimation {duration: 1000} } }

Making progress

Page 12: (Michal karnicki & alex chiang) canonical

Text { id: label height: units.gu(5) } TextField { id: input validator: IntValidator {} } Button { text: i18n.tr("Calculate") function factorial(a) { a = parseInt(a); if (a <= 0) return 1; else return a * factorial(a - 1); } onClicked: { label.text = factorial(input.text) } }

Inline Javascript

Page 13: (Michal karnicki & alex chiang) canonical

property url source: { // Load image using the Gallery image provider to ensure EXIF orientation return isPreview ? mediaSource.galleryPreviewPath : mediaSource.galleryPath } ##################################################################################### Orientation PhotoMetadata::orientation() const { Exiv2::ExifData& exif_data = m_image->exifData(); if (exif_data.empty()) return DEFAULT_ORIENTATION; if (m_keysPresent.find(EXIF_ORIENTATION_KEY) == m_keysPresent.end()) return DEFAULT_ORIENTATION; long orientation_code = exif_data[EXIF_ORIENTATION_KEY].toLong(); if (orientation_code < MIN_ORIENTATION || orientation_code > MAX_ORIENTATION) return DEFAULT_ORIENTATION; return static_cast<Orientation>(orientation_code); }

QML + Qt for more power

Page 14: (Michal karnicki & alex chiang) canonical

*

First class citizenship

Page 15: (Michal karnicki & alex chiang) canonical

*

Heads up!

Page 16: (Michal karnicki & alex chiang) canonical

import Ubuntu.Components 0.1 import Ubuntu.UnityWebApps 0.1 MainView { applicationName: "com.ubuntu.developer.achiang.deview" // Access to the Unity Webapps API from application's javascript. UnityWebApps { name: "deview" bindee: webView actionsContext: root.actionManager.globalContext } Flickable { id: webViewFlickable WebView { id: webView url: "html/index.html" } } }

HTML5 app skeleton

Page 17: (Michal karnicki & alex chiang) canonical

// Check if the unity API is available, if not wait for the event // sent when it is. if (window.external && window.external.getUnityObject) { initUnityIntegration(); } else { document.addEventListener('ubuntu-webapps-api-ready', initUnityIntegration, false); } function initUnityIntegration () { unity = window.external.getUnityObject('1.0'); unity.init({name: 'Myapp', onInit: performUnityIntegration}); } // Access the Unity API function performUnityIntegration() { // Add a HUD action unity.addAction('pressme', function() { if (UI) UI.dialog('mydialog').show(); }); }

Platform integration

Page 18: (Michal karnicki & alex chiang) canonical

*

Heads up!

Page 19: (Michal karnicki & alex chiang) canonical

*

Join our community

Page 20: (Michal karnicki & alex chiang) canonical

Ready, set, go!

Page 21: (Michal karnicki & alex chiang) canonical

Resources

•  Developer’s workshop, immediately following

•  Ubuntu 13.10 released on October 17

•  http://developer.ubuntu.com/

•  http://design.ubuntu.com/apps

@_achiang [email protected]

Page 22: (Michal karnicki & alex chiang) canonical

*