Overview of web widgets

The following content is transferred from Forum Nokia Wiki

Overview of web widgets

Directory
* 1 the rise of mobile Internet
* 2 What is a Web widget?
* 3 experience Widgets
* 4 install Widgets
* 5 Development Process of Widgets
* 6 widget development best practices
O 6.1 development and debugging with Firefox and Simulators
O 6.2 File naming and encoding
O 6.3 cmwap Access Point Problems
O 6.4 Navigation Mode settings
O 6.5 open external website link
O 6.6 interface design and compatibility
O 6.7 xpressmusic5800 adaptation
* 7 Development of Widgets
* 8. More information

1. The rise of mobile Internet

The business environment of mobile communication is facing rapid changes. An important manifestation is that people rely more and more on the Internet in their work and life, such as a large number of emerging web
2.0 websites and online communities. At the same time, people's needs for the Internet are becoming more and more diversified. How to combine mobile communication with the Internet, whether for mobile terminal manufacturers or
Internet service providers are all new and interesting challenges.

Accessing the Internet on a mobile device is not as convenient as accessing the Internet on a PC, and the web capabilities supported are limited. There are currently two major solutions to this problem:
Web and PC-based solutions. The browser technology of s60 belongs to the latter and is dedicated to providing
. Accessing the Internet through a PC is not as convenient and fast as accessing the Internet through a mobile device. In addition, the statistics show the "28" Phenomenon of Website access, that is, the person
Only a few websites are frequently accessed. To address the above issues, s60 SDK 3rd edition Feature Pack
2. The corresponding solution-web widget (hereinafter referred to as widget) is introduced ).

With the promotion of widgets, people will be able to access the Internet anytime and anywhere in the near future, just as people can make calls today.

2. What is a Web widget?

Web
Widgets are lightweight Web applications that provide users with one-click Services. It is usually designed to have specific functions, such as providing information about weather, stock, auction, etc. Similar to a Web page
Standard Web technology development, such as XHTML, CSS, and JavaScript. In this regard, Widgets are web pages that run out of the browser UI.
　　
Compared with other s60 applications, widgets can be downloaded and installed on mobile phones in the same way. This makes it very easy to share.

Widget running is based on WEB run-time (WRT ). WRT is a newly added browser component in s60 SDK 3rd edition Feature Pack 2. It is a Web application development environment.

Visit the following link for more information about widgets:
Http://www.forum.nokia.com/main/resources/technologies/browsing/widgets.html

3. Experience Widgets

Widgets are used in the same way as s60 local applications. As a widget running platform, one of the goals of the WRT design is to seamlessly integrate widgets with the s60 platform for users
Consistent user experience. For example, each widget can display icons in the Application menu. It can be set to a shortcut key and a left or right soft key in the STANDBY state. It can appear in the active Application List.
The s60 application is managed in the same way, such as installation and uninstallation.

The following link shows a video of widget installation and usage.
Http://www.forum.nokia.com/info/sw.nokia.com/id/4e20baf8-4c58-4d36-be9f-798a168a844d/Web_widget_webinar_zh_Ch.swf.html

4. Install Widgets

As mentioned above, Widgets are managed in the same way as s60 local applications. If you know how to install the s60 local application, you can install the widget smoothly. Currently, mobile phones supporting widgets include the latest version of Nokia N95 and N95 8g, and all s60 3rd edition fp2 mobile phones to be listed soon

By linking http://discussion.forum.nokia.com/forum/showthread.php? T = 115609 #4. You can download some widget examples.

The widget is published as an installation package. An installation package is a zip file with the extension. wgz, which contains all the source files of the widget and the root directory of the widget project.

Deploying widgets on your mobile phone is the first step for installation. Widgets can be deployed on mobile phones in three ways:

* Send messages via Bluetooth or infrared to the Information inbox of the target device.
* Transmits data to the memory of the target device through the mmccard or USB port.
* Download from s60 web browser.

Correspondingly, the installation process varies depending on the deployment method of widgets:

* Use the information application to open the widget installation package in the Information inbox and install the package as prompted.
* Use the File Manager on your mobile phone to open the widget installation package from the mmccard or from the local drive C, and install the widget as prompted (assuming that the widget installation package has been copied to the mmccard or uploaded to the drive C through the USB cable ).
* If the MIME type of the widget installation package configured on the server side is X-Nokia-widget, the installation package downloaded to the mobile phone via the s60 browser will be recognized and automatically installed by the browser.

