Topics being covered include:

• Introduction to Sencha Touch
• Ext JS Component foundations
• Panels and Layouts
• TabPanels
• Sheets and Pickers
• Data Stores
• List and Nested List
• Form Panels
• Media and Carousels
• Application development
• Performance considrations

Early bird pricing for the event ends on March 11th, so get your tickets now!

Tickets can be purchased from Eventbrite.

I have produced a set of Sencha Touch 2 OmniGraffle stencils based around the kitchen sink demo that Sencha has developed. Using this set of stencils, you should effectively be able to quickly wireframe and prototype a base theme Sencha Touch application.

Included are the majority of the UI elements, and in the set you will find buttons, toolbars, form elements, modals, overlays, alerts, tab bars, and a date picker.

• Download the OmniGraffle .gstencil here

The stencil will also be posted to Graffletopia shortly, so you can search for it inside of OmniGraffle and download it that way as well.

Update: The stencil has been approved on Graffletopia. You can find it here.

We’d love to hear your feedback!

HTML5 Evolves from Buzzword to Core Technology Platform

2012 is the year Mobile Web Apps will come online.  Most firms continue to struggle with mobile product development and the first generation of native mobile apps were held to a much lower standard for user experience.  As consumers expectations become more sophisticated, the ever increasing portfolio of novelty or ‘executive pet project’ mobile apps will have to be replace by a scalable, cost effective, HTML5 mobile web app model.

The ‘Hybrid App’ Development Becomes Migration Plan for Native Apps

Many firms we speak to look at HTML5 as their ‘everything else’ strategy beyond iOS.   For firms that have focused on native iOS apps, HTML5 will be their platform of choice for covering Android, Windows, and Blackberry devices.   Of course there are specific hardware features available to native mobile apps that packaging tools such as PhoneGap make available to HTML5 developers:  camera, GPS, compass, accelerometer, and local storage to name a few.  Hybrid Apps, apps that deploy HTML5 content wrapped in a native wrapper of code, allow for a smooth transition point to more scalable solutions.

Facebook embraces HTML5

Facebook will release project Spartan and most likely it’s own phone optimized to run HTML5 based games and apps as direct challenge to iOS.  Facebook acquired HTML5 platform company Strobe towards the end of 2011 and looks to be boosting it’s developer community relations.  With the release of ‘Timeline’ we believe Facebook is beginning to draw a line between the content and app experience on Facebook and HTML5 will be the technology that Facebook use to become an app distribution channel.

Open Government = Mobile Web Apps

Citizen engagement is predicated on citizen access.  Just as CMS platform like Drupal and WordPress revolutionized the way agencies standardize and manage web content, HTML5 based mobile friendly sites and apps that can easily pull content from existing CMS infratructure will revolutionize how agencies large and small achieve their mission.

HTML5 Challenges the “Native App & Store” Distribution (and Business) Model

Scale is the primary driver for HTML5 growth.  As enterprises shift mobile from vanity projects to core technology, the 30% ‘Tax’ levied to use native iTunes Store and Android Market will become increasingly seen as lost revenue.  Firms will increasingly look to hybrid apps and mobile web apps to grow their marketshare beyond iOS devices and leapfrog over the need to add native Android development to their operational stack.  As companies look to maximize mobile app revenues, they will be increasing motivated to recapture profit lost to pay for access to a delivery channel.

Sheridan had recently served as the Director of Product Strategy at Three Pillar Global after the 2009 acquisition of CloverLeaf Consulting, a user experience strategy firm he founded in 2005. Sheridan helped grow Three Pillar from 20 to 200 employees globally and deliver noted iPad, iPhone, and Android applications for PBS and Time, Inc.

The meteoric growth of Three Pillar is a testament to the talent of the executive team and dedicated staff and I will draw on that experience and friendships heavily moving forward with Modus Create,” said Sheridan. Sheridan has also been recently nominated to participate in the exclusive DC MindShare class of 2011.

Jay Garcia, who founded Frederick Maryland based TDG Innovations in 2006, will serve as the company’s CTO. A core part of our growth strategy is consulting services, training, and product development based on the Sencha Touch HTML5 framework,” said Garcia, who recently authored ExtJS, in Action” for Manning Press and is currently authoring Sencha Touch, In Action.” We are excited to be the premier provider of Sencha consulting on the east coast.

The start of Modus is a very exciting development within the rapidly expanding Sencha Touch ecosystem,” said Jeff Hartley, Vice President of Services at Sencha. Jay Garcia and Pat Sheridan are skilled technologists and highly-regarded Sencha community advocates. We believe Modus will show customers directly that HTML5 is the right approach for enterprise mobile applications.”

Modus Create will focus primarily on mobile apps for media, publishing, and entertainment.

Founded in March 2011, Modus Create provide high end solution design for mobile, tablet, and rich web applications. Modus Labs offers training, workshops, and custom learning engagements to empower their clients. More information is available at www.moduscreate.com

Pretend for a moment you have been given an assignment. You are to allow records from a DataView to be moved to an adjacent GridPanel. The rules are as such:

• Users must be allowed to migrate records form the left DataView to the right GridPanel
• After records have been moved to the GridPanel, they cannot be migrated back to the DataView. They can only be destroyed.

The question becomes, how can we do this? If we sit down and think about the first task, migrating records from left to right, we must consider the order of operation that must occur.

