Home

Stratos Kalogirou edited this page Nov 28, 2013 · 7 revisions

This simple example application demonstrates the basic use of the S40 Web Apps HTML "UI Components" (i.e. Code Snippets). The example is meant for both designers and developers: designers get an impression of how the components actually look on the device and developers learn how to use the Web Apps UI components. The application does not have an engine or further meaning. The texts are "lorem ipsum" and icons are simple thumbnails or images.

Please check the Series 40 Web Apps Design Library for more information.

imagePlaceholder imagePlaceholder imagePlaceholder

This project demonstrates the different "UI components" (actually HTML, CSS and JS code snippets) and patterns that can be used in Series 40 web applications. The project is implemented as a single web application.

imagePlaceholder

The examples contain the following:

Elements

  • Buttons demonstrates different Button layouts.
  • Radio buttons demonstrates the use of radio buttons.
  • Check boxes demonstrates how to create and use check boxes.
  • Lists demonstrates various list types.
  • Tabs demonstrates using tabs within a Web Application.
  • Text Fields demonstrates different types of text fields.

Navigation

  • Carousel In-Item demonstrates using -webkit-transitions with a sliding image container.
  • Carousel Item as Carousel In-Item, but with full screen.
  • Dynamic Looping demonstrates using dynamically loaded content using both MWL-methods and !JavaScript.
  • Expandable List example demonstrates how to create an accordion list.
  • Picker demonstrates selecting a value for a button from a list.
  • Tabbed pages demonstrates navigation within a web application using tabs.
  • Tree Structure demonstrates how to create a dynamic, three levels deep tree like navigational example.

Patterns

  • File upload demonstrates selecting and sending a file with HTML forms.
  • File download demonstrates downloading and saving a file from a server.
  • Page Title Link demonstrates tree structure like navigation, with added title link.
  • Passwords example demonstrates using HTML password input and saving information with the password manager.
  • Web Page Link demonstrates opening a web link from within a web app.
  • Search demonstrates how to implement searching functionality to a web application.
  • Sharing content example demonstrates how to incorporate sharing content via SMS or Facebook with web app technologies.

The application is designed to work on most full touch, touch & type devices. It has been tested with:

  • Nokia 306 (Full touch)
  • Nokia 303 (Touch 'n type)
  • Nokia 201 (Non-touch, landscape)

Please check the ?Series 40 Web Apps Design Guidelines for more information.