Orion codeEdit widget 12

Orion codeEdit widget debuted just one year ago in Orion 9.0. Thanks for all the valuable user feed-backs over the past year, now in Orion 12, the widget has been improved a lot on both usability and customizability. We've updated the widget wiki page for the latest features, summarizing user feed-backs  in the FAQ section.

The demo page here shows you two of the biggest improvements in the widget: customize-able editor configurations and fine tuning your web language tooling. In Orion 11.0 we introduced tern project, now this feature is integrated in the widget. In the demo you will see a zoom ruler in each editor, enabled by an editor configuration change. You will also see how the javascript file validations behave differently while live editing the tern project and eslint rule files.

Aside from that, there are other major improvements that are not shown in the demo.

• Plug-able user implementations of services
• Ability to import multiple files into the widget
• Ability to export multiple files outside of the widget

With all the improvements so far, we found it's been much easier for the existing users to consume and customize the widget. We are still improving in other areas so please stay tuned.

Orion 9.0 Code Edit Widget With Language Tooling

Eclipse Orion has just announced version 9.0 with greatly enhanced javascript language tooling features. In addition to using Orionhub.org as an IDE, developers have been demanding that they can embed the Orion editor into their web pages with all the features that Orion offers. Now Orion 9.0 comes with a new widget called "Code Edit".

Consuming the Code Edit widget is very simple. You just need to go to the Orion 9.0 download page and download the widget build that is named built-codeEdit.zip.

After downloading the build you can host the unzipped files into your web server and start to consume it in your web page. The Code Edit wiki page describes how to consume it but as a quick start you can use the run-able html example to launch it. It only takes you several minutes to do so. We've also hosted a demo page where you can try the widget right now!

While Orion 9.0 announcement describes some new tooling features in 9.0, there are existing features like syntax highlighting, problems validation, quick fixes, etc. You can find a quick guide from the feature list on the demo page.

The demo page only demos a javascript file but the widget supports more languages such as css, html and most of the web languages. You can also theme the editor's syntax highlighting and other visual parts. The Code Edit wiki page will describe more on these.

As the Code Edit widget is part of the Orion build, we are actively adding features and doing bug fixes for the widget. Stay tuned with the post 9.0 stable builds!

As part of the future plan, we will allow users to inject their own plugins to the widget. For example, this will allow users to add new language syntax highlighting, add more editor commands, add their own file systems for multiple file reference on language tooling, etc.

Embed Orion compare widget into your web page

In my previous post, I talked about Orion git status page where compare widgets are embedded inside the page. Now in the latest version of Orion, we are exposing a stand alone compare build. You can use the build to embed a compare widget into any DOM element in your page, without accessing to Orion server. It is a pure client side java script that can be consumed anywhere in your client code. There are several features worth mentioning:

• Pure javascript code. No dependencies on server side.
• Clear annotations and navigation on diffs
• High and low levels of diff walk through.
• Syntax highlighting depending on provided file names.
• Multiple widgets in one page.
• Toggleable compare widget type between side by side and unified views.
• All open options to embed the widget from lightweight to fully loaded.

To quickly launch a demo on how to use the build, please try it out here.
To see the source code, please refer to here.
To summarize the ease of use, you only need to provide two strings as your compare contents with options like the file name and additional command holder.
You can also download the build and the stand alone demo in different levels. Please refer to the Orion compare build wiki page for details.
Please note that if you host the build in your own server you can even provide only two file URLs as long as they are in the same domain.

The search input completion in Eclipse Orion.

In the latest version of  Orion when you type your search term in the search box, it pops up a list of proposals filtered from your recent searched terms.

HTML5 datalist tag was the UI we used at beginning but due to the lack of the support of this from Safari and IE 9, we ended up using our own input completion widget that is similar but much more flexible on both UI and data binding point of view.

Not limited to be consumed by Orion, the input completion we implemented is purely based on html and java script, which is easy to hook up to any html INPUT element. The data binding on the input element is fully customize-able and able to accept results from web services.

When Orion consumes the input completion, as it has plug-in mechanism, you do not even have to change the data binding code. I will write another post regarding how to extend it in Orion but here  I just want to demo how  the input completion works as a stand-alone widget.

Please refer to the source code here or try it directly here.

From there you will see that when your web page creates an input element, an instance of inputCompletion is hooked up. The only thing you need to provide is a function that will return a full set of proposals(in html5, it is called datalist) with categories(html5 datalist does not have this).

Using Eclipse Orion as your GIT client.

Eclipse Orion will launch its version 0.5 soon. You can try it if you want to host your web projects there.
It has a lot of features if you are developing web on web but here I would like to introduce another usage of Orion: GIT client.
Suppose you already have a GIT repository in your local machine linking to your GIT remote repository. Even if you do not want to use Orion as your IDE, you can still try to use it as a browser based GIT client.
Steps are simple.

1. Download the latest Orion server build.
2. Unzip the build into a folder in your local drive.
3. In order to allow Orion server to be authorized to access your local drive, create an empty file called orion.conf in yourFolder/eclipse/, with a line like :   orion.file.allowedPaths=your_local_git_repository_path(or its parent folder).  On Windows two backslashes must be used to separate path entries . Refer here for details.
4. Run orion.exe in  yourFolder/eclipse/. Refer here for details.
5. Open your browser and input localhost:8080 as the URL.
6. Register a new user in your local Orion server and login.
7. Now Orion navigator shows as the default page. Click on "new" menu and choose "Link to Server".
8. Input your local GIT repository path and the display name. Click on "summit".  
9. Your GIT repository is displayed in the navigator now. Click on the empty space of the row to select your GIT repository.
10. Click on "Actions" menu and choose "Git Status". Now you can start to use Orion as your GIT client.

The Orion git status page behaves like the dash board of your GIT repository. From there you can view your  changes by using the compare view, which supports both line and word level diffs. Then you can stage and unstage you changes, commit them. Just like what you will do with other GIT clients. You can also go from here to the git log page, which shows the history of your repository. From the log page, again, you can click on any commit and compare the changes in file level.