Tag Archives: Flex

How to create basic HTML UI components like Adobe Flex?

Lately, I was talking to a friend of mine who used to be a Flex (RIA) developer like me, in the middle of conversation he asked me a simple and straightforward question like any normal Flex developer could ask,

“ How do you develop UI components like Adobe Flex / AIR / AS 3? Remember we use ItemRenderer / Skinning / AS 3 custom components / event listeners / binding?” … ah… etc… etc…

In my previous post, I have shared my experience about the transitions from closed web to open web with details including several frameworks and libraries that could help any developer to be armed with extensive skills on Front End Web development using Javascript. This post would address from a low level with pure JavaScript (little bit of jQuery for DOM manipulations) and CSS, in other words, how to take advantages of JavaScript Prototype and create UI components.

Let’s start with a simple form, say a login form with two fields and submit button. Like in the screenshot below.

Login UI Component Example
Screenshot of the UI Component

Some concretes before I go in detail,
#1: In Adobe Flex, Application tag is the root of the entire application, which holds several UI components with various ItemRenderers and skins. In HTML, HTML tag is the root of the entire page, however, BODY tag holds all the UI elements.

# 2: In Flex, generally many people uses Box, HBox, VBox, HGroup, VGroup, some times Canvas, etc. for creating component as shown above (keeping UI and Logic separate from main Application). Likewise in HTML we can create components mainly based on DIV and Span elements and attach (append) it to the main application / page / parent (DIV) element by accessing the placeholder (like Component declaration in Flex with several properties).

# 3: In Flex, component UIs and logics usually kept in MXML or AS files; in HTML it can be in HTML Template file or in JS file. In case of HTML Template, we need some JS templating engines like Mustache, EJS, Underscore, HandleBars, Jade and more if you want to keep your UI (view) in separate HTML file. However, one good news is HTML5 has new feature under Working Draft called “Web Components” http://w3c.github.io/webcomponents/explainer/ . In this post, the focus is more on writing UI and Logic in separate JS file.

Having these concretes in place, let’s dive into the code directly. Like I said in concrete 1, here is the base / main page going to hold all the components. Oh oh, I forgot to mention one thing, in Flex every component goes through its own life cycle called “Component Life Cycle” similarly in HTML world, the life cycle (Parsing, Rendering and Painting) will be entirely taken care by the browsers. In other words, the component creation is loosely coded unlike Flex / AS3.

As you see in the code snippet above, there are two instances (components) having unique identifiers. Through these identifiers the components are going to be attached (appended) to the main page. This is a very straightforward declaration of HTML elements.  As the base is ready, it’s time to write some nifty JS snippets for adding the UI and logic.

Declaration of the component LoginControl is given above . There are three variables, loginData to hold the data model, loginUI to hold the UI (view), and a name to represent the name of the instance. This is a simple approach for declaring the view (UI elements of the component). In my next post hopefully I will be writing about the Template Engine approach.

Through LoginControl.prototype you can access the different elements of the component and add the functionality on top of it. This is basically to extend the functionality of the class. Here, I wrote a function loginInitialize which helps binding all the events and attaching the UI via placeholder parameter jQuery object.

LoginAdapter to act as a Controller to post the data to the server upon submission and handles the result. You can process the results and write the response in whichever way you like it.

So once the page DOM is ready (Loaded completely) the components will be added, in our case two Login Controls namely instance1 and instance2. Function loginInitialize() handles the view and logic attachment to the source parameter. In other words, the element acts as the holder of the component is passed as a parameter to the function along with the instance alias name.

All these code snippets are available in my Github Demo page. Feel free to use it. 🙂

Flex to HTML 5 – My Thoughts

Hey folks… It took very long time for me to set up my blog site back on block (and my laziness too :D)… So here is my first post in 2013.

As most of you know me, I’ve been working as a Hard Core Flex Developer for the past few years, however the latest buzz around the block is HTML 5 and it is getting momentum nowadays, so thought of post something useful to the people like me who want a smooth transition from Closed Web (Flex) to Open Web (HTML5). This has given me a great chance to explore the wide variety of open web technologies and frameworks including the some which I had experience on.

When we talk about Flex to HTML 5 application migration or portability, the first thing comes to most of the developer’s mind is “INSTANT CONVERSION TOOL”, meaning MXML to HTML and Action Script to Java Script and make them work as it is across the browsers, sounds simple, isn’t it ??? But the answer is difficult. The output may not give the complete set of features from the actual Flex Application or may not convert based on the complexity of the application, but some extent the conversion could happen a bit (say 1%). So what about Flex / Flash developers who have been working so long and look for the opportunity to move to a platform where he / she can survive for the future? There is been a number of questions floating around the Flash Platform community over the last 15 months on transition, supports and features and so on and on… During the early stage of the movement the community has come up with many conversion tools and frameworks, to name some – SWIFFY, Wallaby, FalconJS, Jangaroo…

            However, talking from enterprise application perspective the code should adhere to many things mainly Standards, Portability, Feature Persistence and Ease of Use Development, but those conversion tools have failed to achieve these essential things. So when it comes to migration preserving every aspect of the existing application we need a powerful framework to complete the migration without any hurdles. At the same time, the framework should allow the developer to use their existing skills – meaning very small learning curve.

Flex_to_HTML5

So far, we talked about the facts behind the migration / conversion. Based on my experience, reading articles, and analysis I have come up with some set of findings

Discover The Features

  • Connectivity needs

HTML 5 has great advantage in working offline because of the introduction of Offline Data Storage and Local Storage features. Look for the existing connectivity based features in Flex Application and go for it.

  • Code

Code wise, moving from Flex to HTML5 takes some significant analysis, which includes the complexity of UI components, models, delegates, services, and data workflow across the application.

  • Usage of Assets (images, sounds, videos, PDFs…)

Again, it depends on the application’s new design whether we can go with existing set of assets or not. Generally, people prefer new design. So, obviously one cannot use all the assets from the existing application. In other case, if the same design is going for migration, one can use existing set of assets. However, most of the Flex applications have huge number of assets in .SWF format (to reduce the size and increase the quality), in this case new assets creation will be the only choice. Here, if the source (.fla) file is in place it will reduce some significant amount of time in re-creating all the assets from scratch.

  • Architectural dependencies

If the Flex application is developed using some MVC frameworks like Parsley, SWIZ, Mate or Cairngorm, then the amount of effort in analyzing and moving the code would take more time. We have many options to migrate such MVCs. (some of them are listed below). One important point to note, it requires significant knowledge of the existing application architecture (say an Architect or Tech Lead).

Availability
 Available JS frameworks which supports the results of discovery,

CreateJS A suite of Javascript libraries & tools for building rich, interactive experiences with HTML5. Has excellent set of JS Libraries to manage assets, so when it comes to managing assets Create JS would be the better option for it. It has Sound JS for Audio files, Preload JS for loading assets with various conditions, Easel JS for manipulating Canvas objects including SVG, Tween JS for handling animations and ZoE – A stand alone tool for exporting SWF animations as EaselJS sprite sheets that can be used in Canvas and CSS. Since it is now a part of Adobe Edge Tools and Services, it will definitely grow faster and would be the better option for various web applications.

Sencha (Ext JS) — Ext JS is a cross-browser JavaScript library which enables developers to use MVC architecture when building their app while also providing some very helpful features and widgets that can accelerate development timelines.

    • Ext JS enables apps to leverage features like infinite scrolling and widgets for high performance grids, trees and menus. Flex developers can easily adopt the migration because of the usage of components and models as same as Action Script and MXML.
    • As of now, this is the best framework available for moving applications to HTML 5. It has numerous features comparatively same as Flex, and more over the problem with other frameworks are handling server side data especially binary data, but the upcoming version of ExtJS has powerful feature for transferring the same binary (AMF) data between client and server.So the amount of effort in migrating the code when it comes to client-server communication will reduce significantly. Due to this feature, it would be the best ever option for huge data transfer applications. No other framework has this feature as of now, however AMF.js has some set of features for binary data transfer (can use this for low budget application). After Flex, ExtJS community is growing. And moreover it has industry leading support.
    • The best testing suite JASMINE JS is part of this framework, makes the testing of application is easier than ever. Alternatively, we also have QUnit, JSUnit… for testing.
    • It has in-built Build JS files, which is highly essential for enterprise application. Since I everyday interact with Build Engineers here, I know the importance of Build Scripts. Like Ant and MAVEN build frameworks, it also has super cool features.

Sencha Touch — Sencha Touch, the mobile counterpart to Ext JS, is a web application framework intended for developing applications that look and feel like native applications on supported mobile devices. Its approach differs significantly from jQTouch and jQuery Mobile: instead of enhancing pre-existing HTML, it generates its own DOM, based on objects created in JavaScript. It provides an extensive library of custom user interface components, optimized for touch input; transition effects; touch and gesture events; application data interchange (AJAX, JSONP, YQL); data bindings; and offline storage. Like jQuery Mobile, Sencha Touch integrates well with PhoneGap.

jQuery UI — jQuery UI builds on jQuery to provide user interface behaviors (including drag and drop, resizing, selection and sorting); animations and transitions; advanced effects; and high-level, themeable user interface controls (e.g.: accordion, auto-complete, date picker, tabs, etc.).

Bootstrap UI – One of the powerful UI frameworks for building excellent User Interfaces with super simple customizations. This would be the better option for application which is mainly targeting User Interfaces.

Kendo UI – Kendo UI is JQuery-based framework for rich UI, builds HTML5 apps that look native on any device, and builds desktop and mobile applications for any browser. Like Sencha ExtJS, this framework has numerous UI components for different set of devices. And moreover this framework is part of TELERIK (one of the leading UI components kit in the market).

jQuery Mobile — jQuery Mobile is a cross-platform, cross-device, cross-browser user interface framework with strong industry backing from tech titans such as Adobe, Mozilla, Nokia, and BlackBerry. Through progressive enhancement (using CSS3 and JavaScript) it enhances basic HTML content and form elements into a unified set of touch-optimized, accessible, platform agnostic, theme-able controls. Built on jQuery and jQuery UI, it adds Ajax-based page loading and navigation; touch and gestures events; mouse vs. touch event abstraction via virtual mouse events; and integrates well with PhoneGap. It supports all major desktop browsers and mobile browsers alike.

jQTouch — jQTouch is a jQuery plugin from Sencha Labs targeting mobile web development and offering native animations, navigation and history management, and user interface themes for mobile WebKit browsers such as the iPhone, Nexus One, and Palm Pre. While jQTouch is well documented and easy to use, development has all but stopped and initial sample applications show that it is a bit buggy and even the sample applications has some performance issues.

jQuery — Possibly the most popular JavaScript library in use today, jQuery provides concise, elegant syntax for DOM element querying, traversal and modification; CSS manipulation; event handling; effects and animations; and Ajax. It also serves as an extensible host for a vast and growing array of third-party plugins. In addition to this, jQuery 2 would be our best option for HTML5 applications.

KnockoutJS — Knockout simplifies the development of complex web application user interfaces by applying the Model-View-View Model pattern. It offers declarative bindings in the DOM; automatic wiring of these bindings to their backing view models; automatic UI refresh based on observable and dependent observable model properties; easy extensibility through custom bindings; and the ability to generate sophisticated nested UIs from templates dynamically based on model data. Knockout integrates with many popular web frameworks, supports all mainstream browsers, and allows developers to use their choice of template engines.

Backbone.js — Backbone.js is a prescriptive web application framework that defines a structure consisting of JavaScript-based models, collections, and views. It offers models with key-value binding and custom events; collections with a rich API of enumerable functions and change notifications; views with declarative event handling; history management via a client-side URL router built on the HTML5 History API; and an implicit API for client-server data interchange via RESTful JSON. It has minimal dependencies and optionally integrates with jQuery or Zepto. It has been used to power the new LinkedIn Mobile app, and an increasing number of web applications such as MetaLab’s Flow, FourSquare, Groupon Now!, Basecamp Mobile, the new Pandora website, TileMill, and more.

Angular JS — Angular is a web application framework similar to KnockoutJS. It provides declarative UI templates; two-way data binding; implements the MVC pattern; integrates with RESTful JSON services; and offers dependency injection. Developed by Google, its ambitious goal is to re-imagine HTML markup as if it had been originally designed with dynamic applications in mind. Like KnockoutJS (and unlike Sencha Touch), it does not provide a library of user interface controls, but instead focuses on generating and updating HTML from templates driven by application data. Google’s favorite framework now.

Google Web Toolkit – GWT is a web development toolkit for developing and debugging complex web applications in Java and cross-compiling that code to JavaScript for deployment. Its stated goal is “…to enable productive development of high-performance web applications without the developer having to be an expert in browser quirks, XMLHttpRequest, and JavaScript.” Google has used GWT internally to develop their own products, including Google Wave and the new AdWords. GWT is particularly well suited for use with Google App Engine, Google’s cloud computing platform as a service (PaaS) for hosting web applications.

Yepnope JS – Yepnope is an asynchronous conditional resource loader that is super-fast, and allows you to load only the scripts that your users need. For critical asset management purpose this would be the ideal option.

JSCoverage – JSCoverage is a tool that measures code coverage for JavaScript programs. Code coverage statistics show which lines of a program have been executed (and which have been missed). This information is useful for constructing comprehensive test suites (hence, it is often called test coverage). This would be useful for application which follows strict coding standards and conventions. Alternatively, we also have JSLint for code coverage.

In Shortlist

  • Sencha Ext JS
  • Adobe Edge & CreateJS
  • jQuery
  • Knockout and Angular JS
  • Backbone JS
  • GWT
  • KendoUI
  • Bootstrap UI
  • Yepnope JS and more …

So in conclusion, we have many options to go with for migration. However, choosing frameworks and technologies is purely based on the set of features, the implementation of client-server communication available in the existing application and last but not least developer’s learning curve and their skills (costly as it goes).

Disclaimer: The views / thoughts expressed on this blog are entirely mine.

My first foot-print in Augmented Reality (FLAR Toolkit experiment)

As discussed in my earlier post Augmented Reality from Adobe Flash Platform, I’ve successfully created my first Augmented Reality application with Carousel Effect using Flash 3D framework.

Here is an image of AR application,

If you closely observe the image, you can see the Carousel effect with my image playing on top of the paper( the illusion, you can see this in a Web Camera).

The Application will read the pattern in a paper and draw the Carousel Effect in the target. If you see at the left hand side of Carousel, there is a Red Color arrow button which is used to operate the Carousel.. If you click that Red Color arrow Button it will rotate the images in Clock Wise…

Little confused… ???? …  ah ah…  😉  Application  details and work flow in my next post … Stay tuned for more cool info…  😉

MapQuest – Map ActionScript API for Flash and Flex

Hi Flex Bees, we got an interesting API for customizing Maps in our Map based application. This will give more and cool features to our apps.

MapQuest is committed to providing the best mapping experience in the Flex environment and are continuing to innovate our AS3 and Flex toolkits.  MapQuest provides not only mapping, but industry-leading geocoding, routing and spatial search capabilities, all within easy-to-use Flex components that allow for drag and drop creation of your mapping interface.”

Sample screenshot from TourDeFlex

Interesting news is we’ve this API for .NET / JAVA / JavaScript as well. Please checkout the resource page for more details.

Useful Resources,

Developer Documentation

AS3 Flex  – Samples and Tutorials

The MapQuest Platform is available to everyone for free (Free Edition).  The Enterprise Edition includes everything available for free, plus account management, live support, service level commitments and  enhanced data offerings.  If you wish to try the full power of the Enterprise Edition before buying, A Developer License is also freely available and can be accessed here.

Premium Data Sets are also available with MapQuest Platform Enterprise Edition, for both display and search.  Datasets in North America include business listings, neighborhoods, parcels, zip codes, counties, demographics, school districts and school points.  See more at http://platform.mapquest.com.

Hope this will be useful . 🙂

Great showz @ Adobe Online Creative Festivals

Once again Adobe has shown and opened it’s awesome products demonstration with cool tips and tricks among the regions like India, South East Asia, China, Japan, and …  some… 🙂

This Festivals held on Feb 23, 2010 in Online through Adobe Acrobat Connect with huge number of Audience across the regions.  There were two Seminar rooms, a Chat Room, a Gallery and a Adobe Store had created to make the festival in a great and much interactive way.

  • Room I for Photoshop and other related suites (Design Premium Suites).
  • Room II for Flash,  Web2.0, Flex, Action Script and Photography.

Since it was the parallel tracks, I have attended only the Seminar Room II sessions.

  • A Chat Room to chat with Adobe Experts for instant doubts and queries from the sessions.
  • Gallery – You can upload your own creativity stuffs created with the help of Adobe Products. It can be an Audio, Image or SWF. Great way to promote yourself..
  • Adobe Store – good opportunity to become a Ambassador of Adobe India.  I simply subscribed since I’m a great fan of Adobe. :mrgreen:  If god wishes, I will become a Ambassador of Adobe India, not an easy task but have to work hard.. Let’s see..

This is the Adobe Online Screen on Creative Festival

Home Screen

Sessions @ Seminar Room II

Vyshak Venugopal sessions

AS2.0 and As3.0

Web 2.0 Session

These two above sessions are my favourite one 🙂  .. So I simply taken screen-shots. Oh ! oh !..Other sessions were also great .. But I’ve already had some experience with other session demos, so I didn’t concentrate much on that.
1. Flash CS4 essential Tips and Tricks

2. Fireworks CS4 and Dreamweaver CS4 for Web2.0

3. AS2.0 and AS3.0 comparison coverage

He spoke a lot about Dreamweaver CS4 , Fireworks CS4 and Flash CS4 for creating Web 2.o apps. I had a great time by knowing some cool tips and tricks from these two sessions.  He also shared some clear and confined details on Action Script 2.0 (AS2.0) and Action Script 3.0(As3.0), some doubts were cleared from my popping mind .. If you would have attend these sessions, definitely you would have been enjoyed on these products ..

Harish Sivaramakrishnan session

I. Flash Catalyst

Oh! Oh! 😉  .. Coming to Harish’s session, I had attended many sessions of Flash Catalyst by him.. All are pretty unique and clear demos.. Keen to watch his space for the upcoming secrets from Adobe. He said we may expect a full version of Flash Catalyst and Flash Builder in this year. 😉 How great ! ! ! Can’t wait Adobe..

Bhende session (I forgot the full name 🙁  )

I. Tools for Photography

This is the cool and nice session for Photographer, if you would have attend this session, you would definitely try to become a Photographer .. not joking guys..  He has shown some cool tips/tricks and work flow of Photoshop, LightRoom and Bridge CS4.  LighRoom is the much needed product for Photographers.

I knew you’re gonna start using Adobe Suites.  See you with another awesome suite experience..