Developing for Web, In Web
Eclipse Orion

Szymon Brandys, Tomasz Żarna
March, 2012

Let me introduce Orion

Orion development cycle

Getting Started

Source: eclipse.org

Orion at work

What's new since 33rd Degree 2011

Editor

* CodeMirror  ** Esprima  *** CSS Lint

Git support

UI

Key bindings

Source: planetorion.org

Plug-ins & extensions

Source: Orion wiki

Source: Black Duck Software

Orion at work (Git)

Orion extensions

Orion extensions and plugins

Orion wiki

orion.edit.command

provider.registerServiceProvider("orion.edit.command", {
   run : function(text) {
     return text.toUpperCase();
   }
 }, {
   name : "UPPERCASE",
   img : "/images/gear.gif",
   key : [ "u", true ]
});
			

Other extensions

Markdown example

Markdown in a Nutshell

Markdown Syntax Highlights

Block Elements (Paragraphs, Headers, Blockquotes, Lists, etc.)

Span Elements (Links, Emphasis, 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!