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 FlickrRestStore</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.FlickrRestStore");
                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: {
                                          apikey: "8c6803164dbc395fb7131c9d54843627"  
                                        },
                                        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(setIdWidget){
                                        var setId = setIdWidget.getValue();
                                        if(setId != ""){
                                          request.query.setId = setId;
                                        }
                                }
                                
                                if(fullTextWidget){
                                        var fullText = fullTextWidget.getValue();
                                        if(fullText != ""){
                                          request.query.text = fullText;
                                        }
                                }
                                
                                if(sortTypeWidget && sortDirWidget){
                                        var sortType = sortTypeWidget.getValue();
                                        var sortDirection = sortDirWidget.getValue();
                                        
                                        if(sortType != "" && sortDirection != ""){
                                                request.query.sort = [
                                                  {
                                                        attribute: sortType,
                                                        descending: (sortDirection.toLowerCase() == "descending")
                                                  }                                       
                                                ];
                                        }
                                }
                                
                                if(countWidget){
                                        request.count = countWidget.getValue();
                                }
                                if(pageWidget){
                                        request.start = request.count * (pageWidget.getValue() -1);
                                }

                                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:  FlickrRestStore 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 FlickrRestStore 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>
                                <td></td>
                                <td></td>
                        </tr>
                        <tr>
                                <td>
                                        <b>User ID:</b>
                                </td>
                                <td>
                                        <div dojoType="dijit.form.TextBox" size="50" id="userid" jsId="idWidget" value="44153025@N00"></div>
                                </td>
                                <td>
                                        <b>Set ID</b>
                                </td>
                                <td>
                                          <div dojoType="dijit.form.TextBox" size="50" id="setid" jsId="setIdWidget"></div>
                                </td>
                        </tr>
                        <tr>
                                <td>
                                        <b>Tags:</b>
                                </td>
                                <td>
                                        <div dojoType="dijit.form.TextBox" size="50" id="tags" jsId="tagsWidget" value="rollingstones,kinsale"></div>
                                </td>
                                <td>
                                        <b>Full Text</b>
                                </td>
                                <td>
                                          <div dojoType="dijit.form.TextBox" size="50" id="fulltext" jsId="fullTextWidget"></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>
                                <td>
                                        <b>Sort</b>
                                </td>
                                <td>
                                          <select dojoType="dijit.form.ComboBox" size="15" id="sorttype" jsId="sortTypeWidget">
                                                <option>date-posted</option>
                                                <option>date-taken</option>
                                                <option>interestingness</option>
                                          </select>
                                           <select dojoType="dijit.form.ComboBox" size="15" id="sortdirection" jsId="sortDirWidget">
                                                <option>ascending</option>
                                                <option>descending</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>
                                <td>
                                        <b>Page:</b>
                                </td>
                                <td>
                                        <div   
                                                id="page"
                                                jsId="pageWidget"
                                                dojoType="dijit.form.NumberSpinner"
                                                value="1"
                                                constraints="{min:1,max:5,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.FlickrRestStore" jsId="flickrStore" label="title"></div>
        <div dojoType="dojox.data.demos.widgets.FlickrViewList" id="flickrViews" jsId="flickrViewsWidget"></div>

</body>
</html>