The installed widget appears in the "application" menu.

In s60 3rd edition
The steps for installing widgets in emulator of fp2 are similar to those described above. The common method is to copy the widget installation package to the Symbian/9.3 folder.
/S60_3rd_fp2_beta/epoc32/winscw/C/data/others (in s60 SDK 3rd edition
Fp2 for example), and then use the File Manager in emulator to open and install.

The link in the previous section "experience widgets" contains a video showing the installation process of widgets.

5. widget Development Process

Development widgets use standard web development technologies, such as XHTML, CSS, and JavaScript. This makes widget development easier to use and has a short development cycle, which generally takes days to weeks.

The widget contains two necessary files: the HTML file and the info. plist file. And other optional files: CSS files, JavaScript files, resource files (tags, backgrounds, etc ). The HTML file defines the widget structure and content. The CSS file defines the layout format of widgets, such as the font and color. Javascript adds dynamic effects to widgets to make them intelligent.

The widget Project is a directory in the file system. This directory contains all the widgets. In the development process, the required and image files (icon.png) of widgetmust be located in the root directory of the widget project.

The widget development process is as follows:
1. Use the word editor or web ide to compile the widget code.
2. debug the widget. You can use Firefox and firebug in combination. common debugging functions include breakpoint setting and single-step execution. You can also observe the DOM structure of HTML files.
3. compress the widget file and directory into a zip package, change the extension to. wgz, and install it in the test environment. Three environments are available for the test Widget:
1. emulator in s60 3rd edition fp2.
2. Some mobile phones that support WRT. When writing this article, the available mobile phones include Nokia N95 and N95 8g with the latest software. All s60 3rd edition fp2 phones to be released will also support widgets.
3. Use RDA (remote device access) for testing. RDA is a service that remotely accesses the Nokia s60 device over the Internet and information about RDA is located in the http://apu.ndhub.net.
4. Test the widget and correct the bug. You can repeat steps 1 to 4.

For more information about widget development, see the following link:
Http://www.forum.nokia.com/...Getting_Started_with_Nokia_Web_Widget_Development.html
This document provides an example to illustrate how to develop widgets. For more information about WRT api reference accessible links: http://www.forum.nokia.com/info/sw.nokia.com/id/cf225acf-7efe-4dae-b89f-967578c00f1d/Web_Run_Time_API_Reference.html

6. widget development best practices

6.1 development and debugging with Firefox and Simulators
Widget development can basically be completed using the Firefox browser, just like developing a common web page. After debugging is completed in the browser, if there is no supported mobile phone, you can first test in the s60 SDK simulator.
For applications with network connections, perform the following operations on network connections; otherwise, debugging cannot be performed in the browser:

Try {
If (window. Netscape ){
Netscape. Security. privilegemanager. enableprivilege ("universalbrowserread ");
}
VaR httprequest = new XMLHttpRequest ();
Httprequest. Open ("get", someurl, true );
Httprequest. Send (null );
}
Catch (e ){
Alert (E );
}

S60 3.2 or 5 simulator:
Http://www.forum.nokia.com/info/sw.nokia.com/id/ec866fab-4b76-49f6-b5a5-af0631419e9c/S60_All_in_One_SDKs.html
Note that the 5-edition simulator currently does not support Chinese characters, so it can only be used to test UI adaptation. The main purpose is to use a 3-edition simulator.
The test method on the simulator is to store the wgz file under/epoc32/winscw/C/data/others in the SDK installation path, and then install the file from the file management of the simulator.
File Name and encoding

The following principles apply to the file, directory name, and encoding format of text files and data interfaces in widgets for optimal compatibility with different mobile phones:
* Do not use Chinese characters for names of all files and directories.
* All text files (HTML, JavaScript, info. plist, etc.) that contain Chinese characters must be saved using UTF-8 encoding.
* The XML file returned by a third-party API must be UTF-8 encoded whenever possible.

Cmwap Access Point Problems
The cmwap Access Point Problem is unique in China and must be understood.
If you select a cmwap access point during network connection, pay attention to the cmwap request confirmation page. If the request method is get, the request confirmation page is displayed, causing the content to fail to be obtained. The solution is
The connected IP address or domain name makes an invalid request. Another way is to use the post method, which will not be blocked by the cmwap gateway. The two methods are as follows:

