Model Driven Development in Adobe RIA and Eclipse RCP new thoughts

I had a chance to attend Adobe Dev Summit 09 Hyderabad. Among the plethora of Adobe "hoo-hah" products for the new age developers, a very good demo caught my attention. Model driven development in Adobe. Adobe is investing a lot in rooting themselves in the enterprise arena by their Adobe Livecycle stack.

The product has a LiveCycle Workbench ES to integrate with Flex studio which is an Eclipse based development environment. RIA has find its way to enterprise as Web 2.0 has moved from a hype to a standard development use case.But for me, the attention grabber is the powerful Eclipse development environment.More than an IDE, it is a wonderful platform for developing powerful applications with its handy plug-in architecture and widgets.From simple RSS readers to Rational platform, eclipse has its magic hand.

RIA for desktop is AIR.If one develops app in AIR we wont be able to use native widgets, as the runtime provides them.But we can access native windows . Also from the AIR2 next api release it is possible to run native applications from AIR.

What about RCP ? It has SWT runtime component uses native widgets..We may think most of the RCP apps will look like the dry eclipse IDE look and feel... Nope !



See the look of Lotus Domino with the power of custom skinning. Lotus Software has been purchased by IBM and has put a lot of resources to continue the development of different Lotus components (such as Domino and Notes). The UX feel of applications based on Eclipse 4 would be amazing.The upcoming e4 architecture of Eclipse is a promising space for next generation eclipse based applications.User experience guidelines for IBM Lotus rich client applications and plug-ins is here


There has always been a rivalry between desktop and web applications. Both of these genre of applications fight to conquer the business space farmed across the computing world.Web apps want to be in desktop and desktop apps want be in we.Its a fame race. RCP has got a wide enterprise users.The choice of RIA or RCP depends on use case.GWT and Flex in web are good in data visualizations. But 2D and 3D will require the power of native processors. The RCP could make use of Java 2D.There are a lot of solutions in market. More choice more pain ! So I may write about them later.

In the demo (Adobe Max)




rich data model can be modelled and exposed as a crud application with a rich UI
Similar presentation was done by Sujith Reddy where the presentation slides he shared

In Eclipse the model driven development is accomplished using EMF - Eclipse Modelling Framework.It provides an API to access the models. Access models by reflection and dynamic creation are possible.As it goes with RCP,it is like an UI for domain objects.The MVC architecture is done through EMF.It can make use of hibernate, JPA or eclipse link.

As seen in the demo, Flex became the UI of the model.

But there are developments going on in eclipse RCP framework. As Flex SDK is open source these eclipse guys wrote programs to create java for flash !

E4 ?

e4 is the incubator for Eclipse 4.0, to be released 2010 built on current Eclipse and OSGi technology as a solid foundation.

Use of web styling technology (CSS), allows the presentation of user interface elements to be infinitely tweaked and reconfigured without any modification of application code.

This is bringing Eclipse runtime technology into the JavaScript world, and enabling
software written in JavaScript to be executed in the Eclipse runtime.

E4 comes with a framework for defining the design and structure of Standard Widget Toolkit (SWT) applications declarative.This eliminates writing of repetitive boilerplate SWT code, thus reducing development cost, improving UI consistency, and enabling customized application rendering. Plug-ins are coded in Java. A typical plug-in consists of Java code in a JAR library, some read-only files, and other resources such as images, web templates, message catalogs, native code libraries, etc

E4/Eclipse Application Services -Eclipse APIs are refactored to services which should be offered as separate, independent APIs, so that clients can make use of them without having to buy into all of them. Structuring them as individual services also makes it easier to use them from other languages / environments such as e.g. JavaScript. In service programming models the consumers receive dependencies via dependency injection. This theoretically allows application code to completely eliminate its dependency on a particular container technology, thus enabling greater reuse.

Modeled UI - The E4 user interface is model based; everything that appears in the presentation is backed by a representation in the UI Model.

To that end, e4 is investigating bringing both the benefits of Eclipse to the JavaScript world (modularity, extensibility, and tooling), and JavaScript components into the Eclipse desktop environment.OSGi modularity makes integration of JavaScript Bundles easier.

Use of CSS and declarative styling a pluggable styling engine is used to customize the fonts, colors, and other aspects of widget presentation.

SWT Browser Edition- zero install widgets like RAP in which a JavaScript library (qooxdoo) is running on the client, rendering widgets that are manipulated from Java running on the server or Java is cross-compiled to Flex (ActionScript), Dojo (JavaScript) and Silverlight (.NET) technologies which is a "GWT-like" (Google Web Toolkit) approach.

