Histórico da Página
| HTML |
|---|
<div id="main-content" class="wiki-content group">
<p class="MsoNormal">El visualizador de gráficos tiene como
principal objetivo permitir que otras aplicaciones puedan mostrar
gráficos personalizados dentro de Fluig. Para ello, basta sólo con
registrar el servicio de gráfico en Fluig y proporcionar dos métodos
rest. Uno que informará los parámetros de configuración del gráfico y
otro que pondrá a disposición los datos.</p>
<p class="MsoNormal">
<span style="font-size: 10.0pt; line-height: 13.0pt;">El
Visualizador de Gráficos permite exhibir en formato tabla, gráfico de
columna y gráfico de torta.</span>
</p>
<p class="MsoNormal">
<span style="font-size: 10.0pt; line-height: 13.0pt;"><img
class="confluence-embedded-image"
src="http://www.tdn.totvs.com/download/attachments/80970184/grafico1.png?version=1&modificationDate=1380654979000&api=v2"
data-image-src="http://www.tdn.totvs.com/download/attachments/80970184/grafico1.png?version=1&modificationDate=1380654979000&api=v2"></span>
</p>
<p class="MsoNormal">
<span style="font-size: 10.0pt; line-height: 13.0pt;"><img
class="confluence-embedded-image"
src="http://www.tdn.totvs.com/download/attachments/80970184/grafico2.png?version=1&modificationDate=1380654979000&api=v2"
data-image-src="http://www.tdn.totvs.com/download/attachments/80970184/grafico2.png?version=1&modificationDate=1380654979000&api=v2"><br /></span>
</p>
<p class="MsoNormal">
<span style="font-size: 10.0pt; line-height: 13.0pt;"><img
class="confluence-embedded-image"
src="http://www.tdn.totvs.com/download/attachments/80970184/grid.png?version=1&modificationDate=1380654979000&api=v2"
data-image-src="http://www.tdn.totvs.com/download/attachments/80970184/grid.png?version=1&modificationDate=1380654979000&api=v2"></span>
</p>
<p class="MsoNormal">
<strong style="font-size: 10.0pt; line-height: 13.0pt;">1. Registrar
el servicio de datos en Fluig.</strong>
</p>
<p class="MsoNormal">Para registrar el servicio de datos del
gráfico basta con enviar un mensaje asincrónico a Fluig.</p>
<p class="MsoNormal">El desarrollador deberá utilizar el evento
"REGISTER_CHART_SERVICE". Será necesario pasar un objeto de tipo
ChartServiceVO con los datos del servicio de datos en cuestión.</p>
<p class="MsoNormal">
El objeto ChartServiceVO, disponible en el paquete
com.totvs.technology.wcm.common.chart, está compuesto por los
siguientes elementos:<br />
<span style="font-size: 10.0pt; line-height: 13.0pt;">String
id: código del servicio de gráfico<br />
</span><span style="font-size: 10.0pt; line-height: 13.0pt;">String
description: descripción del servicio de gráfico<br />
</span><span style="font-size: 10.0pt; line-height: 13.0pt;">String
ParametersRest: URL del servicio rest que devolverá los parámetros<br />
</span><span style="font-size: 10.0pt; line-height: 13.0pt;">String
dataRest: URL del servicio rest que devolverá los datos del gráfico</span>
</p>
<p class="MsoNormal">
<strong>Ejemplo:</strong>
</p>
<p class="MsoNormal">
ChartServiceVO ecm1 = new ChartServiceVO("ECM1", "ECM - Volumes:
Espacio utilizado (por volumen en %) ");<br />
<span style="font-size: 10.0pt; line-height: 13.0pt;">ecm1.setDataRest(“</span><a
href="http://localhost:8080/portal/ecm/api/rest/ecm/volume/chartDataByVolume"
style="font-size: 10.0pt; line-height: 13.0pt;" class="external-link"
rel="nofollow">http://localhost:8080/portal/ecm/api/rest/ecm/volume/chartDataByVolume</a><span
style="font-size: 10.0pt; line-height: 13.0pt;">");<br /></span><span
style="font-size: 10.0pt; line-height: 13.0pt;">ecm1.setParametersRest(“</span><a
href="http://localhost:8080/portal/ecm/api/rest/ecm/volume/chartParametersByVolume"
style="font-size: 10.0pt; line-height: 13.0pt;" class="external-link"
rel="nofollow">http://localhost:8080/portal/ecm/api/rest/ecm/volume/chartParametersByVolume</a><span
style="font-size: 10.0pt; line-height: 13.0pt;">");<br /></span><span
style="font-size: 10.0pt; line-height: 13.0pt;">IntegrationUtil.sendAsyncMessage(WCMAsyncEvents.REGISTER_CHART_SERVICE.getEvent(),
ecm1);</span>
</p>
<p class="MsoNormal">Este registro se debe ejecutar cada vez que se
deploya la aplicación, es decir, cada vez que sube el fluig. Para
ello, sugerimos crear un servlet en su aplicación con la opción
loadOnStartup = 1, que se encargará de cumplir esta tarea.</p>
<p class="MsoNormal">
<strong>2. Servicios de Parámetros</strong><span
style="font-size: 10.0pt; line-height: 13.0pt; text-indent: -24.0px;"> </span>
</p>
<p class="MsoNormal">
<span
style="font-size: 10.0pt; line-height: 13.0pt; text-indent: -24.0px;">Este
servicio rest deberá devolver una lista de ChartParameterVO, que
contendrá los parámetros que su servicio de datos necesitará para
proporcionar los datos del gráfico. En base a este servicio el Fluig
construirá la pantalla de configuración.<br />
<br />
</span><span style="font-size: 10.0pt; line-height: 13.0pt;">El
ChartParameterVO (pacote com.totvs.technology.wcm.common.chart) esta
compueto por los siguientes elementos:<br />
</span><span style="font-size: 10.0pt; line-height: 13.0pt;">int
código id: código numérico secuencial que se utilizará para la
búsqueda de los datos posteriormente.<br />
</span><span style="font-size: 10.0pt; line-height: 13.0pt;">String
title: nombre del campo como aparecerá en la pantalla<br />
</span><span style="font-size: 10.0pt; line-height: 13.0pt;">String
type: tipo de campo (ChartParameterVO.TYPE_STRING,
ChartParameterVO.TYPE_NUMBER, ChartParameterVO.TYPE_DATA ou
ChartParameterVO.TYPE_BOOLEAN)<br />
</span><span style="font-size: 10.0pt; line-height: 13.0pt;">String
AllowedList: si el campo es tipo string, pueden desplegarse una lista
con opciones para que el usuario seleccione. Estas opciones están
separadas por “;”<br />
</span><span style="font-size: 10.0pt; line-height: 13.0pt;">boolean
multipleSelection - > true/false, en caso de que permita o no la
selección múltiple si el AllowedList está en uso.<br />
</span><span style="font-size: 10.0pt; line-height: 13.0pt;">String
value - > Valor inicial si existe</span>
</p>
<p class="MsoNormal">
<strong>Exemplo:<br /></strong><span
style="font-size: 10.0pt; line-height: 13.0pt;">List<ChartParameterVO>
params = new ArrayList<>();<br />
</span><span style="font-size: 10.0pt; line-height: 13.0pt;">ChartParameterVO
param1 = new ChartParameterVO();<br />
</span><span style="font-size: 10.0pt; line-height: 13.0pt;">param1.setCode(1);<br /></span><span
style="font-size: 10.0pt; line-height: 13.0pt;">param1.setTitle("Código
del Ítem");<br />
</span><span style="font-size: 10.0pt; line-height: 13.0pt;">param1.setType(ChartParameterVO.TYPE_STRING);<br /></span><span
style="font-size: 10.0pt; line-height: 13.0pt;">param1.setAllowedList(“Item
1;Item 2;Item 3”);<br />
</span><span style="font-size: 10.0pt; line-height: 13.0pt;">param1.setMultipleSelection(ChartParameterVO.SELECTION_UNIQUE);<br /></span><span
style="font-size: 10.0pt; line-height: 13.0pt;">params.add(param1);</span>
</p>
<p class="MsoNormal">
ChartParameterVO param2 = new ChartParameterVO();<br />
<span style="font-size: 10.0pt; line-height: 13.0pt;">param2.setCode(2);<br /></span><span
style="font-size: 10.0pt; line-height: 13.0pt;">param2.setTitle("Exhibir
solamente ítems activos");<br />
</span><span style="font-size: 10.0pt; line-height: 13.0pt;">param2.setType(ChartParameterVO.TYPE_BOOLEAN);<br /></span><span
style="font-size: 10.0pt; line-height: 13.0pt;">params.add(param2);<br /></span><span
style="font-size: 10.0pt; line-height: 13.0pt;">return params;<br />
<span style="font-size: 10.0pt; line-height: 13.0pt;"><br />
<br />
<strong>3. Servicio de Datos</strong><br />
<br />El servicio REST deberá devolver una </span><span
style="font-size: 10.0pt; font-family: Consolas; color: black; background: silver;">ChartVO</span><span
style="font-size: 10.0pt; font-family: Consolas; color: black;">,
con los datos para exhibir el gráfico.<br />
</span></span><span style="font-size: 10.0pt; line-height: 13.0pt;">O ChartVO
(paquete com.totvs.technology.wcm.common.chart) está compuesto por
los siguientes elementos:<br />
</span><span style="font-size: 10.0pt; line-height: 13.0pt;">String
title: título que se exhibirá en el gráfico<br />
</span><span style="font-size: 10.0pt; line-height: 13.0pt;">String
description: descripción del gráfico<br />
</span><span style="font-size: 10.0pt; line-height: 13.0pt;">String
type: tipo do gráfico (ChartTypes.column.getName(),
ChartTypes.pie.getName(), ChartTypes.table.getName()<br />
</span><span style="font-size: 10.0pt; line-height: 13.0pt;">Map<String,
Object>[] source: datos del gráfico<br />
</span><span style="font-size: 10.0pt; line-height: 13.0pt;">ChartCategoryVO
category: categorías<br />
</span><span style="font-size: 10.0pt; line-height: 13.0pt;">ChartSerieGroupVO[]
seriesGroups: grupos de series</span>
</p>
<p class="MsoNormal">
<strong>Ejemplo para un Gráfico de torta:</strong>
</p>
<p class="MsoNormal">
ChartVO result = new ChartVO("Espacio utilizado", "Volumen" +
codVolFisic,ChartTypes.pie.getName());<br />
<span
style="font-size: 10.0pt; line-height: 13.0pt; text-indent: -35.4pt;">Map<String,
Object>[] source = new Map[2];<br />
</span><span style="font-size: 10.0pt; line-height: 13.0pt;">Map<String,
Object> data0 = new HashMap<String, Object>();<br />
</span><span style="font-size: 10.0pt; line-height: 13.0pt;">data0.put("label","Utilizado");<br /></span><span
style="font-size: 10.0pt; line-height: 13.0pt;">data0.put("size",80);<br /></span><span
style="font-size: 10.0pt; line-height: 13.0pt;">source[0] =
data0;</span>
</p>
<p class="MsoNormal">
Map<String, Object> data1 = new HashMap<String, Object>();<br />
<span style="font-size: 10.0pt; line-height: 13.0pt;">data1.put("label","Livre");<br /></span><span
style="font-size: 10.0pt; line-height: 13.0pt;">data1.put("size",20);<br /></span><span
style="font-size: 10.0pt; line-height: 13.0pt;">source[1] =
data1;<br />
</span><span style="font-size: 10.0pt; line-height: 13.0pt;">result.setSource(source);</span>
</p>
<p class="MsoNormal">
ChartSerieGroupVO[] seriesGroups = new ChartSerieGroupVO[1];<br />
<span style="font-size: 10.0pt; line-height: 13.0pt;">ChartSerieGroupVO
serieGroup = new ChartSerieGroupVO(ChartTypes.pie.getName(),"label");<br />
</span><span style="font-size: 10.0pt; line-height: 13.0pt;">ChartSerieVO[]
series = new ChartSerieVO[1];<br />
</span><span style="font-size: 10.0pt; line-height: 13.0pt;">ChartSerieVO
serie = new ChartSerieVO("size","label");<br />
</span><span style="font-size: 10.0pt; line-height: 13.0pt;">series[0]
= serie;<br />
</span><span style="font-size: 10.0pt; line-height: 13.0pt;">serieGroup.setSeries(series);<br /></span><span
style="font-size: 10.0pt; line-height: 13.0pt;">seriesGroups[0]
= serieGroup;</span>
</p>
<p class="MsoNormal">
result.setSeriesGroups(seriesGroups);<br />
<span style="font-size: 10.0pt; line-height: 13.0pt;">return
result;</span>
</p>
<p class="MsoNormal">
<strong>Ejemplo para un Gráfico de columnas:<br /></strong><span
style="font-size: 10.0pt; line-height: 13.0pt;">ChartVO result
= new ChartVO("Espacio utilizado","Todos los
volúmenes",ChartTypes.column.getName());</span>
</p>
<p class="MsoNormal">Map<String, Object>[] source = new
Map[2]; </p>
<p class="MsoNormal">
Map<String, Object> data0 = new HashMap<String, Object>();<br />
<span style="font-size: 10.0pt; line-height: 13.0pt;">data0.put("label",”Item
1”);<br />
</span><span style="font-size: 10.0pt; line-height: 13.0pt;">data0.put("total",100);<br /></span><span
style="font-size: 10.0pt; line-height: 13.0pt;">data0.put("used",40);<br /></span><span
style="font-size: 10.0pt; line-height: 13.0pt;">data0.put("free",60);<br /></span><span
style="font-size: 10.0pt; line-height: 13.0pt;">source[0] =
data0;</span>
</p>
<p class="MsoNormal">
Map<String, Object> data0 = new HashMap<String, Object>();<br />
<span style="font-size: 10.0pt; line-height: 13.0pt;">data0.put("label",”Ítem
2”););<br />
</span><span style="font-size: 10.0pt; line-height: 13.0pt;">data0.put("total",120);<br /></span><span
style="font-size: 10.0pt; line-height: 13.0pt;">data0.put("used",60);<br /></span><span
style="font-size: 10.0pt; line-height: 13.0pt;">data0.put("free",60);<br /></span><span
style="font-size: 10.0pt; line-height: 13.0pt;">source[1] =
data0;</span>
</p>
<p class="MsoNormal">result.setSource(source);</p>
<p class="MsoNormal">
ChartCategoryVO category = new ChartCategoryVO("label");<br />
<span style="font-size: 10.0pt; line-height: 13.0pt;">result.setCategory(category);</span>
</p>
<p class="MsoNormal">
ChartSerieGroupVO[] seriesGroups = new ChartSerieGroupVO[1];<br />
<span style="font-size: 10.0pt; line-height: 13.0pt;">ChartSerieGroupVO
serieGroup = new
ChartSerieGroupVO(ChartTypes.column.getName(),"Espaço(Mb)");</span>
</p>
<p class="MsoNormal">
ChartAxiVO axis = new ChartAxiVO(20,true,"Espaço(Mb)");<br />
<span style="font-size: 10.0pt; line-height: 13.0pt;">serieGroup.setValueAxis(axis);</span>
</p>
<p class="MsoNormal">ChartSerieVO[] series = new ChartSerieVO[3];</p>
<p class="MsoNormal">
ChartSerieVO total = new ChartSerieVO("total","Espaço Total");<br />
<span style="font-size: 10.0pt; line-height: 13.0pt;">series[0]
= total;</span>
</p>
<p class="MsoNormal">
ChartSerieVO used = new ChartSerieVO("used","Espacio Utilizado");<br />
<span style="font-size: 10.0pt; line-height: 13.0pt;">series[1]
= used;</span>
</p>
<p class="MsoNormal">
ChartSerieVO free = new ChartSerieVO("free","Espacio Libre");<br />
<span style="font-size: 10.0pt; line-height: 13.0pt;">series[i]
= free;</span>
</p>
<p class="MsoNormal">
serieGroup.setSeries(series);<br />
<span style="font-size: 10.0pt; line-height: 13.0pt;">seriesGroups[0]
= serieGroup;</span>
</p>
<p class="MsoNormal">result.setSeriesGroups(seriesGroups);</p>
<p class="MsoNormal">return this.buildResponse(result);</p>
<p class="MsoNormal">
<strong>Ejemplo para un Gráfico de tablas:</strong>
</p>
<p class="MsoNormal">ChartVO result = new ChartVO("Espacio
utilizado","Todos los volúmenes",ChartTypes.table.getName());</p>
<p class="MsoNormal">Map<String, Object>[] source = new Map[2];</p>
<p class="MsoNormal">
Map<String, Object> data0 = new HashMap<String, Object>();<br />
<span style="font-size: 10.0pt; line-height: 13.0pt;">data0.put("label",”Item
1”);<br />
</span><span style="font-size: 10.0pt; line-height: 13.0pt;">data0.put("total",100);<br /></span><span
style="font-size: 10.0pt; line-height: 13.0pt;">data0.put("used",40);<br /></span><span
style="font-size: 10.0pt; line-height: 13.0pt;">data0.put("free",60);<br /></span><span
style="font-size: 10.0pt; line-height: 13.0pt;">source[0] =
data0;</span>
</p>
<p class="MsoNormal">
Map<String, Object> data0 = new HashMap<String, Object>();<br />
<span style="font-size: 10.0pt; line-height: 13.0pt;">data0.put("label",”Ítem
2”););<br />
</span><span style="font-size: 10.0pt; line-height: 13.0pt;">data0.put("total",120);<br /></span><span
style="font-size: 10.0pt; line-height: 13.0pt;">data0.put("used",60);<br /></span><span
style="font-size: 10.0pt; line-height: 13.0pt;">data0.put("free",60);<br /></span><span
style="font-size: 10.0pt; line-height: 13.0pt;">source[1] =
data0;</span>
</p>
<p class="MsoNormal">result.setSource(source);</p>
<p class="MsoNormal">ChartSerieGroupVO[] seriesGroups = new
ChartSerieGroupVO[1];</p>
<p class="MsoNormal">ChartSerieGroupVO serieGroup = new
ChartSerieGroupVO(ChartTypes.table.getName(),"Espacio(Mb)");  
   </p>
<p class="MsoNormal">ChartAxiVO axis = new
ChartAxiVO(20,true,"Espaço(Mb)");</p>
<p class="MsoNormal">serieGroup.setValueAxis(ejes);</p>
<p class="MsoNormal">ChartSerieVO[] series = new ChartSerieVO[4];</p>
<p class="MsoNormal">
ChartSerieVO label = new ChartSerieVO("label","Item");<br />
<span style="font-size: 10.0pt; line-height: 13.0pt;">series[0]
= label;</span>
</p>
<p class="MsoNormal">
ChartSerieVO total = new ChartSerieVO("total","Espaço Total");<br />
<span style="font-size: 10.0pt; line-height: 13.0pt;">series[1]
= total;</span>
</p>
<p class="MsoNormal">
ChartSerieVO used = new ChartSerieVO("used","Espacio Utilizado");<br />
<span style="font-size: 10.0pt; line-height: 13.0pt;">series[2]
= used;</span>
</p>
<p class="MsoNormal">
ChartSerieVO free = new ChartSerieVO("free","Espacio Libre");<br />
<span style="font-size: 10.0pt; line-height: 13.0pt;">series[3]
= free;</span>
</p>
<p class="MsoNormal">
serieGroup.setSeries(series);<br />
<span style="font-size: 10.0pt; line-height: 13.0pt;">seriesGroups[0]
= serieGroup;</span>
</p>
<p class="MsoNormal">result.setSeriesGroups(seriesGroups);</p>
<p class="MsoNormal">return this.buildResponse(result);</p>
</div> |
Visão Geral
Import HTML Content
Conteúdo das Ferramentas
Tarefas