Scribd Logo
Upload

Welcome to Scribd!

  • Application Development - Sami Viitanen - Forum Nokia

    Uploaded by

    SEE2009
    60 views12 pages
    Presentation from the application development track. See http://tiny.symbian.org/seewiki for more information.

    Original Title

    Application Development_Sami Viitanen_Forum Nokia

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    Presentation from the application development track. See http://tiny.symbian.org/seewiki for more information.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    60 views12 pages

    Application Development - Sami Viitanen - Forum Nokia

    Uploaded by

    SEE2009
    Presentation from the application development track. See http://tiny.symbian.org/seewiki for more information.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 12

    Widget Meets Home Screen and

    Platform Services
    Sami J. Viitanen
    Senior Technical Consultant
    Forum Nokia
    Internet evolution of mobile devices

    Full HTML browser Mobile-optimized Widgets offer focused, Widgets + Platform


    lets mobile sites serve specific optimized front-ends to Services offer
    consumers needs and tasks Web-based information seamless integration
    experience the and services of the Web with
    complete Web personal context

    2
    Definition of widget
     Lightweight mobile applications - easy access to
    the web
     The easiest way to bring web-based business to
    millions of Nokia mobile devices
     Develop with standard web technologies (e.g. HTML, CSS,
    Javascript, AJAX)
     Install and run on like any native application
     Provide an optimized web experience accessible with a
    single click

    Application like delivery


    Visible in the UI
    Familiar HTML, Javascript, and CSS

    3
    WRT widget ingredients

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

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

    Event handling

    XMLHttpRequest
    DOM manipulation

    6
    Using standard Javascript libraries

    jQuery

    MooTools

    7
    Native like: menu and localization

    8
    Widgets and platform services
     Framework for abstracting access to a set of
    services
     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

    9
    Home screen
     Nokia N97 onwards
     Dynamic, user configurable
    content on home screen
     Size depending on device
     Nokia N97 / N97 mini: 309x85
    pixels
     End-user controls the home
    screen layout
     What content is shown
     Layout of the shown content

    Note! Some content defined as 10


    mandatory by the device
    Interaction and home screen widget
     End-user interaction:
     Add / remove home screen content
     Tap content to open widget full screen
    view
     Developer interaction:
     Widget detecting network status:
    new APIs for WRT 7.1
     Javascript to determine changes:
    onload() and onresize() called when
    home screen/full screen change occurs

    11
    Aptana Studio and Nokia WRT plugin

     Nokia’s WRT 2.2 plugin


    for Aptana Studio:
     Creation, editing,
    testing, and
    deployment of WRT
    widgets

    www.aptana.com/nokia
    12

    You might also like