Introdução

A algum tempo venho postando em meu blog, videos demonstrativos da interação possível de CFFORM (flash) com componentes mxml.
Para os que não conhecem a compilação do CFFORM (flash) , ela é provida pelo mesmo compilador do Servidor Flex 1.5, em outras palavras o ColdFusion MX 7 e supeirores (até o momento) dispõem de um Servidor Flex 1.5, o que favorece a utilização de arquivos MXML (1.5) em paginas CFML, e será isto que será visto aqui. E os videos do meu blog, a grande maioria, utiliza este artifício, o que facilita em muito algumas construções, como exemplo para este artigo escolhi a geração de gráficos, muitos podem dizer “AH! Mas temos o CFCHART!”, e concordo, mas como verão o resultado final, os efeitos visuais são bem mais interativos e agradáveis.

Pré-requisito

- ColdFusion MX 7.0.2.

Conceitos

O conceito utiliado é o mesmo para utilização de componentes MXML 1.5 por PopUps, para um melhor entendimento, separei alguns links importantes do livedocs:
Using MXML components — Version 1.5

Creating a pop-up TitleWindow container using the PopUp Manager
Passing data to a pop-up TitleWindow container

E a forma utilizada na chamada do componente MXML foi através das classes PopUpManager e TitleWindow, isto porque até o momento o cfform não é flexível o suficientes para absorver novas tags a partir de componentes MXML, como o própio MXML faz.

Com este tipo de desenvolvimento teremos duas linguaguens de marcação e uma linguagem de script para a construção de um aplicativo, são eles: CFML (>=7), MXML (1.5) e ActionScript (2.0 com classes do Flex 1.5).

Conteúdo

Para a parte da utilização do MXML não produzi nenhum código, para não complicar esta matéria, mais do que já pôde ser, então o componente utilizado será o contido no artigo “Beyond the DataGrid Control: Better Data Visualization with Flex Charting Components
de Ely Greenfield” publicado no DevNet Flex.

Então como você já leu o artigo de Greenfield e baixou os arquivos, vamos a parte CFML.
Para uma interação básica, nenhuma alteração será feita nos arquivos de Greenfield, e para a chamada do componente em ma pagina CFML, um trabalho imenso de escrita para chamar o componente MXML.

Lembrando apenas que os arquivos do MXML e AS devem estar no mesmo diretório que ficaram as paginas CFML

c:\inetpub\wwwroot\cfform\charting\ZingerChart.cfm

Onde invocamos o componente ZingerChart_final.mxml sem o “.MXML” , da mesma forma que você observou no artigo do livedocs.

Agora vamos deixar o Panel livre dentro do cfform final (no cliente), ou melhor vamos dar-lhe a propriedade Drag, para que o cliente possa movimentar o Panel, e para isto precisamos modificar o MXML de Greenfield, então salve ZingerChart_final.mxml com o nome ZingerChart_final_1.mxml e abra que possa ser editado ficando da seguinte forma.

c:\inetpub\wwwroot\cfform\charting\ZingerChart_final_1.mxml

<mx:Panel title=”sample chart” xmlns:mx=”http://www.macromedia.com/2003/mxml”
initialize=”initDummyData();” height=”330″ width=”450″ > <mx:Script source=”zingerChartFunctions.as” />

<mx:Effect>
<mx:SeriesInterpolate duration=”500″ elementOffset=”5″ name=”drillDownEffect” />
</mx:Effect>

<mx:ColumnChart verticalAxisStyle=”linedNumericAxis” dataProvider=”{zingerManufacturingData}” width=”100%” height=”70%” showDataTips=”true”
mouseClickData=”getDrillDownDataForMonth(event.hitData.element.yField, event.hitData.item);” >
<mx:horizontalAxis>
<mx:CategoryAxis dataProvider=”{zingerManufacturingData}” categoryField=”Month” name=”Month” />
</mx:horizontalAxis>

<mx:verticalAxis>
<mx:LinearAxis name=”Units Sold” />
</mx:verticalAxis>

<mx:series>
<mx:Array>
<mx:ColumnSeries yField=”Widgets” name=”luxury Widgets” >
<mx:fill>
<mx:SolidColor color=”#82C9EB” />
</mx:fill>
</mx:ColumnSeries>
<mx:ColumnSeries yField=”Blinkies” name=”Mass Market Blinkies”>
<mx:fill>
<mx:LinearGradient angle=”0″>
<mx:entries>
<mx:Array>
<mx:GradientEntry ratio=”30″ color=”#258BC8″ />
<mx:GradientEntry ratio=”80″ color=”#82C9EB” />
<mx:GradientEntry ratio=”100″ color=”#258BC8″ />
</mx:Array>
</mx:entries>
</mx:LinearGradient>
</mx:fill>
</mx:ColumnSeries>
</mx:Array>
</mx:series>

<mx:verticalAxisRenderer>
<mx:AxisRenderer labelFunction=”formatThousands” />
</mx:verticalAxisRenderer>

</mx:ColumnChart>

<mx:Label id=”drilldownLabel” text=”{drilldownTitle}” fontSize=”16″ height=”10%” width=”100%” fontWeight=”bold” />

<mx:CartesianChart id=”drillDownChart” width=”100%” height=”20%” dataProvider=”{drilldownValues}” fontFamily=”chartLabelFont”
horizontalAxisStyle=”hangingCategoryAxis” verticalAxisStyle=”linedNumericAxis”>

<mx:horizontalAxis>
<mx:CategoryAxis dataProvider=”{drilldownValues}” categoryField=”week” />
</mx:horizontalAxis>

<mx:horizontalAxisRenderer>
<mx:AxisRenderer canDropLabels=”true” />
</mx:horizontalAxisRenderer>

<mx:verticalAxisRenderer>
<mx:AxisRenderer labelFunction=”formatThousands” />
</mx:verticalAxisRenderer>

<mx:series>
<mx:Array>
<mx:ColumnSeries yField=”sales” showDataEffect=”drillDownEffect” />
<mx:LineSeries form=”curve” yField=”avg” showDataEffect=”drillDownEffect”>
<mx:stroke>
<mx:Stroke weight=”3″ color=”#82C9EB” />
</mx:stroke>
</mx:LineSeries>
</mx:Array>
</mx:series>

</mx:CartesianChart>

</mx:Panel>

Se observou bem os dois arquivos, original (ZingerChart_final.mxml) e cópia (ZingerChart_final_1.mxml ), percebeu que a cópia não possui a tag mx:Style, isto porque todo seu seu conteúdo foi inserido em {cf_root}/WEB-INF/cfform/global.css, e ainda removemos a tag Application, em seu lugar colocamos uma tag container, mx:Panel, que herda algumas propriedades que precisamos.

E a chamada do componente MXML no CFFORM muda muito pouco.
c:\inetpub\wwwroot\cfform\charting\ZingerChartPopUp.cfm

O próximo passo criar a dinâmica de dados para o gráfico, para isso contrui um CFC básico, exemplo simples, para a utilização por Remoting.

c:\inetpub\wwwroot\cfform\charting\data.cfc

<cfcomponent>
<cffunction name=”get” access=”remote” returntype=”query”>
<cfargument name=”Year” type=”string” required=”yes”>
<cfscript>
var Query = QueryNew(“”);
var i = “”;
var data = StructNew();
data.Month = Replace(“January ‘|,February ‘|,March ‘|,April ‘|,May ‘|,June’|,July ‘|,August ‘|,September ‘|,October ‘|,November ‘|,December ‘|”,”|”,Arguments.Year,”All”);
data.Widgets = “#RandRange(350000,900000)#” ;
data.Blinkies = “#RandRange(150000,350000)#”;
for(i = 2; i lte 12; i=i+1){
data.Widgets = “#data.Widgets#,#RandRange(350000,900000)#” ;
data.Blinkies = “#data.Blinkies#,#RandRange(150000,350000)#”;
}
data.monthIdx = “1,2,3,4,5,6,7,8,9,10,11,12″;
for(i in data){
QueryAddColumn(Query,i,ListToArray(data[i]));
}
return Query;
</cfscript>
</cffunction>
</cfcomponent>
E alteramos o componente MXML mais uma vez para que fique da seguinte forma.

c:\inetpub\wwwroot\cfform\charting\ZingerChart_final_2.mxml

<mx:TitleWindow title=”sample chart” xmlns:mx=”http://www.macromedia.com/2003/mxml”
initialize=”initDummyData();” height=”330″ width=”450″ > <mx:Script source=”zingerChartFunctions.as” />

<mx:Effect>
<mx:SeriesInterpolate duration=”500″ elementOffset=”5″ name=”drillDownEffect” />
</mx:Effect>

<mx:verticalAxis>
<mx:LinearAxis name=”Units Sold” />
</mx:verticalAxis>

<mx:verticalAxisRenderer>
<mx:AxisRenderer labelFunction=”formatThousands” />
</mx:verticalAxisRenderer>

</mx:ColumnChart>

<mx:Label id=”drilldownLabel” text=”{drilldownTitle}” fontSize=”16″ height=”10%” width=”100%” fontWeight=”bold” />

<mx:horizontalAxis>
<mx:CategoryAxis dataProvider=”{drilldownValues}” categoryField=”week” />
</mx:horizontalAxis>

<mx:horizontalAxisRenderer>
<mx:AxisRenderer canDropLabels=”true” />
</mx:horizontalAxisRenderer>

<mx:verticalAxisRenderer>
<mx:AxisRenderer labelFunction=”formatThousands” />
</mx:verticalAxisRenderer>

</mx:CartesianChart>

</mx:TitleWindow>

Finalizando com um arquivo CFML contendo um ActionScript mais complexo para trabalhar com dados remotos.

c:\inetpub\wwwroot\cfform\charting\ZingerChartPopUpDynamic.cfm

<cfform name=”basic” format=”flash” width=”650″>
<cfformitem type=”script”>
function createChart(value){
var connection:mx.remoting.Connection = mx.remoting.NetServices.createGatewayConnection(‘http://localhost:8300/flashservices/gateway/’);
var serviceEvent:Object = {};
serviceEvent.onResult = function(result):Void{
var query = [];
for(var i=0; i < result._items.length; i++){
query[i] = {};
query[i].Month=result._items[i].MONTH;
query[i].Widgets=result._items[i].WIDGETS;
query[i].Blinkies=result._items[i].BLINKIES;
query[i].monthIdx=result._items[i].MONTHIDX;
}
_root[value] = mx.managers.PopUpManager.createPopUp(_root, ZingerChart_final_2);
_root[value].centerPopUp();
_root[value].closeButton = true;
_root[value].zingerManufacturingData = query;
_root[value].title = ‘Chart Year ‘+value;
var listener:Object = {};
listener.click = function(e){
e.target.deletePopUp();
}
_root[value].addEventListener(‘click’,listener);
};
serviceEvent.onStatus = function(status):Void{
alert(status.description,status.level);
};
var servicePath:String = ‘cfform.charting.data’;
var service:mx.remoting.NetServiceProxy = connection.getService(servicePath,serviceEvent);
service.get({Year:value});
}
</cfformitem>
<cfformgroup type=”hbox” width=”642″ style=”margin:0″>
<cfselect name=”Year” width=”70″ label=”Year” onChange=”createChart(Year.value);”>
<cfloop from=”1″ to=”12″ index=”i”>
<cfset currentYear = 1995+i >
<cfoutput>
<option value=”#Right(currentYear,2)#”>#currentYear#</option>
</cfoutput>
</cfloop>
</cfselect>
</cfformgroup>
</cfform>

Enjoy !!
–
Pedro Claudio
Adobe Certified Professional
Blog

FormatCF(new Array(\’ZingerChart.cfm\’,\’ZingerChartPopUpDynamic.cfm\’,\’data.cfc\’,\’ZingerChartPopUp.cfm\’)); FormatXML(new Array(\’ZingerChart_final_2.mxml\’,\’ZingerChart_final_1.mxml\’));

CFFORM com MXML 1.5 Componentes

Introdução

Pré-requisito

Conceitos

Conteúdo

Artigos Relacionados

Deixe um Comentario

Pedro Claudio

Últimos Artigos do Autor