一步步创建 边栏 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
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
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 }
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
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
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，效果如图一。
