My First Adobe Developer Center article!

Hi Folks,

I am glad to reveal that my first ever Adobe Developer center article went live this Monday 22nd November 2010.

The article basically talks about Item Renderer changes in Flex 4 and the tooling support provided in Flash Builder.

Please find the link for the article below:

http://www.adobe.com/devnet/flex/articles/spark_itemrenderers.html

Hope this helps!

Thanks

IDE Productivity enhancements added to Flash Builder Burrito

Hi All,

I am extremely delighted in sharing the fact that we have added an immense set of editor based IDE productivity features for the Flash Builder Preview release.

Here is the list of those features and a brief description on the same:

a) Code Templates:

Code templates are a structured description of code patterns that reoccur in source code. Support of these editor level templates with in action script/MXML and CSS documents, will enable flash builder ‘Burrito’ users to auto insert these code patterns using content assist (Ctrl+Space).

FB ‘Burrito’ proposes set of Pre-defined templates/code snippets for ActionScript,CSS and MXML under Editors preference page:

Code Templates Preference page in FB burrito

Templates can be newly created, an existing templates can be edited, templates can be imported/exported in the form of XML file.

The feature also supports linked mode to display multiple values.

Linked Mode in Code Templates

Templates are defined based on contexts in MXML and AS. The various contexts defined are:

MXML: MXML, MXML Attributes,MX Components and Spark Components.

AS: ActionScript, ActionScript Statements, ActionScript type members and ActionScript package scope.

Edit Template dialog with context info

Usage: In the editor on entering the name of template and hitting CMD/CTRL SPACE will bring up a list of code templates defined with similar name.

Action Script Proposal Cycling:

FB 4.5 will allow user to select the proposal kinds or related group of proposals to cycle through when repeatedly invoking content assist (Ctrl+Space). User can select a proposal kind/group and invoke Up and Down to change the order under FlashBuilder->ActionScript Code -> Content Assist Cycling preference page. We would be changing the name of the preference page in MXML cycling also.

Preference Page for AS Proposal Cycling

One can change the order in which the cycling proposals should show on content assist and the editor content assist would reflect the preference.

Usage: Subsequent content assist cycles(CTRL-SPACE) would bring up different proposal cycles as defined in the preference. On an empty line only code templates would appear.

Content Assist Cycling in the editor

FYI, This feature was available for MXML in the earlier releases.

Quick Assist:

Flash Builder “Burrito” will allow the developer to display a list of actions that relate to the current code fragment and select an action to perform a task with/without interacting with a dialog, either by selecting “Quick Fix” from the context menu or by pressing a keyboard shortcut combination (that is, CTRL +1).

Context Menu option for Quick Assist

The set of Quick Assist features supported are:

• Split Variable Declaration
• Assign to Variable
• Convert local variable to field
• Generate Getter/Setter (with UI)
• Rename in Workspace (with UI)
• Rename in File
• Organize imports

Sub-set of Quick Assist options

Metadata Code Completion:

This feature will allow the developer to use content assist for metadata code completion when beginning a code statement with the ‘[' character. The list of metadata presented to the developer must be contextual to the location within the class or MXML document so that only valid metadata can be inserted via content assist. Where appropriate, content assist should present a list of values for metadata properties. Support for metadata content assist should be provided for metadata defined for use with the version of the Flex SDK the developer is using in their project.

This features supports Code hinting inside metadata for optional attributes, linked mode support and proposal cycling support.

Cycling Support in Metadata features

Generate From Usage:

Flash Builder “Burrito” will offer the developer the option to generate the stub code for a method, variable and class via the Quick Assist (CTRL/CMD 1)menu.

Few of the options available here are:

Generate method: selecting this action will create a new method in the appropriate class or
MXML script block with the name of the method supplied by the developer.
eg:

Invoking Quick Assist on an expression like

bar(x, y); // bar is not defined anywhere in the document
Selecting will create a new method named bar(var x:int, var y:int) if x and y are of int type. If the type of the argument is not known then Object will be generated.

Generate variable: selecting this action will create a new property in the appropriate class or
MXML script block with the name of the property supplied by the developer.
eg:
Invoking Quick Assist on an expression like

bar; // bar is not defined anywhere in the document

On Selecting, the statement will be changed to:

var bar:Object;

Generate Class/Interface: selecting this action will create a new class with the name of the class
supplied by the developer.
eg:
Invoking Quick Assist on an expression like:
new Bar(); // Bar is not defined anywhere in the document
 will give option to Generate the Class Bar. 
Selecting will open the new Class Wizard UI with the name 'Bar' pre-populated.

Generate from Usage Scenario


I am also proud to share that the initial feedback
from our customers have been exceedingly good.


However, i request you guys to try them out and
provide us your feedback.
 

Preview Release Of Next Generation Flash Builder, Flex and Flash Catalyst is OUT!

Hi All,

I am all excited to communicate that Adobe has publicly released the Preview release versions of next generation Flash Builder(Burrito), Flex SDK(Hero) and Flash Catalyst(Panini).

The downloads are now available at Adobe Labs.

Burrito: Download

Panini: Download

Some of the exciting stuffs that i cherish are:

a) Support for Mobile Application development, debugging and deployment on Android

b) IDE Productivity enhancements.

c) Performance improvements in the editor, design view and start-up.

d) Designer-Developer workflow enhancements.

I personally request you guys to play around with them and send us your suggestions/feedback.

More specific and detailed articles are on the WAY…..!!!!

Also, please do enjoy Adobe MAX 2010 live and exclusive.

Adobe Melrose – A Business Dimension to your Day-to-Day Development!

Hey Guys,

Long time no see; Yeah, was a bit caught up with the product release cycles! Welcome Back…..

This time i would like to talk about a  real COOL stuff which got recently introduced to Adobe Flash platform services called “Melrose”.

Melrose achieved its first public BETA on 25th August,2010.

What is Melrose?

Melrose (formerly Shibuya) enables developers and publishers to distribute and make money with Adobe® AIR® applications through application stores. Melrose enables application syndication to multiple stores so that publishers can reach millions of users.

Who can make use of it?

Any developer who can build apps using AIR; which simply means anyone and everyone(since Flex is open source).

What should I require to use this?

Flex Builder 3, Flash Builder 4 or Flash Professional.Flex 3.4/4/4.1 sdk’s are supported and ensure your AIR version is above 1.5.3.

Should i PAY?

NO As part of the BETA program Adobe provides a free ‘Code Signing Certificate’ which is sufficient to deploy your app to the marketplace.

How do I share revenue with Adobe?

We follow try and buy licensing mechanism. There a lot of licensing methods available namely Simple licensing, Timer based licensing, Feature based licensing and Manual Licensing. For a given paid app, the revenue share would be 70-30(Developer/Publisher -> Adobe).

Which are the stores i can target via Melrose?

Currently INTEL AppUp Centre and Adobe AIR marketplace. But lot in store for you guys in the near future….!!!!!

What should be my NEXT steps?

a) Download AIR SDK and start building compelling apps which can make you a MILLIONAIRE(who knows!)

b) Login in to ‘adobe.com”, Sign up for the Melrose BETA program and download the Melrose SDK.

c) Include the downloaded library to you AIR app’s build path.

d) Enable licensing as mentioned in the BETA release help documentation.

e) Apply for FREE ‘Code Signing Certificate’ from the BETA program or provide your signed certificate issued by Thwate, VeriSign or GlobalSign

f) Export Release Build with the above certificate and upload your application to the Melrose portal.

More details on the portal and other pre-requisites can be obtained once you sign-up for the BETA program.

g) Once Adobe approves your application installer; you would be given an URL which can used by the users to download and start using your apps.

I request you guys to check out Adobe Melrose Forum for any specific info and further details.

Best Of All, you can monitor the ANALYTICS of your application.

Thanks all, hope you guys make more and more money leveraging Adobe Solutions and Services!!!!!

Flex Builder Linux Alpha 5 now available @ Adobe labs!

Hi Guys,
This NEWS can get you all excited

Adobe has released the next version of Flex Builder for LINUX.

It is now available @

http://labs.adobe.com/technologies/flex/flexbuilder_linux/

Please pick up your copies and let us know your feedback!

Thanks!

How to consume CFaaS using Flex client ?

Hi All,

Welcome Back!

Here is a brief explanation on how services exposed by Coldfusion(CFAAS) can be consumed using Flex client.

FYI, Coldfusion9 has exposed few utlities as services, namely :

Charting (CFCHART) ,Document Services (CFDOCUMENT) , PDF Utilities (CFPDF) ,Image Manipulation (CFIMAGE) , Mail (CFMAIL)  & Pop (CFPOP)

Here i would like to explain how one of  the most common CF service(CFMail) can be accessed using Flex.

a) In CF9 administrator, under Mail section please type your server name, username and password. Check the ‘ Verify mail server connection’

checkbox and click ‘Submit Changes’. Make sure you get the message ‘Connection Verification Successful’.

b) Under Security-> ‘User Manager’ section in CF9 administration,  add an user using ‘Add User’ with the following info:

username, password, confirm password , check both RDS and administrative access and add ‘Exposed Services’ by selecting the required services.

eg: Mail Service and click ‘Add User’.

c) Go to ‘Security->Allow IP Address in CF9 administrator and enter your IP address and say ‘Add’.

d) After add the following tag in addition to CF:Mail,

<cf:Config  cfServer=”" cfPort=”8501″ servicePassword=”" serviceUserName=”" />(the values entered here should be same as the ones configured under ‘Add User’ and ‘Allow IP address’ section).

e) Create a flex project using Flash Builder and add the ‘CFService.swc’  which would be available under D:\ColdFusionCentaur\wwwroot\CFIDE\scripts\air (subject to CF9 installed location) to your build path (Project->Flex Build Path->Add SWC).

Also find the Flex code required to access the CFMail service below:

<cf:Mail to=”{to1.text}” from=”{from1.text}”  subject=”Test” content=”{myContent.text}” type=”html” id=”cfmail”  result=”cfmail_resultHandler(event)” />
<mx:VBox>
<mx:HBox>
<mx:Label text=”From”/>
<mx:TextInput id=”from1″ />
</mx:HBox>
<mx:HBox>
<mx:Label text=”To” width=”33″/>
<mx:TextInput id=”to1″ />
</mx:HBox>
<mx:RichTextEditor id=”myContent”>

</mx:RichTextEditor>
<mx:Button id=”myButton” label=”Send” click=”cfmail.execute()”/>

</mx:VBox>

We request you guys to take a look at these workflows and send your feedback on the same

Thank You!

Custom Summary Calculator for Grouping Collection 2

Hi ,

Here is a small implementation of custom summary calculator which can be used with SummaryField2 in GroupoingCollection2 of Advanced data grid.

Most of us know that the default summary calulations are SUM, MAX, MIN, AVG and COUNT.

With the new Grouping Collection one can add a custom summary calculator to calculate the summary of a field.

A sample snippet to illustrate the use is as shown:

var summField:SummaryField2 = new SummaryField2(“price”, new MySummaryCalculator());

OR

var summField:SummaryField2 = new SummaryField2(“price”);

summField.summaryOperation = new MySummaryCalculator();

Here, MySummaryCalculator is the custom summary calculator which implements ISummaryCalculator.

Please find the MySummaryCalculator

and the corresponding  Flex code with grouping collection

(Look for ADGGC2Test.mxml and MySummaryCalculator.as in the linked site)

The summary calculator here generates the Summary as a PRODUCT of the values in the datafield.

Thanks!

Balaji

Flex Advanced Data Grid changes in BETA2

Hello All,
Flex 4 and Flash Builder4 BETA2 have introduced a lot of changes in both the SDK and the IDE. One significant improvement in the SDK (Data-Visulaization component) is the introduction of new Grouping Collection called GroupingCollection2 (GC2) and SummaryField2 (SF2).

Why GC2?

The primary motivator for this change is to improve the performance of Grouping Collection and Summary Generation.

What’s NEW in the GC2 ?

1) A new AS class GroupingCollection2 is introduced which implements a new ‘refresh()’ method from IGroupingCollection2. This refresh method would be slightly different from the existing refresh() in IGroupingCollection in a way that it adds an event ‘dispatchCollectionEvents’ as another parameter.

So the syntax now looks like:

function refresh(async:Boolean = false,
dispatchCollectionEvents:Boolean = false):Boolean;

This event is basically an optimization that is introduced to speed up the process of grouping. While true, there will be an event dispatched by the internal collection when a group is made and the user can listen and update things.

The syntax to use GC2 will be similar to GC in all ways and one would also get hinting at MXML and AS level.

2) A new class called ‘SummaryField2′ (SF2) .

The fundamental change here is the introduction of a new method ‘summaryOperation’ which would replace both ‘operation’ and ‘summaryFunction’ which existed in SummaryField.

Also,

Earlier the summaries were calculated after the groups formation process was completed which resulted in issues when grouping asynchronously as the groups were getting formed but the summaries became available only in the end.

So, now the summaries will be calculated as and when each group is formed.

Now, the ‘summaryOperation‘ can take values like ‘COUNT’,'AVG’,'SUM’,'MIN’,'MAX’ (as operation in the SummaryField1) and a Custom Summary Calculator.

To add a custom SummaryCalculator one must implement a new interface  ‘ISummaryCalculator‘ and assign it to summaryOperation as:

 <mx:SummaryField2 dataField="name"
   summaryOperation="AVG" />
 <mx:SummaryField2 dataField="sal"
   summaryOperation="{new MyCustomSummaryCalculator()}" />

FYI, I shall provide a sample Custom Summary Calculator in my subsequent post.

Do I need to change my existing code to update to GC2?

Absolutely NOT We maintain backward compatibility by retaining existing GC as it is.

Here is a small snippet of the GC2 with SF2:

<mx:GroupingCollection2 id="gc" source="{ac}">
  <mx:Grouping>
    <mx:GroupingField name="name">
	<mx:SummaryRow>
	   <mx:SummaryField2 dataField="name"
               summaryOperation="MIN" />
	    <mx:SummaryField2 dataField="salary"
               summaryOperation="{new MyNewCustomSummaryCalculator()}" />
        </mx:SummaryRow>
      </mx:GroupingField>
    </mx:Grouping>
</mx:GroupingCollection2>

Please use the new GroupingCollection2 and provide us your
 valuable feedback 
Hope you guys cherish the new improvement.

 Thank You!

Build a Master-Detail Flex-ColdFusion Application without writing a line of code!

Hello All,

I know the title seems too ‘Assertive’ but Yes this is a FACT! Flash Builder BETA2 now can generate ColdFusion/PHP code for a given datasource and one can easily bind them to the Flex controls in building a Flex application. This is a new enhancement added to the Data-Centric application development supported natively within Flash Builder.

I will try to explain this using a simple use-case:

UseCase: Charan is a Flex developer who is quite new to ColdFusion. He wants to create an application which can display the list of employees from an external datasource/xml file and populate these data in the application. He also wants a master-detail form which gets filled with the details of a particular employee and  controls for creating, updating and deleting a employee from the database.

I would assume this would require an effort of a day or two. But here, this usecase can be accomplished within 15-30 minutes.

Surprised? , “wait n watch”!

Pre-requisites:

a) Download and install Adobe Flash Builder BETA2 from  http://labs.adobe.com/technologies/flashbuilder4/

b) Download and install ColdFusion server from http://www.adobe.com/products/coldfusion/.

c) Import the MySQL database file from here and dump it into a new database ‘fb_tutorial_db’. Please install MySQL( v 5.0 or above) and import the above file using the command ‘mysql -u username -p password database_name < filename.sql’ in your MySQL prompt.

d) Create a datasource in CF9 by following  the http://livedocs.adobe.com/coldfusion/8/htmldocs/index.html.

FYI,  section ‘Adding datasources’ under DataSource Management->Configuring and administering coldfusion’.

Note: This workflow supports both CF8 and CF9.

Workflow:

Project Creation:

a) Go to D:\ColdFusionCentaur\bin (relative to the CF installation directory) and run cfstart.bat

b) Open Flash Builder and create a new Flex project.

i) File -> New- > Flex Project

ii)Name the project as “MasterDetailApplication”, select the “Application server type” as ‘ColdFusion’ and select ‘ColdFusion Flash Remoting’ in the radio button group.

c) Click NEXT.

d) Select the ‘ColdFusion Installation type’ as ‘Standalone’  and fill the following details :

ColdFusion root folder: ‘D:\ColdFusionCentaur’

Web root: ‘D:\ColdFusionCentaur\wwwroot’

Root URL:’http://localhost:8500/’ and click ‘Validate Configuration’. The wizard should now look like:

Project Server settings

e) Click FINISH.

Service Creation:

a) Go to Window -> Data/Services and click on ‘Connect to Data/Services’.

b) In the ‘Connect to Data/Service’ wizard select ‘ColdFusion’ and click NEXT.

c) Click on the link ‘click here to generate a sample’, this will open up ‘Generate Sample CFC’ dialog as shown below:

Sample CFC dialog

d) Select ‘Generate from RDS datasource’ which would pop-up a RDS Authentication dialog.

e) Enter the appropriate credentials or select ‘No password’(If there is no RDS configured for server) and click OK.

f) This should populate all the datasources configured in server. No select ‘fb_tutorial_db’ so that ‘employees’ table shows up in ‘Tables’ combo-box. Also note the primary key auto-filled.

Note: If there is no primary key in the database table the combo-box for ‘Primary key’ would pull-down all the column available in the table so that you could select the desired one as primary key.

g)Leave the default and click OK. This should bring up a ‘Security Information’ dialog as shown:

RDS AUthentication dialog

Warning!

Note: Please read the dialog carefully if you are planning to use the code generated for production. This is a security dialog which informs the user to secure the code from any potential risk/hack.

h) Click OK in the security dialog.

Note : This should have created a file ‘employeeService.cfc’ in the ‘MasterDetailApplication’ folder under ‘D:ColdFusionCentaur\wwwroot’. This file would contain 7 functions for CRUD and a function getemployees_Paged and count for pagination. Also by default client-side ‘Data Management’ and ‘Pagination‘ will be enabled.

i) Click ‘NEXT’ in the ‘Connect to Data/Service’ wizard to view all the function after FB introspects the CFC generated.

j) Click FINISH. This should have generated the service which you can view from Data/Services panel as shown:

View of the Service and the AS Wrapper classes

Note: All note the Actionscript service wrappers and valueObjects get generated as shown above.

Front-End creation:

a) Switch to the Design View in FB.

b) Drag the following controls onto the design view

i) DataGrid , can be located from Components panel under ‘Controls’

ii)2 buttons and name them ‘Update’ and ‘Delete’.

c) Now simply drag-drop getAllemployees() function from Data/Service panel and drop it on the data grid.

d) Right click on data grid and select ‘Generate details form’. This should generate a form over-lapping on the data grid. Kindly drag the generated form next to the data grid so that they look neat.

e) Drag the operation deleteemployees() from Data/Service panel and drop it on the button named ‘Delete’. This should open the ‘Source’ view with the parameter of the event handler highlighted.

Kindly type ‘dataGrid.selectedItem.emp_no’ in the parameter.

f) Switch back to design view.

g) Right click on the button ‘Update’ and select ‘Generate Click Handler’, this should open the event handler code in ‘Source View’.

Kindly type ‘employeesService.commit();’ and switch back to the design view.

h) Now right click on createemployees() and select ‘Generate Form’. A dialog as shown would open up:

Generation Of Form!

i) Unselect the checkbox for ‘Form for return type’ and Click FINISH. Kindly layout the generated open so that it does not over-lap with the other controls.

The design view should look like this after all the above actions:

Final view of Design view

Now launch the application.

Perform the following tasks to ensure you have an working application:

a) The data grid should display all the employees from the database.

b) Now click on an employee from the data grid, the details form should show the details of the employee.

c) Edit the first name field and click on ‘Update’, the form and the database should be updated with the update value(since data management is enabled).

d)Select an employee and click on ‘Delete’ button. The selected employee must be deleted from the data grid and the data base.

e)Enter appropriate values in the Create form and click on ‘Create employees’ button. This should generate an employee with the given values in database.

Note: In the attached database the primary is set to be auto-generated, hence do not enter the value for ‘emp_no’ in the ‘Createemployees’ form.

Now you have created a fully functional ‘Master-Detail’ application.

BTW, We have not written a single line of code and have accomplished this application. I am not sure if any of us can do the same in a much shorter span!

FYI, Obviously this is just a starting point, for more complicated application involving complex server side logic one still needs to write his server side code. Also, to generate such complex code involving tight relationship between tables, BOLT(ColdFusion Builder) can be used. It now ships with a fully functional code generation tool which is very friendly with Flash Builder’s Data Centric Development:)  Please refer to my previous post for more details.

Note: MSSQL, MYSQL and Apache Derby databases are supported.

Hope this article is helpful!

Enjoy

BETA2 additions to “FlexUnit support in Flash Builder”!

Hello,
Adobe’s release of Flash Builder4 ‘s BETA2 has brought in significant changes in the “FlexUnit support in Flash Builder”.

a) The big one being the in-built support to write/run unit tests in the Metadata based approach(FlexUnit 4). For more details check out

http://opensource.adobe.com/wiki/display/flexunit/FlexUnit+4+feature+overview

Flash Builder now provides wizard support to create and run tests belonging to both FlexUnit1 and FlexUnit4.

Wizard to create FlexUnit4 tests

On selecting the desired ‘Class to test’ with the ‘Methods to test’, the FlexUnit4 style code gets generated for the test cases.

Flash Builder Generated flexUnit4 Code

Similarly there is wizard support and code generation for FlexUnit4 test suites.

Flash Builder wizard to create FlexUnit4 test suite

Here is the example of the code generated for FlexUnit4 test suite which includes a FlexUnit4 test case class.

Code Generated by Flash Builder for FlexUnit4 test suite!

b) Flash Builder also provides Hot Key assistance to run flexunit tests.

ALT-SFT-E, F can run tests in the active editor: If the current selection is a test method only that method is run but if the selection is whole class all the tests in the class are run.

ALT-SFT-A,F can run all tests in the active project

c) Flash Builder generates a file called “flexUnitCompilerApplication” which basically contain the entries for all the test suites/cases available within the project.

d) There is new icon for ‘Refresh‘ in the ‘FlexUnit Results’ view which can be used to update the flexUnitCompilerApplication when a new test case class is externally added into project, a test case is renamed, deleted etc.

Here is a list of libraries Flash Builder to provide support for FlexUnit.

flexunit_0.9.swc to support FlexUnit 1 tests, Hamcrest.swc to support Hamcrest tests in FlexUnit4, FlexUnit4_1.0.swc to support FlexUnit 4 style tests, flexunitextended.swc to provide the results in the UI browser and FlexunitTestRunner_rb.swc for localization support.

As always FlexUnit supports library project, flex project, AS project and AIR projects for both 3.4 and 4 SDK’s.

e) Performance is another area where there is a significant improvement  since BETA1.

I personally thank each and everyone who has consistently provided feedback and i request others to check this out and share your thoughts

Thanks!