This shows E4 SWT Java for Flash




More demos

Workbench - perspectives, toolbars, menus, parts. The e4 workbench greatly increases flexibility for application designers by providing a formal model of the elements that comprise an instance of the workbench.

XML UI for SWT (XWT), is a framework for writing SWT widgets declaratively in XML. In XWT, the complete structure of an application or widget hierarchy is expressed declaratively, along with bindings of the widgets to some underlying application model or to Java-based call-backs implementing the widget behavior.

More RCP apps

A peek into metaprogramming

Metaprogramming is about programming acting on other programs. Modifying the programs on the fly. Consider a compiler which is a program written to act,parse,execute the code written, analyzed on grammatical domain of its own lexical structure. It interacts and compose programs of small code components like importing required classes, #define macros, message passing etc. when we are to discuss about compilers, they are translating the source to it machine representation. In meta programming, its about source to source and machine independent. In C++, there are templates which is a data object for a set of programs,generates the code that is executed. The compilers use the program analysis method of type system, a check for the type correctness.an oracle, that is,some method for checking whether the system under test has behaved correctly on a particular execution. It is the assertions embedded in the code.Many programs read an input sequence and produce an output sequence, maintaining a logical correspondence between the input and output structures. When the type come into picture in a dynamic way,the system needs to be intact. This is being handled by the compiler itself as it asserts the type. Usually a program will have a structure ; a syntax tree,like an AST.The meta programs can manipulate these representations. The abstract syntax can then be used as an intermediate language, such that multiple languages can be expressed in it, and meta-programs can be reused for several source languages. Functional languages can have polymorphic higher-order functions take other functions as arguments and returns functions, treating functions as values. Java uses AOP, which introduces pointcuts to a program that can then be modified at runtime (using bytecode manipulation etc).

Take, Javascript, we can attach additional properties to an object ("expando").


var testObject = {};
testObject.variable1 = 'string';
testObject.variable2 = 3;


The type system is dynamic.

It has functions as first class objects.


testObject.functionA = function(){};

Function can return other functions as well as passed in as parameters.


testObject.functionC = function(functionA){ return functionB(){};};


Closure occurs when a function is defined within another function,and the inner function refers to local variables of the outer function. Currying a function is modified with each call so that the arguments passed into it become part of the function which will be helpful in partially evaluating functions. It is implemented using closures.

for the simple stupid code ,


function show(){

alert(testAB('A','B'));//AB
var testB = testAB('A');
alert(testB);
alert(testB('B'));//AB

}

function testAB(a,b){
if (arguments.length < 1) {
return add;
} else if (arguments.length < 2) {
return function(c) { return a + c }
} else {
return a + b;
}
}

In Groovy,


def testAB = { a, b -< a + b }
assert testAB('A', 'B') == 'AB'// or testAB.call('A','B')

def testB = testAB.curry('A')
assert testB('B', 'World') == 'AB'


In Groovy,each object has it is own meta class defines the behavior of any given Groovy or Java class.Alter the metaclass (getMetaClass()) and change the object's behavior at runtime. A special MetaClass called an ExpandoMetaClass that allows dynamically adding methods or properties.


String.metaClass.echo = {->
return "This is an echo"
}

println "Test".echo() //will print This is an echo.



String is final, even methods can be added !

The behavior of program changes with a concise code.Instead of test driven development,the methodology of behavior-driven development do follow test-first code-writing. In this case tests are considered specs, or "expectations" about how code will behave. Its is checking what code should do, than what it had done. To understand the concepts and practical uses, need to explore more

markItUp! a jQuery plugin

I saw a very cool html editor plugin called markItUp!, which is a JavaScript plugin built on the jQuery library. It allows us to turn any textarea into a markup editor.Even our own Markup system can be easily implemented.It enables us to quickly modify any standard TEXTAREA within our page into a powerful markup editor, It’s so simple that instantiating the editor is as easy as:

$('#html').markItUp(Settings);

settings is a json defining the html settings for parsing text area - like shortcut key mappings,markup sets etc


For more features
http://markitup.jaysalvat.com

Develop an Open social application in 60 seconds

