Orion/Documentation/User Guide/Getting started
This tutorial will get you started with using Orion, and provides step by step walk-through of some of the core functionality.
- 1 Logging into Orion
- 2 Working with folders and files
- 3 Editing code
- 4 Search support
- 5 Working with git
- 6 Launching your project as a website
Logging into Orion
When you first attempt to move beyond the welcome page on an Orion server, you'll be prompted for credentials.
Clicking Sign in will take you to the Login page. When running from your own server, you can create an account directly from the login page. If you are accessing a server hosted elsewhere, you may need to ask the server administrator to create an account for you. After a successful login you will be redirected back to the page you came from.
Working with folders and files
In Orion, each user has a virtual root folder where various folders and files can be created. These files are maintained on the Orion server. The Navigator page is used to browse and modify your files.
Creating folders and files
Once you've successfully logged into Orion, go to the Navigator page by clicking Navigator in the banner at the top of any page. This is where your files and folders will be shown. Because you haven't created any files or folders yet, the navigator is initially empty.
To start working with files and folders in Orion, create a folder using the New Folder button on the left side of the dark bar in the banner:
To navigate the files, you can either expand the folders (using the triangles), or you can click on the folder links to drill into that folder. After you have drilled into a folder, the breadcrumb at the top of the page allows you to navigate back up the tree.
The banner provides access to common operations in Orion. The main navigation links appear at the top left of the page banner, next to the Orion logo. The right side of the banner provides links to the user profile and an options menu containing settings, help, and other commonly used actions. Underneath, the page header describes the title of the page, the breadcrumb, and the name of the resource being manipulated. On the right of the page header are items that let you quickly find and mark pages that you commonly use. The star icon allows you to mark the current page as a favorite. The search box and Related pages menu allow you to quickly navigate to a new page.
Below the banner, the content of the page appears. Commands that operate on the content itself (such as New File, New Folder in the navigator) are located in the toolbar above the content.
Commands that apply to an individual file or folder are located in an actions menu next to the item in the navigator.
Files and folders may be selected by clicking the checkbox beside their name. Commands that operate on the selected items (such as move, copy, and delete) will appear on the navigator toolbar when a selection has been made.
Importing folders and files
There are many ways to import your files into Orion. You can upload a zip file, import via SFTP, or clone a Git repository.
To import files from your local file system into Orion, you must first zip up the files you wish to import. Choose this zip file in the file selection prompt offered in the import dialog available in the menu next to each folder.
The contents of the zip file will appear in your folder in the navigator. (If you are working on the Orion demo server, you will also notice a folder associated with git inside your new folder. To configure this feature on your own localhost version of Orion, see the server administration guide.)
Exporting folders and files
When you have worked with your code on Orion and are ready to export your work back to your local workstation, navigate to the folder you wish to export and choose the Export as Zip link.
You can use the Favorites icon in the page header or the favorites menu item to bookmark a folder or file in your navigator. A link to this folder or file will appear in your favorites list and can be used to navigate quickly to that file or folder.
Favorites are also suggested as move/copy targets.
They also appear in the Find File dialog.
We've implemented an extension point that allows a plug-in to add commands to the navigator's toolbar and local item actions. To see what plug-ins are installed in your Orion system, open the Settings page from the Options menu.
The registry shows what plug-ins you have installed, and allows you to add plug-ins by typing the URL of a plug-in in the text box. You can see that the several plug-ins that provide Orion functionality, such as file management, user management, git, jslint, are already installed. Plug-ins provide different kinds of new behaviors, or "extensions", to the system.
The orion.navigate.command extension point allows plug-ins to contribute commands to the navigator. Each contributed command can specify how many and what types of files it can work with. Contributed commands will appear in the navigator item menus.
A sample plug-in that demonstrates the different kinds of commands you can contribute is located at http://orionhub.org/plugins/sampleCommandsPlugin.html. You can paste or type this URL into the registry page and press the Install button. When you reload the navigator page, you will see new commands in the item and toolbar menus.
See sampleCommandsPlugin.html for the source code.
Once you've navigated to the file you want to work with, click on its link to open the Coding page. You'll find that the editor supports the basics (cut/copy/paste, undo/redo) as well as your favorite text-editing features from Eclipse desktop (move up/down, copy up/down, go to line, find, incremental find). For now, most of these commands are accessible only through keyboard shortcuts, using the default key bindings in Eclipse desktop. To see a full list of available keyboard commands in the editor, press Ctrl+Shift+L. (Outside of the editor, you can get the same help on any page by pressing Shift+?.)
The editor will also match brackets when you click next to a bracket, perform auto indention, and provide source-code oriented key bindings for things like toggling comments and adding/removing block comments.
The Orion server is Firebug-savvy, so that recent alpha versions of Firebug, together with a Firebug extension, can invoke the Orion editor to make corrections. For details about this, see the Firebug wiki.
Syntax highlighting of CSS files is also supported, but no outlining support has been provided yet. A CSSLint Plugin can be installed to perform syntax validation on CSS files. As a proof of concept, Orion implements a very simple form of content assist. In Orion, our goal is to provide the plug-in points for things like content assist and outlining, allowing plug-in developers to enhance the functionality. For now, Orion supplies a content assist based on CSS keyword proposals. We hope to integrate existing source code analysis tools as plug-ins to enhance content assist support, outlining, and problem identification for many kinds of files.
A simple HTML outline is provided, based on DOM ids. Syntax highlighting is also available for HTML files.
Extending the editor with a Plug-in
We've also implemented pluggable editor actions which allow third-party developers to extend the behavior of the Orion editor on the fly. For example, we've developed an Orion plug-in based on the JSBeautifier code formatter so that source code can be easily beautified. The plug-in is located at http://mamacdon.github.com/0.2/plugins/beautify/jsbeautify.html . Once the plug-in is installed, reload an Orion editor to see a new command appear beside rest of the editor commands.
Once you are actively using Orion, you'll find that you want to move quickly between different resources. There are several ways to go about this. We've integrated Apache Lucene search with the Orion server and exposed it in the Orion client in several ways.
The search box in the Orion navigator will perform a global search on everything in your user workspace. Results are shown in a Search Results page. From this page you can sort and filter the results, and initiate a global replace operation.
The Find File Named dialog can be opened by pressing Ctrl+Shift+F on your keyboard. This dialog lets you search for a file by name. Simple wildcard characters are supported. Matching files in your favorites list are shown first in the results list.
You can also perform a global search on a highlighted phrase from inside the editor using the Ctrl + H shortcut.
A nice side effect of editing source code in browser pages is being able to use browser mechanisms, such as the history, to quickly find files. If you find yourself working in the same handful of files, opening a new browser tab and typing in the filename will quickly get you there.
Working with git
We intend to provide many different kinds of plug-ins for integrating Orion into open source and proprietary version control systems. Our first example in this area is a UI for working with Git repositories. For files and folders that are managed in a Git repository, you will see a menu for navigating to the Git status of the repository containing your file.
The Git Status page shows you all the files in your git repository that have changed, and allows you to stage, unstage, and commit changes. You can also compare the content of the files.
A side-by-side compare view is also provided. This will evolve into a merge view over time.
The Git Status page shows also a list of recent commits on the active branch. You may open the Git Log page by clicking the Complete Log button and see the full list of commits on that branch. Click on a commit in the log page to slide out the Commit details panel to see more information.
You can also open the Compare page for each change in the selected commit.
Launching your project as a website
Orion can create "sites" for testing an application developed with Orion as a stand-alone website. Click the Sites link on the Orion toolbar. This takes you to the Site Configurations page, where you can create, edit, delete, or launch web sites for testing. Sites will be launched either as a sub-domain of the Orion server, or at an alternate IP address when running the server locally.
Note that if you are running your own server, and you wish to set up hosting on a sub-domain, a different IP address, or if you're running Mac OS X, you'll have to supply some more information to the Orion server. See Configuring virtual host names for more detail.
You create a site by clicking the Create Site Configuration button and supplying a name for your site. Your new site will appear in the table, with commands for starting, stopping, or editing the site.
Click on the new site to go to the Edit Site page. Under the Mappings table, click the Add... button. This will give you a row in which you can define a mapping from a folder in your Orion user workspace to the location on the server where the folder will be deployed. The following screenshot shows us mapping the "MyWork" folder to the root of our new site.
Click on the Save button to save the site configuration. Go back to the list of site configurations and click the Start button () next to your new site configuration. Now you should be able to view your site at the address shown in the Status column.
Since our "MyWork" folder has an index.html file in it, we see the contents of that file when we visit the newly created site in our web browser.
At this point, we can do incremental development by using the Orion editor to change the files in our "MyWork" folder, and then simply reloading the site page to see the changes.