PlexTractive%20Presentations%20Creating%20graphics%20with%20Plex - PowerPoint PPT Presentation
Title:
PlexTractive%20Presentations%20Creating%20graphics%20with%20Plex
Description:
Present pilot project on Business Graphics. Show power of Plex ... xml.apache.org/batik. www.adobe.com/svg. www.jenitennison.com. www.zvon.org. www.grapl.com ... – PowerPoint PPT presentation
Number of Views:59
Avg rating:3.0/5.0
Title: 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
