Tag Archives: ui

How to add sort icon by default on Dojo DataGrid?

I was working on some applications with heavy customizations of Dojo DataGrid involved, which is cumbersome if the API doesn’t provide good features exposed to the developers like me (may be like you ☺). Unfortunately the application has DataGrids in multiple places with more custom features, so I couldn’t get my hand to migrate it to EnhancedDataGrid. It should’ve been done earlier; my job could’ve been simpler. 

One of the simple expected features was to set the sort icon by default or wherever the sort icon is required. After searching in many forums including dojofoundation and stackoverflow I couldn’t find a straightforward method or API. So I had to do it on my own without adding much complexity in the existing code. Here is what I did,

As you see above, the function has two parameters one is the Grid (dijit based object), and the field name (data field from your data store). You can also use index based sort icon. Thanks to DOJO, the DataGrid has layout API exposed which would help any developer to play and customize the grid like they want. 

Step by step explanation of the code and how I came to this solution,

  • I loop through the cells that are part of the layout API and find out the column I want based on the field name comparison. Could be index-based comparison as well.
  • I’m using jQuery for all my DOM manipulations. You can use DOJO as well for your DOM. Based on the cell id I’ve created a jQuery object (targetCell) to perform some DOM changes over the cell.
  • Setting the ARIA (Accessibile Rich Internet Applications) attribute to ascending (could be descending).  Setting this attribute tells the screen reader that the column in ascending order.
  • Every cell has a sort node (div element) in it. It has to be replaced with the sort icon code. Once the sort node is found, the Sort DOM structure should be added.
  • I have added the sort DOM structure to the sort node to render it properly with the sort icon and the column label.
  • After adding the DOM structure, this sort information has to be informed to the Grid using setSortIndex. Then only it would reflect or render the sort icon when you click other columns. The second parameter should be false, otherwise the grid will sort the data again.

I hope you find this simple and easy. From the forums I read, there could be other ways to do it. Leave your suggestions in the comments section.

FlexMonkey – Flex UI Testing tool

We’ve got an interesting tool for testing Flex UI parts…. FlexMonkey developed by Gorilla Logic.. FlexMonkey is an Adobe AIR application used for testing Flex- and AIR-based applications. Providing the functionality to record, playback and verify Flex UI interactions, FlexMonkey also generates ActionScript-based testing scripts that you can easily include within a continuous integration environment.

Snap shots from FlexMonkey tool,

Snapshot
Snapshot1
Snappshot23
Snappshot2

Some of its features are,

* Records and plays back Flex UI interactions
* UI Interactions can be edited and replayed
* Generates FlexUnit TestCases, and can also be used with non-FlexUnit-based testing frameworks
* Works with Flex and AIR apps
* Apps can be tested running standalone or in a browser
* Tests can be run from build systems such as Ant
* Handles all Flex UI events
* Uses Flex Automation API to provide native control over your flex app. Requires no javascript or browser plug-ins to use.
* Unit tests are written entirely in ActionScript. No other programming or special purpose scripting languages are needed to develop comprehensive UI test suites.
* Non-invasive. Requires no modifications to your application source.

I’m also new to this.. Have to play soon… Let see how it works.. I will try to post my experience on this tool very soon…

Resources and sources :

Gorilla Logic | Google Code Project – Flex Monkey | Interesting Article of FlexMonkey | Download Page