Your SlideShare is downloading. ×
0
Introducing Ubuntu Phone OS
(and its app ecosystem)
Alex Chiang
Canonical, Inc.
Unity
• 

A journey since 2010

• 

Flexible, responsive UI
A convergent future

*
Focus on content

*
Scopes: content/context engines

Multiple content
sources

Context specific
search

Browse and filter
by category
All scopes, all the time
Design + open source = beautiful

*
Native language

*
I do declare: “Hello World”
import QtQuick 2.0
import Ubuntu.Components 0.1
import "components"
MainView {
applicationName...
Responsive UI

●  Grid units
●  Switch stages
dynamically

*
Making progress
ProgressBar {
id: progress
width: parent.width
SequentialAnimation on value {
loops: Animation.Infinite
Nu...
Inline Javascript
Text {
id: label
height: units.gu(5)
}
TextField {
id: input
validator: IntValidator {}
}
Button {
text:...
QML + Qt for more power
property url source: {
// Load image using the Gallery image provider to ensure EXIF orientation
r...
First class citizenship

*
Heads up!

*
HTML5 app skeleton
import Ubuntu.Components 0.1
import Ubuntu.UnityWebApps 0.1
MainView {
applicationName: "com.ubuntu.dev...
Platform integration
// Check if the unity API is available, if not wait for the event
// sent when it is.
if (window.exte...
Heads up!

*
Join our community

*
Ready, set, go!
Resources
• 

Developer’s workshop, immediately following

• 

Ubuntu 13.10 released on October 17

• 

http://developer.u...
*
Upcoming SlideShare
Loading in...5
×

(Michal karnicki & alex chiang) canonical

572

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
572
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
22
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "(Michal karnicki & alex chiang) canonical"

  1. 1. Introducing Ubuntu Phone OS (and its app ecosystem) Alex Chiang Canonical, Inc.
  2. 2. Unity •  A journey since 2010 •  Flexible, responsive UI
  3. 3. A convergent future *
  4. 4. Focus on content *
  5. 5. Scopes: content/context engines Multiple content sources Context specific search Browse and filter by category
  6. 6. All scopes, all the time
  7. 7. Design + open source = beautiful *
  8. 8. Native language *
  9. 9. I do declare: “Hello World” 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!") } } } }
  10. 10. Responsive UI ●  Grid units ●  Switch stages dynamically *
  11. 11. Making progress ProgressBar { id: progress width: parent.width SequentialAnimation on value { loops: Animation.Infinite NumberAnimation { from: progress.minimumValue to: progress.maximumValue duration: 2000 } PauseAnimation {duration: 1000} } }
  12. 12. Inline Javascript 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) } }
  13. 13. QML + Qt for more power 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);
  14. 14. First class citizenship *
  15. 15. Heads up! *
  16. 16. HTML5 app skeleton 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" } } }
  17. 17. Platform integration // 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', 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(); }); initUnityIntegration,
  18. 18. Heads up! *
  19. 19. Join our community *
  20. 20. Ready, set, go!
  21. 21. Resources •  Developer’s workshop, immediately following •  Ubuntu 13.10 released on October 17 •  http://developer.ubuntu.com/ •  http://design.ubuntu.com/apps @_achiang achiang@canonical.com
  22. 22. *
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×