Download presentation
Presentation is loading. Please wait.
Published bySamantha Martha Owens Modified over 8 years ago
1
WebODF Jos van den Oever Sponsored by:
2
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
3
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 http://webodf.org
4
How to use WebODF
5
Requirements for WebODF Check out the git repository: git@gitorious.org:odfkit/webodf.git git@gitorious.org Comes with an HTTP server for Node.JS
6
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
7
Put the ODF files on the same server /odf.html /docs/myreport.odt /docs/incometax.ods /docs/fosdem.odp Go to the url: http://example.com/odf.html#./docs/fosdem.odp
8
How WebODF came to be
9
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 ➛➛
10
WebKit ports
11
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
12
ODF and how to put it in HTML
13
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
14
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
15
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
16
The ZIP contains: content.xml, styles.xml, settings.xml, meta.xml
17
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
18
Style names versus CSS selectors styles.xml: odf.html: text|p[text|style-name=”mybold”] { font-weight: bold; }
19
WebODF: no conversion, just ODF.
20
Writing JavaScript for WebODF
21
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
22
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!
23
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
24
Use callbacks IO is often the bottleneck in application speed Instead of waiting for an event that might be slow, pass a callback function
25
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 - http://siliconforks.com/jscoverage/
26
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
27
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
28
Closure Compiler Combine all JavaScript files into one file Syntax checking Type checking (JavaScript has loose typing) Optimization
29
How to use WebODF in your program
30
WebODF on Android Override some functions in the runtime.
31
Current activities Improving the rendering Making an API for controlling the ODF canvas Write support with limited editing What you can do: Become creative!
32
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
33
Thank you!
34
Document compatibility Some file formats: Text files Emails HTML Microsoft Office (Binary and OOXML) ODF
35
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
36
HTML ODF
37
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.
Similar presentations
© 2025 SlidePlayer.com. Inc.
All rights reserved.