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.

Word Paste

The most exciting change is to how the Word Paste plugin works, which now captures a paste event and can fix the Word garbage without any user interaction. The old UI has been ditched, and replaced with a single toggle button on the HtmlEditor toolbar which turns the functionality on or off. No pop-up window needed.

Form Validation

All of the forms used for inserting now validate their input before allowing the user to insert anything. When the user fills out the form invalidly, they get a squiggly red line (like that of a misspelling in Word). If they try to submit the form with the field still invalid, a “frame” animation effect brings their attention to the invalid field.

Context Activation

Two new features were added that allow the buttons to be enabled or disabled based on text selection, and what tags are present in the selected text or cursor position. This simply means, for example, that the ‘Bold’ button will be toggled if the selected text, or cursor position has a bold tag in it. To use this feature we just need to enable it.

Ext.ux.form.HtmlEditor.Bold = Ext.extend(Ext.ux.form.HtmlEditor.MidasCommand, {<br /> midasBtns: [{<br /> monitorCmdState: true,<br /> cmd: 'bold',<br /> title: 'Bold'<br /> }]<br /> });

The second part of this feature set is enabling or disabling a button on text selection, this is used in the Remove Formatting button because it would be silly to have this button enabled if no text was selected.

• enableOnSelection – set to true to enable button only when text is selected.
• disableOnSelection – set to true to disable button only when text is selected.

See how the Remove Formatting button takes advantage of this feature.

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

Overflow Text

The overflow text used when a toolbar has too many buttons to fit in the width has been added. This was overlooked on my first version of this plugin. Thanks to ‘feyyaz’ from the ExtJS forums for spotting this.

Conclusion

Hopefully these new features and fixes will prove useful to everyone, and as always, feedback is the only way this plugin set is going to get better, so keep the suggestions coming. Now its time for me to go get some breakfast and a large(ish) cup of coffee. Enjoy!

HtmlEditor Plugins Code

The obvious next choice for a button was to add a character map which allows the user to insert special characters.

How it Works

The character map is just a DataView in a window which allows selection of each item. By double clicking on an item, a single character can be inserted or we can select a single item or multiple items using the ctrl or shift keys and click the ‘Insert’ button.

Using it

Just like the other plugins in this set, it can be added to the plugins array of your HtmlEditor.

{<br /> xtype: ‘htmleditor’,<br /> …,<br /> plugins: [new Ext.ux.form.HtmlEditor.SpecialCharacters()],<br /> …<br /> }

I also created a couple of configs that allow you to specify which characters you want displayed, along with any additional characters. Both of the following configs use the numeric portion of the ASCII HTML Character Code only – for example, to use the Copyright symbol, which is &#169; we would just specify 169 in the config.

If we wanted to only display a subset of characters, we would set the value of the charRange config to an array containing the starting and ending points of the characters we wanted.

{<br /> xtype: ‘htmleditor’,<br /> …,<br /> plugins: [new Ext.ux.form.HtmlEditor.SpecialCharacters({<br /> charRange: [192,256] // Accented characters only<br /> })],<br /> …<br /> }

There is also the option to include additional characters using the specialChars config, providing an array of the characters.

{<br /> xtype: ‘htmleditor’,<br /> …,<br /> plugins: [new Ext.ux.form.HtmlEditor.SpecialCharacters({<br /> specialChars: [42,43,45,47,60,61,62] // Math operator characters<br /> })],<br /> …<br /> }

Enjoy!

As always, please enjoy this plugin and feel free to use it wherever you want. Feedback is very appreciated.

Source available on Google Code: http://code.google.com/p/ext-ux-htmleditor-plugins/

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.