ColdFusion 8 e LiveCycle Data Services: Parte 3
Aproveitando o embalo vamos criar o banco de dados, o datasource e iniciar a codificação flex.
Como banco de dados vou estar fazendo uso do MySQL 5x.
Abaixo o código para criar o banco de dados com sua respectiva tabela:
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');
Feito isso vamos criar o datasource e um mapeamento no CFAdmin.
Abaixo a imagem com as configs necessárias para nosso datasource que aqui vou chamar de usermanager_mysql
Abaixo um mapeamento apontando para a nossa pasta:
Feito isso vamos gerar nossos CFCs com a ajuda dos wizards do ColdFusion.
Usando as extensões do ColdFusion 8 para o Eclipse e Flex Builder
O ColdFusion disponibiliza extensões que geram CFCs nos padrões DAO, Bean e Assembler, facilitando a integração com o LiveCycle Data Services. Maiores informações podem ser obtidas neste link: ColdFusion LiveDocs.
Na imagem abaixo setamos as configurações necessárias para conectar ao ColdFusion Remote Development Service (RDS), localizado em Window > Preferences, then ColdFusion > RDS Configuration.
Nota: Estou usando o CF integrado ao IIS, na porta 80. Basta entrar com user e senha do CFAdmin e clicar em Test Connection para verificar se está tudo ok.
Para visualizar a view RDS view no workbench do seu Eclipse, escolha Window > Other Views. Na lista de views, expanda o nó ColdFusion e selecione RDS Dataview, e clique em OK.
Feito isso irá aparacer uma lista dos seus datasources disponíveis e um deles é o usermanager_mysql. Agora vamos expandir usermanager_mysql e com o botão direito sobre a tabela users selecione ColdFusion Wizards > Create CFC, conforme a imagem abaixo:
Vamos seguir os seguintes passos:
- Setar oCFC Folder para /UserManager/cfcs
- Setar o Package CFC para usermanager.cfcs
- Em CFC Type, selecione LiveCycle Data Services Assembler CFC
- Setar Bean File Name para user.cfc, o DAO File Name para userDAO.cfc e Assembler File Name para userAssembler.cfc
- Setar a pasta do AS para /UserManager/src/br/com/tofinha/vo
- Setar o Package do AS para br.com.tofinha.vo
- Clique em Finish.
Abaixo a imagem com as configs acima
Ok, feito isso foram criados 3 arquivos CFCs e um arquivo AS.
Vamos criar um arquivo simples com o nome de dumpUsers.cfm para testar a chamada dos CFCs conforme o código abaixo. Salve este arquivo na pasta CFCs.
dumpUsers.cfm
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>
Agora só testar nos eu browser: http://localhost/usermanager/cfcs/dumpUsers.cfm
Agora, vamos iniciar o layout no Flex. Abra o arquivo UserManager.mxml e digite o código abaixo:
<!--
Francisco Paulino
Tofinha - tofinha@gmail.com
http://www.tofinha.com.br/blog/
-->
<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>
No modo design ele deve estar com esta aparência abaixo:
Executando a aplicação teremos algo como a imagem abaixo:
Até aqui ok?
O source desta parte está disponível para download, inclusive fiz pequenos ajustes em especial nos CFCs afim de tudo correr bem.
Por ora é isso! Até a próxima! :-D
Comentários (4) | 
Imprimir | 
Enviar | 
Download |
del.icio.us
| 
Digg It!
| 
Linking Blogs
| 930 Visitas
Onde está o link para Download dos arquivos ?
Fico no aguardo de novos artigos
@Marcio - Tem um icone Donwload logo abaixo do fim do post, ao lado do btão Comentários. Só clicar e baixar o arquivo.
@Marcio - Tá gerando algum erro? tem dados no Banco?