Ken’s Top 5 JavaScript Sessions at EclipseCon 2014

If you’re interested in JavaScript and/or Node.js development this years EclipseCon North America has some great sessions in store for you! It starts off with a Tutorial Monday with the Orion team titled END TO END WEBAPP DEVELOPMENT WITH ORION. We’re going to run through building an application from scratch leveraging Bootstrap and TableTop.js.

You can click on this link for the JavaScript sessions at EclipseCon but if I have to pick a top 5 I’ll go with:

NEXT-GENERATION JAVASCRIPT LANGUAGE TOOLING by Ariya Hidayat
Ariya is well respected in the JavaScript community for his libraries like Esprima and his conference presentations on performance and optimization.

JAVASCRIPT: DON’T BELIEVE THE TYPE! with Manu Sridharan and Simon Kaegi
Manu has worked on language tooling in IBM Research and is now at Samsung carrying on his passion. Simon has been digging deep into core JavaScript design and development for many years (has the scars to prove it).

NODE.JS ON POWERPC – A STORY ABOUT PORTING NODE.JS & V8 by Andrew Low
Andrew is a veteran in the Virtual Machinist space. He lead the IBM J9 Virtual Machine team for many years and is applying that knowledge to porting V8 to IBM Hardware.

WIRING THE INTERNET OF THINGS WITH NODE-RED by David Conway-Jones
If you know nothing about NodeRED you should definitely
attend this session. Imagine wiring the Internet-of-Things with… well visual wiring. A visually compelling palette of connections and ease of use make NodeRED an amazing tool (also, the JS editor is incredible)

MODULAR JAVASCRIPT by Andrew Eisenberg
Andrew is well known in the Eclipse community and has contributed to Orion as part of his work at VMWare. His talk about module loading with respect to large applications in JavaScript should be a great talk!

Ok, kind of a 6th… While not a talk, IBM is hosting a WEB IDE BOF on Weds night with refreshments. Come demo what you’ve been working on or chat about what you like/dislike about the concept or current implementations of Web IDEs.

Hope to bump into you at EclipseCon and if you haven’t registered yet… there’s still 7 days!

Posted in General | 2 Comments

Orion 5.0 – New and Noteworthy

Orion 5.0 is now available! Check it out now on OrionHub, or download your own server. An updated JavaScript implementation of the Orion server is also available from npmjs.org. The following are some of the notable new features and changes in Orion 5.0. Make sure you also check out the 5.0 M1 news for other features added earlier in the 5.0 release.

New Orion look and feel

New Orion users have consistently reported that they found our cluster of iconic Actions and Navigation buttons confusing. Developers often have trouble finding the commands they are familiar with in their old desktop-based tools. So, finally we are caving to user demand and incorporating some familiar navigation elements such as a menu bar and context menus. You can find more details on the various UI changes further down in this post. User feedback has been a tremendously important part of these changes, and we strongly encourage all users to continue providing this feedback as the design evolves. Please don’t hesitate to raise bugs, report feedback on the orion mailing list, or grab us in person at conferences such as EclipseCon.

The old Navigation menu has been replaced by a narrow band on the left hand side with links to all of Orion’s different pages. All links are contextual and will navigate you to the closest corresponding page related to the artifact you are currently viewing. For example when editing a file, navigating to Git Status will show Git status for the repository containing the file you were just editing. Icons in the navigation bar match the page icon in your browser tab, to help you keep things straight. You can collapse the navigation bar at any time by clicking the toggle button in the top left hand corner of each page.

New navigation bar

The Actions menu, and some navigation elements, have been replaced with a more traditional menu bar. The key binding shortcuts have been added to the menu label for all commands that have them. The options to toggle between navigation and outline panels have been moved to the View menu.

Menu bar

Context menu in Navigation pane

Context menus have been added on files and folders in the Navigation pane. In these menus you will find the most common file operations such as copy, paste, rename, compare, etc. You will also find commands for navigating to other pages related to that file or folder.

Context menus

Content assist enhancements

