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
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)
• ...
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
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
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
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
…no clear cut standard as of nowOur interest is to maximize innovation and reduce fragmentationDevice APIsPackagingSigningInteroperability…we will see a lot of progress in the coming months and yearsThe important thing to understand is that we have already deployed WRT to millions of devices.It’s out there; go and execute
What we started with3.2 + 3.1 backportsNecessities for app developmentProviding you the ’good sides’ of S60 LAF for your appThe sandbox was quite tightStarting from the high selling N5800Platform ServicesJavaScript and ActionScript access to core APIsPowerful mashupsThe next evolution will provide a much cleaner JavaScript style interfaceExtendable service frameworkPossibility to create your own servicesN97 brings another fantastic iterationVery easy to provide a MiniView to your widget’s live dataPrime locationData from platform servicesCheck out the Accuweather on the video later onThis is a key difference makerWhile the sandbox is tight…Hack-it-babyThe platform is open, go and createHTTP server, Scriptaböe pluginsMiha will share something from his bag of tricks
So you understand the boundaries or the lack there-of…How?Well, how do you develop for the web?- Notepad, dreamweaver, custom toolchain (Miha)?What our toolbox currently providesDevicesEmulatorScript debuggingAptana pluginPreviewPackagingDeploymentDebuggingCode completionV2Plat ServMiniViewWe have a nice roadmap for the tool support