Interaktive Diagramme mit Oracle XDK und SVG - doag.org · Ænominal, ordinal, kardinal, temporal...
-
Upload
doankhuong -
Category
Documents
-
view
217 -
download
0
Transcript of Interaktive Diagramme mit Oracle XDK und SVG - doag.org · Ænominal, ordinal, kardinal, temporal...
Florian Werner - Lehrstuhl Wirtschaftsinformatik, Eberhard Karls Universität Tübingen
Interaktive Diagramme mit Oracle XDK und SVG
Interaktive Diagramme mit Oracle XDK und SVG
Florian Werner – Interaktive Diagramme mit Oracle XDK und SVG
Was erwartet Sie?
Prinzipielle Überlegungen bei der Umsetzung einer flexiblen Visualisierungs-Lösung im Web
Architektur-Konzept
Technologie-Schlaglicht: Potenziale von
Oracle XDK/XSQL Publishing Framework
SVG
Diagramme im Web:
2D-Visualisierung
Interaktivität
Demonstration von Prototypen
Florian Werner – Interaktive Diagramme mit Oracle XDK und SVG
Was erwartet Sie nicht?
Vertiefung eines Einzelaspekts:„Wie werden Zeitskalen am Besten gezeichnet? “
Darstellung des vollen Leistungsumfangs der genannten Technologien
Schilderung von Alternativen
Florian Werner – Interaktive Diagramme mit Oracle XDK und SVG
Erkenntnisziele
Ganzheitlicher Blick: Einstieg ins Thema
Zusammenhang architektonischer und technologischer Aspekte
Was kann das das Framework aus DB, XSQL und SVG leisten?
Welches Know-how bzw. welcher Aufwand steht hinter der Umsetzung?
Florian Werner – Interaktive Diagramme mit Oracle XDK und SVG
AGENDA
Informationsvisualisierung
Architektur und Technologie bei der Visualisierung
Diagrammkonstruktion
Lösungskonzept
Prototyp-Demonstration
Lessons Learned
Florian Werner – Interaktive Diagramme mit Oracle XDK und SVG
INFORMATIONSVISUALISIERUNG
Vielzahl an Informationen
Grundlage für EntscheidungenBusiness Intelligence
Informationen grafisch leichter zu erfassen
Eigenes interdisziplinäres Forschungsgebiet
Grundgedanke: Überführung quantitativer Daten in grafische Objekte
Florian Werner – Interaktive Diagramme mit Oracle XDK und SVG
„Visualization can be seen as the intersection of user interface design, graphics, and databases“
(Tang/Stolte/Bosch 2003)
Florian Werner – Interaktive Diagramme mit Oracle XDK und SVG
Prozess der Informationsvisualisierung
Interaktiver Einfluss auf die Transformationen
Filtering
Quelldaten
Mapping Rendering
Diagramm
Florian Werner – Interaktive Diagramme mit Oracle XDK und SVG
Prinzipielle Fragen
Wie kann die Architektur einer IT-Lösung aussehen?
Welche Technologien erweisen sich als geeignet?
Nicht allgemein zu beantworten – abhängig von den Anforderungen
Florian Werner – Interaktive Diagramme mit Oracle XDK und SVG
ARCHITEKTUR und TECHNOLOGIE – Standardsoftware
Große Lösung
Hohe Lizenzkosten
Hoher Implementierungsaufwand
Know-how-Problem
Standard-Flexibilität
Kleine Lösung
keine Flexibilität
schlechte Verteilbarkeit
Florian Werner – Interaktive Diagramme mit Oracle XDK und SVG
Szenario
„Kleine“ Lösung für lokalen Kontext
Fachspezifische, individuelle Diagramme
Dynamische Erstellung der Diagramme
Wiederverwendung von Diagrammdefinitionen
Nutzerkreis: Mehrere, „verteilte“ Führungskräfte
Einfache Programmierung
Prinzipielle Erweiterbarkeit
Kleine und Mittelständische Unternehmen
Florian Werner – Interaktive Diagramme mit Oracle XDK und SVG
Lösungsansatz
XML SVG
XSLT BrowserDB / XSQL
Florian Werner – Interaktive Diagramme mit Oracle XDK und SVG
SVG
Hohe Abbildungsqualität
Entkopplung des Erscheinungsbilds (CSS)
Textelemente durchsuchbar
Animation (SMIL)
Interaktivität (ECMAScript bzw. JavaScript)
Untermenge SVG Mobile angepasst auf mobile Endgeräte
Pflege des Standards (SVG 1.2 voraussichtlich 2009/10)
Browserunterstützung zunehmend nativ
Florian Werner – Interaktive Diagramme mit Oracle XDK und SVG
SVG-Elemente 1
grafische Primitive:
Linie/Polylinie
Kreis/Ellipse
Rechteck
Polygon
Styling
Gradienten
Muster
Filter
weitere grafische Elemente:
TextPfade
Animation
Interaktivität
Florian Werner – Interaktive Diagramme mit Oracle XDK und SVG
SVG-Elemente 2
Transformationen des Vektorraums
Ausschnitte (Clipping)
Maskierungen (Masking)
Verschachtelung unterschiedlicher Koordinatensysteme
Gruppierungen
Symbol-Definitionen (Wiederverwendung)
…
Florian Werner – Interaktive Diagramme mit Oracle XDK und SVG
SVG-Codebeispiel
<?xml version = '1.0'?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0/EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" >
<g transform="translate(0,500) scale(1,-1)">
<line x1="20" y2="20" x2="480" y2="20" /><line x1="20" y2="20" x2="20" y2="480" />
<rect x="100" y="20" width="50" height="150" style="fill:green" /> <rect x="200" y="20" width="50" height="400" style="fill:red" /><rect x="300" y="20" width="50" height="250" style="fill:blue" />
<text transform="translate(0, 900) scale(1,-1)" x="250" y="450" style="font-size:20; text-anchor:middle">Säulendiagramm</text>
</g>
</svg>
Florian Werner – Interaktive Diagramme mit Oracle XDK und SVG
XML Stylesheet Language Transformations (XSLT)
Transformation XML-konformer Dokumente
Ergebnis: XML-konformes Zielformat
Reine Strukturtransformation
Transformation in Präsentationsformat
Florian Werner – Interaktive Diagramme mit Oracle XDK und SVG
XSLT-Codebeispiel
<xsl:template match="Umsatzzahlen">
<xsl:variable name=„count" select="position()"/>
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500">
<g transform="translate(0,500) scale(1,-1)">
<line x1="20" y2="20" x2="480" y2="20" /><line x1="20" y2="20" x2="20" y2="480" />
<rect x=„{$count * 100}" y="20" width="50" style="fill:green" ><xsl:attribute name="height">
<xsl:value-of select="number(Umsatz)"/> </xsl:attribute>
</rect>...
</g> </svg></xsl:template>
XPath
Umsatz[@Produkt="Maxidome"]
Umsatz[1]
Florian Werner – Interaktive Diagramme mit Oracle XDK und SVG
Dynamische Berechnungen
Variablen und Parameter:<xsl:variable/> bzw. <xsl:param/>
Auslesen mit $myVar bzw. $myParam
Berechnungen durch XPath-Operatoren und -Funktionen:div, +, *, sum() ...
Florian Werner – Interaktive Diagramme mit Oracle XDK und SVG
XSQL-Codebeispiel
<?xml version = '1.0'?>
<?xml-stylesheet type="text/xsl" href="myStylesheet.xsl"?>
<page xmlns:xsql="urn:oracle-xsql" connection="myConn">
<xsql:query>
SELECT * FROM dept WHERE dname = 'ACCOUNTING'
</xsql:query>
</page>
Florian Werner – Interaktive Diagramme mit Oracle XDK und SVG
Ergebnisdokument
<?xml version='1.0'?>
<?xml-stylesheet type="text/xsl" href="myStylesheet.xsl" ?>
<page xmlns:xsql="urn:oracle-xsql" connection="myConn">
<rowset>
<row num="1">
<deptno>10</deptno><dname>ACCOUNTING</dname> <loc>NEW YORK</loc>
</row>
</rowset>
</page>
Florian Werner – Interaktive Diagramme mit Oracle XDK und SVG
DIAGRAMMKONSTRUKTION – Diagrammtypen
eindimensional: Thermometer
zweidimensional: Liniendiagramm
dreidimensional: Blasendiagramm
multidimensional: Netzdiagramm
Zustände (binär, ternär…): Schalter
Graphen: Prozessdiagramm
…
Florian Werner – Interaktive Diagramme mit Oracle XDK und SVG
Diagrammelemente
Datenobjekte
Kontext
Zeichenfläche (Canvas), Diagramzeichenfläche (Diagram Area)
Achsen (Axes), Skalen (Scales), Skalenstriche (Ticks)
Legend (Legende), Beschriftungen (Label)
Container
visuelle Effekte (Visuals)
Interaktionselemente
Florian Werner – Interaktive Diagramme mit Oracle XDK und SVG
Diagramminteraktion
Rendering-Transformation
Overview, Zoom, Pan
History
Design Change
Relate, Merge, Extract
Mapping-Transformation
Type Change
Filtering-Transformation
Drill-up/-down/-aside
Sort, Group, Aggregate
Level of Detail
Florian Werner – Interaktive Diagramme mit Oracle XDK und SVG
Diagrammkonstruktion
Wahl eines geeigneten Diagrammtyps
Festlegung der Zuordnung von Daten zu Diagrammelementen
Layout benötigter Diagrammelemente
Florian Werner – Interaktive Diagramme mit Oracle XDK und SVG
SVG und Diagramm-Interaktivität
XLink: <a xlink:href=""> Drill-down/-up/-aside, Relate…
SMIL Animation: Animationen als Feedback auf Benutzerinteraktion
Scripting: ECMAScript bzw. JavaScript
Florian Werner – Interaktive Diagramme mit Oracle XDK und SVG
XSQL und Diagramm-Interaktivität
Verknüpfung mehrerer Transformationsketten durch XLink
Problem der Herstellung des Kontexts
Lösung: XSQL-Action Handler<xsql:include-request-params>
<xsql:set-stylesheet-params>
<xsql:set-session-params>
<xsql:if-param>
Florian Werner – Interaktive Diagramme mit Oracle XDK und SVG
PROTOTYP-DEMONSTRATION
Prototyp „Liniendiagramm“ Standarddiagramm
Prototyp „Wintersport“ spezifisches Diagramm
Florian Werner – Interaktive Diagramme mit Oracle XDK und SVG
Lessons Learned
Diagrammkontext elementar; ggf. besser durch programmatische Anreicherung des Client zu erzielen
AJAX…
Datentopologie als Basis jeglicher Diagramme; Skalierung elementar
nominal, ordinal, kardinal, temporal
SVG-Painter Model entspricht nicht programmatischer Logik
Kapselung durch Templating ermöglicht "Diagrammbaukasten"
Werkzeugunterstützung gut; Problem: eingebetteter Code
Florian Werner – Interaktive Diagramme mit Oracle XDK und SVG
Links
Ausführliches Paper im DOAG-Download-Bereich:
„Interaktive Diagramme mit Oracle XDK und SVG“
Florian Werner – Interaktive Diagramme mit Oracle XDK und SVG
DANKE FÜR IHRE AUFMERKSAMKEIT!
Kontakt:
Florian Werner
Eberhard Karls Universität Tübingen
Lehrstuhl Wirtschaftsinformatik
E-Mail: [email protected]
Florian Werner – Interaktive Diagramme mit Oracle XDK und SVG
XML und SVG
nicht proprietär
keine Lizenzkosten
Plattform-unabhängig
einfache Struktur
selbstbeschreibend
verifizierbar (Syntax)
validierbar (Semantik)
kombinierbar (Namensraum)
erweiterbar
einfach verarbeitbar
Florian Werner – Interaktive Diagramme mit Oracle XDK und SVG
SVG-Alternativen
Adobe Flash/Flex
proprietär
Lizenzkosten
schwierig automatisch zu generieren
Microsoft Silverlight
sehr jung
proprietär
funktional ähnlich Flash/Flex
Transformierbarkeit? Flexibilität?
Florian Werner – Interaktive Diagramme mit Oracle XDK und SVG
XML-Codebeispiel
<?xml version = '1.0'?>
<Umsatzzahlen Produktgruppe="Zelte">
<Umsatz Produkt="Maxidome">150</Umsatz>
<Umsatz Produkt="Minidome">400</Umsatz>
<Umsatz Produkt="Mididome">250</Umsatz>
</Umsatzzahlen>
Florian Werner – Interaktive Diagramme mit Oracle XDK und SVG
XSLT-Codebeispiel 1
<?xml version = '1.0'?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output doctype-public="-//W3C//DTD SVG 1.0/EN" doctype-system="http://www.w3.org/TR/2001/REC-SVG-
20010904/DTD/svg10.dtd"
media-type="image/svg+xml" method="xml" />
<xsl:template match="/">
...
</xsl:template>
</xsl:stylesheet>