/* Invalid request */
Function jumpcmwap ()
{
If (window. Netscape)
{
Netscape. Security. privilegemanager. enableprivilege ("universalbrowserread ");
}
VaR XMLHttpRequest = new XMLHttpRequest ();
XMLHttpRequest. onreadystatechange = function ()
{
If (XMLHttpRequest. readystate = 4)
{
If (XMLHttpRequest. Status = 200)
{
/* The invalid request ends. You can call the official GET request here */
}
}
}
XMLHttpRequest. Open ("get", "http: // official domain name address or IP address/", true );
XMLHttpRequest. Send (null );
}
/* GET request */
XMLHttpRequest. Open ("get", "interface address", true );
XMLHttpRequest. Send (null );
/* POST Request */
XMLHttpRequest. Open ("Post", "interface address", true );
XMLHttpRequest. setRequestHeader ("Content-Type", "application/X-WWW-form-urlencoded; charset = UTF-8 ");
XMLHttpRequest. Send ("Request Parameter concatenation string, separated by & Symbol ");

Navigation Mode settings
Widgets have two navigation modes: cursor and Tab. We recommend that you use the pointer mode in a unified manner. Otherwise, Widgets cannot be used on a touch screen mobile phone if only the navigation key mode is supported.

Open external website link
You must use the widget. operurl () to open other website links, instead of using a method similar to <a href = "http://www.google.com"> Google </a>. The latter way of opening will cause the widget to be unable to be returned from the opening page.

Interface Design and compatibility
If properly designed, widgets can automatically adapt to different screen sizes, including touch screen and screen rotation. If the interface is not easy to handle in some cases, you can also develop different widgets for different models. However, screen rotation must be supported in any widget, which cannot be solved by installing widgets of different versions.
The basic principle is not to use images of a fixed size as the background and border, which is basically the same as the general web page design. In addition, it should also be appropriate to select the font, otherwise it will be very good on a high-resolution mobile phone
Small. For normal 240x320 screens, the font size is 13 ~ For the 360x640 screen of xpressmusic5800, the font size around 24 is required. Screen ruler
Inch can be obtained through screen. Width and screen. Height.
In addition, because no event is triggered during screen rotation, some situations (for example, the same image cannot be used to adapt to the landscape) require special processing after rotation, you can use a timer to monitor screen size changes to simulate rotation events. In this way, there will be some efficiency problems, because there has been a timer program running continuously.

Xpressmusic5800 adaptation
Xpressmusic5800 is a touch screen mobile phone based on s60 version 5. In addition to the problems mentioned in the previous section, pay attention to some other issues.
* Text content does not wrap automatically on 5800. The following style must be used for processing: Word-break: Break-all;
*
If there is an input box on the interface, after the content is entered, the menu will automatically change to "complete" and "cancel". If there is another button on the page, instead of clicking "finish" or "cancel", the user clicks
Button. If the setrightsoftkey () operation is performed in the event processing of this button, the widget will immediately exit abnormally. There are several solutions.
Other buttons and links are placed on the page with an input box, but the required functions are placed in the left-click option menu. In this way, the user will have the opportunity to click other functions only after clicking "Finish/cancel; and don't change it.
Right-click the menu. The effect is that after the current operation is completed, the menu is still "done/canceled ".

7. Development of Widgets

WRT is required to run widgets. Currently, Widgets are only information-type widgets that obtain information from the network and present it to users. In addition, WRT supports seamless integration of widgets and s60 in many aspects, mainly reflected in the management and usage of widgets. Compared with s60, WRT can provide users with a consistent user experience.
In the next phase, Widgets will be further integrated into the smartphone platform. For example, widgets can access location, Pim, media, and other mobile device information, as well as services provided by other platforms. The user interface is improved to further improve the user experience.
WRT is a developing platform, and widgets will also have more powerful capabilities and rich functions. If the platform security problem is solved, the widget can access the services provided by the s60 platform through the s60 API. At that time, the development and deployment of Widgets may require a verification process similar to the Symbian signature.

8. More information

Nokia Forum Chinese forum on web technology and Web widget topics, you can visit the following links to exchange experience, Q & A, http://discussion.forum.nokia.com/forum/forumdisplay.php? F = 76
The widget topic collects the widget documentation, development tools, Q & A, and so on. You can access it through the following link:
Http://discussion.forum.nokia.com/forum/showthread.php? T = 115609
The new widget e-learning material, comprehensive content including overview and a development instance, http://www.forum.nokia.com/info/sw.nokia.com/...=s60platformArticle7CTA
For information about the s60 browser technology, visit
Http://www.forum.nokia.com/browser