camel-2.8.x/components/camel-web/src/main/webapp/js/dojox/grid/compat/tests/test_yahoo_search.html - camel - Git at Google

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 <html>
 <head>
 	<title>dojox.Grid - Yahoo Search Test</title>
 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta>
 	<style>
 		@import "../../_grid/Grid.css";
 		body {
 			font-size: 0.9em;
 			font-family: Geneva, Arial, Helvetica, sans-serif;
 		}
 		.grid {
 			height: 30em;
 		}

 		#info {
 			width: 700px;
 		}
 	</style>
 	<script type="text/javascript" src="../../../../dojo/dojo.js" djConfig="isDebug:false, parseOnLoad: true"></script>
 	<script type="text/javascript">
 		dojo.require("dojox.grid.Grid");
 		dojo.require("dojo.parser");
 	</script>
 	<script type="text/javascript" src="yahooSearch.js"></script>
 	<script type="text/javascript">
 		webFields = [
 			{ name: 'Title', na: '' },
 			{ name: 'ModificationDate', na: ''},
 			{ name: 'Summary', na: '&nbsp;' },
 			{ name: 'Url', na: '' },
 			{ name: 'MimeType', na: '&nbsp;'},
 			{ name: 'DisplayUrl', na: '&nbsp;'}
 		];

 		imageFields = [
 			{ name: 'Title', na: '' },
 			{ name: 'Thumbnail', na: ''},
 			{ name: 'Summary', na: '' },
 			{ name: 'Url', na: '' },
 			{ name: 'FileSize', na: ''},
 			{ name: 'Height', na: ''},
 			{ name: 'Width', na: ''}
 		];

 		var model = new dojox.grid.data.yahooSearch(imageFields, null, "searchInput");
 		model.observer(this);
 		// report some model send/receive status
 		model.onSend = function(inParams) {
 			dojo.byId('sendInfo').innerHTML = dojo.string.substitute('Request rows ${0} to ${1}.&nbsp&nbsp;', [inParams.start, inParams.start + inParams.results -1] );
 		}
 		model.onReceive = function(inData) {
 			dojo.byId('receiveInfo').innerHTML = dojo.string.substitute('Receive rows ${0} to ${1}.&nbsp&nbsp;', [inData.firstResultPosition, inData.firstResultPosition + inData.totalResultsReturned-1]);
 		}


 		var webLayout = [
 			{ type: 'dojox.GridRowView', width: '20px' },
 			{ noscroll: true,
 				cells: [
 					[ { name: 'Row', width: 3, styles: 'text-align: center;', get: function(inRowIndex) { return inRowIndex + 1 } }]
 				]
 			},
 			{ cells: [
 					[	{ name: 'Site', width: 30, field: 3, extraField: 0, formatter: formatLink }, { name: 'Date', width: 10, field: 1, formatter: formatDate} ],
 					[	{ 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;'} ],
 					[ { name: 'Summary',  width: 40, colSpan: 2, field: 2 } ]
 			]}
 		];

 		// remove the height from the header image cell / row cells have a default height so there's less adjustment when thumb comes in.
 		beforeImageRow = function(inRowIndex, inSubRow) {
 			inSubRow[0][0].cellStyles = (inRowIndex == -1 ? '' : 'height: 100px;');
 			inSubRow[1][0].cellStyles = (inRowIndex == -1 ? '' : 'vertical-align: top; height: 75px;');
 		}

 		var imageLayout = [
 			{ type: 'dojox.GridRowView', width: '20px' },
 			{ noscroll: true,
 				cells: [
 					[ { name: 'Row', width: 3, styles: 'text-align: center;', get: function(inRowIndex) { return inRowIndex + 1 } }]
 				]
 			},
 			{ onBeforeRow: beforeImageRow,
 				cells: [
 					[	{ name: 'Image', cellStyles: "height: 100px;", styles: "text-align: center;", width: 13, rowSpan: 2, field: 3, extraField: 1, formatter: formatImage },
 						{ name: 'Title', cellStyles: "height: 10px;", width: 14, field: 3, extraField: 0, formatter: formatLink },
 						{ name: 'Size', width: 8, field: 4, styles: "font-style: italic; text-align: center;" },
 						{ name: 'Dimensions', width: 8, field: 6, extraField: 5, styles: "text-align: center;", formatter: formatDimensions }
 					],
 					[ { name: 'Summary',  cellStyles: "vertical-align: top; height: 75px;", colSpan: 3, field: 2 } ]
 			]}
 		];

 		// execute search
 		doSearch = function() {
 			var web = dojo.byId('webRb').checked;
 			model.setRowCount(0);
 			model.clear();
 			model.fields.set(web ? webFields : imageFields);
 			model.url = 'http://search.yahooapis.com/' + (web ? 'WebSearchService/V1/webSearch' : 'ImageSearchService/V1/imageSearch');
 			grid.scrollToRow(0);
 			grid.setStructure(web ? webLayout : imageLayout);
 			model.requestRows();
 		}

 		// do search on enter...
 		keypress = function(e) {
 			if (e.keyCode == dojo.keys.ENTER)
 				doSearch();
 		}

 		dojo.addOnLoad(function() {
 			dojo.byId('webRb').checked = "checked";
 			dojo.connect(dojo.byId("searchInput"), "keypress", keypress);
 			doSearch();
 		});

 	</script>
 </head>
 <body>
 <div style="font-weight: bold; padding-bottom: 0.25em;">dojox.Grid - Yahoo Search Test</div>
 <div style="padding-bottom: 3px;">
 	<label><input id="webRb" type="radio" name="searchType" checked>Web</label>&nbsp;&nbsp;
 	<label><input id="imageRb" type="radio" name="searchType">Images</label>
 </div>
 <input id="searchInput" type="text" value="apple">&nbsp;&nbsp;
 <button onclick="doSearch()">Search</button><br><br>
 <div jsId="grid" class="grid" autoWidth="true" structure="webLayout" dojoType="dojox.Grid" model="model" elasticView="1"></div>
 <br>
 <div id="info">
 	<div id="rowCount" style="float: left"></div>
 	<div style="float: right">
 		<div id="sendInfo" style="text-align: right"></div>
 		<div id="receiveInfo" style="text-align: right"></div>
 	</div>
 </div>
 <br /><br />
 <p>Note: requires PHP for proxy.</p>
 </body>
 </html>
	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
	<html>
	<head>
	<title>dojox.Grid - Yahoo Search Test</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta>
	<style>
	@import "../../_grid/Grid.css";
	body {
	font-size: 0.9em;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	}
	.grid {
	height: 30em;
	}

	#info {
	width: 700px;
	}
	</style>
	<script type="text/javascript" src="../../../../dojo/dojo.js" djConfig="isDebug:false, parseOnLoad: true"></script>
	<script type="text/javascript">
	dojo.require("dojox.grid.Grid");
	dojo.require("dojo.parser");
	</script>
	<script type="text/javascript" src="yahooSearch.js"></script>
	<script type="text/javascript">
	webFields = [
	{ name: 'Title', na: '' },
	{ name: 'ModificationDate', na: ''},
	{ name: 'Summary', na: ' ' },
	{ name: 'Url', na: '' },
	{ name: 'MimeType', na: ' '},
	{ name: 'DisplayUrl', na: ' '}
	];

	imageFields = [
	{ name: 'Title', na: '' },
	{ name: 'Thumbnail', na: ''},
	{ name: 'Summary', na: '' },
	{ name: 'Url', na: '' },
	{ name: 'FileSize', na: ''},
	{ name: 'Height', na: ''},
	{ name: 'Width', na: ''}
	];

	var model = new dojox.grid.data.yahooSearch(imageFields, null, "searchInput");
	model.observer(this);
	// report some model send/receive status
	model.onSend = function(inParams) {
	dojo.byId('sendInfo').innerHTML = dojo.string.substitute('Request rows ${0} to ${1}.&nbsp ', [inParams.start, inParams.start + inParams.results -1] );
	}
	model.onReceive = function(inData) {
	dojo.byId('receiveInfo').innerHTML = dojo.string.substitute('Receive rows ${0} to ${1}.&nbsp ', [inData.firstResultPosition, inData.firstResultPosition + inData.totalResultsReturned-1]);
	}


	var webLayout = [
	{ type: 'dojox.GridRowView', width: '20px' },
	{ noscroll: true,
	cells: [
	[ { name: 'Row', width: 3, styles: 'text-align: center;', get: function(inRowIndex) { return inRowIndex + 1 } }]
	]
	},
	{ cells: [
	[ { name: 'Site', width: 30, field: 3, extraField: 0, formatter: formatLink }, { name: 'Date', width: 10, field: 1, formatter: formatDate} ],
	[ { 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;'} ],
	[ { name: 'Summary', width: 40, colSpan: 2, field: 2 } ]
	]}
	];

	// remove the height from the header image cell / row cells have a default height so there's less adjustment when thumb comes in.
	beforeImageRow = function(inRowIndex, inSubRow) {
	inSubRow[0][0].cellStyles = (inRowIndex == -1 ? '' : 'height: 100px;');
	inSubRow[1][0].cellStyles = (inRowIndex == -1 ? '' : 'vertical-align: top; height: 75px;');
	}

	var imageLayout = [
	{ type: 'dojox.GridRowView', width: '20px' },
	{ noscroll: true,
	cells: [
	[ { name: 'Row', width: 3, styles: 'text-align: center;', get: function(inRowIndex) { return inRowIndex + 1 } }]
	]
	},
	{ onBeforeRow: beforeImageRow,
	cells: [
	[ { name: 'Image', cellStyles: "height: 100px;", styles: "text-align: center;", width: 13, rowSpan: 2, field: 3, extraField: 1, formatter: formatImage },
	{ name: 'Title', cellStyles: "height: 10px;", width: 14, field: 3, extraField: 0, formatter: formatLink },
	{ name: 'Size', width: 8, field: 4, styles: "font-style: italic; text-align: center;" },
	{ name: 'Dimensions', width: 8, field: 6, extraField: 5, styles: "text-align: center;", formatter: formatDimensions }
	],
	[ { name: 'Summary', cellStyles: "vertical-align: top; height: 75px;", colSpan: 3, field: 2 } ]
	]}
	];

	// execute search
	doSearch = function() {
	var web = dojo.byId('webRb').checked;
	model.setRowCount(0);
	model.clear();
	model.fields.set(web ? webFields : imageFields);
	model.url = 'http://search.yahooapis.com/' + (web ? 'WebSearchService/V1/webSearch' : 'ImageSearchService/V1/imageSearch');
	grid.scrollToRow(0);
	grid.setStructure(web ? webLayout : imageLayout);
	model.requestRows();
	}

	// do search on enter...
	keypress = function(e) {
	if (e.keyCode == dojo.keys.ENTER)
	doSearch();
	}

	dojo.addOnLoad(function() {
	dojo.byId('webRb').checked = "checked";
	dojo.connect(dojo.byId("searchInput"), "keypress", keypress);
	doSearch();
	});

	</script>
	</head>
	<body>
	<div style="font-weight: bold; padding-bottom: 0.25em;">dojox.Grid - Yahoo Search Test</div>
	<div style="padding-bottom: 3px;">
	<label><input id="webRb" type="radio" name="searchType" checked>Web</label>
	<label><input id="imageRb" type="radio" name="searchType">Images</label>
	</div>
	<input id="searchInput" type="text" value="apple">
	<button onclick="doSearch()">Search</button><br><br>
	<div jsId="grid" class="grid" autoWidth="true" structure="webLayout" dojoType="dojox.Grid" model="model" elasticView="1"></div>
	<br>
	<div id="info">
	<div id="rowCount" style="float: left"></div>
	<div style="float: right">
	<div id="sendInfo" style="text-align: right"></div>
	<div id="receiveInfo" style="text-align: right"></div>
	</div>
	</div>
	<br /><br />
	<p>Note: requires PHP for proxy.</p>
	</body>
	</html>