Archive for the ‘Projects’ Category

Flex Framework for SalesForce Apps- Part 2 The Framework

September 9, 2010

In the last part we ‘ve looked at  basic terminology its time to take a deep dive into the architecture now. Just before we go on there is one small disclaimer here:  This is not a tutorial on how to integrate flex with salesforce, you can find a bunch of them every where, this one is to understand ways in which you can architect an application to leverage the existing arrangement.

Now that we are even, lets look at the framework, it is based on existing Rapid Connect (thank you, Abdul Qabiz for the name) framework that we use extensively and  uses 2 principles from Bruce Lee’s JKD.

  1. Use Lesser Resources (Keeping it simple)
  2. Tailor make it to your requirement

Like JKD which is a fighting philosophy which combines various methodologies (best of all worlds) we are going on a similar approach in taking best of existing framework/micro architectures and simplifying it greatly. “If its not simple, its not right.”

The core of the Framework is a simplified version of any MVC framework that you can think of, uses existing classes from the flextoolkit provided by SFDC to manage commands and responders (ala Cairngorm) and reaches them using Flex’s event propagation capability (any DI architecture like mate, swiz…) and coupling this with the requirement to push data from a non UI class to use a GenericEventDispatcher which I described in an earlier post. You may want to use this or may not want to user this.

It uses simple MVC approach:

MVC in Flex

MVC in flex regardless of the micro architecture you use leverages 2 major Flex principles.

1. Event Mechanism (invoke controller)

2. Concept of Binding (Model updates views)

However, this is a 10,000 feet view as we go deeper there are specifics and intricacies that are involved. Here  we take a closer look at the architecture we are using and then define each of its entities and see how it all comes together.

Rapid Connect for SalesForce RC4SF (Yes that’s what we are going to call it, at least for now) looks like this:

Rapid Connect 4 SalesForce

Rapid Connect 4 SalesForce

The Entities here are:

1. The View: is any UI component, typically an MXML one which can dispatch an event (with bubbles set to true)

2. The Controller: is an entity that listens to the events coming from the view and handles them

3. The AsyncResponder: is a class which is something like a command class in Cairngorm earlier versions however it uses the salesforce AsyncResonder instead of using an interface and overrides the result and fault method (Here you can decide if you want to call the service from here or you want controller to handle that part. More about this in part 3)

4. The Connector: is the class that plays a role of a service class. This class contains the SFDC connector obejects and calls methods to login, invoke a webservice method and get metadata

5. The GenericEventDispatcher: is a singleton EventDispatcher which is responsible for inter-application communication in a more effective manner (in the past people have been using Application.application for this purpose)

6. The Model: is your data store. This can be a singleton (if you are a fan of Cairngorms ModelLocator approach) or can be VO classes. You can either use binding to update the objects or use the generic event disaptch mechanism if you have to invoke something on the UI.

This broadly covers everything that we need to cover for the framework.

Up next in part 3: The working of the Framework and some code

Advertisements

Flex Framework for SalesForce Apps- Part 1 Warm Up

September 7, 2010

We have been working on a few sales force – flex apps for our customers since last September. Initially all the entities involved can really overwhelm you. It is extremely critical to get the application architecture right because the data model is mostly dynamic and also the toolkit has its own overhead.  We are trying to share the approach that we use to build SFDC – Flex apps.

Let warm up. Starting from salesforce terminology:

1. ToolKit: Salesforce.com provides a toolkit (actionscript library) using which you can communicate with the salesforce.com platform. Using this toolkit gives a head start to your SFDC- Flex Apps

2. Apex Webservices: SFDC has a language called Apex using which you can create webservices to access you application. It is predominantly based on Java, however, there are a few restrictions

3. Visual Force: VisualForce or VF is a UI technology for salesforce, primarily driven on Ajax it allows integration of Flash components (read SWF) into it. You can write JavaScript into it and hence has a big advantage. There are other UI things like S-Controls which we need not look into now.

4. Static Resource: In simple terms a static resource is any media,document,file which needs to be uploaded to SFDC for your project. So the SWF will be uploaded as a static resource. (Rather the entire output folder from flex)

5. <Apex:Flash>: This tag is used inside the VF page to help you embed swf. You can pass FLASHVARS set height, width.

6. Briefcase (AIR apps): Briefcase is a SalesForce concept using which you can create off-line applications. Add objects to the briefcase (though some objects like case can not be added to it) and then you can sync data from your off-line application.

7. Org: Your part of salesforce.com which you can customize and use as your requirement. Every customer has his own org and his own installation (package) of the application

