Aufgabenstellung

Auf der Basis einer Datenbank-Abfrage werden Balkendiagramme, Tortendiagramme und Liniendiagramme mit Flex 3 und der Middleware FluorineFX, die auf einem Microsoft IIS Server läuft, erstellt.

Ansatz

FluorineFX lässt sich über die Webseite http://www.fluorinefx.com/download.html herunterladen und installieren.
Es handelt sich hierbei lediglich um eine Web-Anwendung, die auf dem Microsoft IIS Server mit dem Enterprise Manager eingebunden werden muss.

Vorraussetzungen

• Installation von FluorineFX auf dem Microsoft IIS Server
• Installation von Adobe Flex
• Installation einer .NET Umgebung
• Konfiguration aller Komponenten

Lösung

Beispiel

Code in FluorineFX

Der folgende Code wird in Visual Studion (Express) als Projekttyp Klassenbibliothek (oder FluorineFX Service Projekt) mit der Sprache C# genutzt. Die C# Klassenbibliothek wird im kompilierten Zustand (dll-Datei) in den Order „bin“ im FluorineFX-Verzeichnis (welches als Website in IIS eingebunden wurde) kopiert.

Die SQL-Anweisung sollte aus Performance-Gründen möglichst stark aggregiert werden. Das Beispiel benutzt eine zweispaltige Struktur (ReportVO) und kann beliebig angepasst werden.

C# Code:

using System;
using System.Collections.Generic;
using System.Text;
using System.Collections;
using System.Data.SqlClient;
using FluorineFx; // Wichtig! FluorineFx.dll Verweis einbinden

namespace ITReportingServices
{
    [RemotingService("ReportingService")]
    public class ReportingService
    {
        public ArrayList getReport()
        {
            ArrayList reports = new ArrayList();

            SqlConnection conn = 
            new SqlConnection(MyConfigurationManager.msSqlServerString);

            try
            {
                conn.Open();
                SqlCommand comm = new SqlCommand();
                comm.Connection = conn;
                comm.CommandText = "SELECT MONTH(buchdatum) As Monat, "+
               "sum(wert) AS Summe FROM costcenteraccounting "+
               "WHERE (YEAR(buchdatum)) = 2011 "+
               "AND costcenter='101008960' "+
               "GROUP BY (MONTH(buchdatum)), (YEAR(buchdatum))	";
                SqlDataReader reader = comm.ExecuteReader();
                while (reader.Read())
                {
                    ReportVO vo = new ReportVO();
                    vo.monat = reader.GetValue(0).ToString();
                    vo.summe = reader.GetValue(1).ToString().Replace(",",".");
                    reports.Add(vo);
                }
            }
            catch (Exception e)
            {
                reports = new ArrayList();
                ReportVO vo = new ReportVO();
                vo.monat = e.Message;
                vo.summe = e.Message;
                reports.Add(vo);
                return reports;
            }
            finally
            {
                conn.Close();
            }

            return reports;
        }
    }

    public class ReportVO
    {
        public string monat;
        public string summe;
    }
}

Code in Adobe Flex

Das Model wird auf den .NET-Namespace gemappt.

Model:

package models
{
   [RemoteClass(alias="ITReportingServices.ReportVO")]
   public class ReportVO
   {
       public var monat:String;
       public var summe:String;		
		
       public function ReportVO()
       {
       }
   }
}

Service in Flex-Code aufrufen:

<!-- unter den Script-Teil in MXML schreiben -->
<mx:RemoteObject id="reportingService" 
                             destination="GenericDestination"  
                             source="ITReportingServices.ReportingService" 
                             showBusyCursor="true" 
                             fault="faultHandler(event)" >
       <mx:method name="getReport" result="getReportHandler(event)"/>
</mx:RemoteObject>	
...

// Das hier in mx:Script Teil
[Bindable] public var reports:ArrayCollection=new ArrayCollection();

public function creationComplete():void
{
    reportingService.getReport();
}
			
public function getReportHandler(event:ResultEvent):void
{
     reports = event.result as ArrayCollection;
}
			
public function faultHandler(event:FaultEvent):void
{
   Alert.show(event.fault.toString());
}

Diagramme

Balkendiagramm:

<mx:ColumnChart dataProvider="{reports}" 
                     height="100%" width="100%" id="columnchart1">
    <mx:horizontalAxis>
      <mx:CategoryAxis id="ca" categoryField="monat" title="Market sizes" />
     </mx:horizontalAxis>
     <!-- horizontal axis renderer -->
     <mx:horizontalAxisRenderers>
    	<mx:AxisRenderer axis="{ca}" canDropLabels="false" />
      </mx:horizontalAxisRenderers>
      <mx:series>
            <mx:ColumnSeries displayName="Amount" 
        		xField="monat"
        		yField="summe"/>
       </mx:series>
</mx:ColumnChart>
<mx:Legend visible="false" dataProvider="{columnchart1}"/>		

Tortendiagramm:

<mx:Label text="Linke Seite" />
<mx:PieChart id="pie2" 
   width="100%" height="100%"
   dataaProvider="{reports}"  showDataTips="true">
      <mx:series> 
        <!--Apply the Array of radii to the PieSeries.-->
	<mx:PieSeries field="summe"
                	        nameField="monat"
                	       labelPosition="callout"/>
      </mx:series>
</mx:PieChart>
  <mx:Legend dataProvider="{pie2}"/>

Liniendiagramm:

<mx:LineChart width="100%" height="100%" 
	id="myChart" 
	dataProvider="{reports}" 
        	showDataTips="true">
   <mx:horizontalAxis>
     <mx:CategoryAxis dataProvider="{reports}" 
                	     categoryField="month"/>
    </mx:horizontalAxis>
    <mx:series>
       <mx:LineSeries yField="summe" 
                 	  displayName="Summe"/>       
    </mx:series>
</mx:LineChart>