Archive for the ‘Flash Builder’ Category

Flex Framework for SalesForce Apps- Part 3 Working

September 18, 2010

In the last part we have seen the framework specifics. In this part lets see how it all comes together. There are several classes that we need to create. Before we get there lets look at the way the salesforce toolkit works.

There are a few toolkit classes that we need to know:

Connection: This class is responsible for communication with SFDC. Connection allows querying as well as calling webservice methods. For metadata the Connection2 class has to be used. The key methods are login() and execute()

AsyncResoponder: When a request is sent to salesforce a responder is associated to it that is responsible for handling the result/fault for that call.

Parameter: All request parameters need to be sent as an Array of objects of type  Parameter class. A vector would have been ideal in this case however the toolkit comes from Flex 3 days.

Lets look at the framework components and the end to end flow.

The core idea is MVC based where we have a controller who is responsible for making decisions on service and handling the business logic.

The fundamental approach of accessing the service is the Command pattern. This is pretty much like cairngorm except the fact that we are using the com.salesforce.AsyncResponder class for handling responses. The reason is simple. The execute method in the Connection class expects and object of AsyncResponder. Hence we can simplify the code drastically.

The Command class can be seen as a helper to the main Controller class where it takes away a responsibility from the controller of sending a particular request and handling its response. It implements an ICommand interface which includes an “execute” method. This method is responsible of sending the service call and extends from the AsyncResponder class due to which the result and fault methods need to be overridden.

All these requests are generated from a view (or other commands) where the notification travels in form of an event to the controller and based on the event the controller invokes the correct Command. This does not require the event to be of a specific type rather it can be any event with the bubbles property set to true.

RC4SF - view controller

RC4SF (View Controller Flow)

The Connector class is the service layer which in our class is a class with 2 static members. First the connection object from salesforce which can be used for login or describing an object. And second the invokeSFDC method which will call the correct webservice method.

The steps are simple:

1. Create and instance of the Controller and pass the reference of the main application

2. Dispatch an event from application with bubbles set to true

3. Create a command to handle request from the events

4. In the controller add association of the event being dispatched with the Command

5. Call the SFConnector classes invokeSFDC with correct parameters

6. Handle result/fault in the responder which called the request

Here is the code for this bit. At the end of all parts will be uploading the framework and a sample/template application

/**
Connector class
*/
package com.tekno.rc.service

{

import com.salesforce.AsyncResponder;

import com.salesforce.Connection;

public class SFConnector

{

public function SFConnector(){

}

public static var connector:Connection = new Connection	();

private static var _webServiceClass:String;

private static var _namespace:String;

public static function set webServiceClass(value:String):void{
_webServiceClass = value;
}

public static function get webServiceClass():String{
return _webServiceClass
}

public static function set namespace(value:String):void{
_namespace = value;
}

public static function get namespace():String{
return _namespace;
}

public static function invokeSFDC(method:String,args:Array,responder:AsyncResponder,webServiceClass:String="",namespace:String=""):void{

var _ws:String = _webServiceClass;

if(webServiceClass.length > 0){
_ws = webServiceClass;
}

var _ns:String = _namespace;

if(namespace.length > 0){
_ns = namespace;
}
connector.execute(_ws,method,args,responder,_ns);
}
}
}

The Control class:

package com.tekno.rc.control

{

import com.tekno.rc.control.commands.ICommand;

import flash.display.DisplayObject;

import mx.rpc.AsyncResponder;

public class Controller
{

private var app:DisplayObject;

public function Controller(app:DisplayObject){
this.app = app;
}

public function mapCommandToEvent(eventName:String,responder:ICommand):void{
app.addEventListener(eventName,responder.execute);
}

}
}

In the next part we see an application working with the framework. And the entire source code

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.

Learn Flex from Champions for Free !!

September 6, 2010

Adobe Flex is picking pace and is reaching a more organic level viz. the student community in India, and rightly so. If the next generation of engineers come equipped with knowledge for technologies like Flex, ColdFusion, Silverlight, Scala etc it will give Indian IT a new high.

There are lot of initiatives that are going on currently to spread Flex around. Like Adobe’s Flex@Campus which gives educational organization across India to leverage a free 1 day training on Adobe Flex. The flex community in India has extended its support to it. Because it is a hands on program, it gives you a head start into the technology allowing you to create a base on which you can build up.

Then there is RIA Connect. It is a Tekno Point initiative that is not restricted to Flex alone. It could me on any Adobe Product like Photoshop, Illustrator, Flash Professional, Flex, ColdFusion. It is a 1 day program for corporates, educational institutes or any other organization allowing them to understand the underlying abilities of the Technology and a follow up hands on session to get them started. The contents of this one day workshop are modified keeping the audience in mind. For Designers/ Devs there is more of  hands on and for business heads, architects there is more breadth in which the workshop topics are covered.

Don’t wait to get started. Go to the links and fill the forms to take your first step, as common sense says “To reach anywhere, you have to start from the beginning and go through the middle”

Adobe Flash Platform Summit

August 27, 2010

Had a great time speaking this year at the AFPS. It was really well organized and kudos to the Adobe team for pulling this one off so well.

Here is my presentation: Flex 3 t o Flex 4.

Will also be putting up a small document on this soon.

Using the Spinner control in flex 4

May 12, 2010

The Spinner control is an alternate to NumericStepper’s in Flex 4. The advantage is while it works with ranges, it is not hard bound to a numeric input. You can choose to step through a collection and display images or any other content.

Spinner Control Sample App

Spinner Control Example in Flex 4

Below is some code which associates text from a collection to the numeric stepper as seen in image above.

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"  width="350" height="150">

