- Create File
- Save/Save As... File
- Save All Files
- Delete File
- Rename File
- Open Files with the Non-default Editor
- Go to Folder
- Download File from Server
- Open Local File
- Upload File
- Use File Template
- Open/Select/Close/Browse tabs
- Undo/Redo Editing
- Edit Files in the Code Editor
- Edit File in the WYSIWYG Editor
- Preview File Properties
To create a file, for example, do as follows:
Step 1: Click the New button on the left of the toolbar; or go to File > New from the top menu to create one available type, for example REST Service, from the drop-down menu.
Step 2: Save the new file in some folders of the repository by selecting the target folder in the Workspace Panel, then click Save As icon on the Toolbar; or go to File > Save As... from the top menu; or press Ctrl + S keys.
Step 3: Type the name of new file in the Save file as... window.
Step 4: Click OK to accept creating, or Cancel to discard without creating the file.
Illustration 6. Create new REST Service
Once you have changed content of opened file, its tab title will be marked by * and the Save button will be enabled. So, you can save changed content by clicking Save or press Ctrl + S, or going to File > Save from the top menu. To save the file into another folder or with another name, select the target folder in the Workspace Panel. Next, click the Save As... button on the Toolbar; or select File > Save As... from the top menu.
Note
If there is a file with the same name in the target folder, it will be rewritten by the "Save As..." command.
If there is one or more files created, opened and changed in the Content Panel before, you can save all of them simply by selecting File > Save All from the top menu. Take into consideration that the Save All command willnot have any effect on new files.
To delete a file, do as follows:
Step 1: Select the target file in the Workspace Panel.
Step 2: Click the "Delete Item(s)..." button on the Toolbar; or go to File > Delete... from the top menu.
Step 3: Confirm the deletion in the Delete dialog.
Files opened in the Content Panel will be closed after removing. You can view the full path to the opened file in the tip of file tab in the Content Panel.
Note
The eXo IDE cannot delete items from different folders simultaneously. So, in this case, the "Delete..." command will be disabled.
To rename a file, do as follows:
Step 1: Select your desired file in the Workspace Panel.
Step 2: Go to File > Rename... from the top menu.
Step 3: Type the new name in the rename field.
Step 4: Click Rename to take effect, or Cancel to discard without renaming.
After renaming opened and unsaved file in the Content Panel, you can save this file later.
Note
If there is a file with the same name in the target folder, you will receive an error message.
Warning
Do not forget to undeploy the REST Services if they were deployed before renaming.
HTML and Goolge gadget files can be opened in the Code Editor or in the WYSIWYG Editor. The Code Editor is used by default. To open such files in the WYSIWYG Editor with the help of Open File With dialog, do as follows:
Step 1: Create the target HTML file.
Step 2: Select the created file in the Workspace Panel.
Step 3: Go to File > Open With... on the top menu.
Step 4: Select the WYSIWYG Editor item.
Step 5: Press the Open button to show the created file in the WYSIWYG Editor.
If the target file has been opened in the Content Panel before, the Reopen confirmation dialog will be shown:
Illustration 7. Open the HTML file in the WYSIWYG editor
Illustration 8. Opened the HTML file in the WYSIWYG editor
To change the default editor, do as follows:
Step 1: Select the Use as default editor checkbox in the Open File With dialog.
Step 2: Press the Open button.
The new settings will be stored in the User Settings File at the server that will be the default editor in next sessions. The default editor is marked by "Default" in the Open File With dialog.
You can quickly find the opened file in the Workspace Panel using the Go to Folder command as follows:
Step 1: Select the appropriate file tab in the Content Panel.
Step 2: Go to View > Go to Folder on the top menu.
The eXo IDE will show the folder with this file selected. Similarly, you can localize the found file from the Search Tab.
If you want to get some files from the JCR Repository, do as follows:
Step 1: Select the target file in the Workspace Panel.
Step 2: Go to File > Download... on the top menu.
The file will be sent to the client. So, the browser will suggest you save the file on the local computer.
With the eXo IDE, you can edit some local files with the registered type within the Code Editor or WYSIWYG Editor. During opening, you can directly define the correct file type. To edit the local file content with the eXo IDE, do as follows:
Step 1: Go to File > Open Local File... on the top menu.
Step 2: Click the Browse... button in the Open file dialog to select the required local file.
Step 3: Check the file's MIME type, based on the file extension. If needed, select another MIME type from the list.
Step 4: Press the Open button to open the selected file content in the default editor of the Content Panel with the local file name.
Now, you can continue working with the content with the new file:
Illustration 9. Example of opening the local groovy script
The following table is the list of MIME types registered in the eXo IDE.
Table 4.1.
| FileType | MIME Type | Default File Extension | Default Editor |
|---|---|---|---|
| Text | text/plain | .txt | Code Editor |
| XML | text/xml; application/xml | .xml | Code Editor |
| REST Service | application/x-jaxrs+groovy | .groovy | Code Editor |
| Groovy Script | application/x-groovy | .groovy | Code Editor |
| Groovy Template | application/x-groovy+html | .gtmpl | Code Editor |
| HTML | text/html | .html | Code Editor |
| Google Gadget | application/x-google-gadget | .xml | Code Editor |
| JavaScript | text/javascript; application/javascript; application/x-javascript | .js | Code Editor |
| CSS | text/css | .css | Code Editor |
| <unrecognized> | binary/octet-stream |
Table 1. Registered MIME Types
Note
To load the Google Gadget file, you should set the MIME Type as "application/x-google-gadget" in the "Open file" dialog as it is figured out at the next illustration:
Illustration 10. Open the Google Gadget file
To upload the file directly into the JCR on the server, go to File > Upload... on the top menu. For example, to upload the gadget.xml file into the Gadget folder, do as follows:
Step 1: Select the Gadget folder item in the Workspace Panel. (You must create this folder before.)
Step 2: Go to File > Upload... on the top menu.
Step 3: Click the Browse... button in the File to upload dialog.
Step 4: Select the gadget.xml file from the local computer.
Step 5: Select the appropriate MIME type as application/x-google-gadget.
Step 6: Press the Upload button.
The gadget.xml gadget will be uploaded on the sever and appear in the Gadget folder on theWorkspace Panel.
File Template is stored in the IDE registry file, and then can be used to create another file with the same MIME type.
To save file's content as the template for new file with the same MIME type, do as follows:
Step 1: Go to File > Save As Template....
Step 2: Set the template name.
Step 3: Give the description for the template.
Step 4: Click Save to accept, or Cancel to discard without saving the file as template.
Also, you can save the uploaded file as template.
Illustration 11. Save file as template
If you want to use some of predefined file template, you can use the Create file function. For example, to create simple gadget XML file, do as follows:
Step 1: Click the New button on the Toolbar, or press Ctrl + New keys to select From Template... from the pop-up window to open the dialog.
Step 2: Select the needed file type and template.
Step 3: Verify the file name and click Create to accept.
Illustration 12. Create the gadget from template
To remove the non-default file template, do as follows:
Step 1: Click the New button on the Toolbar.
Step 2: Select From template...; or press Ctrl + N hotkeys.
Step 3: Select the needed template and click Delete.
The dialog will appear to ask you to confirm the action.
To switch to the necessary file, click the tab title with the appropriate name. To close the file, just click the X button on the tab title. Also, you can use the tab browsing buttons "<", ">" and down arrow at the top right corner of the Content Panel as below:
Note
You can view the full path to the opened file in tip of tab title.
There are several useful commands represented with special buttons at the center of Toolbar and in the Edit on the top menu: Undo/Redo Typing, Format, Show/Hide Line Numbers:
Illustration 13. Undo/Redo, Format and Show/Hide Line Numbers on Toolbar and in top menu
Actions to edit text are added into the history as distinct batch according to the editing pauses. After each pause of editing, the new operations batch is created. So, you can redo or undo current file content changes using Undo Typing or Redo Typing on the Toolbar (see the illustration above). Also, you can press Ctrl + Z or Ctrl+Y hotkeys respectively. In the Code Editor, the Undo/Redo functions are disabled if no changes in the Undo/Redo history. Each file opened in the editor has its own history.
When a file is created or opened, its content will be displayed in the separate tab on the Content Panel (see the illustration.1 for details) in the default Code Editor. This is eXo GWT implementation of Codemirror application from http://marijn.haverbeke.nl/codemirror/ . The JavaScript library is used to create an editor interface for Groovy, JavaScript, XML, Google Gadget, CSS, text and HTML MIME types of content. Such codes will be colored, and the editor will help you with indentation.
In the Code Editor, Format is to adjust row indentations of the HTML, Groovy, JavaScript, XML content with two spaces by default. To do this, select Format from the Toolbar; or go to Edit > Format on the top menu.
In the left gray field, the Code Editor displays line numbers (see the illustration above). To hide this field in all opened file tabs, go to Edit > Hide Line Numbers on the top menu. Also, this action turns off the line numbers field in the opening file tabs later, and the settings will be saved in the browser cookies. To view line numbers again in all opened Code Editors, go to Edit > Show Line Numbers on the top menu.
You can quickly move to the specific line in the editor using the Go to line dialog window.
Illustration 14. Go to lines
To go to a line, simply click View > Go to Line... from the top menu, or double-click the label that shows the current cursor position in the Status Bar.
When the Go to line dialog window appears, you can enter the line number into the input field and click Go button. The label above the text field shows the range of lines in the active file. Only numeric values are accepted, so if you print the number out of range, an error will be shown.
Tip
You can also call the "Go to line" dialog window by pressing "Ctrl + L" hotkeys (use the hot key manager to customize your hotkeys).
When the editor is opened, the current cursor position is shown in the Status Bar. The first number is the line number and the second is the column position. If you make one click on this label, the Go to line dialog window will be shown.
You can quickly delete the current line in the editor as follows:
Step 1: Hover the cursor onto the line you want to delete.
Step 2: Go to Edit > Delete Current Line on the top menu; or use Ctrl + D hotkeys (use the hot key manager to customize your hotkeys).
This function is commonly used in text files as follows:
Step 1: Find and select phrase in the text from cursor position using the Find button.
Step 2: Replace the found phrase with the new phrase using the Replace button.
Step 3: Replace the found text with replacement and then try to find and select next occurrence (button Replace/Find).
Step 4: Replace all phrases in the text with replacement from the cursor position (button Replace All).
Illustration 15. Find and replace operations with file's content
To open the dialog window for finding and replacing the text, do as follows:
Step 1: Open at least one file.
Step 2: Find Find/Replace... button on the Toolbar; or go to Edit | Find/Replace... on the top menu.
Step 3: Type the phrase you want to find in the selected file into the Find field. The text for replacing may be entered in the Replace with field.
Step 4: Click Find.
If the text is found, "Replace" and "Replace/Find" buttons will become active. Now, you can replace found phrases with the phrases entered in the Replace with field clicking the Replace or Replace/Find buttons.
If you want to replace one text with another from the cursor to the end of file, simply click the Replace All button.
To do the case sensitive search in your selected file, check the Case sensitive field .
If you do find/replace actions with one file and then switch to another, the dialog window will save the status of performed actions of each editor's opened file.
This feature enables you to autocomplete word including keywords, statements, declared variables and functions in context of JavaScript, CSS, HTML, XML, Google Gadget and Groovy Template files simply by clicking Ctrl + Space hotkeys. This gadget displays the Autocomplete form at the start of word:
Illustration 16. Autocomplete form
In the Google Gadget, the HTML and Groovy Template files autocomplete the list of content, depending on the cursor position within the file. If the cursor is put between <script> tags, or between <style> tags, there will be the autocomplete list for JavaScript content, or for CSS content respectively. In the other places, there will be the autocomplete list for HTML content.
To use the Autocomplete function, do as follows:
Step 1: Open the target file with supported file types (JavaScript, CSS, HTML, Google Gadget, Groovy Template) with your desired editor.
Step 2: Set the cursor at the needed position in the document.
Step 3: Press Ctrl + Space to get the Autocomplete form.
Step 4: Select the token in the list of this form; or type first letters of token to reduce the token list, then select the appropriate token.
Step 5: Press the Enter key to paste the selected token into the document, or the Esc key to discard the Autocomplete form.
Also, you may double-click the needed token in the list to paste this token into the document. To close the Autocomplete form, you may also click the outside of form.
Illustration 17. Autocomplete form with description
There are some special template tokens in the autocomplete list to insert the code template. For example, the if-condition template is:
if (condition)
{
}Tokens of different types are marked by different colors:
Green token is a function which will be inserted name of function.
Red token is variable which will be inserted name of variable.
Grey token is keyword of JavaScript.
Templates have special icon (see Illustration 16. Autocomplete form above)
Illustration 18. CSS autocomplete
In the CSS file, the autocomplete list contains all the properties of Cascading Style Sheets. They are marked with yellow token picture.
There are two HTML autocomplete lists: one of all HTML tags, the other of all properties of the pointed tag.
Illustration 19. HTML autocomplete form
Also, you can call CSS properties and JavaScript autocomplete list if your current cursor position is inside <style> or <script> tags respectively.
At present, there is no autocompletion for the Groovy code in the Groovy Template file. Content of Groovy tags (<%%>) is ignored. For other content, the autocompletion is the same as for HTML file.
The code outline can be used to create codes productively. The outline is available for Google Gadget, JavaScript, XML, HTML and Groovy Template files.
Illustration 20. Code outline
When you create a file with the type from the above list, the Outline Panel will appear on right. When you open a file of other types (or select other tabs), this panel will be hidden. You can close the Outline Panel by clicking the Close button on the tab header. Also, you can show/hide the Outline Panel by pressing Show/Hide Outline button on the Toolbar or going to View > Show Outline on the top menu.
In the Outline Panel, you can see the tree of global variables, functions and local variables, functions, methods and properties (the latter two are available for JSON-objects) and HTML or XML tags (for HTML, XML, Google Gadget files).
The outline tree refreshes automatically after two seconds when you stop typing code. You can click the item in the outline tree, then the cursor will set on the line, where this item is defined. When you move the cursor onto the page, the current token will be selected in the outline tree.
Besides the Code Editor, you can open and edit HTML files and Google Gadgets with the WYSIWYG Editor based on the CKEditor. You can set the WYSIWYG Editor for those files as default. WYSIWYG Editor is the eXo GWT implementation of CKEditor application from http://ckeditor.com/ the widely used WYSIWYG-editor of HTML-content. Also, it is used to edit Google Gadget or Groove Template files.
WYSIWYG Editor does not support the line numbering, auto-indentation and format, code coloring, autocomplete, or code outline. However, the text edited with the WYSIWYG Editor looks as similar as possible to the results published. This editor has many common editing features found on desktop editing applications like Microsoft Word and OpenOffice. To open a file with the WYSIWYG Editor, see Open file with the non-default editor above.
This User Guide is a good start point to get advanced information about this editor.
Connected with the JCR repository node, file properties are displayed in the Properties Tab in the bottom of Content Panel. To view file properties, do as follows:
Step 1: Open the file in the Content Panel.
Step 2: Click the Show Properties button at the right part of the Toolbar; or go to View > Properties on the top menu.
Illustration 21. View file's properties
Note
It is impossible to view the properties of just created and non-saved files.