DC Meetup Videos

We held the first in a series of meetups that will happen in the DC/NoVA area last week, a sprout of our Baltimore area Meetup for our southern friends, and I have to say that it was a huge hit. The meetups are going to be managed by Pat Sheridan from Three Pillar Global, and we are hoping it will be a way to get JavaScript developers from the DC area more involved in the community. Jay was kind enough to bring video equipment and record our presentations, along with editing the videos and posting them to the intertubes.

There are some photos and other information about the event on its meetup page.

If you are in the Baltimore area and into JavaScript with a fury, you should visit our Meetup that happens the first Wednesday of each month at 6:30PM in the Beehive Baltimore. This month’s meetup has a presentation from Paul Barry about Node.js – it’s gonna be bad ass.

Speed Testing

My little addiction I like to call speed testing has rolled into full swing. Now that I have the tools in place to create and launch tests, along with run reporting on the results with ease, I can pretty much just sit down and spend 30 minutes or so to design and launch the test. I have two tests currently gathering data, one is testing the speed of rendering an image with and without a data URL, the other has to do with the speed of code wrapped in a try catch statement. Should be some interesting results, which I will be posting a summary on soon. My first test was for JSON decoding speed, which I posted results for a couple of weeks ago.

HtmlEditor Plugins

The Ext JS team has expressed an interest in including my HtmlEditor Plugins as a UX in the SDK. This will mark the third development of mine that has become part of the Ext JS SDK download, first it was the GMapPanel UX, then the Grid Filter backend PHP code, now it seems that the Ext JS SDK will finally come with a more robust HtmlEditor example. A few updates have been committed recently that add the option to change the language in these plugins, along with some general code cleanup. Also starting to move my code over to Github as suggested by many.

Books

Soon we will have Jay Garcia’s Ext JS in Action book released in print, and the 2nd edition of Learning Ext JS should be released later this year, titled “Learning Ext JS 3.0″. Cutter, Colin and I got together to update the book, fix some errors, and add new chapters to take advantage of new features in Ext JS 3.0. It’s gonna be an awesome resource for anyone just getting started with Ext JS.

JSConf

Again, JSConf is being held in the DC area, which makes it incredibly cheap for me to attend, but this year I decided to try my hand at submitting a talk proposal. I can’t wait to find out if I will be chosen. My submission was for an introduction to rapid application prototyping using the Ext JS library. Here is my submission:

{<br /> “name”:”Shea Frederick”,<br /> “email”:”________@________.com”,<br /> “twitter”:”VinylFox”,<br /> “location”:”Baltimore, MD”,<br /> “topic_title”:”Rapid Web Application Development with Ext JS”,<br /> “topic_description”:”Discuss general principles of the Ext JS library<br /> and show how easy it can be to rapidly prototype a web application<br /> using the library.”,<br /> “claim_to_fame”:”One of the core contributors to the Ext JS library<br /> along with other Open Source JavaScript projects. Author of<br /> ‘Learning Ext JS’ published in December 2008. Observed ‘Talk Like<br /> a Pirate Day’. Maintain a Blog of JavaScript fun at<br /> http://www.vinylfox.com”<br /> }

Did I mention that all submissions have to be in the form of valid JSON? Yeah, geeky, but good – very good. With any luck, I will find out later this week if ive been accepted.

At 6:30PM on 1/19/2010, Three Pillar Global will be hosting a gathering of industry leading minds in the metro DC area to discuss and share development practices, ideas, tips and tricks revolving around the Ext JS framework. There will be four presentations that are jam-packed with information that can aid to your success in developing applications with the Ext JS framework

About the presentations:

Patrick Sheridan will kick off the meeting, where he will explain how analysis-driven development can aid in the success of your application construction, reducing time from conception to production. Shea Frederick will be guiding us through advanced JavaScript debugging techniques, demonstrating some of the best tricks for the latest and greatest JavaScript development tools. Jonathan Julian is going to share and elaborate on five areas to improve your Ext JS applications, which range from defining your own components to properly overriding the framework. Lastly, Jay Garcia will discuss how to build extensible applications using a two-tiered approach with Ext JS.

Food and refreshments to be provided. We look forward to seeing you there!

About the presenters:

Pat Sheridan is a successful Ext JS developer that leverages his user experience background to accelerate successful development with RIA JavaScript frameworks, including Ext JS. With success stories such as the complete rewrite of the U.S. Treasury’s Pay.gov website and the production of four large RIA applications for the Financial Regulatory Authority (FINRA), he continues to dominate this space with a progressive thought process that enhances the development and user experience alike. He demonstrated his UX leadership with the release of an Ext JS 2.0 OmniGraffle template that has garnered over 50,000 downloads world wide.

Shea Frederick is an active community member for ExtJS. His expertise is drawn from community forum participation, work with the core development team, and his own experience as the architect of several large ExtJS-based web applications. Shea is also an author for JavaScript Magazine, his own blog (http://vinylfox.com), and the Ext JS blog. He is the lead author of the Learning Ext JS book and is the organizer for the Baltimore JavaScript developers meetup group.

While not very well known in the Ext JS community, Jonathan Julian is successful independent web developer specializing in Rails and Ext JS applications with extensive experience in Java and related technologies. He occasionally blogs about software and web development at jonathanjulian.com and tweets as @jonathanjulian. He has presented at the Baltimore JavaScript developers meetup group.

Jay Garcia, author of the up and coming book, Ext JS in Action (http://extjsinaction.com/), provides daily support on the Ext JS forums as well as free extensions and widgets to the library. He is an author for JSMagazine, the Ext JS blog and his own blog at http://tdg-i.com. He’s developed enterprise-level applications using Ext JS since early 2006, when it was known as “yui-ext” and has continued to support and assist in the expansion of the product ever since.

I should say that im not the kind of guy that this book is targeted at, but I ended up enjoying it anyway. I prefer a little more explanation in my books instead of the example driven cookbook style, but I gave it a read through because Jorge is an awesome guy, and it’s Ext JS related, so I cant resist – im an Ext JS addict.

The Author

I was surprised when I initially found out that this book was being put together, mostly because it was being written by a person I had never heard of. The author, Jorge Ramon at the time of starting this book had not a single post on the ExtJS forums, which is where most people head when they need to figure something out, or when they have something to share. This fact alone is a great testament to the authors intelligence and the quality of the documentation and examples that are provided with Ext JS.

Aside from the occasional quirk in the book, Jorge has done an amazing job putting together a quality product that will no doubt be useful to everyone. There can be slight grammatical problems in the text, such as incorrect tenses, and odd sentence structure, but like I mentioned earlier, the book is sparse on text.

The Approach

The cookbook style of book has a unique format where you have each example broken down into ‘what’, ‘how’, ‘why’ and ‘more’.

For Example:

• Subject (what) – short explanation of what is to be done.
• How to do it… – actual code with minimal explanation.
• How it works… – short explanation of what happened.
• There’s more… (optional) – other related uses or features.
• See also… (optional) – related sections within the book.

If you read anything, it should be the “How it works” sections, which have brief explanation of the example. The “Subject” section in big black headings is also quite useful to read before looking at the code. I would suggest ignoring the “See also…” sections while reading through, as they seem to just be used for looking up related tasks, though I found them quite unhelpful for even that.

The Recipe Code

In general, the code examples are of good quality, and the suggested methods and practices in the book are inline with whats recommended. There are a couple places where variables are not defined (var’d), making them inherently global, but hey, we all are guilty of this flaw. Probably the most confusing portion of this book is where the author uses the Ext.ux namespace to place application layout code, which is specific to your application, therefore not likely to be a “User Extension” which is what the Ext.ux namespace is reserved for.

The screenshots that go along with each example are excellent, and most have arrows directing you toward the change made. These changes also have a corresponding bold line in the code sample.

This book has a huge amount of XML examples, which can be a hard thing to come across in the JavaScript community since most of us despise XML and cant wait to get rid of it. For those of you that need to use XML, the Ext JS 3.0 Cookbook will no doubt be a huge resource for learning the oddities involved in using XML data with Ext JS.

Summary

Probably what you want to know is “would I buy this book” – the answer is yes. I have no doubt that this book will help anyone working on an Ext JS project.

The code in question is quite simple, but just enough lines to warrant some thought about how to make it simpler (read as: make my fingers type less). It disables Components based upon the SelectionModel of another component. With a plugin, we can attach events to the selection model automagically through our plugin, and run a chunk of code that would look around for related Components that need to be enabled or disabled. Setting a special config in each Component that you wish to disable or enable will determine what happens to that Component.

The SelectionEnabler

Lets say we have a grid, and we want to disable or enable the infamous “Delete” button, we would first add this plugin, and since this plugin works around the idea of having groups of Components to enable or disable we will tell it what ‘group’ to look for – in this case its ‘deletegrid’.

{<br /> xtype: ‘grid’,<br /> …,<br /> plugins: [new Ext.ux.SelectionEnabler({enablerGroup: 'deletegrid'})],<br /> …<br /> }

What this does is tell our grid that it should look for Components in that same group when a selection has been made, and disable or enable them accordingly. The next part of this process is to add the Components that we actually want to be disabled and enabled.

Welcome to “Delete”

As the SelectionEnabler plugin gets the message that a selection has changed, it searches within the layout of the current Component for other Components with the enableOnSinge or enableOnMultiple configs set, and if the group name matches, it enables or disables that Component appropriately. Here we have a button with enableOnSingle set to ‘deletegrid’ which will enable the button when a single selection is made, but disable it for multiple or no selection.

{<br /> xtype: ‘grid’,<br /> …,<br /> plugins: [new Ext.ux.SelectionEnabler({enablerGroup: 'deletegrid'})],<br /> …<br /> bbar: [{<br /> text: 'Single',<br /> enableOnSingle: 'deletegrid',<br /> disabled: true,<br /> handler: deleteRow<br /> }]<br /> }

That is all that needs to happen for an ExtJS Component (a Button in this case) to be disabled or enabled upon selection. This same method can be used to disable any type of Component, such as Panels, form fields, etc. Currently it works with Grid and Tree selection models (both multiple and single selections) and can enable or disable any component existing in the same layout that has a disable/enable handler.

Screencast Demo

Sometimes a picture (or video) just says it all, so I took this screencast of some simple example uses, which are also included in the code repo.

My next goal with this is to put some type of caching in place for this plugin so it will not be so resource intensive every time a selection change happens.

http://code.google.com/p/ext-ux-selectionenabler/

Additionally, I want to thank Home & Stone for allowing me to contribute this code back to the community, along with the previous release of the HtmlEditor buttons.

Home & Stone asked me to integrate the TinyMCE editor into their application, so of course I said yes, knowing that I had done this before and that it generally worked out just fine. Well, three or four days later (its all a blur) having written layers and layers of overrides to the TinyMCE editor, extended or overrode Ext.Panel, Ext.Window, Ext.Updater and so on. I finally said to myself “thats enough, this just isn’t worth it” – I can get this done faster and better using ExtJS the way it was meant to be used.

The Outcome

Out of my pain comes a set of plugins that start to mimic what TinyMCE provides, with way less overhead, both in file size and memory.

Currently, these are the plugins that have been created for this set:

• WordPaste
• Divider
• Table
• HR
• IndentOutdent
• SubSuperScript
• RemoveFormat
• MidasCommand

I have posted all of these in a new Google Code project, so feel free to use these in your projects and contribute back any fixes or upgrades you might have along the way.

http://code.google.com/p/ext-ux-htmleditor-plugins/

How to Use Them

First you will need to include the plugin files you want (MidasCommand will need to be included first), then set them up on the HtmlEditor as a Plugin like this:

{<br /> fieldLabel: ‘Description’,<br /> name: ‘description’,<br /> value: ‘bwah bwah’,<br /> anchor: ’100%’,<br /> xtype: “htmleditor”,<br /> height: 400,<br /> plugins: [<br /> new Ext.ux.form.HtmlEditor.Word(),<br /> new Ext.ux.form.HtmlEditor.Divider(),<br /> new Ext.ux.form.HtmlEditor.Table(),<br /> new Ext.ux.form.HtmlEditor.HR(),<br /> new Ext.ux.form.HtmlEditor.IndentOutdent(),<br /> new Ext.ux.form.HtmlEditor.SubSuperScript(),<br /> new Ext.ux.form.HtmlEditor.RemoveFormat()<br /> ]<br /> }

Thats it! They show up in the toolbar in the order they are added. A Divider can be inserted at any point, and some have dividers built in.

Make Your Own

This whole process brought about the creation of a simple base class used for adding your own Midas commands – Ext.ux.form.HtmlEditor.MidasCommand. This class can be extended and provided a simple config that will create the buttons and their handlers for you.

Ext.ux.form.HtmlEditor.RemoveFormat = Ext.extend(Ext.ux.form.HtmlEditor.MidasCommand, {<br /> midasBtns: ['|',{<br /> cmd: 'removeFormat',<br /> title: 'Remove Formatting'<br /> }]<br /> });

PS: Im glad to see the trend towards Plugin use in ExtJS, allowing the addition of bits of functionality without conflicting with other functionality, and without having to resort to extending.

Additionally, I want to thank Home & Stone for allowing me to contribute this code back to the community, they have expressed interest in giving back, so im sure we will see more of these types of things being released soon.

This new config that was introduced in ExtJS 3.0 provides us with a way to create a reference to a component right in the config. It’s so simple its complicated, so I think it’s quickly become time for an example…

Let’s say your extending panel to create a custom component with two buttons in a bottom toolbar, it might look something like this:

Ext.ux.mySweetCmp = Ext.extend(Ext.Panel, {<br /> initComponent: function(){<br /> Ext.applyIf(this, {<br /> html: ‘Bwah bwah’,<br /> bbar: [{<br /> text: 'Boo',<br /> itemId: 'button-boo',<br /> handler: this.myBtnClick,<br /> scope: this<br /> }, {<br /> text: 'Bleh',<br /> itemId: 'button-bleh'<br /> }]<br /> });<br /> Ext.ux.mySweetCmp.superclass.initComponent.call(this);<br /> },<br /> afterRender: function(){<br /> this.btmTb = this.getBottomToolbar();<br /> this.buttonBoo = this.btmTb.getComponent(‘button-boo’);<br /> this.buttonBleh = this.btmTb.getComponent(‘button-bleh’);<br /> Ext.ux.mySweetCmp.superclass.afterRender.call(this);<br /> },<br /> myBtnClick: function(){<br /> this.buttonBoo.setText(‘New Boo’);<br /> this.buttonBleh.setText(‘New Bleh’).disable();<br /> }<br /> });

It’s lines 18, 19 & 20 that make me uneasy. When im inside extending a component, I don’t feel like it should be necessary for me to have to locate a component that is nested within the component im creating and manually assign it to the scope – right?

When we put the new ref config into use, our code will look something like this:

Ext.ux.mySweetCmp = Ext.extend(Ext.Panel, {<br /> initComponent: function(){<br /> Ext.applyIf(this, {<br /> html: ‘Bwah bwah’,<br /> bbar: [{<br /> text: 'Boo',<br /> ref: '../buttonBoo',<br /> handler: this.myBtnClick,<br /> scope: this<br /> },{<br /> text: 'Bleh',<br /> ref: '../buttonBleh'<br /> }]<br /> });<br /> Ext.ux.mySweetCmp.superclass.initComponent.call(this);<br /> },<br /> myBtnClick: function(){<br /> this.buttonBoo.setText(‘New Boo’);<br /> this.buttonBleh.setText(‘New Bleh’).disable();<br /> }<br /> });

The only way to describe this is “clean”. Now lines 18 & 19 are working directly from my local scoped variables, referencing components contained within my component. No messing around with finding the component and manually assigning it to a variable in the scope. Not to mention, with this very short example we were able to save six lines of code, which is a great savings when your only talking about twenty-seven lines of code total – that’s a 20% savings!

The Nitty Gritty

The ref config works much like changing folders on a linux command line, two dots and a slash travel up one level of folder, or in the case of ref, a level of nested component. It takes care of adding the scoped variables for you using the name you provide in the ref config.

Summary

This is one of those things you find often in ExtJS that really set it apart from other RIA libraries – one of the many reasons I use and recommend the ExtJS library for projects over and over again. Simplicity in a highly configurable UI component is not an easy thing to balance, but ExtJS has managed to do it again and again.

NOTE: Something as trivial as adding a toolbar and buttons to a panel is not a reason in itself to create an extended component, this is simply for the purpose of having a minimalistic example – no matter how pointless it might be.

Were only a few days into voting, and I heard (from an unnamed source) that im currently in the top position. What I need is for everyone who found my book useful – as a monitor riser or otherwise – to go and place your vote!

For more details, visit the Packt Author Award 2009 web page.

The first new sample demonstrates two things that allot of people seem to strugle with. First off, using a map within a border layout, which when you get down too it is dead simple, but causes much frustration and confusion if you happen to do it incorrectly. The second thing is using a DataView (could be a grid, tree, etc) to interact with the map by giving a list of points to recenter the map on. Recentering is accomplished by clicking on an item in the DataView list, this triggers a click event in the DataView which then pulls the lat/lng from the DataStore and tells the map to center on it.

The next example is also a new one, demonstrating how to use a form to interact with the map. A basic dialog has been created with a form in it, this dialog is opened from the tool section of the window in the recenter-map example. From this form you can enter in either a lat/lng or a street address, and the data entered is used to manipulate the map. Its a handy and fun little example.

This last one was something I did on a whim, because I noticed these map windows being used all around the world I thought it would be a good idea to follow the standards used by ExtJS and localize the text contained within the code. When I set in to do this, I assumed I could pull localized text messages from Google for the error numbers Google provided – go figure, their API actually provides no text at all for the error codes they return. I ended up copying the error text from the Google API reference/docs into my code, which was annoying, but I didn’t see any other options.

Thats it for now, enjoy the map panel updates!

http://code.google.com/p/ext-ux-gmappanel/source/detail?r=17

Learning Ext JS takes a top-down approach to teaching Ext JS … this approach will certainly immerse the reader quickly into a number of common techniques used througout the framework, like XType, configuration objects and common component configuration parameters.

Chris Scott

Both Learning ExtJS and ExtJS in Action take differing paths to get to the end result of learning the ExtJS library.

Ext JS In Action, will make an excellent companion to Learning Ext JS below, since it takes a more-technical bottom-up approach to teaching Ext JS

Chris Scott

Ive noticed this myself when talking to Jay about projects, we have quite a different approach. This will definitely help the ExtJS community grow by appealing to the different learning styles of newcomers.

For our first meeting we have a presentation on ExtJS by Jay Garcia, which many of you likely know from his active participation in the ExtJS forums, educational screencasts and plugins/extensions.  The meeting is taking place in Columbia, which is roughly between Baltimore and DC.

If your interested please sign up for the meetup group to show your support, and if you would like to attend let us know your coming by RSVP’ing on the meetup page.

http://www.meetup.com/baltimore-dc-javascript-users/

Hope to see you there!