8. sObject: sObject refers to any object that can be stored in the Force.com platform database. An sObject variable represents a row of data and can only be declared in Apex using the Web services APIname (the name with which the object is identified) of the object. This is of high importance as most webservice communication will involve sObjects

You can build you project either based on web-services or write the business directly onto the flex calsses, we do not use the later as we want flex to be unaware of the core business and keep it as generic as possible. However the framework is equally applicable to any type of project. ideally on the salesforce front if you are making webservices there should be good care taken to ensure only one webservice class is exposed to flex and the rest of the things can be in remaining wrappers.This keeps the architecture much more robust and generic.

Some warm up on the flex side (assuming you know flex):

1. Depending on the type of project you want to build (Flex or AIR) include the SWC of the toolkit which can be downloaded from here

2. It is good to have the code linked for the SWC since you will need to go to and fro

3. Setting up the architecture:

Apart from flex UI, the architecture contains 2 key elements: 1. The Controller and the Async Tokens

In the next part we exclusively look at the concept of the architecture, various entities and the working.

Alternative to Application.application

August 27, 2010

If you are using Application.application in your code you aren’t probably doing the best thing to your code for reasons more than one. Like Flex 4 no longer supports it, While using sub-applications or modules it will end up in trouble and MOST IMPORTANTLY it will tightly couple your application to the component

Instead, for most cases you (if you are dispatching an even using Application.application) you can set the events bubble property to true and listen to the same events at the application level. This will work for itemRenderers in DataGrid’s too.

Other option is to use a GenericEventDispatcher that extends from EventDispatcher and can be a singleton. So instead of dispatching an event using Application.application.dispatchEvent you can instead use GenericEventDispatcher.instance.dispatchEvent. This will work across all components and also between modules and sub-applications.

LCDS – how it all works

May 11, 2010

We have been consulting/training on LCDS for some time now there is a common need for an overview from a working perspective which helps decide whether to go with it or not.

This article is one such effort to shed some light on how it all works

LCDS is a Java web project which enables Flex/AIR clients to invoke Java methods, concurrently update clients, and supports proxy. It mainly contains 2 things

  1. A webserver
  2. A socket – server

So why is LCDS required?
One of the reasons for which it (and BlazeDS) are widely used is: Clients like Flex/Flash/AIR can publish data in an AMF format. AMF is a binary protocol and hence the footprint of data is lighter so it travels much faster over the network.

Java does not have native support to understand AMF (which is an Open Spec. protocol). LCDS contains a suite of Java classes which deserializes AMF data and passes it to Java as a Java data type.

It primarily has 4 types of services:

  1. (HTTP)Proxy Service
  2. Remoting Service
  3. Messaging Service
  4. Data Management Service

All these services are supported by protocols. A protocol defines how data is passed to the Java layer.

3 key protocols supported are are:

  1. HTTP
  2. AMF
  3. RTMP

You can also use variants like AMFX (non – binary XML version of AMF). These protocols are used to pass message objects via a Channel. A message object is the entity that Flex want’s to send across

There are  various channels that support these protocols

AMF, Secure AMF, HTTP, RTMP, Secure RTMP, NIO – AMF, NIO RTMP and others.

You can select a channel depending on the type of communication you want to establish.

Each of these Channels are associated with end points. So a message objects travels over a channel and hits an end point on the LCDS server. Making an endpoint unique for a channel

There are 2 types on end-points:

  1. Serverlet based end point (typically the MessageBroker Servlet) – Uses a webserver
  2. Socket based end point – these are more scalable (NIO/RTMP) – Uses a socket server

Once a message has hit the end point, It starts its journey inside the LCDS server. Here it goes through a series of layers starting from

  • The MessageBroker -Here is where authentication takes place, and the service is identified for the message
  • The Service is identified and one of these HTTPProxyService/RemotingService/DataService/MessagingService is invoked Depending on the destination of the message.
  • This destination is set by Flex in the message when it serializes it. The association between Flex and your Java Service is mapped using a destination.

Flex - LCDS Destination - Java
Flex – LCDS Destination – Java

  • Finally the Adapter kicks in. This is the entity responsible of invoking the Java class and passing data. This Adapter depends on the service that you use
  • Typically for a DataService (read Data Management Service) there is another layer of Assembler which could be either a standard from LCDS or custom created depending on the back-end or the data tier.

LCDS has in built assemblers for Hibernate and others.

The entire flow can be summarized as:

Flex LCDS Communication

Flex LCDS Communication

