×
Namespaces

Variants
Actions
(Redirected from 开发Series 40 web app)

开发Nokia Asha web app

From Nokia Developer Wiki
Jump to: navigation, search
Article Metadata

兼容于
平台:
Series 40

文章
max.chen 在 08 Apr 2011 创建
最后由 hamishwillee 在 09 May 2013 编辑

Nokia Web Tools是基于Eclipse的IDE,所以对大多数开发者来说并不陌生。这里我们利用Nokia Web Tools内置的News web app模板创建一个简单的Series 40 web app。

Contents

生成项目

首先,如下图所示,依次选择File-> New -> Series 40 web app (wgt)。


Howtos40webapp 1.PNG

在弹出的窗口中可以看到4个模板,在这里我们选择最后一个“News web app project”,然后点击“Next”。

Howtos40webapp 2.PNG

在接下来的窗口中填入项目名称,工程的位置,程序显示的名称、唯一标识和版本号。要注意到是,“Enable Home Screen”选项是针对Symbian WRT的,Series 40 web apps并不支持这个选项。

Howtos40webapp 3.PNG

最后,需要填入一些和项目相关的设置,包括主HTML文件名称、RSS种子的地址和一些其他相关信息。点击“Finish”后,项目就自动生成了。

Howtos40webapp 4.PNG

编辑文件

在“Project Explorer”中,我们可以看到模板已经为我们生成了一些目录和文件,

Howtos40webapp 5.PNG

其中:

  • css目录中存放web app中使用的CSS文件。
  • images目录中放web app中使用的图片文件。
  • js目录中放web app中使用的JavaScript文件。
  • config.xml是项目的配置文件。
  • index.html是web app的入口。

如果想进行编辑,只需在“Project Explorer”里双击那个文件,这里以index.html为例。

Howtos40webapp 6.PNG

从中可以看出在index.html中最主要的方法就是:

getRSS('verview', 'horview', 'http://feeds2.feedburner.com/time/topstories');

而getRSS()方法我们是在js/getRSS.js中定义的。这个方法通过AJAX获取网络上的RSS文件。

/**
* Use xmlhttpreq to get the raw rss xml
*/

function getRSS(vid, hid, url){
var xhr;
var rssfeed = url;
 
//call the right constructor for the browser being used
if (window.ActiveXObject)
xhr = new ActiveXObject("Microsoft.XMLHTTP");
else
if (window.XMLHttpRequest)
xhr = new XMLHttpRequest();
else
alert("AJAX request not supported");
 
//prepare the xmlhttprequest object
xhr.open("GET", rssfeed, true);
xhr.setRequestHeader("Cache-Control", "no-cache");
xhr.setRequestHeader("Pragma", "no-cache");
xhr.onreadystatechange = function(){
if (xhr.readyState == 4) {
if (xhr.status == 200) {
if (xhr.responseText != null) {
processRSS(xhr.responseXML, vid, hid);
}
else {
alert("Failed to receive RSS file from the server - file not found.");
return false;
}
}
else {
alert("Error code " + xhr.status + " received: " + xhr.statusText);
}
}
}
 
//send the request
xhr.send(null);
 
}

预览web app

在WDE中已经集成了Web App Simulator (WAS)模拟器,用来在PC上模拟web app的运行。预览一个web app只需在项目上点击鼠标右键,然后在弹出菜单上选择“Preview web app”

Howtos40webapp 7.PNG

模拟器运行后,web app就会显示在屏幕上。需要注意到是,在运行web app时必须保证网络的连接通畅。

Howtos40webapp 8.PNG


相关链接

This page was last modified on 9 May 2013, at 13:54.
352 page views in the last 30 days.
×