Presentation is loading. Please wait.

Presentation is loading. Please wait.

PlexTractive Presentations Creating graphics with Plex Name: Willem de Vries Simon Jasperse Company: Remia Kiboko Session No. 9C.

Similar presentations


Presentation on theme: "PlexTractive Presentations Creating graphics with Plex Name: Willem de Vries Simon Jasperse Company: Remia Kiboko Session No. 9C."— Presentation transcript:

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


Download ppt "PlexTractive Presentations Creating graphics with Plex Name: Willem de Vries Simon Jasperse Company: Remia Kiboko Session No. 9C."

Similar presentations


Ads by Google