一步步创建边栏 Gadget(二)

一步步创建边栏 Gadget(二)

    相信使用上篇中创建的边栏Gadget之后，大家会很郁闷。难道视频窗口就那么小吗？看起来真费劲。我能通过该Gadget看着一部电视剧。而不能够定制自己需要的或者想要看的电视剧。

    在上一篇一步步创建边栏 Gadget（一）中，我们创建了一个简单的边栏Gadget。细心的朋友们也许会发现我们创建的Gadget中没有下图中圈选的按钮，仅仅拥有上方的关闭按钮。本篇将介绍如何为我们的边栏Gadget添加配置属性改变边栏Gadget的大小，以及添加播放URL配置选项。

    总体来讲，本部分比第一部分仅仅多出两个js文件以及一个HTML页面（用于构成系统配置页面）。不过为了添加这些功能到我们的边栏Gadget中我们需要对上一篇中的文件做部分修改。

步骤一：为边栏Gadget添加配置属性

a.创建一html文件命名为setting.html

1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
2 <html >
3     <head>
4         <title>SidebarShell:Settings</title>
5         <script type="text/javascript" src="js/setting.js"></script>
6     <style type="text/css">
7     body{width:240;height:180; font-size:12px; background-image:url(images/bg.jpg); background-repeat:repeat-x;}
8     ul{ margin:16px; padding:0px; list-style-type:none;}
9     li{ margin:4px; padding:4px;}
10     #btnsv{ margin-left:40px;}
11     </style>
12     </head>
13     <body onLoad="loadsett()">
14     <ul>
15         <li>URL:  <input type="text"  id="txturl" name="txturl" size="14" value=""/></li>
16         <li>DIS:    <select id="seldis" name="seldis">
17             <option value="120X90">120X90</option>
18             <option value="160X120">160X120</option>
19             <option value="200X150">200X150</option>
20             <option value="240X180">240X180</option>
21             <option value="280X210">280X210</option>
22             <option value="320X240">320X240</option>
23             </select>
24         </li>
25     </ul>
26     <hr/>
27     <div style="text-align:center;">
28         <a href="http://netwenchao.cnblogs.com">更多信息请访问Denny.dong</a>
29     </div>
30     </body>
31

b.在该html文件中添加html代码，在此我们仅仅添加URL以及尺寸等配置项。

c.添加一脚本文件命名为setting.js，并输入如下代码（用于存放以及加载配置信息）。

1 var dfUrl="http://www.tudou.com/l/e3MBzOUVNaQ";
2 function procSettingsClosingEvent(event){
3     if (event.closeAction == event.Action.commit)
4     {
5         System.Gadget.Settings.write("vurl",$("txturl").value);//存储配置信息
6         System.Gadget.Settings.write("dis",$("seldis").value);
7     }
8     event.cancel = false;
9 }
10 function loadsett()
11 {
12     var gSE="";
13     var gUrl="";
14     System.Gadget.onSettingsClosing = procSettingsClosingEvent;
15     gSE= System.Gadget.Settings.read("dis");  //读取配置信息
16     gUrl=System.Gadget.Settings.read("vurl"); //读取配置信息
17     $("seldis").value=(gSE=="")?"120X90":gSE;//填充默认的配置信息
18     $("txturl").value=(gUrl=="")?dfUrl:gUrl;
19 }
20 function $(el){return typeof(el)=="string"?document.getElementById(el):el;}
21

d.添加video.js文件，在其中填写如下代码。用于加载配置信息以及应用配置信息到页面上。

1 //Enable the gadget setting UI.
2 System.Gadget.settingsUI="settings.htm";
3 // Delegate for when the Settings dialog is closed.
4 System.Gadget.onSettingsClosed = SettingsClosed;
5 //default width
6 var strWidth="180";
7 var strDis="";
8 var timeTransition=3;
9
10 function $(el){return typeof(el)=="string"?document.getElementById(el):el;}
11 function SettingsClosed(m_event){
12     if(m_event.closeAction==m_event.Action.commit){
13         strDis=System.Gadget.Settings.readString("dis");
14         strvUrl=System.Gadget.Settings.readString("vurl");
15         SetGadgetSetting(strDis,strvUrl);
16     }
17 }
18 //初始化gadget，并未其加载默认参数。
19 function Init_gadget(){
20     strDis=System.Gadget.Settings.read("dis");
21     strUrl=System.Gadget.Settings.read("vurl");
22     SetGadgetSetting(strDis,strUrl);
23 }
24 function SetGadgetSetting(strFeedback,strUrl){
25     switch(strFeedback){
26         case "120X90":
27             setwd(120,90,strUrl);
28             break;
29         case "160X120":
30             setwd(160,120,strUrl);
31             break;
32         case "200X150":
33             setwd(200,150,strUrl);
34             break;
35         case "240X180":
36             setwd(240,180,strUrl);
37             break;
38         case "280X210":
39             setwd(280,210,strUrl);
40             break;
41         case "320X240":
42             setwd(320,240,strUrl);
43             break;
44         default:
45             setwd(120,90,strUrl);
46             break;
47         }
48 }
49 //set the element size
50 function setwd(intwid,inthid,strUrl){
51     debugger;
52     $("gb").style.width=intwid;
53     $("gb").style.height=inthid+2;
54     defURL="http://www.tudou.com/l/e3MBzOUVNaQ"
55
56     src="<embed src='$URL' type='application/x-shockwave-flash' allowscriptaccess='always' allowfullscreen='true' wmode='opaque' id='elpy' name='elpy' width='"+intwid+"' height='"+inthid+"'></embed>"
57     if(strUrl.length>1){
58         $("palyerHoder").innerHTML=src.replace("$URL",strUrl);
59     }
60     else
61         $("palyerHoder").innerHTML=src.replace("$URL",defURL);
62
63 }

e.修改video.html文件在页面初始化之后加载配置信息。

1 <html xmlns="http://www.w3.org/1999/xhtml">
2     <head>
3         <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
4         <title>My Video</title>
5         <script type="text/javascript" src="js/video.js"></script>
6         <style type="text/css">
7         body{margin: 0px;padding:0px; background-image:url(images/bg.jpg); background-repeat:repeat-x; width:200; height:155; background-color:#000;}
8         </style>
9     </head>
10     <body id="gb" onLoad="Init_gadget()">
11         <div id="palyerHoder">
12         </div>
13     </body>
14

f.发布Gadget。效果如下



步骤二:为边栏Gadget添加Dock属性，使其在Dock状态下视频尺寸变大。

a.在video.js中添加如下代码，使其在Dock状态下尺寸变为系统设定的尺寸，而在非Dock状态下尺寸设定为360X270.

1 //define dock event
2 System.Gadget.onDock = CheckDockState;
3 //define undock event
4 System.Gadget.onUndock = CheckDockState;
5
6 function CheckDockState(){
7     System.Gadget.beginTransition();
8
9     var oBody = document.body.style;
10     if (System.Gadget.docked){
11         SetGadgetSetting(System.Gadget.Settings.readString("dis"),"");
12     }
13     else{
14     setwd(360,270,"");
15     }
16     System.Gadget.endTransition(System.Gadget.TransitionType.morph, timeTransition);
17

b.发布Gadget，效果如图一。

点击此下载代码
相关阅读:
常用模块(time,os,sys,collections,random,序列化模块,re)
python-函数篇
 内置函数——filter和map
python杂七杂八的用法
 计算机硬件
 操作系统简介
 Django入门
 linux下查看cpu物理个数和逻辑个数
 python反射的妙用
 Python（文件、文件夹压缩处理模块，shelve持久化模块，xml处理模块、ConfigParser文档配置模块、hashlib加密模块，subprocess系统交互模块 log模块）
原文地址：https://www.cnblogs.com/netwenchao/p/1537622.html

一步步创建 边栏 Gadget(二)

一步步创建边栏 Gadget(二)