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.