PlexTractive%20Presentations%20Creating%20graphics%20with%20Plex

1
PlexTractive PresentationsCreating graphics with
Plex
Session No. 9C

• Name Willem de Vries
• Simon Jasperse
• Company Remia
• Kiboko

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 PROCESSING
CHART CREATION
PRESENTATION
INTERACTION
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

• ltsvg width100 height100 viewbox0 0 650
  450gt
• ltrect idSVGhasCorners x380 y100
• width240 height100
• stylefillnone strokeblue
  stroke-width10/gt
• lttext x500 y150
• styletext-anchormiddle font-size25gt
• HelloBarcelona!
• lt/textgt
• lt/svggt

RESULT
13
Comparison internal approaches
14
Remia SVG Pattern, Demo
15
Buiding SVG
Processing Style
Processing Style
16
Remia SVG Pattern, structure

• DataPattern
• BlockFetch DOM scripts
• Fixed Node Structure

Data.xml

• 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 XSLs
• Transform Script

xmldoc.Load (data.xml) xsldoc.Load
(bargraph.xsl) svgdoc.loadXML
(xmldoc.transformNode(xsldoc))
19
Remia SVG Pattern, Implemention

• Graph.GetData
• Replace View / Blockfetch
• Specify X and Y values, file name

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_at_remia.nl
• simon_at_kiboko.nl