Friday, October 5, 2012

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).

Friday, June 22, 2012

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.