Interactive XML Visualization - using XSLT 2.0 on the Browser. Phil Fearon - Saxonica

Transcription

1 Interactive XML Visualization - using XSLT 2.0 on the Browser Phil Fearon - Saxonica

2 Big XML Theme Big data Large scale searching Processing large volumes at high speed Crunching big XML files Open Linked Data Semantic Searching Handle Large data variety Schema-aware vs Schema-less

3 An online help system Using client-side XSLT 2.0 Saxon Client-Edition

4 Author User Requirements Edit / Review / Deploy Flexible Options User Search Navigate Read

5 Design Priorities Author/Developer XML Schema Choice Edit/Review (Eliminate the build pipeline ) Maintainable: XSLT + JS + CSS Help User Web-App look and feel Simple/Powerful/Fluid Navigation Consistent Rendering

6 XSLT 2.0 & HTML/Browser DOM Elements XML/HTML Events CSS Properties JavaScript

7 Multi-Schema System HTML 5 Functions Spec JavaDoc about.xml /article./section./section./section./section HTML Page functions.xml /functions./function./function./prototype./prototype javadoc packages about catalog.xml functions javadoc

8 Semantic X/HTML 5 1 document per article article element is the root element Nested section elements for each subpage id attribute for navigation link targets title attribute for navigation labels href attribute for navigation links

9 Discoverability About Home > Guides > Top > About 5 6 Search Tree links Content 7 links 8 k 9 links 10

10

11 Navigation Requirements Table of Contents (Tree-View) Breadcrumbs Previous / Next Page Browser History SEO Friendly, Bookmarkable URLs Text Search Client-side Link-checking

12 Content-Driven APP Semantic HTML 5 Intra-site links paths <a href= /conformance/xpath3/mapping > Relative References <a href=../intro91/xqupdate91 >

13 XSLT + HTML: DOM Update xsl:result-document href method xsl:set-attribute xsl:remove-attribute xsl:schedule-action

14 High-Level View User HTML Updates System/UI Event XML Templates Event Templates

15 Client / Server Emulation

16 The XSLT Context Node xsl:template Applying Matching UI events Matching System events ixsl:page() ixsl:source() xsl:for-each

17 Handling UI Events in XSLT

18 Handling System Events Prevent Event Defaults

19 Client-Side Processing Benefits More responsive UI Thin Server Collaborative Working/Instant Reviews Issues - JavaScript requirement - < 1000 Pages for responsive text search - XSLT compile-time delay

20 Event Handling DOM Bubbling to Document Listeners Target Ancestors Document Testing target/ancestors for matching rules SVG linked Elements Prevent Default

21 The Host Page Loads Saxon-CE Checks URL Content Metadata title etc. Layout Elements Navigation Elements Top-Level Links NoScript Text

22 Techniques Lazy Loading Outline Rendering Resolving of Navigation Requests Document Retrieval Stateless Transforms change state only on completion Transforms triggered by a change in state

23 Standards CSS JavaScript HTML 5 XSLT 2.0 XML + SVG

24 Host HTML Page HTML Page Title Body Heading Nav URL Footer Top-level Links Breadcrumbs

25 Saxon-CE Areas of Concern JavaScript API HTML DOM XML DOM Events JavaScript Interoperability Saxon Core

26 Content Rendering Standard HTML Reliance on CSS Minimal use of class attributes for styling Exploitation of HTML5 elements - like aside

27 XSLT 2.0 Design Concerns Performance Content Rendering Navigation Management Handling System Events Handling User Events Managing State (Stateless Transactions)

28 On JavaScript Use Exploit Interoperability Maintain DOM Object References Exploit Browser Text-Search Capabilities

29 Questions?