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.
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.
|
1 2 3 4 5 6 7 8 9 10 |
<body> <!-- Main Container to hold Grid and Navigation Pad --> <div id="status"> </div> <!-- To hold instance 1 UI --> <div id="instance1"> </div> <br/> <!-- To hold instane 2 UI --> <div id="instance2"> </div> </body> |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
function function LoginControl() { this.loginData = { username:'', password:'' }; this.name = ''; this.loginUI = $('<div class="login-ui"> \ <form name="loginForm" class="login-form"> \ <div class="form-fields"> \ <label class="title"> User Login </label> \ <div class="form-field"> \ <input type="text" class="input-text username" name="username" placeholder="User ID"/> \ </div> \ <div class="form-field"> \ <input type="password" class="input-text" name="password" placeholder="Password"/> \ </div> \ <input class="btn submit" type="submit" value="Login to your account"/> \ </div> \ </form> \ </div>'); } |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
LoginControl.prototype = { loginInitialize: function(placeHolder, name) { var currentInstance = this; var view = currentInstance.loginUI; currentInstance.name = name; view.children('.login-form').submit(function(event) { if(currentInstance.loginData.username === '' || currentInstance.loginData.password === '') { alert (currentInstance.name + ': Input fields should not be empty'); } else { LoginAdapter.login(currentInstance); } event.preventDefault(); }); view.find('input[name=username]').change( function() { currentInstance.loginData.username = $(this).val(); }); view.find('input[name=password]').change( function() { currentInstance.loginData.password = $(this).val(); }); placeHolder.append(view); } }; |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
var LoginAdapter = { loginServiceURL : 'api.yoursite.com/login', loginHTTPMethodType : 'POST', login : function (instance) { var loginData = instance.loginData; /* Client Side Processing for demonstration*/ if(loginData.username === 'user' && loginData.password === 'pwd') { $('#status').text(instance.name +": Succeeded"); } else { $('#status').text(instance.name +": Failed"); } /* //Server side processing $.ajax({ url : this.loginServiceURL, type: this.loginHTTPMethodType, data : loginData, success:function(loginResponseData) { console.log( loginResponseData.loginStatus ? 'succeeded' : 'failed' ); }, error: function(ajaxRequest, errorDetails) { console.log('Some error has been occurred'); } }); */ } }; |
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.
|
1 2 3 4 5 6 7 |
$(document).ready(function() { var myLoginControl = new LoginControl(); myLoginControl.loginInitialize($('#instance1'), "Instance 1"); myLoginControl = new LoginControl(); myLoginControl.loginInitialize($('#instance2'), "Instance 2"); }); |
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. 🙂