The Orion content assist infrastructure has had a major overhaul. Orion content assist is now:

  • Faster. Computing, loading, and rendering of content assist proposals has been made much snappier.
  • More stylish. The proposals have been styled, so that the value to be inserted is highlighted, and peripheral information such as type information and descriptions are less distinct. Also, template proposals have been moved to a different section with a colored background to separate them from completions inferred from the current context. Highlighting of the current proposal has been improved, and scrollbars now only show when needed.
  • Easier to use. Content assist will now trigger automatically in the places where you most expect it to, such as after typing ‘.’ in JavaScript or opening a tag in HTML. Also, if you invoke content assist and there is only one possible match, it will be inserted automatically. Finally, the Home/End keys can now be used to quickly navigate around the proposal list.

To give you a feel for the overall changes, here is a comparison of content assist in Orion 5.0, versus the previous release:

Improved content assist

Content assist for popular Node.js libraries

Orion has added indexes to support content assist for some of the most popular Node.js libraries. On the database front there is now content assist for Redis, MySQL, Postgres, and MongoDB. Content assist is now also available for the AMQP messaging library, and the Express.js framework. Templates for popular code snippets with these various libraries are also available. Orion plugins can now contribute indexes for other libraries using the orion.core.typedef service.

Fully configurable JavaScript syntax validation

Orion is now almost fully converted over to the fantastic eslint library for JavaScript syntax validation. The only exception is script tags in HTML files, which are still validated with jslint for now. A huge advantage of eslint is its configurability. As a result, we now expose a large selection of lint configuration options on the Validation settings page.

50m2-validation-settings

Syntax validation of JSON

Orion now provides syntax validation for JSON files.

JSON syntax validation

Improved Gerrit support

Orion is steadily making progress towards support for Gerrit workflows. In the current release the following features have been added to make it easier to use Orion with Gerrit:

Support to attach a Gerrit change-id to your commits:

Gerrit change id in commit dialog

Git push without tags. When pushing a change to Gerrit for review you don’t want to push tags as well. The Push button now has a drop-down menu on the right that provides a Push Branch option to push commits only.

Push branch without tags

Push for review. When a contributor wants to submit a proposed patch for review in Gerrit, they push to a special branch with the format refs/for/[branchName]. Previously Orion always assumed pushes occurred to heads branches. Now, when you select Push followed by More, you can enter a branch name such as refs/for/master to push a change for review that is intended for the master branch.

Git push to Gerrit for review

New pluggable syntax highlighting system

The Orion editor has adopted a new syntax highlighting framework, designed specifically for Orion. Notable improvements include better performance, and built in support for more languages (currently JavaScript, JSON, XML, CSS, HTML, Java, PHP, Python, Ruby, and YAML). Syntax highlighting for additional languages can be provided by plugins. In addition, the syntax highlighting framework can be used with the standalone Orion editor, which is handy if you want a smaller package for embedding in your web application.

For more details on the new syntax highlighting framework, checkout this recent blog post on Planet Orion.

Filter by folder when searching for files

When using the Orion Find File command, you can now filter the results list based on keywords in the directory path by specifying a second search term in the find box. This is very handy when there are a large number of duplicates of the same file name and you want to quickly narrow down to a particular match.

50m2-find-file-filter

Edit while comparing files

When you select two files and pick Compare with each other from the context menu, the resulting compare page now allows you to edit both files directly within the compare editor. Unsaved changes are indicated by an asterisk next to the name, and Save buttons appear above each editor. Saving changes on either side will cause the comparisons to be updated immediately.

50m2-edit-compare

Last but not least, deploy to Cloud Foundry!

Within the Orion client we’ve enabled being able to push an application directly from Orion to any compatible PaaS provider leveraging the Cloud Foundry APIs. If you already have an OrionHub account, you can click here to clone a simple Cloud Foundry example into a new project. Once you’ve cloned the project, you can see in the readme that you need to setup the deployment information on the Orion Cloud Settings Page. See the readme for a couple of example destinations. Once you’ve done that, you can simply press the Deploy button to push the app. You’ll need to edit your credentials for the PaaS provider and then the app is packaged and delivered just like the terminal cf push command. In the following diagram you can see the Deploy button and the new section regarding deployments including status of the running app and the URL for the resulting App.

Cloud Foundry from Orion

CloudFoundry from Orion

Not all the commands and features in the v6 Cloud Foundry command line are supported but we’ll continually add capabilities throughout the Orion 6.0 timeline and into the future.

Posted in New & Noteworthy | 2 Comments

Orion 5.0: Syntax Styling Revisited

