Symbian developer community

 
Home > Wiki> Web Runtime (WRT) Quick Start > zh-hans
wiki

Web Runtime (WRT) Quick Start/zh-hans

From Symbian Developer Community

Jump to: navigation, search

Web Runtime由一些支持Widgets安装和执行的组件所组成。基本上，Widgets是一些以HTML/JavaScript/CSS编写的软件，能基于JavaScript为访问一些终端APIs。Widgets在网络浏览器内部执行，非常类似于我们在web上看到的web/AJAX应用。

Widgets最酷的地方在于：它们在Symbian手机上安装和执行时表现为本地应用（安装、查找和使用都很直观）。在S60 5th edition手机（自N97）上，Widgets还会有一个“主屏”，即该widget的一个微视图，可以在手机主屏上显示活动内容。随着好用API数量的日益增长，widgets可以访问位置服务、消息、地址簿、媒体文件等，使之成为快速开发的理想平台。

Widget开发获得了一整套不断增长的、面向主流开发环境的插件的支持，- 基于Eclipse的Aptana Studio、 Microsoft Visual Studio和Adobe DreamWeaver。

这个快速入门指南面向熟悉HTML、JavaScript和CSS的开发伙伴们。如果你想先了解一下Web技术，或者想寻找有关JavaScript、HTML和CSS的教程链接，请访问Web技术概览。

Contents

什么是Web Runtime?

Web Runtime是WebKit web 浏览器加一套支持widget 安装、应用管理和通过JavaScript API访问终端功能的组件。使用Web Runtime 进行 Widget 开发让你能对web 网页进行打包、将其安装到手机上，并使用WebKit 引擎对页面进行渲染从而将其作为一个独立应用运行。

支持的标准

WebKit，以及随之而来的Web Runtime 1.1，目前支持：

  • HTML 4.01
  • XHTML 移动描述
  • CSS 2.1
  • JavaScript 1.5

可用性

Web Runtime 1.1 已内置于Symbian^1 终端（consequently），如诺基亚N97。Web Runtime 1.0 则可用于以下手机：

  1. 所有S60 3rd Edition FP2 及后续版本的手机
  2. 三星S60 3rd Edition FP1
  3. 诺基亚S60 3rd Edition FP1，最新固件更新

有关Web Runtime版本方面的更多信息，请访问这里。

设置开发环境

由于Aptana Studio开发环境为免费，我们将其用于本快速起步指南。

首先，请于Aptana下载页下载并安装其最新版本。安装后您还须安装诺基亚Web Runtime插件。请启动Aptana Studio并打开"My Aptana" (Window->My Aptana)。打开“插件”部分，找到诺基亚WRT插件，单击，然后按屏幕上的提示操作。 Image:installingWrtPluginInAptana.png

有关插件版本方面的更多信息请查看这里。

Hello World

现在让我们用Aptana 创建一个简单的工程。在文件菜单上选择New->Project。

Image:wrtaptananewproject.png

