JavaScript, CSS, HTML Frameworks and Tools

Greg posted a very useful list of resources; One of the challenges in the world of HTML/JavaScript/CSS app development is cobbling together your kitchen sink of frameworks, tools and other technologies. When you start looking around, it feels like there is an endless list of options, which is good and bad!  Recently, I’ve been gathering a list of what’s popular these days and thought it might be useful for others to share. If you see anything obvious missing, please let me know.  Thanks to the following for helping me put together this list: Ray Camden, Andy Trice, Philip Wilson, Christophe Coenraets, Piotr Walczyszyn, and James Brown.

In no particular order:

via Gregs Ramblings.

Ext JS + jQTouch + Raphaël = Sencha

Abraham Elias writes;

Ext JS is now Sencha. Exciting things are happening! Today, we’re combining forces with the jQTouch and Raphaël projects, changing our company name to Sencha, and moving our web address from www.extjs.com to www.sencha.com.

jQTouch and Raphaël are the leading open source projects in their areas, and we’re incredibly excited to have their creators, David Kaneda and Dmitry Baranovskiy, joining with the Ext JS team to form Sencha. We believe these collaborations will lead to some spectacular new things in the weeks and months ahead. Stay tuned for this. You won’t have to wait too long, I promise!

We believe that rich graphics and touch support will become essential Ajax framework components over the next few years. If you’ve been following our recent blog posts on HTML5, you’ll know that not only do HTML5 and CSS3 bring significant capabilities to rich internet applications, but that this is already arriving on mobile devices (in fact, it’s already here).

Sencha is the new name of our company, as well as a variety of Japanese green tea.

Why Sencha?

We’re choosing Sencha as our name because it evokes next-generation software development and it’s easy to remember, spell and pronounce. Sencha — the name of a popular Japanese green tea — is in the tradition of Java, and represents a new level of development. It feels memorable to us. We hope you like it too.

The roadmaps for Ext JS, Ext GWT, Designer, Direct etc. don’t change as a result of this. We’re very excited about the new things in Ext JS 4.0 and the rest of the product line. Some of the individual product names might evolve in the future (for example, we’re thinking of renaming Ext Designer to Sencha Designer), but don’t expect any major or immediate changes here.

via  Sencha Blog — JavaScript Framework and RIA Platform.

Ajaxify Your Zend_Form Validation with jQuery

Jon Lebensold posts an update to his excellent screencast; We’re going to take what was put together in the last 3 videos and now include some server-side validation that will appear asynchronously. This is an example of using Zend_Form as a validation tool via JSON.

Grab a copy of the project or browse the repository.

UPDATE: as a couple people have mentioned, you can cut down your IndexController even more by using the Zend_Json view helper:

public function validateformAction()
{
$f = new Form_Registration();
$f->isValid($this->_getAllParams());
$this->_helper->json($f->getMessages());
}

Enjoy!

See it at Zendcasts.

DataTables – table plug-in for jQuery

The other day I had to write a  NOC application that shows all active phone lines in an out of a customers telecom cluster, thats a lot of constantly changing data that needed to be displayed.

Some design requirements was;

  • *NO* refreshes i.e. blinking screen parts (gives NOC personel an epileptic fit after a day staring at it).
  • No direct database access – read only Json proxy.
  • Near realtime – 1 second updates.
  • Group lines on customer. Toggle on and off.
  • Sortable on all visible columns.
  • Searchable and one click filters.
  • Has to work in an Dojo ContentPane.
  • 100% translatable

To the rescue; DataTables is a plug-in for the jQuery Javascript library.  It is a highly flexible tool, based upon the foundations of progressive enhancement, which will add advanced interaction controls to any HTML table.

I can’t recommend it highly enough, configuration is as easy or as hard as you require it to be, draw up a file with a regular table,thead,tbody,tfoot table put it’s id to be example and place this code snippet into the file;
/*
* Example init
*/
$(document).ready(function(){
$('#example').dataTable();
});

Then popp over to Allans excellent Examples page! and if you dont have a sortable, searchable and great looking grid in about 5 minutes, I owe you a beer!
Key features:

  • Variable length pagination
  • On-the-fly filtering
  • Multi-column sorting with data type detection
  • Smart handling of column widths
  • Display data from almost any data source
  • DOM, Javascript array, Ajax file and server-side processing (PHP, C#, Perl, Ruby, AIR, Gears etc)
  • Fully internationalisable
  • jQuery UI ThemeRoller support
  • Rock solid – backed by a suite of 1300+ unit tests
  • Wide variety of plug-ins inc. TableTools, FixedHeader and KeyTable
  • It’s free!
  • State saving
  • Hidden columns
  • Dynamic creation of tables
  • Ajax auto loading of data
  • Custom DOM positioning
  • Single column filtering
  • Alternative pagination types
  • Non-destructive DOM interaction
  • Sorting column(s) highlighting
  • Extensive plug-in support
  • – Sorting, type detection, API functions, pagination and filtering
  • Fully themeable by CSS
  • Solid documentation
  • Full support for Adobe AIR

Go NOW and take a peek DataTables (table plug-in for jQuery).

Features « DataGrid for Zend Framework

Zend dataGrid now has it’s own domain and releases version 0.5 , Check out the Docs and the Demo.

Some of the features:

  • Create a datagrid using a Zend_Db_Select instance, Arrays, XML, CSV or JSON files
  • Takes a Zend_Db_Select instance to perform the query
  • User interface controls to perform operations to insert, update and delete table records with support for data validation and filtering
  • Template based presentation
  • Filter data by user selected fields Automatic pagination of results
  • Support for extra listing column fields List sorting by field
  • Configurable field titles
  • Support for SQL aggregation expressions (MAX, COUNT, MIN, AVG, etc…)
  • Internationalization support
  • Export results in multiple formats: XML, HTML table, PDF, MSExcel, MSWord, CSV, Open Office Spreadsheet and text document etc..
  • Cache support
  • Plug-ins to format content: date, bool, etc..
  • Ajax support
  • Form fields customization
  • Fields Decorators
  • Callback functions
  • ….

via: Features « DataGrid for Zend Framework.