Upload
quinlan-brooks
View
24
Download
4
Tags:
Embed Size (px)
DESCRIPTION
User Interfaces in the Mobile Industry. November 2011. OpenPlug key facts. Founded in 2002 France (Sophia-Antipolis) ~ 50 people Acquired by Alcatel-Lucent in March 2011 OpenPlug provides the first open software framework for mass market wireless phones. OpenPlug key facts. - PowerPoint PPT Presentation
Citation preview
COPYRIGHT © 2011 ALCATEL-LUCENT. ALL RIGHTS RESERVED.
User Interfaces in the Mobile Industry
November 2011
2Open-Plug Confidential & Proprietary
OpenPlug key facts
• Founded in 2002
• France (Sophia-Antipolis)
• ~ 50 people
• Acquired by Alcatel-Lucent in March 2011
OpenPlug provides the first open software framework for mass market wireless phones
OpenPlug key facts
•Mobile industry veterans
•Experts in embedded software for mobile phones
•H.Q. based in Sophia Antipolis, the French ‘telecom valley’
Experts in mobile software development environments
3Open-Plug Confidential & Proprietary
4Open-Plug Confidential & Proprietary
Introduction and background
5Open-Plug Confidential & Proprietary
User Interface
• What is a User Interface ?
Display things
Receive inputs
6Open-Plug Confidential & Proprietary 6Open-Plug Confidential & Proprietary
Window
List toolbar
Btn right
Btn mid
Btn left
Widget Tree
Send events To widget tree
Process events From widget tree
Gmainloop
controlpoint
Drawing engine(GDK/DFB/nCore)
Services(Databases,…)
Example of GTK, but it applies to all
7Open-Plug Confidential & Proprietary 7Open-Plug Confidential & Proprietary
State 2
State 1
State 3
Notion of states
8Open-Plug Confidential & Proprietary 8Open-Plug Confidential & Proprietary
Actors definition
Interaction Designer•Defines Screens and UI Flow•High level application logic•Defines UI Data to be presented•Screen Layouts
Graphical Designer•Creates Graphical Assets « what the screens look like »•Transitions and animations
Software Engineer•Connects data services to middleware. •Integrates application logic with middleware and events
Different actors, different knowledge …. So different technologies and different tools!
Tech Expertize Artistic Talent
9Open-Plug Confidential & Proprietary
A few years ago…
• UI is designed by Graphic Designers on paper, and put in place by Engineers.
• UI is developed in C/C++/Java, using GTK, QT, or proprietary technologies.
• Result is often not exactly what designer wanted.
OK OK
10Open-Plug Confidential & Proprietary
A few years ago…
• On the Customer side:– Software is not important– People only look at the hardware design– People don’t buy a phone because UI is pretty
11Open-Plug Confidential & Proprietary
A few years ago…
• On the Phone Makers side:– Operators focus on functionality instead of ergonomics– No code reuse between platforms, lot of time is lost
rewriting the UI for each phone– Screen size adaptation means rewriting the UI
(engineers)
12Open-Plug Confidential & Proprietary
The turn-over
13Open-Plug Confidential & Proprietary
Change of mind
• New handset comes out
• UI is pretty and easy to use
• Many features are missing (MMS…)
But it is a success !
14Open-Plug Confidential & Proprietary
Change of mind
• People realize that software is important
• Phone companies wants beautiful UIs, quickly
• UI shouldn’t be developed by engineers, but by graphic designers
• Graphic Designers should be free to do what they want, and not limited by technology
15Open-Plug Confidential & Proprietary
What industry wants
• Sexy mobile phones with beautiful UI
• Create new variants of a mobile phone easily
• Let graphic designers handle the UI
16Open-Plug Confidential & Proprietary
NextGen UI
17Open-Plug Confidential & ProprietaryOpen-Plug Confidential & Proprietary
UI technologies are trendy on phones….
• iPhone
• Android
• Windows Phone 7
• Nokia Maemo, etc…
18Open-Plug Confidential & Proprietary
UI technolgies are trendy on the web and desktop
RIA Runtime UI Control Tools
Adobe Flex Flash Plugin
MXML Action Script 3 (= JS 2)
Adobe Flex Builder
MS Silverlight (WPF/E)
Silverlight Brower Plugin
XAML (subset) Javascript, C#, VB#, all .NET languages
Expression line + VS
OpenLaszlo Flash or DHTML
LZX Javascript No
XUL XULRunner (mozilla)
XUL Javascript No
18Open-Plug Confidential & Proprietary
RDA Runtime UI Control Tools
Adobe AIR AIR (flash + webkit)
MXML Action Script 3 (= JS 2)
Adobe Flex Builder
WPF .NET FWK XAML .NET languages
Expression line + VS
Prism XULRunner XUL JS NO
19Open-Plug Confidential & Proprietary
Next Gen UI
• New UI technologies focus on :– Productivity– Easy access for designers– Reusability– Componentization (widgets)
20Open-Plug Confidential & Proprietary
Adobe Flex
• What is Flex ?– UI technology from Adobe – One of the most productive Framework of the industry (10
times more productive than Flash, as said by Adobe)– Framework and tools to build dynamic, interactive rich
Internet applications delivered on the web (Flash Player) or to the desktop (Adobe AIR)
– Very popular in web and desktop environments:• Google• Volkswagen• Oracle• HP• eBay
– Leverages Adobe tools penetration with graphics/designers
21Open-Plug Confidential & Proprietary 21Open-Plug Confidential & Proprietary
Adobe Flex Builder
22Open-Plug Confidential & Proprietary 22Open-Plug Confidential & Proprietary
Adobe Flex on mobile phones ?
• Adobe Flex can bring a lot to Mobile Phones– In term of productivity – In term of graphical standard
• But– Flex requires a Flash 10 or AIR runtime
• Not yet available for mobile phone (beta versions in 2011)• Flash/AIR runtime faces performance/memory constraints on
mid- and low- end platforms• No standard industrial flow is defined between all actors in the
mobile phone product lifecycle
– Flex suits only single application design and not complex system design
23Open-Plug Confidential & Proprietary 23Open-Plug Confidential & Proprietary
Mass market phone specifications
• Processor: ARM7 ~100MHz to ARM9 ~200MHz
• RAM: 1MB to 4MB
• Flash: 4MB to 16MB
• Screen: 16bits, 176*220 to 240*320
24Open-Plug Confidential & Proprietary 24Open-Plug Confidential & Proprietary 24Open-Plug Confidential & Proprietary
Smartphone/Tablet specifications
• Processor: ARM10 ~600MHz to ARM11 ~1200MHz
• RAM: 128MB to 512MB
• Screen: 16bits, 320*480, 480*800, 1280*800
25Open-Plug Confidential & Proprietary
NextGen UI on platform
Rich Interface Runtime UI Control Tools
TAT TAT Cascade
Cascade XML C TAT Motion Lab
Digital Airways Kreb KIDE XML C KIDE
Apple iOS iOS NIB or XIB (XML)
Objective C XCode/Interface Builder
Google Android Java Android XML Java No
JavaFX JavaFX Mobile + VM
JavaFX Script JavaFX Script No
SVG Ikivo (and other)
SVG JS Ikivo
25Open-Plug Confidential & Proprietary
What does Alcatel-Lucent offer ?
OpenPlug StudioThe next generation of development environment
for mobile applications
You are a Flex developer ?
Now you are a mobile expert !
26Open-Plug Confidential & Proprietary
27Open-Plug Confidential & Proprietary
Alcatel-Lucent Solution
• OpenPlug Studio– OP Studio reuses Adobe tools– OP Studio allows to transform scripted Flex applications into native
code– OP Studio allows Designers to be in charge of UI, not Engineers– OP Studio makes a clear separation of Presentation from Logic and
Data• Model-View-Controller pattern
– OP Studio relies on OP’s commercical-grade graphics rendering engine
• Excellent performance on feature phone platforms, even low-end • Advanced features
– Touchscreen support– Transition effects
– OP Studio can be introduced easily on an existing platform• Thanks to OP Companion Framework
Flex is your new mobile SDK
• Code your application in Flex Builder with our mobile Flex SDK
• Test it in our phone simulator• Build it natively and deploy it on today’s handsets
28Open-Plug Confidential & Proprietary
How do we do this ?
Flex Framework internal AS code has been optimised
Unique build technology “transcodes” AS3/MXML into native code
Application is executed natively on the “bare metal”
Compact and efficient execution libraries are packaged in the app
assets
AS3
MXMLYOUR APP
CODE
ELIPS MOBILE
FLEX SDK
ELIPS COMPILER
010101010101010
29Open-Plug Confidential & Proprietary
30Open-Plug Confidential & Proprietary
Tutorial
31Open-Plug Confidential & Proprietary
Tutorial
• Step 1: Setup– Install Adobe Flex Builder or Flash Builder– Install OpenPlug Studio– Setup Flex Builder’s Workspace
• Step 2: Flickr Application– Create AIR app– Simulate on PC
• Step 3: Bring to device– Build for Android– Run on device
Join the OpenPlug Studio Developer Program
• Go to http://developer.openplug.com
• It’s free for all, just enroll !– Download OpenPlug Studio and be the first
to make Flex applications for mobiles– Learn more through videos and samples– Share your experiences with our experts
and other users on our Forum– Influence the commercial product spec
• And enjoy the mobile world !
33Open-Plug Confidential & Proprietary
Thank you!
34Open-Plug Confidential & Proprietary
Internships
35Open-Plug Confidential & Proprietary
Open-Plug Internships
• Open-Plug recruits interns!– Design User Interfaces– Optimize drawing algorithms– Develop MXML to C++ compiler– Adapt graphic stack for new devices (Android, iPhone)
36Open-Plug Confidential & Proprietary 36Open-Plug Confidential & Proprietary
ELIPS 3.0 Actors and Flow
Adobe Flex Builder
36
AdobeCS3
Photoshop / Illustrator
Visual Studio
-Connect data services to middleware. -Integrate application logic with middleware and events
-Define Screens and UI Flow-High level application logic-Define UI Data to be presented-Screen Layouts-Transition and animations
-Graphical assets creation