That, in a nutshell, speaks about LCDS. Most things also apply for BlazeDS. If you have queries/suggestions/comments. Please feel free to put them in the comments section.

Y

The business of wire-framing

July 17, 2009
With emergence of web 2.0 everything is going online. Websites are no longer small partly usable entities but have grown in to become full fledged applications. With this the scope and expectation of a web application have risen dramatically over past 2 years. Everybody want’s an intelligent good looking and robust application developed quickly and in budget. But how good does it go when we get real?

If you want a web-application to be developed or are a developing one it is extremely important to look at the process that you are following. Some rough requirement document, some inputs from the technical team and some rough ideas? Why do you think so many software projects fail or lose track and overshoot time and effort estimation?

This incorrect estimation comes due to lack of clarity of the requirement and the process. Isn’t there a clear disconnect between your ideas and the person who is implementing them? How do you bridge the gap? The answers is WIREFRAMES

So, what is a wire-frame:

A wire-frame is a pictorial representation of data (and not design) of your application.  Creating a wire frame is normally an iterative process which involves some Business intelligence, Product technical know how and a usability analyst to come together. It could be a PPT or there are several tools available like Omnigraffle, Axure, MockupScreens or for that matter open office draw. It is like they say, always write an algorithm before you write an implementation. Wireframes bring an application flowchart and work flow algorithms to an easily understandable level.

In the first iteration ideally you would want the person who understands the business to roughly sketch his ideas on a piece of paper. As an iteration a Usability Analyst armed with the technical know how and behavioral aspects of a web application can start mapping them onto a wireframe.

Wire frame is not how your application but what it contains and some part of how it behaves.

 The 3 major advantages which impact everything from time to cost and success of the project are:

1) Wireframes increase the clarity about the application that you are getting developed or developing. If  there are any uncertainties or challenges they can be handled right at the beginning. The picture becomes more clear on every single piece of information that the system will get in or display. You do not want to create something you cannot sell, right?

2) Better estimation of cost and time: No doubt creating a wireframe would bring in its overhead on cost and time. But if you look at the overall picture it simplifies things for a developer/technical architect to such an extent that they can virtually see what they want. Also a  designer can create the views with better understanding and focus.

3) Project management: As the application grows and comes closer to being realized that’s when you can expect some major surprises. A wire-frame coupled with an iterative release process will ensure that you get what you expect

It is again not necessary that you stick to the wire frame as is. While the application gets developed there will be challenges and constraints however the magnitude of problem and the time taken to get over them will reduce drastically

I think in a nutshell. No wireframes there is a very little chance of you getting a quality product in time.

 

A sample wireframe:

A Sample Wireframe build with powerpoint

User centered design – the new way of life at Tekno Point Multimedia

July 2, 2008

As an entrepreneur , I always strive to sow seeds well in advance to reap benefits in future. For e.g. in training division we upgrade to topics before they become popular in the mainstream , this helps not only our students but also our DnD and consulting division to leverage the before time preparedness to handle customer requirements.  Last 7 years of our existence we have spent our time in helping others adopt flash platform either as a skill or as a solution.  In 2008, we chose to take the bold step of trying to build our own product. Suddenly we were in a situation which we were not used to , no input from clients , no one to tell us what is required , no one to take feedback from and worse, no one to blame to.

It was really annoying as I  was unable to define my requirements clearly to my team and perhaps equally annoying for my team to get a different brief every time we met over this issue.  

I had no clue how to solve the problem we were going through.  But as the saying goes ‘ If you really want something , the entire world conspires to give it to you‘ . I got my solution in a course being offered by Atul Joshi of Design Incubator. Not only the course , even the schedule was conspired to suit my needs, it was over the weekends. So there I was in his class where I came across for the first time to  the world of User Centered Design. The last lap of my training is still pending , however , UCD is on its way to become a new way of life at Tekno Point Multimedia. I am encouraging all my team members to take a deep dive into UCD and have filled the library with books on UCD, usability , user experience, information architecture etc. It is an absolutely different kind of upgrade that we are going through , but I am sure that our DNA of constantly upgrading ourselves will help us in adapting UCD as a process in Tekno Point Multimedia. It is a huge paradigm shift for all of us and I am ready to wait as long as it takes to make UCD a second nature. 

Yes, It will grossly delay our timelines of coming out with our own product.  But I think its worth all the delay , someone once told me ‘ There is always a room for a better mouse trap‘ .

 

Cheers,
Himanshu Mody
Founder and CEO. 


%d bloggers like this: