WebODF Jos van den Oever Sponsored by:

Overview  How to use WebODF on your website  How WebODF came to be  ODF and how to put it in HTML  Writing JavaScript for WebODF  How to use WebODF in your program

The goal of WebODF A JavaScript/HTML5 library that makes it easy to:  Add ODF support to your (mobile) application  Add ODF support to your website on your server

How to use WebODF

Requirements for WebODF Check out the git repository:   Comes with an HTTP server for Node.JS

WebODF on your website Take your own HTTP server or use httpserver.js ● odf.html ● defaultodfstyle.css ● odf.js ● lib/runtime.js ● lib/core/... ● lib/odf/Style2CSS.js ● lib/odf/OdfContainer.js

Put the ODF files on the same server /odf.html /docs/myreport.odt /docs/incometax.ods /docs/fosdem.odp Go to the url:

How WebODF came to be

WebKit  KHTML starts life as browser in the KDE community  Apple forks KHTML to make Safari  Apple starts the WebKit project  WebKit gains more 'ports' that lead to Chrome, GtkWebKit, QtWebKit and more  Nearly every computer has WebKit ➛➛

WebKit ports

ODFKit  Most FOSS Office Software is written in C++  But libraries used are different (LibreOffice/..., Calligra/Qt, Abiword/Gtk)  ODFKit: use the WebKit port approach to get office suites to use the same codebase  Initial scope: server side handling of ODF documents Side-effect of writing JavaScript unit tests: observation that browsers could handle most of ODF

ODF and how to put it in HTML

What is nice about ODF - Reuses many technologies: XML, ZIP, URL, XSL-FO, RDF, SVG, XQuery, … - It is an active open standard with people from many implementations in the Technical Committee - There are quite a few implementations Calligra

How does WebODF work?  Start with an HTML file  Load the binary ZIP file from the server  Load content.xml, settings.xml etc into the HTML DOM  Use CSS with namespaces to hide and show important bits  Convert the ODF styles to CSS  Load images

Putting the ZIP into the DOM  Most ODF files are ZIP files containing XML files and pictures  HTML has one DOM, which is implied to be one XML file  ODF has a different 'serialization' which is a single XML file  No program really uses the XML only, form, but it is useful for mapping the ZIP to the DOM

The ZIP contains: content.xml, styles.xml, settings.xml, meta.xml

Converting ODF styles to CSS  ODF uses its own styling derived from XSL-FO  CSS is what you need in HTML  Two issues: ● ODF uses style names but CSS uses selectors ● ODF has different styling properties than CSS

Style names versus CSS selectors styles.xml: odf.html: text|p[text|style-name=”mybold”] { font-weight: bold; }

WebODF: no conversion, just ODF.

Writing JavaScript for WebODF

JavaScript practices  Use the good parts of JavaScript  Use JSLint  Runtime abstraction  Use callbacks  'Compile' JavaScript with Closure Compiler  Use unit tests and code coverage

JavaScript: The Good Parts  Book by Douglas Crockford, inventor of JSON  Thin but powerful book  JavaScript is a language you have to learn.  It contains many features you should avoid, but also many nice ones  Lots of good advice Use JSLint!

Runtime  WebODF will run in different JavaScript environments  Only common thing is the presence of JavaScript with optional DOM  Runtime is thin abstraction that provides class loading, access to file system, logging, timers, 'window' object  There are base runtimes for the browser, Node.JS and Rhino

Use callbacks  IO is often the bottleneck in application speed  Instead of waiting for an event that might be slow, pass a callback function

JavaScript unit testing Write tests that work in multiple runtimes: - all targeted browsers - Node.JS - Rhino 'Instrument' the JavaScript with JSCoverage - see how often each line of code was run during testing -

Node.JS  When developing, it is nice to run unit tests from the command line  JavaScript runtime that uses V8 engine from Chrome  Like WebODF, uses callbacks extensively, to avoid waiting for IO

Rhino  JavaScript engine that does not use callbacks a lot IO  Nice contrast compared to Node.JS: catch more edge cases where problems might occur QtWebKit  Used in small unit test executable  WebKit on the command-line  Unit test with DOM

Closure Compiler  Combine all JavaScript files into one file  Syntax checking  Type checking (JavaScript has loose typing)  Optimization

How to use WebODF in your program

WebODF on Android Override some functions in the runtime.

Current activities  Improving the rendering  Making an API for controlling the ODF canvas  Write support with limited editing What you can do:  Become creative!

WebODF Open Document Format is great The community for ODF active WebODF can bring ODF to websites and devices WebODF keeps your ODF intact WebODF makes ODF easy and fun

Thank you!

Document compatibility Some file formats:  Text files  s  HTML  Microsoft Office (Binary and OOXML)  ODF

Office documents  Used to closed binary files Only really works well within one version of Microsoft Office  ODF came along and OOXML followed There are many ODF editors and Plugfests are held to improve interoperability

HTML ODF

OdfContainer  JavaScript class that combines the XML files  WebODF parses the ZIP file and puts all XML in one DOM  Non-XML objects are called Parts and are seen as blobs.