Download presentation
Presentation is loading. Please wait.
Published byCassandra Norman Modified over 8 years ago
1
PlexTractive Presentations Creating graphics with Plex Name: Willem de Vries Simon Jasperse Company: Remia Kiboko Session No. 9C
2
Goals of this presentation ●Present pilot project on Business Graphics ●Show power of Plex –integration of new techniques –building re-usable patterns
3
Agenda ●Introduction ●The need for graphics ●Solutions with comparison ●Intro to SVG (Scalable Vector Graphics) ●The Graphics Pattern ●Demo ●Conclusions
4
Application evolution ●Data-entry in windows: –Windows controls –Trees, Wizards and Tab-dialogs ●Integration of Windows-applications –Office –Mail-integrations ●Need for Graphical Data Presentations –“commercial” –functional
5
The choices DATA DATA PROCESSING CHART CREATION PRESENTATION INTERACTION EXTERNALINTERNAL
6
External Graphics ●Options –General available reporting tools –e.g.: Cognos Reportnet, Cleverpath Forest & Trees ●Advantages: –free choice based on user-requirements –all kind of integration e.g. in portal-environments ●Disadvantages: –redundant metadata / change management –difficult with complex information-structures
7
Internal Graphics ●Options –Microsoft Excel –ActiveX controls –SVG ●Advantages: –complete deployment –user experience: integrated design –control on functionality from development ●Disadvantages –development workload
8
Excel solution: the structure
9
Excel solution: consequences ●Advantages –Skillset widely available –Fast development ●Disadvantages –Very platformspecific –Not secure –Restricted form of integration –Lock-in
10
SVG ●Scalable Vector Graphics –W3C standard based on XML –embeddable within (X)HTML –text-based searchable format –scalable –support for transformation / animation –Interactive / Scriptable
11
Elements ●Basic shapes (line, rect, circle, ellipse etc.) ●G (grouping with css-like style, id) ●Paths ●Transformations (translate, rotate, scale) ●Text ●Filters (special effects) ●Animations ●Script
12
Very simple example <rect id=“SVGhasCorners” x=“380” y=“100” width=“240” height=“100” style=“fill:none; stroke:blue; stroke-width:10”/> <text x=“500” y=“150” style=“text-anchor:middle; font-size:25”> HelloBarcelona! RESULT
13
Comparison internal approaches
14
Remia SVG Pattern, Demo
15
Buiding SVG Graph.svg Database Style.xsl Data.xml WriteXML WriteSVG Processing Style Processing Style
16
Remia SVG Pattern, structure ●DataPattern –BlockFetch DOM scripts –Fixed Node Structure Data.xml Style.xsl Graph.svg ●ViewerPattern –Standard stylesheets ●ViewerPattern –Adobe ActiveX –Processing XML scripts
17
Remia SVG Pattern, DataPattern ●GetData –call BlockFetch –Meta set X -Y Values –sets Labels Max Min ●NodeShell –XML framework –uses Remia XML Pattern ●WriteXML –Combines to Write data XML
18
Remia SVG Pattern, ViewerPattern ●ViewSVG –ADOBE ActiveX Viewer –SVG scripts –References Standard XSL’s –Transform Script xmldoc.Load (“data.xml”) xsldoc.Load (“bargraph.xsl”) svgdoc.loadXML (xmldoc.transformNode(xsldoc))
19
●Graph.GetData –Replace View / Blockfetch –Specify X and Y values, file name Remia SVG Pattern, Implemention
20
Remia SVG Pattern, Demo
21
Considerations ●Need for XSLT skills –abundance of examples on the net ●Functionality of current SVG-Viewer has restrictions –publication of events –external availability of DOM-model –poor documentation
22
References ●www.w3c.org/Graphics/SVG ●xml.apache.org/batik ●www.adobe.com/svg ●www.jenitennison.com ●www.zvon.org ●www.grapl.com ●www.carto.net/papers/svg ●www.frontier.nl/svg ●www.schemasoft.com/services/SVG.shtml
23
Directions ●Adding Chart types –piecharts etc. –organisation charts –mapping ●Adding features –style elements ●Support for interaction –e.g. data manipulation by graphics –drill down / selections
24
Conclusion ●Easy to incorporate SVG in Plex with existing XML Pattern ●Easy to implement standard SVG pattern ●Large range of applications possible ●Excellent Graphic quality ●Fits perfectly in multi-platform environment ●Internet ready
25
Discussion devries@remia.nl simon@kiboko.nl
Similar presentations
© 2025 SlidePlayer.com. Inc.
All rights reserved.