Open social application development made a giant leap.An eclipse plugin that eases the development of opensocial apps.I have written about open social applications before and I had a chance to work on it.Apache shindig is the initiative to develop a SNS container for application development and testing.I would say OSDE plugin developed by Yoichiro Tanaka rocks!! It uses apache shindig and hibernate for a dynamic development, so the developer can create a single application for different data models.As apache shindig provides java REST support, the application development will become more extensible.The database packaged with the plugin is H2(a Java SQL database).Before this plugin came, we had to develop and run the applications iniside a sandbox which was really tiring.This plugin has features of wizard like development for both javascript widgets and Java REST client applications.We can have our own custom social data which can be easily persisted due to the excellent plugin architecture.So I tried to develop a simple application ...

After the plugin is installed create a new OSDE project


Specify the gadget.xml and the API specs etc


For the development we need to run the apache shindig in the background.



To have a custom social data create people and add relationships between them.





Write a simple gadget ... (templates can be generated by the plugin if needed)
----src-------


<?xml version="1.0" encoding="UTF-8" standalone="yes"?><module><moduleprefs author_email="harisa@pramati.com" description="A friendly os app" title="Friends"><require feature="opensocial-0.8"><require feature="dynamic-height"></moduleprefs><content view="canvas" type="html">

<!-- Fetching People and Friends -->
<div>
<button onclick='fetchPeople();'>Fetch</button>
<div style="margin-left:20px;">
I am ... <span id='viewer' style="background-"></span><br/>My friends are ...
<ul id='friends' style="margin-top:5px;list-style:none;margin-left:75px;"></ul>
</div>
</div>
<script type='text/javascript'>
function fetchPeople() {
var req = opensocial.newDataRequest();
req.add(req.newFetchPersonRequest(opensocial.IdSpec.PersonId.VIEWER), 'viewer');
var params = {};
params[opensocial.IdSpec.Field.USER_ID] = opensocial.IdSpec.PersonId.VIEWER;
params[opensocial.IdSpec.Field.GROUP_ID] = 'FRIENDS';
var idSpec = opensocial.newIdSpec(params);
req.add(req.newFetchPeopleRequest(idSpec), 'friends');
req.send(function(data) {
var viewer = data.get('viewer').getData();
document.getElementById('viewer').innerHTML = viewer.getId();
var friends = data.get('friends').getData();
document.getElementById('friends').innerHTML = '';
friends.each(function(friend) {
document.getElementById('friends').innerHTML += '<li>&#187;' + friend.getId() + '</li>';
});
gadgets.window.adjustHeight();
});
}
</script>

----src ends---------

Run the application

Gadget --->


Cool... Its simple. But this plugin will be really useful when we develop the complex applications and aiming for multiple containers supporting open social api.

More ....
opensocial-development-environment
screencasts
youtube

UI redress vulnerability

The hot trend that catched my interest in web application security is clickjacking a.k.a UI redress vulnerability.It is a vulnerability in the DOM model of web browsers.According to a bug reported in 2002 on mozilla - http://bugzilla.mozilla.org/show_bug.cgi?id=154957 where the browsers allow transparent iframes to be rendered.Most browsers do. So any crooked head use this idea to show an iframe which is transparent one "over" his site, he can make the visitors to click the buttons in the pseudo web pages.When the poor user clicks , he might be clcking on a advertisements.. (click frauds).The innocent user will be using the buttons in the malicious web page even though the site in front of him is urging him to do a harmless action ! The web page might be having different iframes... Now a days facebook apps, opensocial apps are common around the web.So we might be clicking hidden buttons on the hidden iframe!!

Some can spy on you .How ? Its simple. If we have a web cam,microphone , it can be accessed by adobe flash if we allow to do so.So if the site is having a hidden iframe and the useris unknowingly clicking the allow button to leak your personal world to web.Anyway adobe has resolved the issue in flash player 10.

http://www.adobe.com/support/security/advisories/apsa08-08.html

More details
http://ha.ckers.org/blog/20081007/clickjacking-details/

Solutions ?

1.window.top != window to inhibit rendering, or override window.top.location.
if if (top != self){ top.location.href= location.href} which is iframe-breaker

2.re-authentication on all ui actions (not practical!!)

More on Google's solution(by famous hacker Michal Zalewski )

http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2008-September/016284.html

If you use Noscript or disable javascripts etc the clickjacking can be prevented.Even then most browsers wont disable IFRAMES.

More
http://www.gnucitizen.org/blog/more-advanced-clickjacking-ui-redress-attacks/
http://hackademix.net/2008/09/29/clickjacking-and-other-browsers-ie-safari-chrome-opera/
http://www.cgisecurity.org/2008/10/interview-jerem.html