Subversion Repositories Applications.papyrus

Rev

Blame | Last modification | View Log | RSS feed 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
        <title>dojox.Grid - Image 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;
                        width: 51em;
                        border: 1px solid silver;
                }
                
                #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("dojox.grid._data.model");
                dojo.require("dojo.parser");
        </script>
        <script type="text/javascript" src="yahooSearch.js"></script>   
        <script type="text/javascript">
                // model fields
                imageFields = [
                        { name: 'Title', na: '' }, 
                        { name: 'Thumbnail', na: ''},
                        { name: 'Summary', na: '' },
                        { name: 'Url', na: '' },
                        { name: 'FileSize', na: ''},
                        { name: 'Height', na: ''},
                        { name: 'Width', na: ''}
                ];
                // create data model
                var model = new dojox.grid.data.yahooSearch(imageFields, null, "searchInput");
                model.url = 'http://search.yahooapis.com/ImageSearchService/V1/imageSearch';
                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]);
                }


                // Define grid structure
                // 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, inSubRows) {
                        inSubRows[0].hidden = (inRowIndex == -1);
                }
                
                var imageLayout = [ 
                        { onBeforeRow: beforeImageRow,
                                cells: [
                                        [       { name: 'Image', cellStyles: "height: 100px;", styles: "text-align: center;", width: 12, field: 3, extraField: 1, formatter: formatImage },
                                                { name: 'Image', cellStyles: "height: 100px;", styles: "text-align: center;", width: 12, field: 3, extraField: 1, formatter: formatImage },
                                                { name: 'Image', cellStyles: "height: 100px;", styles: "text-align: center;", width: 12, field: 3, extraField: 1, formatter: formatImage },
                                                { name: 'Image', cellStyles: "height: 100px;", styles: "text-align: center;", width: 12, field: 3, extraField: 1, formatter: formatImage }
                                        ]
                        ]}
                ];
                
                // Create grid subclass to function as we need to display images only.
                // adds indirection between model row and grid row.
                dojo.declare("dojox.ImageGrid", dojox.Grid, {
                        postCreate: function() {
                                this.inherited(arguments);
                                this.modelDatumChange = this.modelRowChange;
                                this.colCount = this.layout.cells.length;
                        },
                        getDataRowIndex: function(inCell, inRowIndex) {
                                var r = inCell.index + Math.floor(inRowIndex * this.colCount);
                                return r;
                        },
                        // called in cell context
                        get: function(inRowIndex) {
                                var r = this.grid.getDataRowIndex(this, inRowIndex);
                                return dojox.Grid.prototype.get.call(this, r);
                        },
                        modelAllChange: function(){
                                this.rowCount = Math.ceil(this.model.getRowCount() / this.colCount);
                                this.updateRowCount(this.rowCount);
                        },
                        modelRowChange: function(inData, inRowIndex) {
                                if (inRowIndex % this.colCount == this.colCount - 1 || inRowIndex == this.model.count - 1)
                                        this.updateRow(Math.floor(inRowIndex / this.colCount));
                        }
                });
                
                getCellData = function(inCell, inRowIndex, inField) {
                        var m = inCell.grid.model, r = inCell.grid.getDataRowIndex(inCell, inRowIndex);
                        return m.getDatum(r, inField);
                }
                
                // execute search
                doSearch = function() {
                        model.clearData();
                        model.setRowCount(0);
                        grid.render();
                        grid.resize();
                        model.requestRows();
                }
                
                keypress = function(e) {
                        if (e.keyCode == dojo.keys.ENTER)
                                doSearch();
                }
                dojo.addOnLoad(function() {
                        dojo.connect(dojo.byId("searchInput"), "keypress", keypress);
                        doSearch();
                });
                
        </script>
</head>
<body>
<div style="font-weight: bold; padding-bottom: 0.25em;">dojox.Grid - Image Search Test</div>
<input id="searchInput" type="text" value="apple">&nbsp;&nbsp;
<button onclick="doSearch()">Search</button><br>
<br>
<div jsId="grid" class="grid" structure="imageLayout" dojoType="dojox.ImageGrid" model="model"></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>