ColdFusion 8 and LiveCycle Data Services: Part 3

Posted At : February 15, 2009 8:11 PM | Posted By : Tofinha
Related Categories: ColdFusion 8, Flex, LCDS, Tutorials, ColdFusion

sorry for the delay...

My wife gave light on the last day 31 of Jan ! :-D

Good, taking sequence, let’s go close the third part creating data base, the data source on CFAdmin is the beginning codification on Flex.

As database I am going to use MySQL 5x.

Take out the code to generate tables:

create database if not exists `usermanager`;
USE `usermanager`;
/*Table structure for table `users` */
DROP TABLE IF EXISTS `users`;

CREATE TABLE `users` (
    `userID` int(4) NOT NULL AUTO_INCREMENT,
    `userName` varchar(50) NOT NULL,
    `userLastName` varchar(50) DEFAULT NULL,
    `userEmail` varchar(50) DEFAULT NULL,
    `userGroup` varchar(50) DEFAULT NULL,
    PRIMARY KEY (`userID`)
) ENGINE=InnoDB AUTO_INCREMENT=7 DEFAULT CHARSET=latin1;

/*Data for the table `users` */

insert into `users`(`userID`,`userName`,`userLastName`,`userEmail`,`userGroup`)
values (1,'Francisco','Paulino','tofinha@gmail.com','Family'),(2,'Martha','Christiane','martha@test.com','Family'),
(3,'Samuel','Smith','samuel@teste.com','Friends'),(4,'Ana','Luiza','ana@gmail.com','Family'),
(5,'Tofinha','FCP','tofinha@pop.com.br','Work');

After this, let’s go to create the datasource and Mapping on CFAdmin.
usermanager_mysql creates datasource below as the screens creating the name

The Mapping below as the screens:

Come on generate our CFCs with ColdFusion help.

Using the ColdFusion 8 extensions for Eclipse and Flex Builder

When installing Flex Builder 3 you were asked if you wanted to install the ColdFusion extensions. If you did not select that option you can find them in the ColdFusion LiveDocs.
Set up Eclipse to connect to the ColdFusion Remote Development Service (RDS) by choosing Window > Preferences, then ColdFusion > RDS Configuration.
This example uses the locally installed ColdFusion server. You can specify multiple servers if you also wanted to connect to one or more ColdFusion servers located elsewhere.
Note: If you are using the multiserver install of ColdFusion, the port number will be 80; if you are using the standalone install you should set the port to 80. For the security information, type the username and password that you use to log in to the ColdFusion administrator. Click Test Connection to ensure everything is set up correctly and click OK.

Setting the RDS configuration.

To open the RDS view in the Eclipse workbench, choose Window > Other Views. From the list of views which you can add to the workbench, expand the ColdFusion node, select RDS Dataview, and click OK.

Selecting the RDS Dataview.

You may need to click the refresh button to display the list of defined data sources in your ColdFusion server.
At this point, the ColdFusion CFC wizard will do much of the coding work for you. First you need to create the server-side ColdFusion files that will work with LiveCycle Data Services ES. If you installed the ColdFusion sample data sources you should have the usermanager_mysql data source already. Next, expand the usermanager_mysql and right-click the users table and select ColdFusion Wizards > Create CFC.

The ColdFusion CFC Value Object Wizard. To create the CFC file, follow these steps:

Set CFC Folder to /UserManager/cfcs
Set the default CFC Package Name to usermanager.cfcs
Select LiveCycle Data Services Assembler CFC’s the CFC Type
Set the Bean File Name to user.cfc, the DAO File Name to userDAO.cfc and Assembler File Name to userAssembler.cfc
Set the AS Folder to /UserManager/src/br/com/tofinha/vo
Set the default AS Package Name to br.com.tofinha.vo
Click Finish.

Starting the ColdFusion CFC Value Object Wizard

Take a look at the four files that were generated. While this code is everything we need for this example, you can easily modify it to fit any custom needs you may have. In short, you just saved great deal of time having the wizard generate all the base code that you need.

Let’s create na archive dumpUsers.cfm to test all CFCs documents and IF its all ok like the code below. Save this archive on CFCs folder.

dumpUsers.cfm

<cfscript>
    instCFC = CreateObject("component", "usermanager.cfcs.userAssembler");
    listUsers = instCFC.fill();
</cfscript>

<cfoutput>
<h2>#ArrayLen(listUsers)# records returned</h2>
<cfloop index="i" from="1" to="#ArrayLen(listUsers)#">
    #listUsers[i].getUserId()# - #listUsers[i].getUserName()# <br />
</cfloop>
</cfoutput>

Now, open the browser and type: http://localhost/usermanager/cfcs/dumpUsers.cfm

So, in Flex open the archive UserManager.mxml and let’s go to type the code below:

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%">

    <mx:HDividedBox width="100%" height="100%">

        <mx:Panel title="Lis of Users" width="100%" height="100%">
            <mx:DataGrid id="dgUser" width="100%" height="100%" verticalGridLines="false" horizontalGridLines="true" horizontalGridLineColor="#ffffff">
                <mx:columns>
                    <mx:DataGridColumn dataField="userId" width="50" headerText="ID"/>
                    <mx:DataGridColumn dataField="userName" headerText="Name"/>
                    <mx:DataGridColumn dataField="userEmail" headerText="Last Name"/>
                    <mx:DataGridColumn dataField="userGroup" headerText="Group"/>
                    <mx:DataGridColumn dataField="userId" width="20" headerText="" />
                </mx:columns>
            </mx:DataGrid>

            <mx:ControlBar>
                <mx:ComboBox id="userGroupCombo"/>
                <mx:TextInput id="searchText" width="90%"/>
                <mx:Button label="Search" width="80"/>
                <mx:VRule height="20"/>
                <mx:Button label="Add User"/>
            </mx:ControlBar>
        </mx:Panel>

        <mx:Panel id="generalPanel" title="Details of User:" width="100%" height="100%">

            <mx:Form width="100%" height="100%" id="userForm">
                <mx:FormItem label="Name" required="true">
                    <mx:TextInput id="txtName" width="250" text=""/>
                </mx:FormItem>
                <mx:FormItem label="Last Name">
                    <mx:TextInput id="txtLastName" width="250" text=""/>
                </mx:FormItem>
                <mx:FormItem label="Email">
                    <mx:TextInput id="txtEmail" width="250" text=""/>
                </mx:FormItem>
                <mx:FormItem label="Group">
                    <mx:ComboBox id="groupCombo" width="250"/>
                </mx:FormItem>
            </mx:Form>

            <mx:ControlBar id="generalControlButtons" height="47">
                <mx:Button label="Cancel Updates"/>
                <mx:Spacer width="100%"/>
                <mx:Button label="Save User"/>
            </mx:ControlBar>
        </mx:Panel>

    </mx:HDividedBox>

</mx:Application>

Now we go to see the appearance. Change to desing mode and we must have the screen below: