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

2. Unity
•
A journey since 2010
•
Flexible, responsive UI

3. A convergent future
*

4. Focus on content
*

5. Scopes: content/context engines
Multiple content
sources
Context specific
search
Browse and filter
by category

6. All scopes, all the time

7. Design + open source = beautiful
*

8. Native language
*

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. Responsive UI
● Grid units
● Switch stages
dynamically
*

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. 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. 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. First class citizenship
*

15. Heads up!
*

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. 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. Heads up!
*

19. Join our community
*

20. Ready, set, go!

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. *