 | |  | |  One of the core parts of Sencha Touch is the data package. The data package enables applications to persist data through the built in Model, Store and Proxy classes. Most applications will use one or more of these classes, often tied in with the many Store-backed visual components included in Sencha Touch. The root of the data package is Ext.data.Model. Models represent types of data in your application - Users, Products, Sales - anything. Let's imagine we're creating an application to manage products in an ecommerce system - here's how we might set up the Product model: Ext.regModel('Product', {
fields: [
{name: 'name', type: 'string'},
{name: 'description', type: 'string'},
{name: 'price', type: 'float'},
{name: 'image_url', type: 'string'},
{name: 'in_stock', type: 'boolean'}
]
});
Ext.regModel tells Sencha Touch to create a new Model with the configured fields. We can later reference this model by name to easily configure components to load Product data. In this example our application is an HTML5 frontend for our ecommerce site. We want a page to display our products - here's how we might create one using a DataView: var productsList = new Ext.DataView({
store: new Ext.data.Store({
model: 'Product',
proxy: {
type: 'ajax’,
url : '/products.json',
reader: {
type: 'json',
root: 'products'
}
}
}),
tpl: new Ext.XTemplate(
'',
'  ',
' Buy ',
'
In the example above we created a Store inside a DataView. A Store is a collection of Model instances. Stores load their data through a Proxy class - in this example we set up a simple 'ajax' proxy and instructed it to load its data from the url '/products.json'. We also provided a Reader, which tells the Proxy how to decode the response it gets from the server when loading data. In this case we're expecting the server to return a JSON object, with an array of objects under the 'products' key: {
products: [
{name:' Some Product', price: 9.99, image_url: 'product1.jpg', in_stock: true},
{name:' Another Product', price: 7.50, image_url: 'product2.jpg', in_stock: true},
{name:' A third product', price: 2.35, image_url: 'product3.jpg', in_stock: false},
...
]
}
DataView is a component that knows how to use a Store and render the Model instances to HTML using a template. We set the template above using an Ext.XTemplate - a powerful templating class. Once the Store loads its data the DataView automatically takes each of the loaded records and renders the HTML for it based on the template, giving us a list of rendered products. Now that we have a rendered page of Products, let's take our example a step further and implement a simple Cart. Our Cart is going to be another Store, this time using the session storage proxy to save the user's cart items client-side until they are ready to proceed: var Cart = new Ext.data.Store({
model: 'Product',
proxy: {
type: 'sessionstorage',
id : 'shoppingCart'
}
});
The session storage proxy saves all Model data in the HTML5 sessionStorage object. This means that the products will remain in memory between page refreshes (see our recent Web Storage blog post for more information). The sessionStorage object is shared between all scripts on the same domain so we give the Proxy an id which allows it to store our data in a private namespace. The session storage and local storage proxies don't require readers - all data reading and writing is handled automatically. We can tie a listener to the DataView and add the product to our cart when the user taps the 'Buy' button: productsList.on('itemtap', function(dataview, index, el, e) {
//the itemtap event is fired whenever any part of the product template is tapped
//but we only add to the cart if the Buy button was the target
if (e.getTarget('div.button')) {
var product = dataview.store.getAt(index);
Cart.add(product);
Cart.sync();
}
});
We listen for the itemtap event on the DataView, checking that the button div was tapped. If it was we get the product that user tapped on, add it to the Cart Store and sync the store. Calling sync on the Store saves its contents to session storage so that when we refresh the page the contents of our Cart are preserved. This example shows how to quickly put together simple components backed by the data package. We saw how the Model/Store/Proxy ecosystem fits together and how to use Stores with data-aware components. For an example of greater customisation of data package classes see our Twitter example. |
|
| | | | | |  Get ready for the next wave of web app development! Join the Sencha team and community this November and get up to speed on the latest in web app frameworks and technologies. Three days and three intensive tracks cover everything from Ext JS 4 to HTML5 essentials to developing web apps for touchscreens. We look forward to seeing you there! Take advantage of Early Bird registration and save $400 off the standard conference pass price! $895 until 9/1/2010. Register today » | | Become a fan of Ext JS by 8/4 and you’ll be entered for a chance to win a free ticket to SenchaCon. |
|
|
| | | | | | | Upcoming Events | Tomorrow's WebWHEN: 7/31 WHERE: San Francisco ATTENDING: See us at the conference | UX WeekWHEN: 8/24-27 WHERE: San Francisco EXHIBITING: See us at the Sencha booth | iPhone iPad SummitWHEN: 8/25 WHERE: Online SPEAKING: David Kaneda, Creative Director, Sencha “iPad & Sencha Touch” | node.js KnockOutWHEN: 8/28-29 JUDGING: David Kaneda, Creative Director, Sencha | JS Conference EU - BerlinWHEN: 9/25-26 WHERE: Berlin EXHIBITING: See us at the Sencha booth | Silicon Valley Code CampWHEN: 10/9-10 WHERE: Los Altos, CA | Web 2.0 NYCWHEN: 9/27-30, WHERE: New York City, EXHIBITING: Booth #134 SPEAKING: David Kaneda, Creative Director, Sencha “ How to Develop a Rich, Native-quality User Experience for Mobile Using Web Standards” |
|
| | | | | |  Latest HTML5 Family Activity Since we published our initial roundup of HTML5 family technologies, there's been lots of activity from the various working groups creating the next generation of web technologies. Here I'll pick a few of the more notable events and summarize some of the implications. HTML5 Core Spec Updates Probably the most interesting work done since May is to specify richer functionality for HTML5 video. New proposed features include allowing CSS to properly control video cues, standard CSS bindings and rendering for captions and additional attributes to allow more granular playback control. Several new semantic elements and attributes survived a gauntlet of objections in the last two months. Objections were raised to the "hidden" element attribute, as well as the <aside> and <figure> tags as currently spec'd. The objections were based on the argument that each of these can be happily duplicated with CSS with ARIA. But due to strong support for the new semantic tags by accessibility advocates, all these elements now look likely to survive in the final spec. However, another feature looks likely to be struck from HTML5 — the automated creation of ATOM feeds from an HTML5 page. In discussions, it was felt that this was a relatively trivial task for a feed parser and didn't need to be in the core spec. There were a host of other updates. One of the more interesting: imagemaps were added to the <canvas> element. Device APIs: Contacts One of the most interesting areas for mobile web developers is the Device API working group, which is writing draft specifications for how web apps access restricted content and device capabilities. Fresh off the W3C presses are (rough) drafts for web application access to contacts and to devices like microphones, cameras and camcorders. The Contacts API first draft is a proposal for address book access from a web application. It proposes a new browser object: navigator.service.contacts that offers CRUD and search methods. For example, creating a new contact would be as easy as: navigator.service.contacts.create ({DisplayName: 'Ed' }});
Contacts search provides an asynchronous search method with the ability to specify compound search filters on individual contact attributes. The Contacts API provides for a (perhaps too) granular permissions model. It proposes that the browser ask the user to grant permission on a per method basis, stating the purpose, retention period, security, sharing, location and exceptions for the information access. It also requires the browser to retain permissions settings which can be later revoked by the user, and to dispose of contact information after the application has used it. The spec also provides for a simpler experience for "widget permissions." The HTML Media Capture API is a draft spec that shoe-horns camera/camcorder etc. uploads into the existing <input type="file">, by extending the input tag with more parameters. (This particular spec doesn’t cover continuous video or audio uploads). An input tag that prompts the user to take and upload a photo would look look like this: <input type="file" accept="image/*;capture=camera">
Other Work There were a host of other updates to HTML5 family works in progress. The only other one to call attention to is some work on Web Sockets. Websockets is a new HTML5 family protocol that allows full-duplex communication between client and server on a single TCP connection. Although it’s been implemented in most recent Webkit and Firefox browsers, it still hasn't made it to iOS devices yet. Recent work includes specifying garbage detection and cooker header serialization and how to specify sub-protocols within a WebSockets connection. |
|
| | | | | |  ShowMeTheParts Have you ever needed to find a part for your car? Cycle Consulting, Inc. and Vertical Development, Inc. collaborated to build “ShowMeTheParts” - a browser-based application for use by automotive parts manufacturers, distributors, retailers, or consumers that provides access to automotive parts data. The application design goals were intelligence, ease of use, fast performance, remote configuration, and customizable color, style, or themes. Cycle Consulting, Inc. has expertise in custom software development specializing in database and web application development using leading edge tools, most notably the Ext JS JavaScript framework. Vertical Development, Inc. brought expertise in aggregating automotive parts catalog data and disseminating it using custom database applications. Why We Chose the Ext JS Framework We chose Ext JS because of the overall design, component architecture, and robust handling of data along with the flexible and powerful grid and associated components. Plus, the detail of the Ext JS API documentation and the thorough list of examples made Ext JS the best choice. Basic Functionality and Usage The basic function of ShowMeTheParts is to allow a user to search for one or more automotive parts using specific criteria. The application performs a search in an automotive parts catalog database and returns the results in a grid control.  Search results based on an Application (Year, Make, Model, Product, and Engine) search ShowMeTheParts has several features that make it fast and easy to perform searches and narrow the results: drop down pick lists are based on the user’s selection, lists in a series are automatically expanded, and if the list has only one item it’s selected automatically and focus is transferred to the next list in the series. This intelligent behavior is a result of using Ext JS components and the robust event model. ShowMeTheParts also provides a filter condition which is based on the data that the user retrieved.  Filter menu based on the current search results Users can filter their search results using a new dynamic filter menu that is attached to the grid column header context menu. Users select values for the filter condition from the menu and “Activate”, “Deactivate”, or “Refresh” the filter condition. The filter condition values are retrieved from the search results, so users can easily specify a valid filter condition. Also, the columns in the grid that support filtering are identified with a small magnifying glass icon; clicking on the magnifying glass icon displays the filter menu. To implement this functionality, we extended the Ext JS grid component using the excellent documentation. After finding a part, users can display the detail information, which may include one or more images. Users can navigate the images using the thumbnails and make them larger or smaller. We used the powerful template and data view classes in the Ext JS framework to build this feature.  Part detail dialog with images of the part and detail information about the part. Configuration and Custom Branding We wanted the flexibility to change the configuration and deployment of ShowMeTheParts without altering the source code or impacting performance. We created configuration settings that are retrieved at runtime to alter features, functionality, and behavior. When the site is deployed, a configuration utility saves settings persistent storage on the Web server. As a result, application functionality and data can be tailored specifically to the user’s needs.  Search results based on an Exhaust (Year, Make, Model, Engine, and Qualifier) search We also wanted to modify colors and styles easily for use of corporate colors or logos. The Ext JS framework allowed us to use a custom theme to match the “branding” for a particular implementation. Also, the recent separation of the style sheets in Ext JS 3.0 into visual and structural elements made it even simpler. Currently, there are nearly 100 custom implementations. Some examples: A more extensive list is available on the Vertical Development, Inc. website. Shopping Cart and Third Party Shopping Cart Integration In the first version of ShowMeTheParts, users had to purchase from the manufacturer’s or retailer’s e-commerce site. Adding shopping cart functionality to ShowMeTheParts quickly became a priority. We extended the configuration settings functionality to enable dynamic configuration of the shopping cart functionality, integrating ShowMeTheParts with external shopping carts resulting in efficient handling of e-commerce transactions.  Internal shopping cart populated with parts to purchase. Google Maps and “Where To Buy” Functionality Some users want to get parts from a local vendor, so we integrated Google Maps making it easy to find location and contact information. In most cases, the list of local vendors will be displayed on the Google Map with their detail information displayed in the grid below. When street address information isn’t available, the vendor information appears only in the grid.  Purchase locations of local retailers who sell the specified part. Final Thoughts ShowMeTheParts usage has grown significantly. Last month, we had over 500,000 unique visits and over 1.5 million database queries. It’s currently free, so give it a try. Without registering, you can search for parts from 1996-2000. For more extensive searches, you can register for a login, so you can access the full functionality. |
|
| |
|