Mobilizing The Web with Web Runtime/ Miha Lesjak, 5. 3.2010 Hagenberg

1. Mobilizing the Web
M bili i th W b
How to reuse what you already know
to create mobile applications?
t t bil li ti ?
miha.lesjak@inova.si

2. About
Inova IT is a professional services and software company based in
p f f p y
Maribor, Slovenia. We specialize in custom application development,
systems integration, and the commercialization of next generation mobile
and communication solutions. Our cutting‐edge tools and applications
and communication solutions Our cutting‐edge tools and applications
bridge the mobile, telecom and internet domains, which we believe is the
next generation in mobile and fixed line communications.

3. Agenda
How started with mobile apps development
H t t d ith bil d l t
Web Runtime (WRT) Widgets in a Nutshell
Web Runtime (WRT) Widgets in a Nutshell
Digging Deeper
– Utilizing Platform Services
Utilizing Platform Services
– Adding value with Home Screen

4. How we got hooked
on Nokia Web Runtime

5. Expertise
We wanted to add
We wanted to add mobile to the mix
to the mix
+
The Future is Mobile
We are all keen believers that the next wave in the IT revolution will be driven by mobile services. These services will reshape the society in the same way
the Internet has utterly transformed it over the last decade. We believe the mobile world influences nearly every aspect of our lives. We simply must be
at the forefront of developing new mobile services.

6. Expertise
We have expertise in the following development and communication
technologies:
• Java, including Java Micro Edition, Java SE, Java EE, Spring and Hibernate
Java, including Java Micro Edition, Java SE, Java EE, Spring and Hibernate
• .NET, including Microsoft ASP.NET, ADO.NET, WCF, WWF, WPF, Office Integration
• Rich Internet Applications (RIAs)
– JavaScript / Ajax
i / j
• JavaScript libraries: prototype, script.aculo.us, and JQuery
• JavaScript widget libraries Ext JS Ext GWT Dojo Toolkit
JavaScript widget libraries: Ext JS, Ext GWT, Dojo Toolkit
– HTML, DHTML, CSS, XML
– Adobe Flash Flex
Adobe Flash, Flex
– Google’s GWT Framework
• C/C++, including BOOST
• Qt, Trolltech’s cross‐platform framework
• SIP, including SIP application server development for next gen communications (e.g., Voice over IP)
• SOA either through Web Services or REST, including mashup applications with internet‐based services
(e.g., Google) and enterprise products (e.g., MS Exchange, OCS, Avaya IP PBX)
(e g Google) and enterprise products (e g MS Exchange OCS Avaya IP PBX)
• ...

7. Mobile Development
How would weby lowlevel t l guys get
H ld b telco
there easiest!?!?!?!
+ + + =

8. Mobile Expertise
= WRT
(Web Runtime)
Why?
Wh ? Because it’s easy to develop in,
reuse existing knowledge and
reuse existing knowledge
it fitted well into our existing
g
development process

9. Developing a Product
With WRT we could reuse
• Development Process
Development Process
• Know How
• Tool Chain
A learning curve that I finally like!

10. Web Runtime Widgets
in a nutshell

11. Internet Evolution
Full HTML browser lets
mobile consumers
experience the
experience the
complete Web Mobile‐optimized sites
Widgets + Platform
serve specific needs and
Services offer seamless
tasks
Widgets offer focused, integration of the Web
optimized front‐ends to with personal context
Web‐based information and
services

12. Widget?
Lightweight mobile applications that give users
customized access to Web based and other resources
customized access to Web based and other resources
The easiest way to bring web‐based business to millions of Nokia mobile devices
Develop using standards‐based web technologies (e.g. HTML, CSS, Javascript, AJAX)
Install and run on Nokia devices like any native application
y pp
Provide an optimized web experience accessible with a single click
Application like delivery
Visible in the UI
Familiar HTML, Javascript, and CSS
Familiar HTML Javascript and CSS

