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 - Yahoo 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 
		}
15 
 
16 
		#info {
17 
			width: 700px;
18 
		}
19 
	</style>
20 
	<script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug:false, parseOnLoad: true"></script>
21 
	<script type="text/javascript">
22 
		dojo.require("dojox.grid.Grid");
23 
		dojo.require("dojox.grid._data.model");
24 
		dojo.require("dojo.parser");
25 
	</script>
26 
	<script type="text/javascript" src="yahooSearch.js"></script>
27 
	<script type="text/javascript">
28 
		webFields = [
29 
			{ name: 'Title', na: '' },
30 
			{ name: 'ModificationDate', na: ''},
31 
			{ name: 'Summary', na: '&nbsp;' },
32 
			{ name: 'Url', na: '' },
33 
			{ name: 'MimeType', na: '&nbsp;'},
34 
			{ name: 'DisplayUrl', na: '&nbsp;'}
35 
		];
36 
 
37 
		imageFields = [
38 
			{ name: 'Title', na: '' },
39 
			{ name: 'Thumbnail', na: ''},
40 
			{ name: 'Summary', na: '' },
41 
			{ name: 'Url', na: '' },
42 
			{ name: 'FileSize', na: ''},
43 
			{ name: 'Height', na: ''},
44 
			{ name: 'Width', na: ''}
45 
		];
46 
 
47 
		var model = new dojox.grid.data.yahooSearch(imageFields, null, "searchInput");
48 
		model.observer(this);
49 
		// report some model send/receive status
50 
		model.onSend = function(inParams) {
51 
			dojo.byId('sendInfo').innerHTML = dojo.string.substitute('Request rows ${0} to ${1}.&nbsp&nbsp;', [inParams.start, inParams.start + inParams.results -1] );
52 
		}
53 
		model.onReceive = function(inData) {
54 
			dojo.byId('receiveInfo').innerHTML = dojo.string.substitute('Receive rows ${0} to ${1}.&nbsp&nbsp;', [inData.firstResultPosition, inData.firstResultPosition + inData.totalResultsReturned-1]);
55 
		}
56 
 
57 
 
58 
		var webLayout = [
59 
			{ type: 'dojox.GridRowView', width: '20px' },
60 
			{ noscroll: true,
61 
				cells: [
62 
					[ { name: 'Row', width: 3, styles: 'text-align: center;', get: function(inRowIndex) { return inRowIndex + 1 } }]
63 
				]
64 
			},
65 
			{ cells: [
66 
					[	{ name: 'Site', width: 30, field: 3, extraField: 0, formatter: formatLink }, { name: 'Date', width: 10, field: 1, formatter: formatDate} ],
67 
					[	{ name: 'Display Url', width: 30, field: 5, styles: 'color: green; size: small;' }, { name: 'Type', width: 10, field: 4, styles: ' font-style: italic; color: gray; size: small;'} ],
68 
					[ { name: 'Summary',  width: 40, colSpan: 2, field: 2 } ]
69 
			]}
70 
		];
71 
 
72 
		// remove the height from the header image cell / row cells have a default height so there's less adjustment when thumb comes in.
73 
		beforeImageRow = function(inRowIndex, inSubRow) {
74 
			inSubRow[0][0].cellStyles = (inRowIndex == -1 ? '' : 'height: 100px;');
75 
			inSubRow[1][0].cellStyles = (inRowIndex == -1 ? '' : 'vertical-align: top; height: 75px;');
76 
		}
77 
 
78 
		var imageLayout = [
79 
			{ type: 'dojox.GridRowView', width: '20px' },
80 
			{ noscroll: true,
81 
				cells: [
82 
					[ { name: 'Row', width: 3, styles: 'text-align: center;', get: function(inRowIndex) { return inRowIndex + 1 } }]
83 
				]
84 
			},
85 
			{ onBeforeRow: beforeImageRow,
86 
				cells: [
87 
					[	{ name: 'Image', cellStyles: "height: 100px;", styles: "text-align: center;", width: 13, rowSpan: 2, field: 3, extraField: 1, formatter: formatImage },
88 
						{ name: 'Title', cellStyles: "height: 10px;", width: 14, field: 3, extraField: 0, formatter: formatLink },
89 
						{ name: 'Size', width: 8, field: 4, styles: "font-style: italic; text-align: center;" },
90 
						{ name: 'Dimensions', width: 8, field: 6, extraField: 5, styles: "text-align: center;", formatter: formatDimensions }
91 
					],
92 
					[ { name: 'Summary',  cellStyles: "vertical-align: top; height: 75px;", colSpan: 3, field: 2 } ]
93 
			]}
94 
		];
95 
 
96 
		// execute search
97 
		doSearch = function() {
98 
			var web = dojo.byId('webRb').checked;
99 
			model.setRowCount(0);
100 
			model.clear();
101 
			model.fields.set(web ? webFields : imageFields);
102 
			model.url = 'http://search.yahooapis.com/' + (web ? 'WebSearchService/V1/webSearch' : 'ImageSearchService/V1/imageSearch');
103 
			grid.scrollToRow(0);
104 
			grid.setStructure(web ? webLayout : imageLayout);
105 
			model.requestRows();
106 
		}
107 
 
108 
		// do search on enter...
109 
		keypress = function(e) {
110 
			if (e.keyCode == dojo.keys.ENTER)
111 
				doSearch();
112 
		}
113 
 
114 
		dojo.addOnLoad(function() {
115 
			dojo.byId('webRb').checked = "checked";
116 
			dojo.connect(dojo.byId("searchInput"), "keypress", keypress);
117 
			doSearch();
118 
		});
119 
 
120 
	</script>
121 
</head>
122 
<body>
123 
<div style="font-weight: bold; padding-bottom: 0.25em;">dojox.Grid - Yahoo Search Test</div>
124 
<div style="padding-bottom: 3px;">
125 
	<label><input id="webRb" type="radio" name="searchType" checked>Web</label>&nbsp;&nbsp;
126 
	<label><input id="imageRb" type="radio" name="searchType">Images</label>
127 
</div>
128 
<input id="searchInput" type="text" value="apple">&nbsp;&nbsp;
129 
<button onclick="doSearch()">Search</button><br><br>
130 
<div jsId="grid" class="grid" autoWidth="true" structure="webLayout" dojoType="dojox.Grid" model="model" elasticView="1"></div>
131 
<br>
132 
<div id="info">
133 
	<div id="rowCount" style="float: left"></div>
134 
	<div style="float: right">
135 
		<div id="sendInfo" style="text-align: right"></div>
136 
		<div id="receiveInfo" style="text-align: right"></div>
137 
	</div>
138 
</div>
139 
<br /><br />
140 
<p>Note: requires PHP for proxy.</p>
141 
</body>
142 
</html>