The orion.edit.highlighter service gives plug-ins a way of contributing syntax stylings for arbitrary languages. Prior to Orion 5.0 these stylings were defined as either TextMate grammars or CodeMirror modes. While both of these styling approaches are well-established and have their respective strengths, they each have shortcomings in the context of Orion:

  • The TextMate spec expects support for some regular expression functionality that is not supported by Javascript’s RegExp implementation. As a result, Orion claimed styling support for only a subset of TextMate functionality (and consequently a subset of TextMate grammars).
  • CodeMirror’s programmatic model proved to be inefficient and error-prone in Orion as a result of Orion’s service methods being run in isolation.

For the Orion 5.0 release a new syntax styling service has been defined (still with id orion.edit.highlighter) which is its official story going forward. The TextMate- and CodeMirror-based styling implementations are considered to be unsupported, though are still in the Orion release to preserve backwards-compatibility.

The new styling service maintains a strong resemblance to TextMate because its declarative approach is well-suited to Orion’s isolation of services. Additionally, TextMate’s grammar syntax has proven to serve its purpose well over time. So anyone with TextMate grammar-writing experience should find writing grammars for Orion to be very familiar.
The new shape of this service is described in orion.edit.highlighter, along with an example that shows Orion’s grammar for styling of .json files. The example highlights how small a functional language grammar can be made by including styling patterns defined in other grammars. Orion provides a generic grammar containing a set of common patterns that other language grammars can inherited as needed.

Inclusion of patterns from other grammars is also useful for handling embedded content. For example, Orion’s HTML-styling grammar includes the following rule to style CSS within <script> tags:

{
    begin: "(?i)(<style)([^>]*)(>)",
    end: "(?i)(</style>)",
    captures: {
        1: {name: "entity.name.tag.html"},
        3: {name: "entity.name.tag.html"}
    },
    contentName: "source.css.embedded.html",
    patterns: [
        {
            include: "orion.css" // <-- this is it
        }
    ]
}

A consequence of (and test cases for) this new styling service implementation is that Orion now provides syntax styling for additional languages. The updated set of supported content types are:

  • application/javascript
  • application/json
  • application/schema+json
  • application/x-ejs
  • application/xml
  • text/css
  • text/html
  • text/x-java-source
  • text/x-php
  • text/x-python
  • text/x-ruby
  • text/x-yaml

Finally, embedders of Orion’s stand-alone editor can also get automatic styling of these content types by providing a contentType value when invoking the editor. For example:

require(["orion/editor/edit"], function(edit) {
    edit({
        contentType: "text/x-ruby"
    });
});
Posted in Tips & Tricks | 3 Comments

Orion 5.0 M1 – New and Noteworthy

Just in time for the holidays, a new Orion milestone is available! This milestone has crammed in a whole lot of developer tooling improvements, and enhancements to several aspects of the user interface. There is also a ton of work going on behind the scenes on bigger features that we’ll hopefully be able to share in the next milestone. You can take the latest build for a spin on OrionHub, or download it.

Mark occurrences

The Orion editor will now highlight occurrences of variables in JavaScript files. Simply move the cursor over a variable to highlight all occurrences in the file. Occurrences are shown both highlighted in the text, and in the overview ruler which shows you all occurrences in the file at a glance. This is implemented using the orion.edit.occurrences service, which allows plug-ins to provide occurrence computation for arbitrary content types. This feature can be turned on or off from the editor settings page.
Mark occurrences

New JavaScript outline

Orion has added a brand new JavaScript outline view! This new outline shows all functions and closures in a hierarchical format matching your source. The outline is built using the esprima parser and estraverse AST traversal library to get zippy performance and high accuracy. View the outline by selecting Source Outline from the drop-down menu at the top of the navigation pane on the left hand side of the editor.
JavaScript outline pane

Outline filtering

The outline pane now includes a filter box to help you quickly find the function you are looking for. Simply type in the filter box to filter the contents of the outline.
50m1-outline-filter

New icons using an icon font

Orion now has a completely new set of icons, implemented using an icon font. Implementing icons using a font improves page load performance because images don’t need to be fetched individually. Because they are vector-based, they also scale up and down very well. The following image shows our old icons alongside the icon font replacements on a high resolution iPad display:
50m1-iconfont

New syntax highlighting framework

This milestone includes a branch new syntax highlighting framework designed to suit the Orion plugin architecture. This framework uses declarative rules to match patterns in a source file to styles. The Orion plugin provides simple rules, and the calculations all happen in the main editor page. Stay tuned for more documentation on how to plug-in your own highlighter using this new framework. The Orion editor already uses this new system to provide highlighting of JavaScript, Java, CSS, and HTML source files.

