Context Navigation

test_PortletInGridContainer.html

Last change on this file was 483, checked in by hendrikvanantwerpen, 11 years ago
Added Dojo 1.9.3 release.
File size: 20.5 KB

Line
1	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
2	"http://www.w3.org/TR/html4/strict.dtd">
3	<html>
4	<head>
5	<title>DojoX Portlet In a GridContainer example</title>
6
7	<!-- required: a default theme file -->
8	<link rel="stylesheet" id="themeStyles" href="../../../dijit/themes/soria/soria.css">
9	<link rel="stylesheet" href="../Dialog/Dialog.css">
10
11	<style type="text/css">
12	@import "../../../dojo/resources/dojo.css";
13	@import "../../../dijit/tests/css/dijitTests.css";
14
15	@import "../Portlet/Portlet.css";
16	@import "../../layout/resources/GridContainer.css";
17	@import "../Calendar/Calendar.css";
18	@import "../../grid/resources/Grid.css";
19	@import "../../grid/resources/tundraGrid.css";
20	@import "../../grid/resources/soriaGrid.css";
21	@import "../../grid/resources/nihiloGrid.css";
22	@import "../../image/resources/image.css";
23	@import "../../layout/resources/ExpandoPane.css";
24
25	.dijitTabContainer .gridContainerTable {
26	border: 0px none;
27	}
28	.dijitTabContainer .gridContainer {
29	padding: 2px;
30	}
31
32	#masker {
33	position: absolute;
34	width: 100%;
35	height: 100%;
36	left: 0;
37	top: 0;
38	background: white;
39	z-index: 1000;
40	}
41
42	#clients .dijitTitlePaneContentInner,
43	#quotes .dijitTitlePaneContentInner {
44	padding: 0;
45	}
46	body , html{
47	padding: 0px;
48	height: 100%;
49	width: 100%;
50	}
51	.calendarStack span {
52	font-weight: bold;
53	}
54	.calendarStack div {
55	padding-bottom: 5px;
56	}
57	.gridContainer {overflow-y: auto;}
58
59	.dijitTooltip {
60	max-width: 400px;
61	}
62	.labelTable td {
63	padding: 4px;
64	border: 0;
65	}
66	.labelTable .tableContainer-labelCell {
67	background-color: #CCC;
68	}
69	.portletNoBorder div.dijitTitlePaneContentInner {
70	padding: 0;
71	}
72	.dj_ie6 .dropIndicator, .dj_ie6 .dojoxPortlet{
73	margin: 5px;
74	}
75	.gridContainerZone > *{
76	margin: 5px !important;
77	}
78	</style>
79
80	<!-- required: dojo.js -->
81	<script type="text/javascript" src="../../../dojo/dojo.js" data-dojo-config="isDebug:false, parseOnLoad: false"></script>
82
83	<!-- do not use! only for testing dynamic themes -->
84	<script type="text/javascript" src="../../../dijit/tests/_testCommon.js"></script>
85
86	<script type="text/javascript" src="test_PortletInGridContainer.js"></script>
87	<script type="text/javascript" src="../FeedPortlet.js"></script>
88	<script type="text/javascript" src="CalendarStackLayout.js"></script>
89	</head>
90	<body class="soria">
91
92	<div id="masker"></div>
93
94	<span dojoType="dojox.data.HtmlStore"
95	data-dojo-id="htmlStore" dataId="gridDataTable">
96	</span>
97
98	<div dojoType="dojox.data.FileStore" url="../../data/demos/stores/filestore_dojotree.php"
99	data-dojo-id="fileStore" pathAsQueryParam="true"></div>
100
101	<div dojoType="dijit.tree.ForestStoreModel" data-dojo-id="fileModel"
102	store="fileStore" query="{}"
103	rootId="DojoFiles" rootLabel="Dojo Files" childrenAttrs="children">
104	<script type="dojo/method" data-dojo-event="getChildren" data-dojo-args="parent, callback">
105	if (!this._allItems) {
106	this._allItems = [];
107	}
108	dijit.tree.ForestStoreModel.prototype.getChildren.apply(this, [parent, dojo.hitch(this, function(items){
109	this._allItems = this._allItems.concat(items);
110	console.log("getChildren of " + parent.name);
111	dojo.publish("/fileChange", [this._allItems]);
112	callback(items);
113	})]);
114	</script>
115
116	</div>
117
118	<div dojoType="dijit.Menu" id="gridCols" data-dojo-id="gridCols" style="display: none">
119	<div dojoType="dojox.widget.PlaceholderMenuItem" label="GridColumns"></div>
120	</div>
121
122
123
124	<div dojoType="dijit.layout.TabContainer" region="center" style="height:100%;">
125
126	<div dojoType="dijit.layout.BorderContainer"
127	id="mainLayout"
128	title="Home"
129	style="width: 100%; height: 100%; padding: 2px;">
130
131	<div dojoType="dojox.layout.GridContainer"
132	id="gridContainer"
133	region="center"
134	acceptTypes="Portlet"
135	hasResizableColumns="false"
136	nbZones="2"
137	dragHandleClass="dijitTitlePaneTitle">
138
139	<div dojoType="dojox.widget.Portlet" title="Info" toggleable="false" dragRestriction="true">
140	<p onclick="text_explode_2(this)">This is a Portlet widget, which is similar to a dijit.TitlePane,
141	but is designed to be used with the dojox.layout.GridContainer widget. Each widget can be extended
142	with a number of different plug in widgets, with each plug in specifying
143	an icon to display in the title bar. (<i>By the way, click this paragraph somewhere</i> :-)
144	</p>
145	<p>
146	Two settings widgets are currently defined, <b>dojox.widget.PortletSettings</b>
147	and <b>dojox.widget.PortletDialogSettings</b>
148	</p>
149	<p>This Portlet is not draggable, but all others are.</p>
150	</div>
151
152	<div dojoType="dojox.widget.FeedPortlet" title="Todays News"
153	id="todaysNews"
154	url="http://news.google.com/news?hl=en&topic=t&output=atom"
155	maxResults="5"
156	dndType="Portlet"
157	>
158	<div dojoType="dojox.widget.PortletFeedSettings"></div>
159
160	<div>
161	This is a FeedPortlet with a single feed.
162	Click the settings icon in the title bar to enter a
163	different feed to load. Hovering over a news item shows a summary
164	of it in a tooltip.
165	</div>
166	</div>
167
168	<div dojoType="dojox.widget.Portlet" title="Clients" id="clients"
169	class="gridPortlet"
170	dndType="Portlet">
171
172	<div id="staticGrid"
173	dojoType="dojox.grid.DataGrid"
174	rowsPerPage="10"
175	columnReordering="false"
176	store="htmlStore"
177	structure="layoutHtmlTable",
178	query="{}"
179	headerMenu="gridCols"
180	columnToggling="true"
181	title="Simple Grid"
182	autoHeight="true"
183	>
184	<script type="dojo/connect">
185	setTimeout(dojo.hitch(this, "resize"), 100);
186	</script>
187
188	</div>
189
190	</div>
191
192	<div dojoType="dojox.widget.Portlet" title="Line Chart" id="lineChartPortlet" dndType="Portlet">
193	<div dojoType="dojox.widget.PortletDialogSettings"
194	id="lineChartSettings" dimensions="[300, 117]" title="Line Chart Settings">
195	<div dojoType="dojox.layout.TableContainer" cols="1">
196	<div dojoType="dijit.form.TextBox" title="Option 3"></div>
197	<div dojoType="dijit.form.TextBox" title="Option 4"></div>
198	</div>
199	<div style="text-align: center;">
200	<div dojoType="dijit.form.Button" onClick="dijit.byId('lineChartSettings').toggle();">OK</div>
201	</div>
202	</div>
203	<script type="dojo/connect" data-dojo-event="onUpdateSize">
204	if(window.chart){chart.resize();}
205	</script>
206	<div>
207	Change the zoom of the chart using the slider, then drag it using the mouse. This portlet uses
208	a dialog settings widget, click the settings icon in the title bar to see it.
209	</div>
210	<div id="zoomer" style="height:200px; width: 400px;"></div>
211	<div style="margin-bottom:5px;">Scale:</div>
212	<div id="scaleXSlider" dojoType="dijit.form.HorizontalSlider"
213	value="1" minimum="1" maximum="10" discreteValues="10" showButtons="false">
214	<div dojoType="dijit.form.HorizontalRule" container="bottomDecoration" count="10" style="height:5px;"></div>
215	<div dojoType="dijit.form.HorizontalRuleLabels" container="bottomDecoration" minimum="1" maximum="10" count="10"
216	constraints="{pattern: '##'}" style="height:1.2em;font-size:75%;color:gray;"></div>
217	</div>
218
219	</div>
220	-->
221	</div>
222
223	<div dojoType="dojox.layout.ExpandoPane" region="right"
224	title="Calendar"
225	style="height: 100%;">
226
227	<div dojoType="dojox.widget.tests.CalendarStackLayout">
228	<div dojoType="dijit.layout.ContentPane" dateref="2009-06-20">
229	<div>
230	<span>
231	Type:
232	</span>
233	Meeting
234	</div>
235	<div>
236	<span>
237	Time:
238	</span>
239	12:00 - 13:00
240	</div>
241	<div>
242	<span>
243	Details:
244	</span>
245	</div>
246	<div>
247	Meeting about the User Interface
248	</div>
249	</div>
250	<div dojoType="dijit.layout.ContentPane" dateref="2009-06-22">
251	<div>
252	<span>
253	Type:
254	</span>
255	Meeting
256	</div>
257	<div>
258	<span>
259	Time:
260	</span>
261	09:00 - 10:30
262	</div>
263	<div>
264	<span>
265	Details:
266	</span>
267	</div>
268	<div>
269	Morning prayer for the end of life of IE6
270	</div>
271	</div>
272	<div dojoType="dijit.layout.ContentPane" dateref="2009-06-24">
273	<div>
274	<span>
275	Type:
276	</span>
277	Appointment
278	</div>
279	<div>
280	<span>
281	Time:
282	</span>
283	19:00 - 20:30
284	</div>
285	<div>
286	<span>
287	Details:
288	</span>
289	</div>
290	<div>
291	Root canal at dentist. Gonna get a candy bar!
292	</div>
293	</div>
294	</div>
295
296	</div>
297
298	</div>
299
300	<div dojoType="dijit.layout.BorderContainer" title="My Interests">
301	<div dojoType="dojox.layout.GridContainer"
302	id="gridContainer2"
303	acceptTypes="Portlet"
304	hasResizableColumns="false"
305	nbZones="2"
306	dragHandleClass="dijitTitlePaneTitle"
307	region="center"
308	>
309	<div dojoType="dojox.widget.ExpandableFeedPortlet" dndType="Portlet" title="Cool Blogs -> Remembering Your Selection" showFeedTitle="false">
310	<select dojoType="dojox.widget.PortletFeedSettings" id="coolBlogsSettings">
311	<script type="dojo/connect">
312	this.set("selectedIndex", dojo.cookie(this.id + "-selectedIndex") \|\| 0);
313	</script>
314	<script type="dojo/connect" data-dojo-event="attr" data-dojo-args="name, value">
315	if(name == "selectedIndex"){
316	dojo.cookie(this.id + "-selectedIndex", value);
317
318	// Set a custom title when selection changes.
319	if (this.portlet){
320	this.portlet.attr("title", "Cool Blogs - " + this.text.options[value].innerHTML);
321	}
322	}
323	</script>
324	<option value="http://shaneosullivan.wordpress.com/category/dojo/feed/">Dojo Blatherings</option>
325	<option value="http://www.dojotoolkit.org/aggregator/rss">Planet Dojo</option>
326	<option value="http://feeds2.feedburner.com/ajaxian">Ajaxian</option>
327	</select>
328	<div>
329	This is an ExpandableFeedPortlet with multiple available feeds.
330	Click the settings icon in the title bar to choose a feed to load.
331	This Portlet also maintains its state using a cookie, so when you choose
332	a feed to show and refresh the page, that same feed will be selected.
333	this example also shows how to modify the title of the portlet when a new
334	feed is selected.
335	When a feed is loaded, it automatically sets the title of the Portlet to the
336	title of the feed. This portlet has disabled that behavior using
337	showFeedTitle="false"
338	</div>
339	</div>
340	<div dndType="Portlet" dojoType="dojox.widget.ExpandableFeedPortlet" title="Cool Blogs -> onlyOpenOne == true"
341	onlyOpenOne="true" >
342	<select dojoType="dojox.widget.PortletFeedSettings" id="multiOptions">
343	<option value="http://www.dojotoolkit.org/aggregator/rss/">Planet Dojo</option>
344	<option value="http://shaneosullivan.wordpress.com/category/dojo/feed/">Dojo Blatherings</option>
345	<option value="http://feeds2.feedburner.com/ajaxian">Ajaxian</option>
346	</select>
347	<div>
348	This is an ExpandableFeedPortlet with multiple available feeds, in which you
349	can only expand a single item at a time.
350	Click the settings icon in the title bar to choose a feed to load.
351	</div>
352	</div>
353	<div dojoType="dojox.widget.Portlet" dndType="Portlet" title="Quotes of the Day" id="quotes">
354	<div dojoType="dojox.widget.PortletSettings">
355	<div dojoType="dojox.layout.TableContainer" cols="1">
356	<div dojoType="dijit.form.TextBox" title="Option 3"></div>
357	<div dojoType="dijit.form.TextBox" title="Option 4"></div>
358	</div>
359	</div>
360	<script type="dojo/connect">
361	loadFeed("http://feeds2.feedburner.com/quotationspage/qotd", "quotes");
362	</script>
363	<div id="quotes">
364
365	</div>
366	</div>
367
368	<div dojoType="dojox.widget.FeedPortlet" dndType="Portlet" title="Dojo Campus - Local Feed"
369	url="testAtom.xml"
370	maxResults="5"
371	local="true"
372	>
373	<div>
374	This is a FeedPortlet with a local feed, which is useful
375	if you have a feed that is not public, perhaps on an
376	intranet.
377	</div>
378	</div>
379
380	<div dojoType="dojox.widget.Portlet" dndType="Portlet" title="My Flickr">
381	<div dojoType="dojox.widget.PortletSettings">
382	<div dojoType="dojox.layout.TableContainer" cols="1">
383	<div dojoType="dijit.form.TextBox" title="Option 3"></div>
384	<div dojoType="dijit.form.TextBox" title="Option 4"></div>
385	</div>
386	</div>
387
388	<div dojoType="dojox.image.SlideShow" imageWidth="300" imageHeight="300">
389	<script type="dojo/connect">
390
391	var flickrRestStore = new dojox.data.FlickrRestStore();
392	var req = {
393	query: {
394	userid: "44153025@N00",
395	apikey: "8c6803164dbc395fb7131c9d54843627",
396	setid: "72057594114596784",
397	sort: [
398	{
399	attribute: "interestingness",
400	descending: true
401	}
402	],
403	tag_mode: "any"
404	},
405	count: 20
406	};
407	this.setDataStore(flickrRestStore, req);
408	</script>
409	</div>
410	</div>
411
412	</div>
413	</div>
414
415	<div dojoType="dijit.layout.BorderContainer" title="My Files">
416	<div dojoType="dojox.layout.ExpandoPane" region="left" title="File Explorer" style="width: 230px;">
417	<div
418	id="tree"
419	dojoType="dijit.Tree"
420	model="fileModel"
421	persist="false"
422	style="overflow-y: auto;height: 100%;max-width: 230px;">
423	<script type="dojo/method" data-dojo-event="onClick" data-dojo-args="item">
424	if (fileStore.isItem(item)){
425	dojo.publish("/fileinfo", [fileStore, item]);
426	}
427	</script>
428	</div>
429	</div>
430
431	<div dojoType="dojox.layout.GridContainer"
432	region="center"
433	acceptTypes="Portlet"
434	hasResizableColumns="false"
435	nbZones="2"
436	dragHandleClass="dijitTitlePaneTitle"
437	>
438	<div dojoType="dojox.widget.Portlet" dndType="Portlet" title="File Info" class="portletNoBorder">
439	<script type="dojo/connect">
440	var mapping = {
441	"fileName" : "name",
442	"filePath": "path",
443	"fileSize": "size",
444	"fileModified": "modified",
445	"fileParent":"parentDir",
446	"fileIsDir": "directory"
447	};
448
449	dojo.subscribe("/fileinfo", function(store, item) {
450	for (var dijitId in mapping) {
451	var attrib = mapping[dijitId];
452	var val = store.getValue(item, attrib);
453	if (attrib == "size") {
454	val += " bytes";
455	} else if (attrib == "modified") {
456	val = dojo.date.locale.format(new Date(Number(val)), {formatLength: "medium"});
457	} else if (attrib == "directory") {
458	val = val ? "Yes" : "No";
459	}
460
461	dijit.byId(dijitId).attr("content", val);
462	}
463	});
464	</script>
465	<div dojoType="dojox.layout.TableContainer" class="labelTable" spacing="0">
466	<div dojoType="dijit.layout.ContentPane" label="Name:" id="fileName"></div>
467	<div dojoType="dijit.layout.ContentPane" label="Path:" id="filePath"></div>
468	<div dojoType="dijit.layout.ContentPane" label="Size:" id="fileSize"></div>
469	<div dojoType="dijit.layout.ContentPane" label="Modified:" id="fileModified"></div>
470	<div dojoType="dijit.layout.ContentPane" label="Parent Directory:" id="fileParent"></div>
471	<div dojoType="dijit.layout.ContentPane" label="Is Directory?:" id="fileIsDir"></div>
472	</div>
473	</div>
474
475	<div dojoType="dojox.widget.Portlet" dndType="Portlet" title="File Contents"
476	id="fileContentPortlet"
477	style="max-height: 350px;">
478	<script type="dojo/connect" data-dojo-event="startup">
479	var widget = dijit.byId("fileContents");
480	dojo.style(this.containerNode, {
481	height: "310px",
482	paddingTop: 0,
483	paddingBottom: 0,
484	paddingRight: 0
485	});
486	dojo.subscribe("/fileinfo", function(store, item) {
487	var path = dojo.config.baseUrl + "../" + store.getValue(item, "path");
488
489	if (path.indexOf(".png") > -1 \|\| path.indexOf(".jpg") > -1 \|\| path.indexOf(".gif") > -1) {
490	widget.attr("content", "<img src='" +path + "'>");
491	} else if(store.getValue(item, "size") > 0
492	&& path.indexOf(".zip") < 0
493	&& path.indexOf(".tgz") < 0){
494	widget.attr("href", path);
495	} else {
496	widget.attr("content", "");
497	}
498	});
499	</script>
500	<div dojoType="dijit.layout.ContentPane" id="fileContents" parseOnLoad="false">
501	<script type="dojo/method" data-dojo-event="_setContent" data-dojo-args="data, isFake">
502	var text = typeof data == "string" ? data : data.textContent;
503	if (text.indexOf("<img") != 0 && text.indexOf("<span") != 0) {
504	text = text.replace(/</gm, "<").replace(/>/gm, ">")
505	.replace(/\t/g, "  ").split("\n").join("<br>");
506	}
507	dijit.layout.ContentPane.prototype._setContent.apply(this, [text, isFake]);
508	</script>
509	File contents are loaded here. Click on any file in the tree to see its contents.
510	</div>
511	</div>
512
513	<div dojoType="dojox.widget.Portlet" dndType="Portlet" title="Selected Files">
514	<script type="dojo/connect">
515	var timer;
516
517	dojo.subscribe("/fileChange", dojo.hitch(this, function(items){
518	this._items = items;
519	if (this._started) {
520	if (timer) {
521	clearTimeout(timer);
522	}
523	timer = setTimeout(dojo.hitch(this, "updateChart"), 200);
524	}
525	}));
526
527	</script>
528	<script type="dojo/connect" data-dojo-event="startup">
529	dojo.require("dojox.charting.themes.Bahamation");
530	var dc = dojox.charting;
531
532	var container = dojo.create("div", {}, this.containerNode);
533	dojo.style(container, {"height": "300px", "width" : "300px"});
534
535	console.log("dimensions of container are", dojo.marginBox(container));
536
537	var chart = this.chart = new dc.Chart2D(container);
538	chart.setTheme(dc.themes.Bahamation);
539	chart.addPlot("default", {
540	type: "Pie",
541	font: "normal normal 11pt Tahoma",
542	fontColor: "black",
543	labelOffset: -30,
544	radius: 80
545	});
546	this.updateChart();
547	</script>
548	<script type="dojo/method" data-dojo-event="updateChart">
549	var extensions = {};
550	var items = this._items;
551	var dc = dojox.charting;
552
553	if (!items \|\| items.length < 1) {
554	return;
555	}
556
557	function val(item, attr) {
558	return fileStore.getValue(item, attr);
559	}
560	function getExtension(item) {
561	if (val(item, "directory")) {
562	return "folder";
563	}
564	var str = val(item, "name");
565	var parts = str.split(".");
566	if (parts.length < 2) {
567	return "none";
568	}
569	return parts[1];
570	}
571
572	dojo.forEach(items, function(item){
573	if (val(item, "directory")) {
574	return;
575	}
576
577	var count = extensions[getExtension(item)] ;
578	if (!count) {
579	count = 0;
580	}
581	var ext = getExtension(item);
582	extensions[ext] = ++count;
583	});
584	var series = [];
585	for (var ext in extensions) {
586	series.push({
587	y : extensions[ext],
588	text: ext,
589	stroke: "black",
590	tooltip: extensions[ext] + " " +
591	(ext == "none" ?
592	"files with no extension" :
593	ext + " files")
594	+ " found"
595	});
596	}
597
598
599	this.chart.addSeries("Series A", series);
600	this.chart.resize(300, 300);
601
602	dojo.forEach(this._anims \|\| [], function(anim){
603	anim.destroy();
604	});
605
606	this._anims = [
607	new dc.action2d.MoveSlice(this.chart, "default"),
608	new dc.action2d.Highlight(this.chart, "default"),
609	new dc.action2d.Tooltip(this.chart, "default")];
610
611	this.chart.render();
612	</script>
613	<div>
614	This Pie chart shows the proportion of files in the Dojo toolkit.
615	As you open folders in the tree, it updates the chart.
616	</div>
617	</div>
618
619	</div>
620	</div>
621
622	</div>
623
624	<table id="gridDataTable" style="display:none;">
625	<thead>
626	<tr>
627	<th >First Name</th>
628	<th >Last Name</th>
629	<th >DOB</th>
630	</tr>
631	</thead>
632	<tbody>
633	<tr >
634	<td >Davy</td>
635	<td >Jones</td>
636	<td >10/26/1974</td>
637	</tr>
638	<tr >
639	<td >Dee</td>
640	<td >Murphy</td>
641	<td >2/25/1936</td>
642	</tr>
643	<tr >
644	<td >Dozy</td>
645	<td >Kowalski</td>
646	<td >3/17/1991</td>
647	</tr>
648	<tr >
649	<td >Mick</td>
650	<td >Mickelson</td>
651	<td >3/31/1993</td>
652	</tr>
653	<tr >
654	<td >Titch</td>
655	<td >Woods</td>
656	<td >1/29/1998</td>
657	</tr>
658	</tbody>
659	</table>
660
661	</body>
662	</html>

Note: See TracBrowser for help on using the repository browser.

Context Navigation

source: Dev/trunk/src/client/dojox/widget/tests/test_PortletInGridContainer.html

Download in other formats: