Archive

Author Archive

Flex Advanced Data Grid changes in BETA2

October 9, 2009 6 comments

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!
Categories: Uncategorized

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

October 8, 2009 7 comments

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/&#8217; and click ‘Validate Configuration’. The wizard should now look like:

Project Server settings

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

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

RDS AUthentication dialog

Warning!

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

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!

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

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 🙂


Categories: Uncategorized

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

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

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

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!

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!

Categories: Uncategorized

Bolt-Gumbo Workflow!

October 5, 2009 2 comments

Hello All,

I am very excited to inform you guys that Adobe has released the BETA2 versions of Flash Builder, CF builder and Flash Catalyst.

You may take a look at these tools here 🙂
These tools have morphed themselves extremely well since the last release and they now include real cool stuffs which can make ones life much simpler.

eg: Flash Builder now supports Database introspector which can generate server side code in just a click(all you do is to point to the database via the wizards), FlexUnit integration now supports FlexUnit4 (metadata based unit testing) capabilities.

ColdFusion Builder can generate ORM and Non-ORM based code relative to your database, it also contain much tighter integration with Adobe AIR, AS proxy classes etc. FYI, Bolt integrates Hibernate to provide ORM support for CF users.

One cool stuff which really amazes me is the integration between Flash Builder(Gumbo) and ColdFusion Builder(Bolt). The reason being, one can leverage the capabilities of BOLT to generate sophisticated CF(ORM/Non-ORM) code and these can seemlessly be consumed by Flash Builder and be used in Flex applications.

The workflow of this mass is just driven by a bunch of wizards which let you generate sophisticated CF code, consume this code in Flash Builder and bind the retrieved values onto Flex controls/components.

Note: Bolt ships with a plugin named “Adobe CFC Generator” which is  capable of generating ORM and Non-ORM code which can be understood by Flex. It includes a bunch of utility functions to read, update, delete data and pagination.  Also the code thus generated are all data managed while importing in Flash Builder. As part of ORM support Bolt can generate precise code for relationships like  one-one,one-many etc and this code can be consumed as it is by Gumbo.

Pre-requisites:

Download and install BETA2 versions of Flash Builder 4 and ColdFusion Builder from here

Donwload and install released version of CF9 server from here

FYI, you can view the ‘Adobe CFC Generator’ from Windows->Preferences->Extensions in Bolt.

Here is a small attempt to walk through the workflow:

BOLT:

a) Create a new CF project in BOLT , File->New->ColdFusion Project. Enter the default location as a new folder in your server root.

CF Project

CF Project

b) Configure the CF server, click NEXT in the above wizard and pull down the drop-down besides ‘Servers’ and select ‘Add Server’.

CF Server Config

CF Server Config

c) Click NEXT and point the appropriate server home in the wizard.

Server Home

Server Home

d) Click FINISH.

e) In the New CF project wizard click FINISH. Create a new folder called “ORMCode” in the project created.

f) Open the RDS dataview panel from Windows->Show View -> RDS Dataview and select ‘Create ORM CFC’ as shown :

Option to select ORM or Non-ORM code generation

Option to select ORM or Non-ORM code generation

FYI, i am using fb_tutorial_db datasource which is a MySQL datasource configured in my ‘DataSource’ section of CF administrator.

Also note this workflow supports MySQL, MSSQL and Apache Derby databases.

g) Browse to “ORMCode”(folder created under the newly created project), leave the ‘Script CFC’ checkbox and click OK.

ORMSetting

h) Click ‘Generate Code’ in the wizard which opens up.

GenerateCode

Note:  Relationships can also be mentioned in the dialog above.

Select ‘cfbookclub’ which is a MSSQL datasource and select both APPS.AUTHORS and APPS.BOOKS table as shown below and click ‘Create ORM CFC’.

Click on ‘Insert’ button in the ‘RelationShip’ section and enter ‘MyBooks’ -> Name,  ‘BOOKS’ -> Target table and ‘Multiplicity’ -> 1-n and click ‘Save’.

Now click on ‘MyBOOKS’ (you should see the ‘Join Condition’ section loading). Click ‘Insert’ in the ‘Join COndition’ section , select ‘AUTHORS.AUTHORID’ as ‘Source Field’ and ‘BOOKS.AUTHORID’ as ‘Target Field’ and click ‘Save’.

The wizard should now look like this:

AfterRelationShipi ) Click on ‘Generate Code’ and hit Refresh on the created project. You should now see 3 new files being added(Application.cfc, employees.cfc and employeesService.cfc).

Similarly Non-ORM code can be generated by selecting ‘Create CFC’ from ‘Adobe CFC Generator’ and browse to a new folder within newly created project( create a new folder ‘NonORM’ inside the project) ,leave the default and click OK.

This should create 4 new files employees.cfc, employeesService.cfc, employeesDAO.cfc and  employeesGateway.cfc on hitting REFRESH in the folder NonORM.

Flash Builder :

Using the DCRAD Import workflow import the employeesService.cfc (in both ORM and Non-ORM case) to view the services in the Data/Service panel in Gumbo. Perform data binding to your Flex compoments/controls using the data just retrieved from the service.

Also observe an icon created next to the entity ‘Employees’ indicating it being ‘Data Managed’ and also an icon besides getemployees_paged which indicates PAGINATION is enabled for the function.

FlashBuilderView

Also here is a sample recording illustrating the workflow,

https://admin.adobe.acrobat.com/_a295153/p95402910/

Note: In the video there is a mention to install ‘Adobe CFC Generator’ which is not necessary as the BETA2 build of Bolt has the updated code generator.

Isn’t this an AWESOME stuff?

Please download the builds, play-around and provide your valuable feedbacks.

Hope this HELPS 🙂

Categories: Uncategorized

Unit test to test live data coming out of a Flex Service call – FlexUnit re-visited :)

August 22, 2009 1 comment

Here is an attempt to explain the way(one of the ways) to write unit tests for a service call(via HTTPService,WebService or RemoteObject) which  returns live data.

Pre-requisites:

1) Adobe Flash Builder4 beta.

2) Please import the project attached here

Note: Refresh the service EmployeeService in the Data/Services panel for the project to compile succesfully

My use-case:

I have an xml file called employees.xml, i would like to display the details of all the employees available in my application.I use HTTPService to get the data to the flex application. Using the Data centric application dvevelopment(DCRAD) wizards i generate a new HTT P Service with an operation called getEmployees( refer to EmployeeService.as and _Super_EmployeeService.as in services folder in the attached project).

My job is to find out if the function getEmployees is returning the right data. So i perform an unit test to check if the number of employees is correct. FYI the getEmployees function returns me an AsyncToken whose result property will be populated with the result of the operation when the server receives the response.

Please find the code for the getEmployees function below:

public function getEmployees() : AsyncToken
{
var _internal_operation:AbstractOperation = _serviceControl.getOperation(“getEmployees”);
var _internal_token:AsyncToken = _internal_operation.send() ;
return _internal_token;
}

public function getEmployees() : AsyncToken

{

var _internal_operation:AbstractOperation = _serviceControl.getOperation(“getEmployees”);

var _internal_token:AsyncToken = _internal_operation.send() ;

return _internal_token;

}

Using the FlexUnit integration in Flash Builder i create a test case to test the above function.

Please refer to creation of test case class from https://balajisridhar.wordpress.com/2009/06/06/a-jolly-ride-with-flexunit-in-flash-builder4/

In the Test Case wizard, name the class as ‘EmpServiceTest’ and select ‘Class to test’ as EmployeeService.as and select the ‘Method to Test’ as getEmployees.

In the EmpServiceTest class generated by Flash Builder add the following code in the method ‘testGetEmployees’

var asynToken:AsyncToken;

var myTimer:Timer;

asynToken = classToTestRef.getEmployees();

myTimer = new Timer(3000,1);

myTimer.addEventListener(TimerEvent.TIMER_COMPLETE,addAsync(resultHandler1,3500));

myTimer.start();

Please find this code in the EmpServiceTest.as in the flexUnitTests folder in the attached project

There are 2 things which i am performing here:

a) Calling the getEmployees function from the reference(classToTestRef) of EmployeeService.as class.

b) Trying to hold the application untill my tests run by setting the timer to a particular time(3500 s) and calling a function resultHandler1.

Now create a new function resultHandler1 by pasting the following code in ‘EmpServiceTest.as’:

public  function resultHandler1(event:TimerEvent):void

{

//Alert.show(“Here”);

var arrColl:ArrayCollection =asynToken.result as ArrayCollection;

if(arrColl)

assertEquals(arrColl.length, 26);

}

I am trying to process the result from the AsyncToken and checking if the number of employees in the result is 26.To do this i assign the asyncToken’s result to an ArrayCollection and i am checking for the length property of the ArrayCollection.

Run the test by context clicking on ‘EmpServiceTest’ and select ‘Execute FlexUnit Tests’. The test passes as the number of employees are 26 and the result is displayed in the Flash Builder’s ‘FlexUnit Results’ panel.

“HOPE THIS HELPS “ 🙂


Categories: Uncategorized

“Flex in a week” hackerChallenge brought to you by Adobe Evangelism India!

Hey Folks,

Adobe India Evangelism Team launches a new challenge in Flex.

On successful completion of the challenge you win exciting  prizes!

For more details, check out here

Do participate ,establish yourself as a “Flex Hacker”  and also win a personalized BADGE like this:

My Badge

My Badge

Cheers 🙂

Categories: Uncategorized

ColdFusion’s dive into the ORM world:)

Here is a small post on one of the most competitive, in-house server technology… yes i mean “ColdFusion(CF)“.

First Of All, Congratulations to the CF team for releasing the public BETA of ColdFusion Centaur(CF9) and ColdFusion Builder(Bolt) 🙂

Play around with Centaur and  Bolt – The “BETA BOYS“!

The ‘Talk Of the Post’ is that CF now provides ORM support – for all you ‘ORM Guru’s‘!

There is also a plug-in which can generate ORM code based on your relational database.All you do is just select a table from your data source and say ‘Generate ORM code” – Boom : There you go 🙂

Wanna try out ? Download the plug-in and the instructions from here

Guess what? the ORM code thus generated can be directly consumed by Flash Builder. For more details on this, “STAY TUNED” 🙂

Categories: Uncategorized