New JavaScript validation

Orion has switched to a brand new syntax validation service based on eslint (previously we used JSLint). This new validator is currently roughly comparable to our old one, and provides much greater flexibility that we plan to expose to users in the future.

Accessibility deep dive

Many Orion committers attended a special master class with web accessibility guru Derek Featherstone this month. We did a deep dive on various parts of the Orion UI and how to make them more accessible to keyboards, screen readers, dictation software, etc. So far the net result has been a long list of new bug reports and design ideas, but we are certain this will ripple through into a more accessible Orion user interface over the coming months.

Compare images

The Orion compare editor now allows you to compare common image types. You can now see outgoing changes to your images in the Git staging page, and compare pairs of images in the standalone compare page.
50m1-compare-images

Drag to move files in navigation pane

You can now drag files and folders in the editor navigation pane to move them to another folder.
50m1-drag-move

Show in Navigator

When browsing around in the editor navigation pane it can be easy to lose track of the file you are editing. You can now click on the filename in the breadcrumb at the top of the editor to immediately reveal and select the currently edited file in the Navigator.
50m1-show-nav

Completion support in editor find bar

The find and replace bar in the editor now provides a drop-down of suggested completions for your search term based on your search history. You can delete entries from the history directly in the down-down if you don’t want to see that suggestion again.
50m1-find-completion

Open file with different editor

A drop-down menu has been added to the editor to allow you to view the same file in a different editor. For example, when editing a markdown file, you can use this to toggle between the Orion text editor and a rendered markdown view.
50m1-switch-editor

Find user command for administrators

A new command is available to administrators in the user profile list to quickly jump to the profile for a particular user. If you manage an Orion install with thousands of users you will be thanking us for this one.
50m1-find-user

That’s all for this milestone!

Posted in New & Noteworthy | Comments Off

Orion 4.0 Released

Another 4 month push and Orion R4.0 is available for Download, for use at OrionHub or if you’re running Node.js you can npm install orion and then npm start orion (There’s a video of installing the Node.js version of Orion on a Raspberry Pi if you like to follow along).

The Orion team has been working across the server, core code and client side UI. The most noticeable change is the removal of the Navigator Page in favour of the NOL (Nav on left) as we call it. If you land on a folder with a readme.md then this is now rendered on the right, like one would expect. Further UI work was done on an alignment of icons, selection policies, and colour themes through the various Orion pages.

R40EditorScreenShot

The concept of a Project has been introduced as well. Currently, there is a small amount of meta-data stored in a project.json file however this will be where additional Project features will be placed. There is a separate Project view and an extensible area on the project overview do describe project relationships or capabilities.

There’s a new Getting Started link on the Persona icon to describe a few common tasks.

GettingStarted

The underlying User model in the Java server implementation was changed to more easily support scalability. A users ‘workspace’ is now completely stand-alone to support sharing between Orion servers (Java, Node.js, others). The server config file needs to be altered to migrate to this new format.

You can see another long list of the changes in R4.0 in John Arthorne’s post Orion 4.0 M2 – New and Noteworthy

The project has picked up a lot of new contributors and a few new committers in this release. The Orion Client is easy to clone and start working on since it’s just self hosted development. We hope you can help us fix some of the bugs entered or add features you think are missing from an online IDE.

Onto another 4 month release cycle for R5.0!

Posted in Announcements | 4 Comments

Orion 4.0 M2 – New and Noteworthy

It’s been a busy summer for the Orion project. Since our 3.0 release at the end of June, the team has been busy on enhancements to the Orion editor, JavaScript tools, and some major long term efforts we’re not quite ready to blog about yet. Check out the latest stable build now on OrionHub, or download your own server.

Embedded markdown renderer

Orion now has built-in support for rendering markdown files, using the marked markdown parser. If you select a folder containing a readme.md file in the navigation pane, the editor will now show the rendered readme file in the editor pane.

40m2-markdown

Bracket completion

The Orion editor will now automatically close braces, brackets, and single and double quotes. When you type an opening brace, bracket or quote, the closing character will be inserted automatically and the cursor placed between the matching pair. If you select some text and type an open bracket or quote, the entire selection will be enclosed in a matching pair. Bracket and quote completion can be enabled or disabled from the editor settings page.