如下按向导要求操作。

    Wizard step 1

    Wizard step 2

    Wizard step 3

    请注意上述第二步中的工程类型选择。通常您会在"Basic Widget project"和"Basic Widget project with WRTKit"这两者间选择。它们的区别是：前者让开发者自己选择如何构建用户界面 - 通过HTML/CSS/JavaScript 手工构建，还是通过导入第三方库（如YUI）来构建。后一种选项包括WRTKit，用户界面组件（ListView, Label, TextField 等）的一个既小而又极其简单的JavaScript 库，用于构建你的应用程序。


    现在就让我们如上所述对这个基本工程一步一步地操作。在最后一步中，点击Finish 结束向导。

    一旦创建了工程，请在工程视图双击index.html 打开该文件。让我们如下修改代码： 


     
    	<body onLoad="javascript:init();">
    		Your name:
    		<input id="namebox"><br>
    		<input type=submit value="Say hello" 
    			onclick="document.getElementById('output').innerHTML = 'Hello ' + document.getElementById('namebox').value;">
    		<div id="output">
    		</div>
    	</body>
     

    要看看我们的widget 是否有功能，我们现在切换到preview（预览）标签。

    Image:hellowidgetbasicpreview.png

    要在手机上运行这个widget，我们首先要生成一个可安装的widget 存档文件。Aptana提供了如下的自动包创建选项。


    Image:wrtaptanapackagewidget.png

    这样就完成了widget 的压缩（扩展名为.WGZ），实际上这是一个含有工程文件的zip 文件。这个WGZ 文件现在可以被传送到手机然后安装。如果需要了解文件的传送和安装，请参阅如何向手机安装应用 。


    		Note
    WGZ是含有全部工程文件的一个普通zip文件。因此，最终用户可以用标准的zip 文件工具打开它以查看widget 源码。这这方便了学习，但有些开发伙伴可能希望保护其widget 代码。为此请参阅保护Web Runtime widget 源代码，了解 更详细信息。


    高级Hello World

    前面的例子仅显示了创建Wiggets多么简单。Aptana 处理元数据(info.plist) 及打包，因而我们只要向index.html 添加一些静态html 页面到就能创建一个widget。

    但是，任何优秀的widget 都要求更多的编程控件。使用JavaScript 我们就能用一些本地集成菜单、AJAX 服务器交互和对诸如GPS和名片夹终端功能的访问生成合适的应用程序。

    为简化用户界面的开发，我们将使用WRTKit。和前面一样，通过在文件菜单上选择New->Project，我门启动了新工程向导。

    Image:wrtaptananewproject.png

    根据向导要求如下操作。

      Wizard step 1

      Wizard step 2

      Wizard step 3

      注意，我们现在选择了Basic Widget with WRTKit。

      最后，点击Finish。

      现在创建了工程，我们可以看到我们的演示widget 已可运行。在工程视图中找到index.html 并双击打开它。打开"Nokia Web Runtime"标签（如上图所示）启动预览。

      诸如屏幕大小和方向等预览选项可以在"Settings"对话框里设置。

      这段widget 的代码在basic.js里（除非您在向导中选择了另外的名称）。index.html中的代码如下 

       
          <body onload="init()">
       

      加载widget 时会首先调用init()函数。让我们看一下初始化代码： 

       
          // set tab-navigation mode and show softkeys
          // (only if we are in the WRT environment)
          if (window.widget) {
      	//create about menu
      	var aboutMenuItem = new MenuItem("About", MENU_ITEM_ABOUT);
      	aboutMenuItem.onSelect = menuItemSelected;
      	menu.append(aboutMenuItem);
              widget.setNavigationEnabled(false);
              menu.showSoftkeys();
          }
       
          // create UI manager
          uiManager = new UIManager();
       
      第一部分代码创建了“关于”菜单项并建立了导航和菜单模式。更有趣的是围绕这一代码的if 语句。它主要用于检查该widget是否运行于支持WRT 扩展的环境，比如终端、模拟器，或预览窗格。然而，如果代码正运行于不同的环境中（诸如一个通常的web 浏览器），这段守护代码会导致一个报错，这是用Firebug 和Firefox 调试时通常遇到问题的原因。所以，为确保调试工作，请总是以下面的特别代码进行守护 
      if(window.widget){...}

      最后部骤则对用于WRTKit 控件管理的UIManager 类进行初始化。

      接着，这段代码对GUI 组件进行初始化。这应该是耳熟能详的，而WRTKit 也非常简单直观。 

       
          // create main view
          mainView = new ListView(null, "Hello World");
       
          //Create about view
          aboutView = new ListView(null, "Hello World");
       
          // add a text field to the view
          nameField = new TextField(null, "Enter your name");
          mainView.addControl(nameField);
       
          // add a button to the view
          helloButton = new FormButton(null, "Say Hello!");
          helloButton.addEventListener("ActionPerformed", helloButtonClicked);
          mainView.addControl(helloButton);
       
          // About lable control
          aboutLabel = new Label();
          aboutView.addControl(aboutLabel);
       
       

      最后，我们用UIManager 设置当前视图。 

       
          // display the main view
          uiManager.setView(mainView);
       

      调试

      Aptana Studio也可用于调试widget 工程。 为达此目的，你需要安装：

      1. 最新版Firefox
      2. 最新版Firebug

      安装完成后，回到Aptana 并创建针对Firefox 的一个新调试配置：

      1. 从Debug 菜单，选择 "Debug..."打开debug 窗口。
      2. 单击New Launch Configuration 按钮创建一个新配置。
      3. 输入您的新配置名称(例："Hello Widget")。
      4. 在Start Action 下，选择针对调试程序的启动页面选项。

      Image:wrtaptanadebugstep0.png

      Aptana、Firefox 和Firebug 一旦就绪，启动调试过程的简便方法就是使用工具栏Image:aptanadebugtoolbarbutton.png按钮。您也可右击您的工程中的index.html，选择“Debug As” 然后“JavaScript Web Application“。

      Image:wrtaptanadebugstep1.png

      后续

      现在你已正确设置，可以开始试验了。当然，我们只能算是浅尝辄止。更多信息请访问以下的最佳WRT 资源：


      Retrieved from "http://developer.symbian.org/wiki/index.php/Web_Runtime_(WRT)_Quick_Start/zh-hans"

      Comments

      Sign in to comment…