The Grid and Events
It looks easy enough. You click a grid row, the row highlights, and you extract the search term from the list. But where do you start Is the grid a table Do the cells have IDs Luckily, you don't have to piece together the cigar name by screen-scraping. Remember that grids have a model. The model has all the unprocessed data in it. If you could just get the clicked row and map it to an item in the model, you could easily get the value you need. Fortunately, the Grid widget provides hooks for you...
Reviews with dojoxhrGet
Justa has a great opportunity. The magazine Cigars Unlimited now offers its world-renowned cigar reviews via a web service. Justa pays a small fee each time the service is called, but it will make up that money easily by selling more cigars. The company wants an icon added to the grid, which the user will click to fire the request and put the reviews in a list. It would be nice to connect Dojo and JavaScript directly to the Cigars Unlimited web service. But there are two issues Cigars...
The Browse Application
So much for the framework. Let's spec out an application. We're going to build an application that retrieves and displays WSOs as provided by some service. We'll name the application OBE, which stands for object browser and editor. As shown in Figure 18.1, on page 478, OBE contains a main menu bar at the top, a status bar at the bottom, and a workspace that occupies all the remaining space available in the browser window. The workspace is further divided by a splitter bar into two panes a...
Dates Numbers and in
In Section 2.5, Improved Form Controls, on page 31, we learned about regular expression validation, which can handle your text validation needs. But numbers, currency, dates, and times need extra care. Valid examples are different depending on the country you're in. In other words, you need to pay attention to internationalization, or i18n which means i and n with 18 letters in between . For example, if you're asked for a date in the DateTextBox, you would be correct typing 1 31 2008 in the...
Theme Structure
OK, suppose you've placed a nice green widget on your page, only to find it displays as blue. Where did the widget gets its blue color And how do you change it To answer those questions, you must know where to - 0 Continents EHB Africa SO Asia amp Q Australia Q Europe O North America i O South America - Q Continents O Africa S Q Asia tfl-Q Australia Eli rope 3 North America 1 O South America J Continents 3 Africa Q Asia C l C Australia ill Europe 0 21 North America H Cj South America Figure...
Tooltips
Tooltips and balloon help have become pervasive user interface elements in web and client-server applications. Dijit tooltips are like the title attribute, but unlike title , you can display large amounts of text with HTML inside. To make them more visible, you can place them in other places relative to the mouse pointer. There are two kinds of tooltips. An anchored tooltip uses the widget class dijit.Tooltip. The anchor means you're tying it to a particular element, and the tooltip is visible...
Dialog and TooltipDialog
A dialog box acts like a web form on a sticky note. By overlaying the view page underneath it, the dialog box can use room for more form controls. Dijit has two kinds of dialog boxes dijit.Dialog is a modal, user-closable dialog box. It must be opened through a JavaScript method call. dijit.TooltipDialog connects to a DropDownButton which we'll look at in detail in Section 15.5, Action Buttons, Toolbars, and Menus, on page 418 . When the user clicks the button, the dialog box appears...
Progress
When long operations happen, the user needs to be informed at the beginning and at regular intervals. At the very least, they need to know there's time for a cup of coffee. But they also need to be reassured the process is continuing and that the browser, server, and network are still working. In the traditional web model, long operations always happen between pages, so the browser's spinning logo tells you things are happening. 1. After and before are more accurate terms since right-to-left...
The Browser Application Framework
A browser application framework A sample application that uses the framework 1. Rich browser application describes the architecture more accurately, but we'll stick with RIA because this moniker is so pervasive. The RIA design and framework sketched in this and the next chapter is opinionated. It assumes a certain view of the world in which it lives. For example, it assumes the user is going to spend a lot of time within the application without navigating away to another web page much like a...
XHR Callbacks
Now, back to the business at hand. We have most of the properties ready for dojo.io.script.get except for the two meatiest ones load and error. These two properties are callbacks functions that run after an asynchronous event completes. What do those functions look like Here's the rest of our dojo.io.script.get call Download Function runs when Yahoo returns with the answer load function searchResult Zero out the current list listNode dojo.byId resultUl listNode.innerHTML function result var...
Adding Removing and Modifying Tree Nodes
So to change the Tree, you change the data store, and that means using the dojo.data.Write API. Write contains methods for creating, modifying, removing, and saving items. But instead of calling the Write methods directly, you call them on the Tree model. The Tree model then passes them back to the data store. newItem Hash obj, , Hashparentlnfo dojo.data.Item newItem creates an item in the data store. The properties of obj will become properties in the new item. newItem is data-store-agnostic...
A Stub Data Source
dojo.data has its own terminology, which we will cover completely in Chapter 10, dojo.data, on page 260. But here s enough to build our test wish-list data. A data source is the URL from which the data comes. In our test case, the URL will be very simple services cigar_wish_list.json. When we fill out the stubs, we ll probably send parameters along with it, as in A data store is the corresponding dojo.data object that holds the data. Finally, an item is one data object. An item is like a...