Smart indent

The Orion JavaScript editor now supports smart indentation. When you press return after an opening brace character, the following line will be indented by one additional tab. If you don’t like it, smart indentation can be turned off from the editor settings page.

Block comment completion

The Orion JavaScript editor will now auto-complete block comments. If you press return on a line containing only /* or /**, the editor will insert the closing comment characters, and automatically begin each line within the block comment with a * character.

40m2-block-comment

Option to show whitespace characters

A new option has been added to the Orion editor to display a visible character for whitespace (tabs and spaces).

40m2-visible-whitespace

Trim trailing whitespace on save

The Orion editor can now optionally trim all trailing whitespace from the file on save. This setting is turned off by default, but can be be enabled from the Editor settings page.

Customized editor rulers

New options have been introduced to customize what rulers are shown in the margins of the Orion editor. You can display or hide line numbers, the code folding bar, the annotation ruler, and the overview ruler on the right hand side. The following image shows the same editor with all rulers removed on the left, and revealed on the right.

40m2-editor-rulers

Customize local editor settings dropdown

You can now customize what editor settings appear in the local editor settings menu. Use the circles next to each setting in the full settings page to select which settings appear in the editor (wrench) menu. Put settings here if you find you need to change them frequently, and remove them to avoid clutter if they are settings that you never touch.

40m2-custom2

Toggle regular expression search in search bar

An indicator icon has been added to the search and replace slideout in the editor to show whether you are doing a simple search or regular expression search. A blue icon indicates that regular expression mode is enabled, and grey indicates simple search mode. The icon can be touched or clicked to toggle between modes.

40m2-toggle-regex

Search support for replacing with whitespace characters

When performing search and replace in the Orion editor, you can now include the following whitespace characters in the replacement text:

  • \t (tab)
  • \n (linefeed)
  • \r (carriage return)
  • \R (current file line delimeter)

This feature only works when regular expression mode is enabled in the search and replace bar.

Content assist more tolerant of syntax errors

Enhancements have been made to Orion’s content assist to make it more tolerant of missing braces and brackets. It will now compute correct proposals in many more cases of partially incomplete code.

40m2-tolerant-parsing

Support for tern indexes in content assist

The Orion content assist engine now supports proposals driven by pre-built type index files. The currently supported index file format is taken from tern. While Orion currently only includes pre-built index files for default JavaScript types, this will enable future enhancements to enable content assist across multiple script files.

Navigate content assist with page up/down

You can now navigate through a large list of content assist proposals using the Page Up and Page Down keys on your keyboard.

Auto-save now transfers only file deltas

Editor auto-save has been enhanced so that it only sends the changed portions of the file rather than the entire file contents. This won’t be a noticeable change for most users, but it significantly improves the performance and bandwidth characteristics when editor auto-save is turned on.

Editor runs on Internet Explorer 8

The Orion editor now tolerates running on Internet Explorer 8. The rest of Orion still requires a modern web browser (most recent version of IE, Chrome, Firefox, or Safari).

JSLint can be turned off

A new setting has been introduced to turn off JSLint validation. The setting is found on the Validation section of the settings page.

Git blame

Support has been added to enable in-editor Git blame on a file. After installing the Git Blame plugin (install URL: "/plugins/gitBlamePlugin.html"), a new blame button is added to the editor page. Clicking on the button creates blame annotations in the line ruler and the overview ruler. The blame markers are colored based on the date of their commit with the lighter shades coming earlier. Hovering over a blame annotation will highlight all parts of the same commit and display a tooltip with the commit information. Clicking on the link in the tooltip will open up the Git Commit page that for the particular commit.

40m2-blame2

Git revert command added

Support for the git revert command has been added to Orion. Beside each commit in the Log page, there is a new button that will revert the effect of that commit in your current active branch.

40m2-git-revert

Upgraded to JGit 3.0

The Orion Git integration has been upgraded to use a new major version of JGit, version 3.0.

Mixed content blocking and Orion

While not a change in Orion itself, a recent browser change has an impact for people hosting Orion plugins and Orion-based web applications. Major browsers are now consistently blocking sites served over HTTPS from incorporating scripts from raw HTTP sites. This is referred to in the security community as active mixed content, and is now blocked by default in Chrome 19 and Firefox 23 or newer. We recommend all Orion installations use HTTPS, and therefore all Orion plug-ins must now also be served over HTTPS or they will be blocked by user browsers. If you are currently hosting a public Orion plug-in you must ensure that it is provided over HTTPS, or Orion installations will no longer be able to install or use it.

Posted in New & Noteworthy | Comments Off

Midterm GSoC update on the Orion Git Blame feature

Again this year the Orion Project is benefiting from the Google Summer of Code program. We put up several suggestions on the Eclipse Foundation GSoC 2013 Ideas page, as did other Eclipse projects. As a potential student working on open source you can apply and describe how you would implement the desired features in a GSoC project. Through a back and forth then evaluation, students are paired up with Mentors before the term begins.

In our case, I was paired with Chris Conley (@chrconley) on a proposal we had for adding the Git Blame annotations into the Orion editor. Chris laid out a great plan for learning Orion, both the Server and Client codebase, understanding how the Git Blame feature could be implemented and getting down to coding. He’s been working closely with Bogdan Gheorghe, Silenio Quarti, and Szymon Brandys as well. We have weekly meetings to discuss progress, roadblocks, and approaches to the next stage of development. Often the mentors will get together sharing the screen and looking at options and code. Chris is not a committer, yet, so does his work in Orion on a fork at GitHub as per the instructions on the Orion Wiki (Orion/Contributing Code). Chris has already committed the server side changes to enable working on the JavaScript client side feature.

There’s a great description of the progress Chris has made on his blog post about midterm evaluations. He’s great to work with and extremely enthusiastic about working on Open Source and we’re lucky to have the opportunity to get this feature into Orion via the GSoC program. Looking forward to the feature being completed by end of term!

GSoC – Midway Progress by Chris Conley

blamepic2

Posted in General | Comments Off

Orion and Google App Engine Push-to-Deploy

After reading an article by Brad Abrams on Cloud based deployment leveraging Git push and Google App Engine I thought I’d outline how Orion can be leveraged in the same way.

Brad suggests starting with a Google Cloud Platform Guestbook Application hosted at GitHub. If you already have an account at OrionHub and are logged in, you can shortcut the steps of creating a project and cloning a repository by simply clicking this “Create and Clone the Guestbook in Orion” link.

When this is done, you should be placed in the editor on the contents of the cloned Git repository. Let’s use a related link (since we know it’s a Git Repository) to get to the Orion repositories page.

GoToGitRepository

The Repository page on the Google Guestbook

GitRepositoryPage

Strictly not needed step but lets enable an Orion setting to remember your Git repository credentials in local storage. Nothing is stored in the server, only in your browser and can be cleared or unchecked to clear. In the upper right of the Orion window select the Persona and go to your settings page. Here is a case where I open that link in a new tab because once I’m done with this task I’ll just close that tab and go back to the task I was working on.

GotoSettingsPage

GitCredentialsSetting

Now (exactly like Brad’s article describes) you’re going to have to go create a new App Engine at http://cloud.google.com/console and enable Push-To-Deploy on the App Engine settings page.

SourcePushToDeploy

There’s a couple of things you need to copy and paste here so I’d suggest having Orion in one tab/window and the App Engine page in another. What we’re going to do is setup another Git remote for the repository you cloned originally. The remote is the URL you see in the above image (well your link will be different). The username is your google ID and the password is the token generated by clicking in that link that says “get your auth token”. Ignore the description about adding it to the netrc file.

Go back to the page which was your Git Repository view on the cloned repository. Look for the button that says “New Remote” and click it. In the slide out, you enter “appengine” for the name (to be compatible with Brad’s article) and paste in the repository URL from the Google App Engine settings page. Then press ‘submit’.

AddRemote

Once you’ve added the remote you need to push what you have from the master of the GitHub repo to that Google remote. Choose the “Push All” button but pick the “More” option in the Git Push to open Choose Branch dialog.

PushAll

GitPushDialog1

Select the “appengine” remote and manually type in “master” and press ok.

MoreChooseBranch

This is where you’re enter your credentials, your google ID for App Engine and the auth token you received earlier. If you select the no prompt again option it shouldn’t prompt you again later when you push additional changes. Choose Submit.

PushCredentials

So Orion will take a bit of time pushing to the Google App Engine repository master branch. Then it takes a bit of time for Google App engine to cycle (or whatever) before you see the app running (like a couple of minutes in my case). But then I saw the following application running at my URL.

PlanetOrionTestRunning1

Let’s make a simple change. Switch to the editor view by picking the related link “editor” as follows:

SwitchToEditor

In the editor page, click on index.html to edit the file. Now press Ctrl-F (or Cmd-F Mac) and find “book”, hit enter to find the second occurrence. Now edit the text to also say “PLEASE!!”. Save the file. (Note: you can turn on auto-save by accessing the option in the spanner/wrench icon over on the right side of the editor).

EditIndexHtml

Let’s go to the Git Status page, again through a related link to this file. You can see how Orion works, by either top level pages or by navigating contextually via related links pertaining to the current task and resource you’re working with.

RelatedLinkGitStatus

In this particular page, the task is looking at unstaged changes for a particular repository, staging the ones you want, committing them, and finally pushing them to a remote.

GitStatusNoCompare

This next screen shot is opening the twisty to show the changes made to index.html. You can view them side by side or inline. If happy with the change, you select the line the file is in and choose stage. You can imagine if you had a bunch of changes but only wanted to stage and commit some of them, but not in this case.

GitStatusWithUnstaged

Now that the change is staged lets commit it, again selecting the line the file is on and pressing commit adding a comment to the commit.

GitStatusStagedCommit

You should then see your commit ready for pushing. Press Push but again choose “more” in the dialog so you can choose the branch.

GitStatusAfterCommitBeforePush

Now if you expand the twisty for “appengine” you’ll see the master branch and you can select it and press ok. If you remembered your credentials, you shouldn’t have to do anything more just waiting for the push to complete.

GitStatusAfterPushChooseBranch

Quite quickly, at least in my case, my site was updated with the change and when I refreshed the page I saw my change.

NewPlanetOrionWithChange

BONUS Points for reading this far….

Orion by default is setup to edit JavaScript, CSS, HTML type files and provide content assist, linting and syntax colouring for these types of files. In this project you can edit the “guestbook.py” file, but by default there’s no syntax colouring. We’ve written a client side plugin for Orion that understands the CodeMirror mode formats. To enable this plugin, again go to the settings page from the persona icon on the top right of an Orion page.

In the settings page choose the “plugins” tab and choose the link for “Get Plugins”.

GetPlugins

This will take you off site to a GitHub account where we keep a list of plugins. In this case you want to choose the “Install” link for the CodeMirror Modes Orion plugin.

PluginsList

This directs you back to Orion with the plugin inserted and ready to install. Plugins for Orion are HTML, JavaScript and CSS and run in your browser securely. While this plugin is hosted at GitHub, it provides bound functionality to the editor by enabling syntax highlighting for specific file types. Simply press Submit to install this plugin.

InstallPlugin

When it’s done, in your editor page, just refresh the page and the source should now look like:

NewSyntaxColouringViaPlugins

To uninstall or disable this syntax colouring return to the plugin settings page and choose the right option for that plugin.

DisableUninstallPlugin

The user preferences for what plugins you have installed and enabled is stored on the Orion server. This means if you login from your iPad, your friends machine, the airport or hotel, you’ll have the same setup that you had before.

A bit of a long post, but demonstrates how to use Orion with services that utilize Git repositories to deploy, build, or otherwise run an application. More information about working with Git in Orion can be found on our Orion User Guide. All our doc is also available off the Persona icon on the top right of each page.

Posted in Tips & Tricks | Comments Off

Orion 3.0 Released

This week the Orion project released version 3.0 as part of the Eclipse Kepler simultaneous release. Check it out now on OrionHub, or download your own copy of the server. The server is available in WAR format for the first time, and a pure JavaScript server implementation is also available via npm.

The tone for this release was set at EclipseCon 2013 in Boston, where it became clear that Orion was entering a new phase of adoption. Developers from HP, VMWare (Pivotal), IBM, and others came forward at the conference with demos and prototypes of Orion-based development tools. See Ken Walker’s recent JAXConf slides for screenshots and examples of the kinds of applications being built with Orion.

The following three months have been a rapid growing up period, where commercial concerns such as scalability, security, accessibility, translation, performance, and usability have been the project’s focus. The Orion 3.0 release is emerging from that maelstrom with a more polished and hardened set of components for building browser-based development tools. For more details, here are some recent posts that dive into the features coming with the latest release:

With the 3.0 release out the door, planning is well underway for the 4.0 release scheduled for October 2013. For the next release we hope to return to a more balanced development with great new developer tools as well as continuing to harden the core Orion infrastructure.

Posted in New & Noteworthy | 1 Comment

Orion 3.0 M2 – New and Noteworthy

It has been a busy milestone for the Orion project. The user interface had another major overhaul, and there were several tooling enhancements such as editor auto save and a new search page. There are also clear signs in this milestone of Orion maturing from an experimental platform to a true commercial scale tool platform, with work going into scalability, accessibility, globalization, and enterprise Java server deployment.

Check out Orion 3.0 M2 now on Orion Hub, or download it for yourself. The following are some of the more noteworthy things available in this milestone.

The Orion editor page now supports a navigation pane on the left hand side of the page as an alternative to the outline pane. The navigation pane allows you to select other files to edit, browse up or down the folder hierarchy, and perform actions on files and folders much like the Navigator page.
30m2-nav-editor

The banner at the top of each Orion page has been completely redesigned. The aim is to produce a clean, simple look that gives most of the page focus to the main page content such as the editor. The navigation breadcrumb has been folded into the top banner, and navigation links have been moved into a new drop-down menu in the top-left corner. Navigation links are split into two columns: the left column indicates the main of the application, and the right column contains context-sensitive links that are relative to whatever file or folder you are currently viewing. The user options menu is now a button to free up horizontal space. For more details on these design changes, see Orion developer Anton McConville’s blog post.
30m2-banner

New search page

Searching file contents in Orion is now done from a new Search page. This page is accessed from the navigation menu in the top-left corner. All of the usual options for filtering and sorting search results are available in this page. You can also create a bookmark for frequently used searches from here. From the Navigator or Editor page, you can select Scope Search in the Navigation menu to begin a search that is narrowed down to a specific location. On the search page itself, the breadcrumb bar can be used to adjust the search scope up to any parent folder.
30m2-search-page

Importing code templates

As part of making importing code into Orion easier, this milestone has the first of two methods implemented. Any site can host a code template which can facilitate the import of a Zip file into a folder for a logged in user. As an example, see Ken Walker’s GitHub page. Located here is also the template for how to adapt your web page so that content can be imported into Orion. The second of the methods, due by 3.0 release, is to allow a link to begin a Git clone directly into a project for a logged in user.

Editor auto-save

The Orion editor now supports saving your changes automatically as you write, as well as automatically loading changes that occur to the file outside the editor. Auto-save is disabled by default but can be enabled from the editor options menu (spanner icon).
30m2-autosave

Browser compatibility check

Orion makes use of the latest emerging web application standards, and as such requires a modern HTML5 browser. If you attempt to use Orion on an older browser you will now be duly warned.
30m2-browser-thunk

Orion WAR file deployment

Extensive work was done on the Orion Java server to support deployment of Orion-based applications as a Web ARchive (WAR) file. This included isolating Orion servlet code from the context path, allowing Orion servlets to be integrated as part of a larger web application in the same server container. Support for container-managed security was also added, enabling Single sign-on between Orion and other applications. The Orion build does not currently produce a WAR file, but a sample war file product is available for reference. More details are available in bug 377823.

Open shell to current location

In the past, the Orion shell page would always open at the root of your file system. Now, when opening the Orion shell page from the Navigator or Editor page, the current working directory will be set to the appropriate directory depending on where you navigated from.

Globalization improvements

Globalization testing was done on Orion in this milestone to ensure it supports user input in a variety of character sets. Testing was performed in Korean, Chinese, and Japanese, and several bugs were addressed. Notably, the Orion editor now supports automatically switching to variable line height mode where the current character set requires it.
30m2-global

Accessibility testing

Another round of accessibility testing was done on the Orion user interface this milestone, ensuring all elements are accessible to keyboard input and are useable with screen reader tools. A number of problems were addressed, and Orion developer Carolyn MacLeod wrote an informative series of tips on how to build accessible web UIs.

Server scalability and metadata storage

As part of a long term effort towards high scalability in Orion, the Java server’s internals had a major overhaul of its metadata persistence. In the past, metadata was persisted through the OSGi Preference API, which was not designed for this purpose and resulted in numerous problems. There is a tentative new API, IMetaStore through which all metadata persistence is now performed. It is now possible to plug in a completely different storage mechanism for Orion server metadata without code changes in the core of the Orion server code.

Posted in New & Noteworthy | Comments Off