Widget 开发指南

zwgdft

贡献于2012-07-12

字数:0 关键词: 移动开发

Widget 开发指南 了解了盛大圈圈的形态之后,我们从一个例子开始逐步深入 Widget 的开发。 1. Hello Beijing! i. 创建第一个 Widget 简单的 Widget 只需要很少量的代码和文件。例如我们以制作一个打开奥运会官网的 Widget 作为起始。 1) 在圈圈安装目录下的 Widgets 目录下创建一个 子目录 Beijing2008 2) 创建一个名为 gadget.xml 的文件,复制入下列代码,并保存         北京2008      snda.igw      1.0.0.0                            © 2008      北京2008年第29届奥林匹克运动会                                                                            full                                                  {DF2FDE45‐5847‐401B‐9C27‐6965CD25F23E}  3) 制作两个奥运会徽的 png 格式图标,尺寸是 32*32 和 64*64,命名为 icon32.png 和 icon64.png;还可以顺手做一个个人的 logo。最后的文件结构如下图: 至此,我们的第一个盛大圈圈 Widget 就制作完成了。 Beijing2008.zip ii. 测试 Widget 制作好的 Widget 是易于测试的。虽然盛大圈圈是集成到游戏中运行,但是借助自带的 测试环境,一样可以方便的进行验证。 1) 运行圈圈安装目录下的 WidgetGraphicTest.exe,点取工具栏上的“+”按钮,可以看到 我们刚才制作的“北京 2008”Widget 已经被陈列出来了; 2) 点击添加“北京 2008”下的“添加”按钮,可以看到工具栏上已经出现了“北京 2008” 的图标,点击图标即可执行我们刚才的设定的逻辑 3) 可以看到界面中央出现一个浏览器窗口,自动打开奥运会官网,并且能够自如的操作; 同时还具有半透明等诸多特效。测试顺利通过! iii. Gadget.xml 描述文件 Gadget.xml 是 Widget 的描述文件,它记录 Widget 的身份、界面、参数等信息。 包含完整 xml 元素的信息示例和说明如下:   不包含属性,仅仅包含用于定义widget的子元素‐‐>              Widget名字,必须            snda.igw            1.0.0.0                                                  © 2008            盛大个人中心                                                            IGWXXX            true      的容器,的子元素‐‐>                                                                                                                            full                                                                                    {B4F41D48‐62C3‐4921‐8CA6‐9810597ED56A}  i. 创建用户界面 i. 窗口与图标 盛大圈圈在游戏内以工具栏或侧边栏形式展现。 每个应用需要准备 32*32 和 64*64 两种大小的图标一套。 32*32 尺寸的图标作为显示在工具栏上的图标,64*64 尺寸的作为陈列在工具集中的图 标。文件名通常是 icon32.png 和 icon.png,也可以是自定义的文件名,在 gadget.xml 中描述 出来。 例如:               如果小工具固定于工具栏中,则将其视为处于停靠状态。如果将其拖出工具栏,则其处 于浮动或未停靠状态。 处于停靠状态的 Widget 最大宽度为 130 像素。处于未停靠状态的小工具在理论上没 有宽度限制,可以设计更宽的视图。但从游戏用户角度,我们规定 Widget 页面需在 800*600 分辨率下设计,单一 Widget 界面限定为最大尺寸 700*360。 ii. 图片与背景 常规的网页都能够在圈圈中很好的显示,同时圈圈Widget支持更多的特色界面设计机制。 ¾ 支持网页背景透明 透明色定义:#000100 网页中指定背景色为 #000100 即可以显示为透明。 ¾ 图片半透明 可以在网页中使用 32 位 PNG 格式图像来显示半透明图像效果。注意 PNG 在各 IE 版本 中透明效果的区别,避免可能出现的显示效果不一致问题。 IE5 及以上:可以使用 VML 支持 PNG 透明,如果没有使用 VML 即使使用 PNG 图片 也是不透明的; IE7:本身即完全支持 PNG 透明。 示例: VML 透明 透明色 Transparent.zip                       SNDA    EZPLAY    2007      ¾ 使用预制的皮肤透明 一般情况下,可以使用圈圈提供的预制的皮肤来达到和 Vista 类似的玻璃边框效果。并 可以设置内容区域的透明度。以此到达和游戏良好兼容的效果。 使用方法是在 Widget 的 xml 描述中使用 xul 属性来描述需要使用的外框皮肤。 示例:         起点文学      snda.igw      1.0.0.0                                      © 2008      起点文学‐小说原创门户‐‐起点中文网                                             full                                                  {DF2FDE45‐5859‐401B‐9C27‐6978CD25F23E}  Widget 实际运行的界面效果如下: iii. Select 元素的处理 常规的 HTML Select 元素会在圈圈中显示异常,因此建议不要直接使用 Select 下接框作 为选择,请使用附件中的替代方案 Select.zip 示例:     注意:此方案没有 onchange 事件 iv. Widget 中打开新窗口 圈圈 Widget 中的网页可以打开新的浏览器窗口,默认打开新窗口为一个游戏内全屏窗 口 示例: 充值 也可以使用 System.Content 对象的 OpenIE 方法来打开新窗口。所有打开的新窗口在所 属 Widget 被关闭时将一起被销毁 以下为具体方法使用说明: 1. OpenIE HRESULT _stdcall OpenIE([in] BSTR name, [in] BSTR url, [in] long left, [in]  long top, [in] long width, [in] long height, [in, optional, defaultvalue("")]  BSTR mode, [out, retval]  IDispatch ** htmlWindow ); 参数说明: name: 名称 url: 新窗口 url left: 新窗口所在座标 top: width: height: mode: 新开窗口模式,默认为打开一个 widget 内部窗口 示例: 2. 透明边框 如果期望用此方式打开的窗口带有边框,则需要如下使用。 3. 新窗口自动对齐原窗口 v. Widget 中使用 Flash Widget 界面中可以嵌入 Flash 动画,来实现更好的界面效果。在使用 Flash 时,强热建 议使用透明(无窗口)模式。 示例:            vi. 处理 停靠/浮动 事件 当 Widget 被拖放停靠到工具栏上时,会触发 System.Widget.onDock 事件。 当 Widget 从工具栏上拖出来时,会触发 System.Widget.onUndock 事件。 开发者可以在这两个事件触发时,进行调整界面布局,改变窗口尺寸的操作。 示例: ii. 开发规范与 API 圈圈提供了一系列的系统 API 供 Widget 调用,同时 Widget 需要遵守为了在游戏环境中 良好运行而做出的限定。 vii. 圈圈提供的系统对象 圈圈提供了一组 API 供 Widget 调用,Widget 开发者可以灵活利用这些 API 与圈圈进行 沟通,完成常规脚本难以实现的功能。 对象列表: 对象名称 功能定义、方法 System.Debug 调试对象 方法:System.Debug.outputString(strOutputString) 输出调试信息,使用DebugView工具查看 DebugView下载地址: http://technet.microsoft.com/en-us/sysinternals/bb896647.aspx System.Diagnostics 诊断对象 System.Diagnostics.EventLog 系统事件日志对象 方法:System.Diagnostics.EventLog.writeEntry(strEventLogEntry]) 记录事件日志,在系统事件查看其中查看 System.Environment 系统环境变量 方法:strValue = System.Environment.getEnvironmentVariable(strEnvVar) 获取系统和用户环境变量 属性:machineName 获取本地机器名 System.Widget.Settings 存取Widget的配置项 方法:strSetting = System.Gadget.Settings.readString(strName) 读取一个字符串键值 方法:System.Gadget.Settings.write(strName, varValue) 保存一个不确定类型的键值 方法:System.Gadget.Settings.writeString(strName, strValue) 写入一个字符串键值 System.Sound 系统音效 方法:System.Sound.beep() 播放使用蜂鸣器发出提醒声音 方法:System.Sound.playSound(strSound) 播放wave文件 System.Time 获取当前时区的时间 方法:strLocalTime = System.Time.getLocalTime(oTimeZone) 获取当前时间 属性:currentTimeZone 获取当前时区 System.Time.TimeZone 保留 System.Widget Widget的基础事件、方法、属性。 事件:System.Widget.onDock = handler 当Widget被拖放停靠到工具栏上时触发 事件:System. Widget.onUndock = handler 当Widget从工具栏上拖出来时触发 System.Content 圈圈内容控制 方法:System.Content.RegisterLIB(strName) 方法:System.Content.CreateComObject(strName) 方法:System.Content.CreateActiveX(strName) Widget中打开新窗口 使用COM组件 System.Online 在线行为相关,保留 viii. WEB 服务器如何识别浏览器是圈圈 如果您的 WEB 服务器需要针对圈圈进行特殊的处理,这需要识别浏览器的 UserAgent。 圈圈 Widget 通过 UserAgent 中附加信息来标识自己: IGW 1.0 (IGW 版本号) 示例: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; Maxthon; Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1) ; InfoPath.1; .NET CLR 1.1.4322; .NET CLR 2.0.50727; IGW 1.0 (0.9.0.110)) ix. 使用 COM 组件 尽量不要使用常规脚本中的 new ActiveXObject() 方法,而使用以下替代方法: System.Content.CreateComObject System.Content.CreateActiveX 示例 1: System.Content.CreateComObject("SDSpeakBox.SDGroupSpeaker"); System.Content.CreateActiveX("{D27CDB6E-AE6D-11cf-96B8-444553540000}") 示例 2: try  {      g_groupSpeaker =  System.Content.CreateComObject("SDSpeakBox.SDGroupSpeaker");      if (isNaN(g_groupSpeaker)) {          if (System.Content.RegisterLIB("com\\sdspeakbox.dll"))               g_groupSpeaker =  System.Content.CreateComObject("SDSpeakBox.SDGroupSpeaker");      }  }  catch (e)  {      g_groupSpeaker = new ActiveXObject("SDSpeakBox.SDGroupSpeaker");  } x. 注册 COM 组件 某些应用需要使用外部组件来扩充功能,如果外部组件需要注册,可以使用如下方法: System.Content.RegisterLIB(LibName) LibName 为相对此 Widget 存放目录的文件名 示例: try  {      g_groupSpeaker = System.Content.CreateComObject("SDSpeakBox.SDGroupSpeaker");      if (isNaN(g_groupSpeaker)) {          if (System.Content.RegisterLIB("com\\sdspeakbox.dll"))               g_groupSpeaker =  System.Content.CreateComObject("SDSpeakBox.SDGroupSpeaker");      }  }  catch (e)  {      g_groupSpeaker = new ActiveXObject("SDSpeakBox.SDGroupSpeaker");  } xi. 浏览器的功能限制 为了适合于游戏内使用,圈圈对浏览器的一些默认行为和功能设定做了处理,在开发时 需要留意,如下: 1. 禁止弹出对话框 包括 confirm/prompt 弹出的对话框,只部分支持 alert 效果。 2. 屏蔽右键弹出菜单(但不屏蔽右键消息) 3. 不接受拖拽 4. 隐藏边框/隐藏滚动条 如果一定要用边框/滚动条,请使用
标签设置 style 来做出边框/滚动条 5. 允许使用Windows主题 6. 自动忽略脚本执行错误 7. 禁止文件下载(IE5.5及以上有效) 8. 禁止Ctrl+快捷键(N:新建窗口;F:查找;P:打印) xii. 处理脚本异常 HTML 类型的 Widget 默认忽略所有脚本异常,XUL 类型的 Widget 脚本中发生异常也 不会弹出对话框。这样不会给用户带来干扰,但编写 Widget 时调试会不太方便,无法从异 常对话框中看到异常信息,圈圈自动将脚本异常信息通过 OutputDebugString 输出,因此可 以使用 DebugView 等工具来查看异常信息 xiii. 游戏基本数据获取 在 Gadget.xml 的 hosts/host/base 标签的 src 属性中所指定的该 Widget 所访问的地址中 可以通过一些简单的转义标记获得一些基本的游戏信息,标记如下: $gid$ 游戏的 AppID 编号 $gname$ 游戏的名称 $ga$ 游戏当前区的名称 $gaid$ 游戏当前区的 ID $gs$ 游戏当前游戏组的名称 (注意:游戏组的信息不一定准确) $gsid$ 游戏当前游戏器组的 ID $gnick$ 游戏当前玩家的昵称 $sex$ 游戏当前玩家的性别 iii. 发布 Widget Widget 制作测试完成后,就可以打包进行发布了。发布时,需要提供 Widget 目录的压 缩包及产品描述,发送到大赛指定的接收方。

下载文档,方便阅读与编辑

文档的实际排版效果,会与网站的显示效果略有不同!!

需要 5 金币 [ 分享文档获得金币 ] 0 人已下载

下载文档

相关文档