• Get a collection of the selected nodes and records in the DataView
• Animate out the row representing the record in the DataView
• Remove the records from the DataView store, all the while capturing a reference to that very record.
• Add the records to the GridPanel store
• Locate the indexes of the newly inserted records in the GridPanel
• Somehow gain a reference to the HTML elements that represent the records in the GridPanel View
• Animate the elements in.

Sound like a lot of work? With Ext JS It’s actually surprisingly easy. Here is the handler for the “add to grid” button.

// This is the handler for the 'add to grid' button
var addToGrid = function() {
    var selNodes  = dataView.getSelectedNodes(),
        selRecs   = dataView.getRecords(selNodes),
        dvStore   = dataView.store,
        gridStore = gridPanel.store,
        gridView  = gridPanel.view,
        gridRowIdx,
        gridRowEl;

    // Loop through the selected nodes
    Ext.each(selNodes, function(selectedEl, idx) {
        // Animate and remove from store after animation
        Ext.get(selectedEl).slideOut('t', {
            callback : function() {
                // remove from DataView store
                var rec = selRecs[idx];
                dvStore.remove(rec);

                // Add to grid store
                gridStore.add(rec);
                gridRowIdx = gridStore.indexOf(rec);
                gridRowEl  = gridView.getRow(gridRowIdx);

                // Animate the newly added row.
                Ext.get(gridRowEl).slideIn('t', {
                    callback : function(el) {
                        el.highlight();
                    }
                });
            }
        });
    });
};

As you can see in the code above, the trick to getting things done immediately after an animation is making use of callbacks, which are methods that are executed after something of interest has occurred. In our case, the animations will execute our callback methods to ensure that everything happens in the proper order.

Here is a video of it working:

There you have it. Adding simple animations implemented in DataViews and GridPanels can enhance the feel for our Ext JS applications, helping make a more pleasant experience for your users.

If you want to see the example visit http://moduscreate.com/examples/566. There you can add/remove records. You can view the page source to see how everything is setup.

Read more.

To understand how Animations, data Stores, GridPanels, DataViews, work, check out my book,Ext JS in Action. You can get 40% off by using coupon code “extjs40″ at checkout.

Like what you’ve read today?

Please register and leave a comment. The best fuel that drives us to write is involvement with our readers .

     The rub with this requirement is that buttons automatically steal focus. One approach is to manually try to manage what input field was last focused, and will have to create all types of spaghetti code just to overcome this focus issue.

    A better approach is to prevent the problem from happening in the first place. This means that we’ll have to somehow intercept the mousedown and mouseup events. In order to do that, you will have to override two methods in the ExtJS Button class.

If you want to check this out on your own, I’ve attached code below. The easiest thing to do is to drop it in any Ext JS page via firebug. Here is quick video demonstrating the override in action.

In that video, we can see that even when mashing on the keyboard and button with the overrides, the focus is retained in the text area. But, you’re probably interested in seeing a real-world use-case.

    Below is a video that demonstrates a very early working copy of module I’m developing, that utilizes the overrides.

In the video above, I am pressing number keys along with clicking on instances of Ext.Button to demonstrate the consistent focus of the input fields on the screen.

The big picture

To solve this application wide, you could create a plugin or a mixin, but I think the best approach is to create an override that injects a new behavior for all Button instances, allowing you to simply set a flag to turn on the behavior with a simple config property.

Below is the code that you can use in your application today to include this behavior.

Read more.

To understand how inline extensions work, check out our article titled “how to extend and override with out creating an extension or override“.

Like what you’ve read today?

Please register and leave a comment. The best fuel that drives us to write is involvement with our readers .

Looking for Ext JS or Sencha Touch professional services?

TDG-i specializes in high-end software development with Ext JS and Sencha Touch. To learn more about who we are and what we do, check out our professional services and about-us pages.

In his blog, Saki has extended upon this pattern, adding variations to your factory methods, affording you greater flexibility when creating your abstract classes.

Below is an excerpt of code that demonstrates a variant to our Abstract pattern as been detailed in his blog post.

To read the article, click : http://blog.extjs.eu/know-how/factory-functions-in-ext-extensions“

Thank you Saki for all of the work that you do, further educating the Ext JS community!

Abstract

The OS X window blind is a very well known user interface (see below). Being that OS X is a “Window management system”, everything you interact with is contained by some window. When the application requires input in a modal fashion, designers are faced with two paradigms: Modal popup dialogue (typically found on MS Windows), or a blind.

Below is an example of a Blind used in the via the save menu of Safari:

Firefox displays typical alert/prompt dialogues using the blinds.

Enter WindowBlinds for Ext JS 3.x

Ext JS 3.x, being a powerful UI framework for the web, mimics a lot of Windows Vista and Windows 7. That said, we think that there is a lot of room for this type of UI widget inside of our Ext JS applications.

Here’s a screenshot:

Download information

Github: here | Online example: here

Introducing Ext.ux.TDGi.HudWindow

This UX largely consisted of modifying CSS and some modification of the DOM from the class itself after it renders.

Click here to see it in action

Download via Github

Below is an image of the TDGi.HudWindow class with an OS X HUD Window below it.

Our WindowDrawer extension allows your Ext JS apps to have OS X-like window drawers. If you have not seen it, we suggest checking it out.

Ext JS Screencast – The dangers of Ext.getCmp() from Jay Garcia on Vimeo.

[donation-can Macpro]