Design

User interface

On Symbian touch devices, tapping a TextEditor opens the split view. The TextEditor is positioned in the top half of the screen, and possibly resized to fill the visible area there, while the virtual keyboard is displayed in the bottom half of the screen. When the split view is closed, the TextEditor is reset to its original size and position.

The MIDlet opens with a login screen that prompts the user to enter a login name and password. Selecting a field opens the corresponding TextEditor for editing. Since this is a demo application, the login name and password are only used for example purposes. No information is saved or sent. The following figures show the login screen on a Symbian device (left and middle) and Series 40 device (right).

Figure: Login screen on a Symbian device (left and middle) and Series 40 device (right)

Pressing the Log in button after entering the login name and password opens the MIDlet main view. The main view provides fields for entering the title and content of the blog post as well as buttons for publishing the post and exiting the MIDlet. The following figures show the main view on Symbian and Series 40 devices.

Figure: Editing the post content on a Symbian device using split view ITU-T (left) and QWERTY (right)

Figure: Ready to publish the post on a Symbian device (left) and Series 40 device (right)

Pressing the Publish button after entering the title and content of the blog post opens an alert stating the post was published successfully. Since this is a demo application, the post is not actually published. No information is saved or sent. The following figures show the alert on a Symbian device (left) and Series 40 device (right).

Figure: Publish alert on a Symbian device (left) and Series 40 device (right)

Classes

The MIDlet consists of the following classes:

• BlogWriter—MIDlet main class

• Button—Button element class that defines both the controls and appearance of a button

• CanvasTextBox—Text input field class that extends the CanvasGraphicsItem class and contains a TextEditor object

• Controls—Text editor controls class for a CanvasTextBox object (only used on Series 40 devices)

• EditScreen—Main view class with UI elements for writing and publishing a blog post

• LoginScreen—Login screen class

• Screen—Abstract Canvas class that EditScreen and LoginScreen extend

• Scrollbar—Scroll bar class for a CanvasTextBox object (only used on Symbian devices)

Implementation

For information about implementing the MIDlet, see section Implementation.