<fx:Script>
<![CDATA[

import mx.collections.ArrayCollection;
[Bindable] private var dataColl:ArrayCollection = new ArrayCollection
(["Flex","Flash","Catalyst","Slider","FlashLite","DeviceCentral"])
]]>
</fx:Script>

<s:HGroup x="50" y="58" verticalAlign="middle" >
<s:RichText textAlign="right" width="200" text="{dataColl.getItemAt(spinner.value)}"/>
<s:Spinner id="spinner" minimum="0" maximum="{dataColl.length - 1}"/>
</s:HGroup>


<s:Label x="78" y="38" text="Click on the arrows to change values"/>
</s:Application>

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

Flash Builder 4 ( Flex 4) : Overview part 2

June 3, 2009

So as promised , here I am with part 2 of overview on what’s new with Flash Builder 4. The part 1 was about IDE related changes in FB4.

Part 2:  Components and Syntax

In part 1 we have been talking about the IDE features. Staying in the design view, the components explorer now you can notice a few folders.
Adobe has released a new suite of (sprite) flex components with the sdk 4.0 which are called as spark components. So now we have 2 types of components
1.    Halo Components – The existing UIComponents (sdk 3.4)
2.    Spark Components – The new set of components
Let look at each folder
Controls
While most of the controls remain the same in both versions a there a few changes
Added:
•    Spinner (close to Numeric Stepper)
•    DropDown (redefined ComboBox)
•    VideoPlayer (newly added in place of VideoDisplay component)
•    RichEditableText (newly added). This is where you can see the amazing text control features like right-to-left, baseline-control and justification of text

The RichTextEditor has been removed from the list.

Data Controls:
All lists have now been grouped under data controls. Apart from the regular ones, there is one addition to this – the paged List control. The Spark list control offers higher-level functionality like paged-data  (by a ‘layering’ mechanism).

Containers:
No VBox,  HBox or Canvas, they have now been replaced by Group containers. So you have HGroup, VGroup well mostly the styling behavior has changed. You can review the example that follows the article to see how they behave.
Then there are these which have been added:
•    DataGroup
•    Scroller
•    SkinnableContainer
•    SkinnableDataContainer

Custom Components
Two new components
Flash component and Flash container: To allow you to directly access a component created in Flash Authoring tool.

New Flash Custom Components

New Flash Custom Components

NameSpaces
Moving onto syntax, the way new elements are created is a little different than Flex 3. Again most of these changes are on the styling side which I plan to explore a little later. We ll stick to the changes on code:
Namespaces have been changed. Now there are 2 basic namespaces that you would find yourself working with:
1.    xmlns:fx=”http://ns.adobe.com/mxml/2009&#8243; – Contains non UI objects like arrays, objects, metadata declarations. That means when you add a script block in flex 4 the tag would be <fx:Script>.
2.    xmlns:s=”library://ns.adobe.com/flex/spark” – Contains the spark component library.
3.    xmlns:mx=”library://ns.adobe.com/flex/halo” – Contains the Halo component library.

Coming up next : Flash Builder 4 : Overview Part 3 on Styling

Flash Builder 4 (Flex 4): overview part 1

June 2, 2009

Finally Flash Builder 4 (read Flex Builder 4) is out. I was trying to review on what has changed and whats new in the latest release. Flash Builder… I don’t know I think I like Flex Builder better 🙂

I will review new features in Flash Builder 4 with respect to IDE ,Syntax,Components,Styling,Performance and finally a Conclusion.

So lets get started with the IDE,

On the whole the IDE looks just about the same. But look a little closer and you will notice a host of other things. The top then things that you might notice (If  you start building a project right away) are…

1 The Package Explorer (Flex Navigator in FB 3)
-The code management has changed a little.
-The packages are now grouped, which is a very good thing (you will know why if you use cairngorm)
-Outline has been included with the class shows SDK (framework) packages
-Uses swfobject.js instead of AC_OETags.js

The new Package Explorer (earlier: navigator)
The new Package Explorer (earlier: navigator)

2 The Component Explorer

The  Components view in the design mode now has a different folder structure. Some new components have been added and you won’t find some old components like the numeric-stepper. I will be adding a detailed review on components in part 2.

Components have been recatogerized

3 Data Services Tab

By Far, the most exciting feature of FB4. This tab allows you to link data from a source without a single line of code. See it to believe it.

The Data Services TabThe Data Services Tab

4 The Network Monitor

Adobe has really worked on Developer productivity and I say this because of this super cool feature that allows you to see the communication your app makes with your data server. No more searching for analyzers and http sniffers online  🙂

The network monitorThe network monitor

5 ASDocs window
Another one for developer productivity. If you are working on Flex 3 I am sure you ll love this. No more opening new windows or googling up what some property means. The ASDocs  window allows you to see it there and then.

ASDocs Window

6 Auto Function Generator
Another one that generates a function definition without any typing 🙂

Auto generate functions for events

7 Theme chooser

Components are now divided into Spark and Halo(standard flex 3 components) compoents and with the theme chooser you can how you want to display them…

Theme Chooser

8 Appearence Window
Along with the Properties components (enhanced quiet a lot) there is another tab for Appearece. The styling for Flex 4 components has changed (especially for spark). The appearance window mainly caters to it.

Appearence window (For Spark components)

9  States in Code View
This release will amaze you if you are a flex developer. State management, it seems has been enhanced drastically and this options grey’s out everything that is not included in the selected state. WOW !

States selector for code view

10 Export as FXP – The new export format

The flex project archive (.zip) is now FXP.
This has been about the IDE Features and there is a lot more to explore, for the next part lets try our hands on some new flex compoents .

Export as FXP from File Menu

Coming up  : Review of Flash builder 4 Syntax,Components,Styling,Performance and finally a Conclusion.
Download Flash Builder 4 today


%d bloggers like this: