Separate Content, behavior and Presentation

Today the most dynamic thing in this world is the Web. These pages are made of no of things which are categories as presentation, behavior or functional and content. It would be very beneficial  to maintain all these artifacts loosely coupled.

Here is a simple example of keeping separate presentation and functional logic. In a sign in page , user has to enter login name which server will check for availability. Here is sample code

<input type="text" name="loginName" value="Enter Login Name" onblur="checkavailibility"/>

This tag invoke “checkavailibility()” function on blur event. To maintain loose coupling we can rewrite same logic in a java script file as

window.onload="initPage";
function initPage(){
    document.getElementById("loginName").onblur="checkavailibility"
}

Here initPage function get called on onLoad page event. This function access page element and set onBlur property . This way we can separate presentation and functional logic.

Comments

Post a Comment

Popular posts from this blog

State Design Pattern by Example

Image
State pattern falls under the category of Behavioral patterns. State design pattern comes in picture when a system’s behavior is depends on its own state or some other resource’s state. If an implementation is depends on the states, we end up with snarl of conditional statement every where in code. A very neat approach to deal with such situation is to separate out every state’s behavior and use them where ever they are applicable. The state pattern allows an object to alter its behavior when is internal state changes . The object is appeared to change its class. State pattern is a way to implement the same. Class Diagram : As above class diagram shows, System class holds state instance. As state of system changes , all handle request delegated to respective State’s concrete implementation. Example : Have an example of Vending machine. Vending machine has following states No Coin Inserted Coin Inserted Dispensing Empty Following diagram explain behavior...
Read more

Eclipse command framework core expression: Property tester

Image
Addition to Eclipse command framework series, this post explains use of property tester to control command’s enable/visible properties. In earlier post we have tried declarative way to achieve same thing but property tester gives us more control. Property tester is associated with, tester class which implements PropertyTester.java, a namespace and set of property which it supports. We can refer this property tester using its namespace + a property name. It gives you call back to test() method with property name as parameter inside property tester class. We can configure property tester for type of input parameter. Here is sample declaration of property tester extension point < extension point ="org.eclipse.core.expressions.propertyTesters" > < propertyTester class ="com.example.advance.cmd.EditorTester" id ="com.example.advance.cmd.propertyTester1" namespace ="com.example.advance.cm...
Read more

Composite Design Pattern by example

Image
This post explains Composite design pattern with an example. When to use ? – Use Composite pattern when you have treat a collection of objects as they were once one thing. With Composite design pattern it is very easy to simplify operations over collection data structure. It reduces complexity of the code required if you were going to handle collection as special case. How to Use? - The Composite pattern consist of Component, Leaf and Composite Classes as shown below class diagram Component – Component declares the common interface that both the single and composite nodes will implements Leaf – The leaf class represent the singular atomic data type implementing he component interface.     Composite – Composite is an abstract entity which declares common functionality which are needed by concrete implementation for handling collection data. An Example -   Item.java public interface Item {     public double getPrice(); ...
Read more