[Mobile]Windows Mobile 6.5 Widget - Widget JavaScript Objects | F6 Team - 點部落

2009-07-07

[Mobile]Windows Mobile 6.5 Widget - Widget JavaScript Objects

9679
0
JavaScript

今天就介紹WM6.5為Widget提供一組Javascript物件"widget"

對Windows Mobile 6.5 Widget 不熟的朋友,先推薦幾篇不錯的文章

這個物件有下列屬性：

authorEmail → config.xml <author>元素email屬性的值
authorName → config.xml <author>元素的值
authorURL → config.xml <author>元素href屬性的值
description → config.xml <description>元素的值
version → config.xml <widget>元素version屬性的值
name → config.xml <name>元素的值

看下列這張圖會更清楚點

height → Widget 的高
width → Widget 的寬

identifier → Widget安裝後系統產生唯一的識別碼

locale → Start / Settings / System / Regional Settings 的設定值

currentIcon(物件型態,config.xml所設定的icon)
-height → Icon的高
-width → Icon的寬
-src → Icon的檔名

menu(物件型態,此物件用來建立Widget Menu用),參考這篇的說明 Windows Mobile 6.5 Widget - Creating Widget Menus
-append(item)
-clear()
-createMenuItem(id)
-getMenuItemById(id)
-getMenuItemById(id)
-setSoftKey(item,id)

下面準備一個實際例子,說明如何使用這些屬性

首先還是準備好三個Widget必須的檔案

config.xml
F6.jpg
Widget.htm

此範例主要是利用Menu切換不同的Div畫面

config.xml

<?xml version="1.0" encoding="utf-8" ?> <widget xmlns="http://www.w3.org/ns/widgets" version="9.24"> <name>Mobile Widget</name> <author href="http://www.dotblogs.com.tw/puma/" email="hent924@gmail.com">F6 Team - Puma</author> <content src="Widget.htm" type="text/html"/> <access network="true"/> <icon src="F6.jpg" /> <description>Demo Sample Code</description> </widget>

Widget.htm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Widget JavaScript Objects</title> </head> <body> <div id="Main" style="display: block;"> Hello Widget ! </div> <div id="AboutAuthor" style="display: none;"> </div> </body> </html> <script type="text/javascript"> //增加資訊到AboutAuthor Div var info = ""; info += "<img src=" + widget.currentIcon.src + "></img><br/>"; info += widget.name + "<br/>" info += "Version" + widget.version + "<br/>"; info += widget.authorName + "<br/>"; info += widget.authorEmail + "<br/>"; info += "<a href=" + widget.authorURL + ">" + widget.authorURL + "</a><br/>"; AboutAuthor.innerHTML = info; //建立一個AboutAuthor的MenuItem var menuItem1 = widget.menu.createMenuItem(1001); menuItem1.text = "Main"; menuItem1.onSelect = function() { showAuthorDiv(false) }; widget.menu.append(menuItem1); menuItem1.enabled = false; //建立一個Main的MenuItem var menuItem2 = widget.menu.createMenuItem(1002); menuItem2.text = "AboutAuthor"; menuItem2.onSelect = function() { showAuthorDiv(true) }; widget.menu.append(menuItem2); menuItem2.enabled = true; function showAuthorDiv(flg) { if (flg == true) { //顯示AboutAuthor Div , 隱藏Main Div AboutAuthor.style.display = "block"; Main.style.display = "none"; menuItem1.enabled = true; menuItem2.enabled = false; } else { //顯示Main Div , 隱藏AboutAuthor Div AboutAuthor.style.display = "none"; Main.style.display = "block"; menuItem1.enabled = false; menuItem2.enabled = true; } } </script>

執行結果：

參考網址：
http://msdn.microsoft.com/en-us/library/dd721906.aspx

回首頁