source: Dev/trunk/src/client/dojox/data/demos/demo_FlickrStore.html

Last change on this file was 483, checked in by hendrikvanantwerpen, 11 years ago

Added Dojo 1.9.3 release.
File size: 3.9 KB
Line 
1<html>
2<head>
3        <!--
4                This file is a demo of the FlickrStore, a simple wrapper to the public
5                feed service of Flickr. This just does very basic queries against
6                Flickr and loads the results into a list viewing widget.
7        -->
8        <title>Demo of FlickrStore</title>
9        <style type="text/css">
10                @import "../../../dijit/themes/tundra/tundra.css";
11                @import "../../../dojo/resources/dojo.css";
12                @import "../../../dijit/tests/css/dijitTests.css";
13        </style>
14
15        <script type="text/javascript" src="../../../dojo/dojo.js"
16                djConfig="isDebug: true, parseOnLoad: true"></script>
17        <script type="text/javascript">
18                dojo.require("dojo.parser");
19                dojo.require("dijit.form.TextBox");
20                dojo.require("dijit.form.Button");
21                dojo.require("dijit.form.ComboBox");
22                dojo.require("dijit.form.NumberSpinner");
23                dojo.require("dojox.data.FlickrStore");
24                dojo.require("dojox.data.demos.widgets.FlickrViewList");
25
26                function init(){
27                        //Function to invoke the search of the FlickrStore
28                        var invokeSearch = function(){
29                                var request = { query: {} };
30                               
31                                if(idWidget){
32                                        var id = idWidget.getValue() || "";
33                                        if(id && id.length){
34                                                request.query.userid = id;
35                                        }
36                                }
37               
38                                if(tagsWidget){
39                                        request.query.tags = (tagsWidget.getValue()||"").split(" ").join(",");
40                                }
41
42                               
43                                if(tagmodeWidget){
44                                        request.query.tagmode = tagmodeWidget.getValue()||"";
45                                }
46
47                                if(countWidget){
48                                        request.count = countWidget.getValue();
49                                }
50                                flickrViewsWidget.fetch(request);
51                        }
52                       
53                        dojo.connect(flickrViewsWidget, "fetch", function() {
54                                statusWidget.setValue("PROCESSING REQUEST");
55                        });
56                       
57                        dojo.connect(flickrViewsWidget, "onComplete", function() {
58                statusWidget.setValue("PROCESSING COMPLETE.");
59                        });
60
61                        dojo.connect(flickrViewsWidget, "onError", function() {
62                statusWidget.setValue("ERROR!");
63                        });
64
65                        //Lastly, link up the search event.
66                        var button = dijit.byId("searchButton");
67                        dojo.connect(button, "onClick", invokeSearch);
68                }
69                dojo.addOnLoad(init);
70                dojo.addOnLoad(function(){ dijit.byId("searchButton").onClick(); });
71        </script>
72</head>
73
74<body class="tundra">
75        <h1>
76                DEMO:  FlickrStore Search
77        </h1>
78        <p>
79                This simple demo shows how services, such as Flickr, can be wrapped by
80                the datastore API. In this demo, you can search public Flickr images
81                through a simple FlickrStore by specifying a series of tags (separated
82                by spaces) to search on.  The results will be displayed below the
83                search box.
84        </p>
85        <table>
86                <tbody>
87                        <tr>
88                                <td>
89                                        <b>Status:</b>
90                                </td>
91                                <td>
92                                        <div dojoType="dijit.form.TextBox" size="50" id="status" jsId="statusWidget" disabled="true"></div>
93                                </td>
94                        </tr>
95                        <tr>
96                                <td>
97                                        <b>ID:</b>
98                                </td>
99                                <td>
100                                        <div dojoType="dijit.form.TextBox" size="50" id="userid" jsId="idWidget"></div>
101                                </td>
102                        </tr>
103                        <tr>
104                                <td>
105                                        <b>Tags:</b>
106                                </td>
107                                <td>
108                                        <div dojoType="dijit.form.TextBox" size="50" id="tags" jsId="tagsWidget" value="nature"></div>
109                                </td>
110                        </tr>
111                        <tr>
112                                <td>
113                                        <b>Tagmode:</b>
114                                </td>
115                                <td>
116                                        <select id="tagmode"
117                                                        jsId="tagmodeWidget"
118                                                        dojoType="dijit.form.ComboBox"
119                                                        autocomplete="false"
120                                                        value="any"
121                                        >
122                                                <option>any</option>
123                                                <option>all</option>
124                                        </select>
125                                </td>
126                        </tr>
127                        <tr>
128                                <td>
129                                        <b>Number of Pictures:</b>
130                                </td>
131                                <td>
132                                        <div   
133                                                id="count"
134                                                jsId="countWidget"
135                                                dojoType="dijit.form.NumberSpinner"
136                                                value="20"
137                                                constraints="{min:1,max:20,places:0}"
138                                        ></div>
139                                </td>
140                        </tr>
141                        <tr>
142                                <td>
143                                </td>
144                                <td>
145                                        <div dojoType="dijit.form.Button" label="Search"
146                                                id="searchButton" jsId="searchButtonWidget"></div>
147                                </td>
148                        </tr>
149                </tbody>
150        </table>
151        <!--
152                The store instance used by this demo.
153        -->
154        <div dojoType="dojox.data.FlickrStore" jsId="flickrStore" label="title"></div>
155        <div dojoType="dojox.data.demos.widgets.FlickrViewList"
156                store="flickrStore"
157                id="flickrViews"
158                jsId="flickrViewsWidget"></div>
159
160</body>
161</html>
Note: See TracBrowser for help on using the repository browser.