13. For Who?
Web app runtimes on mobiles?
a viable runtime for serious app development?
performance?
super deep drilling?
ok, it s not for everything
ok it’s not for everything ‐ yet
But... Resource pool
Resource pool
Learning curve
Community activity
Community activity
UI richness
And with some tweaks you can do about
And with some tweaks you can do about
anything!

14. What and Where?
S60 3rd FP2
menus
(un)installation
icons
localization
system interaction
S60 5th
S60 5th
Platform Services
l f
Home Screen

15. How?
It’s HTML / CSS / JS… :)
but help is always good
WRT plug in for Aptana
WRT plug‐in for Aptana Studio
Code completion
Preview
Debugging
Packaging Deployment

16. Tell me more!
Tell me more!

17. Widget “ingredients”
Widget
properties
info.plist (mandatory) +
[name].html
[name] html (mandatory) HTML
backbone
icon.png
[name].css
[ ]
[name].js PNG icon
+
CSS layout Root
+ folder!
js logic

18. info.plist
Information about the widget
Information about the widget
...
<plist version="1.0">
<dict>
<key>DisplayName</key>
<string>AccuWidget</string>
<key>Identifier</key>
<string>com.nokia.forum.accuwidget</string>
<key>MainHTML</key>
<string>accuwidget.html</string>
<key>AllowNetworkAccess</key>
<true />
...
info.plist file defines the widget. It is a XML text file providing
information about the components and features of this specific
information about the components and features of this specific
widget.

19. HTML
<html>
<head>
..
</head>
Defines the structure
<body id body >
id="body">
D fi h <div id=‘mainView’>
<span class=‘title’>Front view</span>
of the widget. </div>
<div id=‘subView1’ class=‘subView’>
<p class=‘title’>Back view</p>
/
Views can be constructed with static </div>
HTML elements or can be dynamically <div id=‘subView2’ class=‘subView’>
created by JavaScript at runtime. <p class=‘title’>Config view</p>
</div>
/
</body>
</html>
// Class selector to define common
CSS style for similar components
y
.title {
font-size: 26px;
color: blue;
p
Style and layout information
y y }
// Id selector to define a unique
– Defines how to display HTML style for a unique component
element: position, color, background #mainView {
color etc.
color etc font size:
font-size: 16px;
color: red;
text-align: center;
CSS information can be embedded in the HTML }
file or imported from an external styleheet // Pseudo-class selector to design
pattern style
tt t l
div.subview div {
margin: 10px 0 0 0;
padding: 20px 20px 20px 20px;
}

20. JavaScript
Event handling
g
XMLHttpRequest
p q
DOM manipulation
p
UI effects
UI tweaking
UI tweaking

21. Platform Services
Framework for abstracting access to a set of services
Runtime specific bindings and security management
Runtime specific bindings and security management
Access Platform Services through JavaScript
Example use cases:
Combine Web‐based data with local context to deliver
personalized, relevant services
Save critical Web‐based contacts and events locally to create
reliable, dependable reminders
Camera Messaging
Media Management
Calendar Sensor
Communication Logs
Contacts System information
Location
Landmarks

22. Home Screen
What it is for the end‐user? Home Screen view
– Add /
Add / remove home screen content
h t t
– Tap content to open widget full screen view
Home Screen Widget has 2 views
– Home Screen view
– Fullscreen view Fullscreen view
Interaction while in Home Screen
– onload() and onresize() as widget
side interface functions
side interface functions
– JavaScript code to determine current view
size – correct view rendered

23. It’s all JavaScript but...
bare in mind that
Intel® Core™ i7 2 66GHz
2.66GHz (8MB Cache)
3GB Triple Channel 1067Mhz DDR3
500GB - SATA-II, 3Gb/s, 7,200RPM
ARM 11
ARM 11 434 MHz
434 MHz processor
128 MB RAM
32 GB storage

24. Thanks! miha.lesjak@inova.si