AppDashboard (Google Gadget and OpenSocial Integration.AppDashboard)

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