Wiki source code of AppDashboard

Last modified by Anamaria Stoica on 2009/10/28 12:50
Show last authors
1 {{velocity}}
2 $xwiki.jsfx.use("js/smartclient/initsc.js", true)##
3 $xwiki.jsfx.use("js/smartclient/modules/ISC_Core.js")##
4 $xwiki.jsfx.use("js/smartclient/modules/ISC_Foundation.js")##
5 $xwiki.jsfx.use("js/smartclient/modules/ISC_Containers.js")##
6 $xwiki.jsfx.use("js/smartclient/modules/ISC_Grids.js")##
7 $xwiki.jsfx.use("js/smartclient/modules/ISC_Forms.js")##
8 $xwiki.jsfx.use("js/smartclient/modules/ISC_DataBinding.js")##
9 $xwiki.jsfx.use("js/smartclient/skins/Enterprise/load_skin.js")##
10 $xwiki.ssx.use("Google Gadget and OpenSocial Integration.AppDashboard")
11 {{html}}
12 <script>
13 //===========================================================================
14 // GadgetWindow class definition
15 //===========================================================================
16
17 isc.defineClass("GadgetWindow", "Window").addMethods({
18
19 autoDraw:false,
20 showShadow:false,
21
22 // enable predefined component animation
23 animateMinimize:true,
24
25 // Window is draggable with "outline" appearance by default.
26 // "target" is the solid appearance.
27 dragAppearance:"outline",
28 canDrop:true,
29
30 // customize the appearance and order of the controls in the window header
31 // (could do this in load_skin.js instead)
32 headerMembers:["minimizeButton", "headerLabel", "closeButton"],
33
34 // show either a shadow, or translucency, when dragging a gadget
35 // (could do both at the same time, but these are not visually compatible effects)
36 //showDragShadow:true,
37 dragOpacity:30,
38
39 // these settings enable the gadget to autosize its height only to fit its contents
40 // (since width is determined from the containing layout, not the gadget contents)
41 vPolicy:"none",
42 overflow:"visible",
43 bodyProperties:{overflow:"visible"}
44
45 });
46
47 //===========================================================================
48 // GadgetDashboardColumn class definition
49 //===========================================================================
50
51 isc.defineClass("GadgetDashboardColumn", "VStack").addMethods({
52
53 // leave some space between gadgets
54 membersMargin:6,
55
56 // enable predefined component animation
57 animateMembers:true,
58 animateMemberTime:750,
59
60 // enable drop handling
61 canAcceptDrop:true,
62
63 // change appearance of drag placeholder and drop indicator
64 dropLineThickness:4,
65 dropLineProperties:{backgroundColor:"lightgreen"},
66 showDragPlaceHolder:true,
67 placeHolderProperties:{border:"2px solid #8289A6"}
68
69 });
70
71
72 //===========================================================================
73 // GadgetDashboardLayout class definition
74 //===========================================================================
75
76 isc.defineClass("GadgetDashboardLayout", "HLayout").addMethods({
77 numColumns:2,
78 membersMargin:6,
79 initWidget : function () {
80 this.Super("initWidget", arguments);
81 // create multiple GadgetDashboardColumn components
82 for (var i = 0; i < this.numColumns; i++) {
83 this.addMember(isc.GadgetDashboardColumn.create({autoDraw:false, width:"*"}));
84 }
85 },
86 addGadget : function (gadget, addToTop) {
87 var fewestGadgets = 999999,
88 fewestGadgetsColumn;
89 // find the column with the fewest gadgets
90 for (var i=0; i < this.members.length; i++) {
91 var numGadgets = this.getMember(i).members.length;
92 if (numGadgets < fewestGadgets) {
93 fewestGadgets = numGadgets;
94 fewestGadgetsColumn = this.getMember(i);
95 }
96 }
97 fewestGadgetsColumn.addMember(gadget, (addToTop ? 0 : null));
98 return fewestGadgetsColumn;
99 }
100 });
101
102 </script>
103
104 <div id="HTMLWrapper">
105 <script>
106 isc.HLayout.create({
107 ID: "dashboardContainer",
108 position: "relative",
109 width: "980px",
110 height: "100%",
111 layoutMargin: 10,
112 membersMargin: 10,
113 members: [
114 isc.GadgetDashboardLayout.create({
115 ID: "dashboard",
116 autoDraw: false,
117 numColumns: 3
118 })
119 ]
120 }).draw();
121 </script>
122 </div>
123
124 <script>
125 // add 5 gadgets
126 for(var i=0; i<5; i++) {
127 // create a new Gadget
128 var newGadget = isc.GadgetWindow.create({
129 ID: "OpenSocialGadget" + i,
130 title: "OpenSocial Gadget" + i,
131 items:[
132 // simple fake Gadget contents - could put anything here
133 isc.HTMLFlow.create({
134 autoDraw:false, align:"center", layoutAlign:"center",
135 contents: "I'm a <b>OpenSocial <i>Gadget</i></b>'s content! " + i
136 })
137 ]
138 });
139
140 // insert the Gadget in the content area, but keep it hidden for now
141 newGadget.hide();
142 var column = dashboard.addGadget(newGadget, true);// add to top
143 newGadget.show();
144 }
145
146 </script>
147
148 {{/html}}
149 {{/velocity}}