Tuesday, November 25th, 2008
Category: Adobe
, Ext
Aaron Conran has created a new set of AIR classes, as well as an example called ExtPlayer to show them off.
Ext.air.MusicPlayer
Ext 2.0.2 introduced an Ext.air.Sound class, which is useful for playing small sounds such as beep and chimes. In contrast, Ext.air.MusicPlayer is meant for long running sounds such as music and podcasts which you would never want multiple files playing at the same time. MusicPlayer supports all of the basic operations, stop, pause, play and skipTo along with supporting events. The MusicPlayer enables the developer to add music and podcasts to their AIR-enabled Ext application very quickly.
JAVASCRIPT:
-
-
var mp = new Ext.air.MusicPlayer();
-
mp.adjustVolume(0.5);
-
mp.play(url);
-
Ext.air.Notify
The new notification class allows you to notify your users with toast or growl-like messages from the operating system. This allows you to notify users that something important has occurred even when your application may not be visible. By displaying these notifications at the operating system level it is sure to get the users attention without being lost within a browser tab.
JAVASCRIPT:
-
-
var msg = 'Title: {0}<br />Artist: {1}';
-
var sample = new Ext.air.Notify({
-
msg: String.format(msg, id3info.songName, id3info.artist),
-
icon: '../famfamfam/music.png'
-
});
-
Ext.air.Clipboard
Ext.air.Clipboard allows you to interact with the system’s clipboard. Developers can determine if a particular format has data, set the data and get the data. At this point, this is largely a pass through to an existing class from Adobe air.Clipboard.generalClipboard. There may be enhancements or workarounds which Ext will add in the future including integration with drag and drop.
JAVASCRIPT:
-
-
Ext.air.Clipboard.setData('air:text', 'Sample set on the clipboard');
-
var data = Ext.air.Clipboard.getData('air:text');
-
Ext.air.VideoPanel
xt.air.VideoPanel enables you to embed flash based video while maintaining the same functionality as an Ext.Panel. VideoPanel’s can also take part in Ext layout management. This means that you can nest your Video’s in a border layout, add toolbars, buttons, just as you have become accustomed to. You just need to provide the recorded FLV to playback or provide a camera connected to the PC. You can even watch the video fullscreen in high definittion!
JAVASCRIPT:
-
-
var vp = new Ext.Viewport({
-
layout: 'fit',
-
items: [{
-
id: 'video',
-
xtype: 'videopanel'
-
}]
-
});
-
Ext.getCmp('video').loadVideo('sample.flv');
-
Thursday, November 20th, 2008
Category: Ajax, Cloud, Ext, Yahoo!, jQuery
YUI and Google
Most everyone knows that Google has really stepped up to the plate by helping many JavaScript library projects host their builds on the Google AJAX Libraries API. Apart from providing a central distribution point for these libraries, the bandwidth cost savings alone go a long way in helping frameworks service their users in a sustainable manner.
Google continues it's commitment to helping out by adding the Yahoo UI to the growing list of supported JavaScript libraries.
Thanks to Vadim Spivak at Google and Dion Almaer (now at Mozilla) for helping to make this additional option available to the YUI developer community. We love that Google is supporting web developers in this way — grabbing YUI files from Google’s global infrastructure is a fantastic option to have.
This is great news for YUI developers who now have a choice of linking directly to YUI via yui.yahooapis.com and ajax.googleapis.com. YUI team lead, Eric Miraglia, has a great write-up on the YUI blog about this and goes into detail on how the framework's users can take advantage of this new hosting option.
jQuery and Amazon CloudFront
With nearly 2.5 million requests per day to the jQuery website, the jQuery project team is constantly on the look out for ways to decrease hosting costs while still managing the growing number of requests for the site's resources. Originally leveraging Amazon S3 for many of their static pages, the project has now turned to Amazon's new CloudFront CDN. The change has allowed for jQuery pages to be globally hosted as opposed to being centrally located in Amazon's Seattle-based S3 hosting center.
In tests, John Resig, team lead for the jQuery project, noticed substantial performance gains based on the switch:
I ran a similar test here in Boston and even managed to see a large improvement. I was seeing latency of anywhere from 50-200ms on Amazon S3, but only a latency of 17-19ms with CloudFront.
What does all of this mean? It means that the jQuery site is going to load even faster than it does now. We already receive some excellent hosting from Media Temple but being able to off-load these static files to the fast-loading servers will only make for a better browsing experience.
In less than 24 hours the project had received almost 2.5 million requests for over 50GB of data. The only drawback is an increase in bandwidth costs but still substantially less than that of a traditional hosting plan. The jQuery project makes use of the Google AJAX API as well and recommends it as choice for linking to the jQuery and jQuery UI libraries.
Ext JS and CacheFly
The team at Ext JS has taken an interesting approach to CDN usage by extending their library build manager to allow users to host their own custom build on the CacheFly CDN.
The hosting is free and what makes it unique to something like the Google CDN is that it allows Ext developers a central access point for their own custom builds.
We are pleased to announce that Ext has partnered with CacheFly, a global content network, to provide free CDN hosting for the Ext JS framework. Cachefly’s globally distributed network and aggressive caching accelerate the delivery of web content like JavaScript and CSS, making for an even faster Ext experience.
Monday, November 10th, 2008
Category: Ext
Alex Moore wrote in to highlight a couple of developments in the Ext JS community. First, the Ext JS roadmap has been updated with goals for the 2009-targetted 3.0 release:
# All new lightweight, high-speed core base library
# Flash Charting API
# Ext.Direct - Remoting and data streaming/comet support
# Integrated client-server data binding/marshaling of updates
# ListView component
# Enhanced Button and Toolbar components
# ARIA/Section 508 accessibility improvements
# CSS updates for reset style scoping and easier custom theming
# Update the Ext event registration model
# Ext.Ajax enhancements
Second, Alex provided a link to a preview screencast of a new Ext JS visual developer tool, currently in early development:
Tuesday, November 4th, 2008
Category: Ext, Testing
Darrell Meyer has written a detail article on testing Ext applications, both Ext JS and GXT versions:
Both Ext JS and Ext GWT applications can benefit from Selenium tests. In fact, with few exceptions, the tests created for one product should be interchangeable as both products produce the same DOM structure.
With GXT applications, GWT provides built in JUnit support. This provides a great way to test your application. However, these tests run only in host mode. Being able to test your compiled application in multiple browsers is important as some issues only appear within your compiled application.
In general, you create Selenium tests and then execute them in a variety of ways. This tutorial will demonstrate creating tests with Selenium IDE, a Firefox plugin, and creating tests within Java. Tests will be loaded and executed within the Selenium IDE, and Java JUnit tests will be executed using Selenium Remote Control.
Darrell walks through Selenium IDE and shows creating a test, and then Selenium Remote Control, which runs tests in the various browsers:
Selenium IDE provides a great way to create your tests and execute them in Firefox. Tests can only be run by manually opening Firefox and executing tests. What if you want to run you want to automate your tests and run them in other browsers? This is where Selenium Remote Control comes into play.
From the Selenium website: “Selenium Remote Control (RC) is a test tool that allows you to write automated web application UI tests in any programming language against any HTTP website using any mainstream JavaScript-enabled browser. Selenium RC comes in two parts. 1. A server which automatically launches and kills browsers, and acts as a HTTP proxy for web requests from them. 2. Client libraries for your favorite computer language.”
Monday, October 13th, 2008
Category: Ext
Aaron Conran has developed a nice Ext extension to tie that world to the Google Visualization API:
Working with different API’s can present hurdles as we attempt to massage the same data in two different data structures - one for a grid and another for a pie chart. To address this specific challenge, I developed a short user extension Ext.ux.GVisualizationPanel enabling users to integrate visualizations into Ext JS applications without concern for these issues. The GVisualizationPanel adapts any Ext data Store into the google’s format and enables you to embed any type of visualization into a panel.
He then shows some examples, such as this intensity map:
JAVASCRIPT:
-
-
var countryStore = new Ext.data.SimpleStore({
-
fields: [{
-
name: 'Country',
-
type: 'string'
-
},{
-
-
name: 'pop',
-
type: 'int'
-
},{
-
name: 'area',
-
type: 'int'
-
}],
-
data: [
-
['CN', 1324, 9640821],
-
['IN', 1134, 3287263],
-
['US', 304, 9629091],
-
['ID', 232, 1904569],
-
['BR', 187, 8514877]
-
]
-
});
-
var intensityMap = new Ext.ux.GVisualizationPanel({
-
id: 'intensityMap',
-
visualizationPkg: 'intensitymap',
-
title: 'Intensity Map Sample',
-
store: countryStore,
-
columns: ['Country',{
-
dataIndex: 'pop',
-
label: 'Population (mil)'
-
},{
-
dataIndex: 'area',
-
label: 'Area (km2)'
-
}]
-
});
-
3.4 rating from 191 votes
Wednesday, September 24th, 2008
Category: Ext, Usability
I am a strong believe in making the keyboard a first class citizen for your applications, including on the Web. Thus, I was interested to read how Ext JS has keyboard handling that ties into the entire system:
Ext.KeyMap
Ext provides several components that support keyboard navigation out of the box such as GridPanel, ComboBox, and TreePanel. To implement custom keyboard handling, developers can use the Ext.KeyMap and Ext.KeyNav classes to attach keyboard bindings to any component or element they wish.
The first set of keys we wanted to handle was all of the Function keys (F1-12). While most browsers reserve some/all of these keys, with some ext-pertise, we are able to override the default function if need be for our application. The application we were working with was completely dynamic and server driven, so we really couldn’t define all of the handlers ahead of time. This led to us dynamically building an array of key handler configuration objects and passing them all through to our new Ext.KeyMap object.
JAVASCRIPT:
-
-
var keys = [];
-
for(var i = 0;i <buttons.length;i++) {
-
var btn = buttons[i];
-
// fkey property contains a string referencing the Ext constants (ie: Ext.EventObject.F1)
-
var fk = eval(button.fkey);
-
btn.handler = this.handleKey.createDelegate(this, [fk]);
-
-
keys.push({
-
key: fk,
-
handler: this.handleKey.createDelegate(this, [fk]),
-
stopEvent: true,
-
scope: this
-
});
-
}
-
Ext.KeyNav
The next set of key handling added was some additions to the grid keyboard navigation. The GridPanel has built in key navigation from the RowSelectionModel that it creates. Check out this grid example and select a row, you can then use the arrow keys to move up/down and even hold shift and press down to select a range of rows. We added a simple way to navigate through a large paged data set by extending GrindPanel. The PagingToolbar provides keyboard handling once you’ve focused within the built-in TextField, but we wanted to allow the users to just hit ‘page down’ or ‘end’ when focus was anywhere within the GridPanel and ensure it functions as expected.
JAVASCRIPT:
-
-
MyGrid = Ext.extend(Ext.grid.GridPanel,{
-
...
-
afterRender : function() {
-
MyGrid.superclass.afterRender.call(this);
-
-
this.nav = new Ext.KeyNav(this.getEl(),{
-
pageDown: this.pagingNav.createDelegate(this,['next']),
-
pageUp: this.pagingNav.createDelegate(this, ['prev']),
-
home: this.pagingNav.createDelegate(this,['first']),
-
end: this.pagingNav.createDelegate(this,['last']),
-
scope: this
-
});
-
},
-
-
pagingNav: function(page) {
-
var pt = this.getBottomToolbar();
-
if (!pt[page].disabled) {
-
pt.onClick(page);
-
}
-
},
-
...
-
});
-
Thursday, September 18th, 2008
Category: Ext, GWT
Darrell Meyer has announced the release of Ext GWT 1.1 which is said to "shortens the feature set gap between Ext JS."
New Features
The Grid component wraps the Ext JS grid, and it includes support for grid plugins which fit into component lifecycles. You can also use a subclass, EditableGrid which.... allows you to edit content on the fly.
Auto complete has been added to the combo boxes a la Google Suggest.
Portal is a custom layout container that uses a multi-column layout on contains Portlets. Each Porlet can be drag and dropped to change order or move to another column. Each Portlet can contain any content and supports icons to expand / collapse, close, etc.
The desktop mimics the behavior of the operating system look at feel. It is now possible to create multi-window applications with support for a task bar and start menu. Windows support normal, maximize, and minimize states. The start menu is a custom menu that allows new menu items. In addition, there is support for a “task” area for adding additional items.
Java Bean Support with BeanModel
The Ext GWT Store and Binder API work with ModelData instances. The primary goal of ModelData is to provide a type of “introspection” as GWT does not allow runtime inspection of Java objects. You can query ModelData for a list of properties it contains, and these properties can be retrieved and set using the parameter name with the get and set methods.
Although this approach works, it forces you to either implement the ModelData interface in your Java Beans or extend the Ext GWT base classes that implement the ModelData interface. What is missing is a way to use your Java Beans as is, without having to extend the Ext GWT base classes or implement an “invasive” interface.
There are also new examples:
- Forum search is an example of a combo box, using a custom XTemplate, and remote data. The data can be paged with built-in support for a paging toolbar.
- Image Chooser shows loading a ListView in a Window. Each item has a linked details view, and the ListView supports custom sorting and filtering.
- This example shows a Dialog using an AnchorLayout to “anchor” the form fields to the dialog dimensions. When resized, the fields will adjust their size to match the dimensions of the dialog.
Wednesday, August 6th, 2008
Category: Ext
Ext 2.2 has been released, and it has features to complement the usual maintenance bug fixes and performance updates (Ext now works better in Firefox 3).
New features include:
CheckboxGroup / RadioGroup
Technically, while the individual Checkbox and Radio controls are not new, they may as well be, considering the overhaul they have had in this release. Gone are the ugly standard browser input controls, now replaced by attractive, visually-consistent Ext-ified versions (a long-overdue improvement).
In addition to that, we’ve added group controls for both that support complex layouts with just a config option or two. Previously in order to accomplish similar grouping layouts you would have had to create a container with a ColumnLayout and manually place your controls across multiple column configs.
History
Another component that has been missing in Ext is a browser history utility to enable history stack navigation within your single-page Ext application. The new Ext.History singleton makes it extremely easy to do exactly that, and it uses an event-based API to notify you when the browser history as changed.
MultiSelect / ItemSelector
These two components were contributed to Ext by community member TJ Stuart (thanks TJ). The MultiSelect is a traditional list control that allows for selecting multiple list items, and the ItemSelector combines two MultiSelects into a more sophisticated control that includes drag-and-drop list selection and bulk selection and deselection among other features.
FileUploadField
This is an official extension provided as a sample for implementing a useful form component. Not everyone needs a form upload component, but if you do, you can’t live without it. This control is fully styled and has an API consistent with other Ext form controls. It also supports both Text+Button (read-only text) and Button-only modes, and can participate fully in form layouts.
XmlTreeLoader
This official extension provides a great demonstration of extending an existing Ext component to provide functionality that you need in your own application. Again, loading an XML document into a tree is not needed by everyone, but if you do need something similar, this should be a great demo.
GMapPanel
This extension was originally written up as a demo for one of our previous blog posts. However, it proved to be such a hit with the community that we transformed it into an official extension. This is another useful example of extending a standard Ext component, in this case to interface with an external API.
3.7 rating from 102 votes
Monday, August 4th, 2008
Category: Ext, Python
Are you an ExtJS and Django user? If so, you will want to check out this article by Matt of Tangible Worldwide on Using ExtJS's Grid Filtering with Django.
He goes into detail on how to tweak the grid filtering system that is aimed at PHP, and getting it to work in a way that allows you to write this Django code:
PYTHON:
-
-
# take a ContentType model name (say, from the URL)
-
# and create a QuerySet
-
ctype = ContentType.objects.get(model=ctype_model)
-
model_class = ctype.model_class()
-
obj_qs = model_class.objects.filter()
-
-
# 'q' is the set of POSTed filtering parameters
-
filter_params = request.POST.get('q', '[]')
-
-
# decode the filtering parameters w/ simplejson
-
filter_params = simplejson.loads(filter_params)
-
-
# apply the filtering params
-
filtered_qs = get_queryset_from_ext_filters(obj_qs, filter_params)
-
ExtJS 2.1 saw inclusion of the popular (at least in my world) user extension for AJAX filtering of data by grid columns. As useful as this is (provided you can abide by the GPL or paid licensing options), the filter parameters serialized as a PHP array, which is not particularly useful for other languages. With a quick modification to the grid filtering serialization method and a helper function for Django, we can rewire the system to send a JSON string that Django can use to directly apply filtering to a QuerySet. I've found that most clients love having this sort of command and flexibility over their data -- especially the kind that don't necessarily realize that this visualization and control exists. I like that. Additionally, the amount of work and code required is minimal, and the code both reusable and straight-forward. I like that, too.
There are 4 steps to this process:
- Modify the serialization method in GridFilters.js
- Set up the helper function that will process the QuerySet with the grid filter parameters
- Slightly customize your models (see below)
- Add (simple) helper code to your Ajax view
Wednesday, July 16th, 2008
Category: Ext
Many developers really like the live scrolling functionality popularized by DZone. As you scroll down the page, a XHR call is made which pulls back data and instantly refreshes and allows you to continue to scroll down almost endlessly. Aaron Conran has built a widget for the Ext JS library which provides this functionality in an easy-to-use user extension:
A LiveDataPanel can enhance your site by deferring the load of additional content until the user is ready to see it. Markup will never be generated unless it’s needed and therefore the browsers DOM will have a smaller footprint. It’s important to remember to use this component where approriate, because it will load every record into memory and render that record’s markup to the browser. By building upon Ext’s foundation classes, we were able to create a useful component without having to do a lot of the lower level work.
The extension is easy to call and very configurable. The demo code looks like this:
JAVASCRIPT:
-
-
// Creating the panel is easy
-
var p = new
