Subversion Repositories Applications.papyrus

Rev

Details | Last modification | View Log | RSS feed

Rev Author Line No. Line
2150 mathias 1 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
2 
<html>
3 
<head>
4 
	<title>dojox.Grid - Image Search Test</title>
5 
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta>
6 
	<style>
7 
		@import "../_grid/Grid.css";
8 
		body {
9 
			font-size: 0.9em;
10 
			font-family: Geneva, Arial, Helvetica, sans-serif;
11 
		}
12 
		.grid {
13 
			height: 30em;
14 
			width: 51em;
15 
			border: 1px solid silver;
16 
		}
17 
 
18 
		#info {
19 
			width: 700px;
20 
		}
21 
	</style>
22 
	<script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug:false, parseOnLoad: true"></script>
23 
	<script type="text/javascript">
24 
		dojo.require("dojox.grid.Grid");
25 
		dojo.require("dojox.grid._data.model");
26 
		dojo.require("dojo.parser");
27 
	</script>
28 
	<script type="text/javascript" src="yahooSearch.js"></script>
29 
	<script type="text/javascript">
30 
		// model fields
31 
		imageFields = [
32 
			{ name: 'Title', na: '' },
33 
			{ name: 'Thumbnail', na: ''},
34 
			{ name: 'Summary', na: '' },
35 
			{ name: 'Url', na: '' },
36 
			{ name: 'FileSize', na: ''},
37 
			{ name: 'Height', na: ''},
38 
			{ name: 'Width', na: ''}
39 
		];
40 
		// create data model
41 
		var model = new dojox.grid.data.yahooSearch(imageFields, null, "searchInput");
42 
		model.url = 'http://search.yahooapis.com/ImageSearchService/V1/imageSearch';
43 
		model.observer(this);
44 
 
45 
		// report some model send/receive status
46 
		model.onSend = function(inParams) {
47 
			dojo.byId('sendInfo').innerHTML = dojo.string.substitute('Request rows ${0} to ${1}.&nbsp&nbsp;', [inParams.start, inParams.start + inParams.results -1]);
48 
		}
49 
		model.onReceive = function(inData) {
50 
			dojo.byId('receiveInfo').innerHTML = dojo.string.substitute('Receive rows ${0} to ${1}.&nbsp&nbsp;', [inData.firstResultPosition, inData.firstResultPosition + inData.totalResultsReturned-1]);
51 
		}
52 
 
53 
 
54 
		// Define grid structure
55 
		// remove the height from the header image cell / row cells have a default height so there's less adjustment when thumb comes in.
56 
		beforeImageRow = function(inRowIndex, inSubRows) {
57 
			inSubRows[0].hidden = (inRowIndex == -1);
58 
		}
59 
 
60 
		var imageLayout = [
61 
			{ onBeforeRow: beforeImageRow,
62 
				cells: [
63 
					[	{ name: 'Image', cellStyles: "height: 100px;", styles: "text-align: center;", width: 12, field: 3, extraField: 1, formatter: formatImage },
64 
						{ name: 'Image', cellStyles: "height: 100px;", styles: "text-align: center;", width: 12, field: 3, extraField: 1, formatter: formatImage },
65 
						{ name: 'Image', cellStyles: "height: 100px;", styles: "text-align: center;", width: 12, field: 3, extraField: 1, formatter: formatImage },
66 
						{ name: 'Image', cellStyles: "height: 100px;", styles: "text-align: center;", width: 12, field: 3, extraField: 1, formatter: formatImage }
67 
					]
68 
			]}
69 
		];
70 
 
71 
		// Create grid subclass to function as we need to display images only.
72 
		// adds indirection between model row and grid row.
73 
		dojo.declare("dojox.ImageGrid", dojox.Grid, {
74 
			postCreate: function() {
75 
				this.inherited(arguments);
76 
				this.modelDatumChange = this.modelRowChange;
77 
				this.colCount = this.layout.cells.length;
78 
			},
79 
			getDataRowIndex: function(inCell, inRowIndex) {
80 
				var r = inCell.index + Math.floor(inRowIndex * this.colCount);
81 
				return r;
82 
			},
83 
			// called in cell context
84 
			get: function(inRowIndex) {
85 
				var r = this.grid.getDataRowIndex(this, inRowIndex);
86 
				return dojox.Grid.prototype.get.call(this, r);
87 
			},
88 
			modelAllChange: function(){
89 
				this.rowCount = Math.ceil(this.model.getRowCount() / this.colCount);
90 
				this.updateRowCount(this.rowCount);
91 
			},
92 
			modelRowChange: function(inData, inRowIndex) {
93 
				if (inRowIndex % this.colCount == this.colCount - 1 || inRowIndex == this.model.count - 1)
94 
					this.updateRow(Math.floor(inRowIndex / this.colCount));
95 
			}
96 
		});
97 
 
98 
		getCellData = function(inCell, inRowIndex, inField) {
99 
			var m = inCell.grid.model, r = inCell.grid.getDataRowIndex(inCell, inRowIndex);
100 
			return m.getDatum(r, inField);
101 
		}
102 
 
103 
		// execute search
104 
		doSearch = function() {
105 
			model.clearData();
106 
			model.setRowCount(0);
107 
			grid.render();
108 
			grid.resize();
109 
			model.requestRows();
110 
		}
111 
 
112 
		keypress = function(e) {
113 
			if (e.keyCode == dojo.keys.ENTER)
114 
				doSearch();
115 
		}
116 
		dojo.addOnLoad(function() {
117 
			dojo.connect(dojo.byId("searchInput"), "keypress", keypress);
118 
			doSearch();
119 
		});
120 
 
121 
	</script>
122 
</head>
123 
<body>
124 
<div style="font-weight: bold; padding-bottom: 0.25em;">dojox.Grid - Image Search Test</div>
125 
<input id="searchInput" type="text" value="apple">&nbsp;&nbsp;
126 
<button onclick="doSearch()">Search</button><br>
127 
<br>
128 
<div jsId="grid" class="grid" structure="imageLayout" dojoType="dojox.ImageGrid" model="model"></div>
129 
<br>
130 
<div id="info">
131 
	<div id="rowCount" style="float: left"></div>
132 
	<div style="float: right">
133 
		<div id="sendInfo" style="text-align: right"></div>
134 
		<div id="receiveInfo" style="text-align: right"></div>
135 
	</div>
136 
</div>
137 
<br /><br />
138 
<p>Note: requires PHP for proxy.</p>
139 
</body>
140 
</html>