Developing for Web, In Web
Eclipse Orion
Szymon Brandys, Tomasz Żarna
March, 2012
Let me introduce Orion
Orion development cycle
- went open source January 2011
- 33rd March 2011
- 0.2 June 2011
- 0.3 October 2011
- 0.4 February 2012
- 33rd March 2012
Getting Started
Source: eclipse.org
Orion at work
What's new since 33rd Degree 2011
Editor
- HTML syntax validation + highlighting*
- Content assist for JavaScript** and HTML, CSS***
- Folding
- Hyperlinks
- Firefox 10 uses the editor in the ScratchPad
* CodeMirror ** Esprima *** CSS Lint
Git support
- init, log, reset, rebase, cherry-pick
- Push dialog
- Apply/create patch
- Open commit
- Configuration
- Related pages
UI
- Less tree style views, more flat representations
- Sites
- Background operations
- Search and replace
- Writeable compare editor
- SFTP import and export
- Help
- Status key bindings
Key bindings
Source: planetorion.org
Plug-ins & extensions
- WebDAV file plugin
- Outline provider service
- URI Template model → greasemonkey scripts
Source: Orion wiki
Source: Black Duck Software
Orion at work (Git)
Orion extensions
Orion extensions and plugins
- Orion provides a service registry similar to the OSGi service model
- Orion implements the Eclipse concept of extensions and extension points using the Orion service registry
- Services and extensions that reside on different web domains from the host Orion server are contributed to Orion by registering plugins.
A plugin is declared via an HTML file, is opened in a "head-less" child IFrame and uses window.postMessage
to advertise capabilities in the form of services and extensions back to Orion
Orion wiki
orion.edit.command
- Registers a command that operates on the contents or
selection in an editor
- Declares a single function: run(selectedText, text,
selection)
provider.registerServiceProvider("orion.edit.command", {
run : function(text) {
return text.toUpperCase();
}
}, {
name : "UPPERCASE",
img : "/images/gear.gif",
key : [ "u", true ]
});
Other extensions
- orion.edit.highlighter - contributes syntax highlighting rules to the editor
- orion.edit.contentAssist - contributes content assist proposals
- orion.edit.outliner - contributes outline for a document
- orion.edit.validator - calculates errors and warnings in a document
Markdown example
Markdown in a Nutshell
- Markdown is intended to be as easy-to-read and easy-to-write as possible.
- A Markdown-formatted document should be publishable as-is, as plain text,
and can be read without looking like it’s been marked up with tags or formatting instructions.
- Markdown uses punctuation characters, carefully chosen so as to look like what they mean.
e.g., asterisks around a word actually look like *emphasis*, markdown lists look like lists, etc.
- Markdown can be easily converted to structurally valid XHTML (or HTML).
- The single biggest source of inspiration for Markdown’s syntax is the format of plain text email.
Markdown Syntax Highlights
Block Elements (Paragraphs, Headers, Blockquotes, Lists, etc.)
# This is an equivalent of H1
## This is an equivalent of H2
> Blockquote
* Unordered list item
Span Elements (Links, Emphasis, Code)
**text in bold**
inline [link](http://example.com) in text
`console.info()` for inline code
Sample Markdown Document
Title
=====
## Header 1
This is a sample text. **Bold** text.
### Header 1.1
Sample list below:
* item 1
* item 2
* item 3
## Header 2
Text with a [link]
[link] http://sample.com "Sample link"
It is easy to read as-is.
... Converted to HTML
<h1>Title</h1>
<h2>Header 1</h1>
<p>This is a sample text. <strong>Bold</strong> text.</p>
<h3>Header 1.1</h2>
<p>Sample list below:</p>
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
<h2>Header 2</h1>
<p>Text with a <a href="http://sample.com" title="Sample link">link</a></p>
Title
Header 1
This is a sample text. Bold text.
Header 1.1
Sample list below:
...
Orion at work (Markdown Sample)
Selfhosting Orion
Thank you!