Subversion Repositories Applications.papyrus

Rev

Blame | Last modification | View Log | RSS feed 

<!--
  This file is a demo of the FlickrStore, a simple wrapper to the public feed service
  of Flickr.  This just does very basic queries against Flickr and loads the results
  into a list viewing widget.
-->
<html>
<head>
        <title>Demo of FlickrStore</title>
        <style type="text/css">

                @import "../../../dijit/themes/tundra/tundra.css";
                @import "../../../dojo/resources/dojo.css";
                @import "../../../dijit/tests/css/dijitTests.css";
                @import "./flickrDemo.css";
        </style>

        <script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug: true, parseOnLoad: true"></script>
        <script type="text/javascript">
                dojo.require("dojo.parser");
                dojo.require("dijit.form.TextBox");
                dojo.require("dijit.form.Button");
                dojo.require("dijit.form.ComboBox");
                dojo.require("dijit.form.NumberSpinner");
                dojo.require("dijit.Tree");
                dojo.require("dojox.data.FlickrStore");
                dojo.require("dojox.data.demos.widgets.FlickrViewList");
                dojo.require("dojox.data.demos.widgets.FlickrView");

                function init(){
                        var fViewWidgets = [];

                        //Set up an onComplete handler for flickrData
                        function onComplete(items, request){
                                flickrViewsWidget.clearList();
                                if(items.length > 0){
                                        for(var i = 0; i < items.length; i++){
                                                var flickrData = {
                                                        title: flickrStore.getValue(items[i],"title"),
                                                        author: flickrStore.getValue(items[i],"author"),
                                                        iconUrl: flickrStore.getValue(items[i],"imageUrlSmall"),
                                                        imageUrl: flickrStore.getValue(items[i],"imageUrl")
                                                }
                                                flickrViewsWidget.addView(flickrData);
                                        }
                                }
                                statusWidget.setValue("PROCESSING COMPLETE.");

                        }
                        //What to do if a search fails...
                        function onError(error, request){
                                flickrViewsWidget.clearList();
                                statusWidget.setValue("PROCESSING ERROR.");
                        }

                        //Function to invoke the search of the FlickrStore
                        function invokeSearch(){
                                var request = {
                                        query: {},
                                        onComplete: onComplete,
                                        onError: onError
                                };

                                if(idWidget){
                                        var userid = idWidget.getValue();
                                        if(userid && userid !== ""){
                                                request.query.userid = userid;
                                        }
                                }
                                if(tagsWidget){
                                        var tags = tagsWidget.getValue();
                                        if(tags && tags !== ""){
                                                var tagsArray = tags.split(" ");
                                                tags = "";
                                                for(var i = 0; i < tagsArray.length; i++){
                                                        tags = tags + tagsArray[i];
                                                        if(i < (tagsArray.length - 1)){
                                                                tags += ","
                                                        }
                                                }
                                                request.query.tags = tags;
                                        }
                                }
                                if(tagmodeWidget){
                                        var tagmode = tagmodeWidget.getValue();
                                        if(tagmode !== ""){
                                                request.query.tagmode = tagmode;
                                        }
                                }

                                if(countWidget){
                                        request.count = countWidget.getValue();
                                }

                                if(statusWidget){
                                        statusWidget.setValue("PROCESSING REQUEST");
                                }

                                flickrStore.fetch(request);
                        }

                        //Lastly, link up the search event.
                        var button = dijit.byId("searchButton");
                        dojo.connect(button, "onClick", invokeSearch);
                }
                dojo.addOnLoad(init);
        </script>
</head>

<body class="tundra">
        <h1>
                DEMO:  FlickrStore Search
        </h1>
        <hr>
        <h3>
                Description:
        </h3>
        <p>
                This simple demo shows how services, such as Flickr, can be wrapped by the datastore API.  In this demo, you can search public Flickr images through a simple FlickrStore by specifying a series of tags (separated by spaces) to search on.  The results will be displayed below the search box.
        </p>
        <p>
                For fun, search on the 3dny tag!
        </p>

        <blockquote>

        <!--
                The store instance used by this demo.
        -->
        <table>
                <tbody>
                        <tr>
                                <td>
                                        <b>Status:</b>
                                </td>
                                <td>
                                        <div dojoType="dijit.form.TextBox" size="50" id="status" jsId="statusWidget" disabled="true"></div>
                                </td>
                        </tr>
                        <tr>
                                <td>
                                        <b>ID:</b>
                                </td>
                                <td>
                                        <div dojoType="dijit.form.TextBox" size="50" id="userid" jsId="idWidget"></div>
                                </td>
                        </tr>
                        <tr>
                                <td>
                                        <b>Tags:</b>
                                </td>
                                <td>
                                        <div dojoType="dijit.form.TextBox" size="50" id="tags" jsId="tagsWidget" value="3dny"></div>
                                </td>
                        </tr>
                        <tr>
                                <td>
                                        <b>Tagmode:</b>
                                </td>
                                <td>
                                        <select id="tagmode"
                                                        jsId="tagmodeWidget"
                                                        dojoType="dijit.form.ComboBox"
                                                        autocomplete="false"
                                                        value="any"
                                        >
                                                <option>any</option>
                                                <option>all</option>
                                        </select>
                                </td>
                        </tr>
                        <tr>
                                <td>
                                        <b>Number of Pictures:</b>
                                </td>
                                <td>
                                        <div   
                                                id="count"
                                                jsId="countWidget"
                                                dojoType="dijit.form.NumberSpinner"
                                                value="20"
                                                constraints="{min:1,max:20,places:0}" 
                                        ></div>
                                </td>
                        </tr>
                        <tr>
                                <td>
                                </td>
                                <td>
                                        <div dojoType="dijit.form.Button" label="Search" id="searchButton" jsId="searchButtonWidget"></div>
                                </td>
                        </tr>
                </tbody>
        </table>
        <hr/>
        <div dojoType="dojox.data.FlickrStore" jsId="flickrStore" label="title"></div>
        <div dojoType="dojox.data.demos.widgets.FlickrViewList" id="flickrViews" jsId="flickrViewsWidget"></div>

</body>
</html>