- Create File
- Save/ Save As... File
- Save All Files
- Delete File
- Rename File
- Open file with non-default editor
- Go to Folder
- Download file from server
- Open Local File
- Upload File
- Using Templates
- Edit File
- Operations with tabs: open, select, close, browse tabs
- Undo/Redo Editing
- Edit file in Code Editor
- Edit File in WYSIWYG Editor
- Preview File Properties
To create Filre, follow these steps:
Open new file with default name and content in the separate tab of Content Panel. To do this you can click on "New" button on the left of Toolbar or select "File->New" from top menu and then choose necessary command from the popup menu.
Save new file in some folders of the repository. Select target folder in the Workspace Panel, click on "Save As..." button in the left part of Toolbar or "File->Save As..." top menu command or press "Ctrl+S" keys, type needed file name in the "Save file as" window and then click on "Ok" button to create new file in the repository.
Picture 6. Create new REST Service
Just after you have changed the opened file content, its tab title will be marked by "" and the "Save" button will be available. So, you will be able to save changed file content by clicking "Save" button or using the hotkey "Ctrl+S" or selecting "File->Save" from top menu. To save file into another folder or with another name, select a target folder in the Workspace Panel and then click on "Save As..." button on Toolbar or select "File->Save As..." from 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 are one or more earlier created, opened and changed files in the Content Panel, you can save all of them simply by clicking "File->Save All" from top menu . Take to consideration that the "Save All" command will not take affect on new files.
To delete file(s), select target files in the Workspace Panel, click on "Delete Item(s)..." button of Toolbar or select "File->Delete..." from top menu and then confirm deletion in the "Delete" dialog. Files opened in Content Panel will be closed after removing. You can view full path to the opened file in tip of file tab in the Content Panel.
Note
Gadget can't delete items from different folders simultaneously. So, in this case, the "Delete..." command will be disabled.
To rename some file, do as follows:
Select file in Workspace Panel.
Select "File->Rename..." from top menu.
Change current name of the file to the new name in the rename field. Then, click on "Rename" button to rename file.
After renaming opened and unsaved file in the Content Panel you will be able to save this file later.
Note
If there is a file with the same name in the target folder, you will receive the following error message.
Warning
Don't forget undeploy REST Services if they were deployed earlier before renaming
HTML and Goolge gadget files can be opened in Code Editor or in WYSIWYG Editor, but Code Editor is used by default. You can open such files in WYSIWYG Editor and even more - set this editor as default - with the help of "Open File With" dialog. E.g. to open HTML file in WYSIWYG Editor, please, follow next steps:
Create target html-file.
Select it in the Workspace Panel.
Call the "File->Open With.." top menu command.
Select "WYSIWYG Editor" item and press "Open" button.
If target file has been opened in Content Panel already, then reopen confirmation dialog will be shown:
Picture 7. Open HTML file in WYSIWYG editor
Picture 8. Opened HTML file in WYSIWYG editor
To change default editor you have to check "Use as default editor" checkbox in the "Open File With" dialog. After pressing "Open" button a new setting will be stored in the User Settings File at the server. So, in the next sessions you will have set default editor. Default editor is marked by "Default" in the "Open File With" dialog.
You can quickly find opened file in Workspace Panel using "Go to Folder" command:
Find out and select appropriate file tab in the Content Panel.
Call "View->Go to Folder" top menu command.
Gadget will open folder with this file selected. In the same manner you can localize found file from Search Tab.
If you want to get some file from JCR Repository, you can use special command: "Download...":
Select target file in Workspace Panel.
Call "File->Download..." top menu command.
After that the file will be sent to the client. So, the browser will propose you to save the file on local computer.
With eXo IDE it is possible to edit some local file with registered type within the Code Editor or WYSIWYG Editor. In time of opening you will be able to directly define correct file type. To edit some local file content with eXo IDE:
Call "File->Open Local File..." top menu command.
In the opened "Open file" dialog click on "Browse..." button and select required local file.
Check automatic generated MIME type, based on file extension. If it is needed, select another MIME type from the list.
Press the "Open" button to open selected file content in the default editor of Content Panel and with local file name.
Then you can continue working with this content as with new file:
Picture 9. Example of opening local groovy script
There are such MIME types registered in 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 google gadget XML file you should set MIME Type = "application/x-google-gadget" in "Open file" dialog as it is figured out at the next picture:
Picture 10. Open local google gadget XML file
To load file directly into the JCR on server you can use "File->Upload..." top menu command. There is example of uploading file "gadget.xml" into the "Gadget" folder:
Select "Gadget" folder item in the Workspace Panel. (You must create this folder before)
Call "File->Upload..." top menu item.
In the opened "File to upload" dialog click on "Browse..." button and select "gadget.xml" from local computer.
Select correct MIME type = "application/x-google-gadget".
Press the "Upload" button.
Then "gadget.xml" will be uploaded on the sever and appear in the "Gadget" folder of Workspace Panel.
To save file's content as template for new file with the same MIME type, you have to click on "File->Save As Template..." and then set template name and description in "Save file as template" dialog window. Also you can save uploaded file as template.
Picture 11. Save file as template
If you want to use some of predefined file template, e.g. create simple gadget XML file, you can use special tool - "Create file" dialog window. To call this tool, please, click on "New" button on Toolbar and then choose "From Template..." item of popup window or press "Ctrl+N" hotkeys, select needed file type and template, verify file name and click on "Create" button as it's figured out in the next picture:
Picture 12. Create gadget from template
If you want to remove non-default file template, you can use "Create file" dialog window from previous paragraph. To call this dialog window, click on "New" button on Toolbar and then choose "From template..." (or use "Ctrl+N" hotkeys), select needed template and click "Delete" button. Asking dialog will appear to confirm your action.
When file is created or opened, its content will be displayed in the separate tab of Content Panel (see pic.1 for details) in default Code Editor. This is eXo GWT implementation of Codemirror application from http://marijn.haverbeke.nl/codemirror/ . - a JavaScript library that is used to create a relatively pleasant editor interface for Groovy, JavaScript, XML, Google Gadget, CSS, text and HTML MIME types of content. Such code will be colored, and the editor will help you with indentation.
To switch to necessary file, please, click on tab title with appropriate name. To close file just click on "x" button on the tab title. Also you can use tab browsing buttons "◄", "►", "▼" at the top right corner of Content Panel as you can see this at the picture "eXo IDE Interface" above.
Note
You can view 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 "Edit" top menu :Undo/Redo Typing, Format, Show/Hide Line Numbers:
Picture 13. Undo/Redo , Format and Show/Hide Line Numbers commands on {}Toolbar{} and in top menu
Text editing operations are added into 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 Toolbar buttons "Undo Typing" or "Redo Typing" (see pict. above). Also you could use "Ctrl+Z" or "Ctrl+Y" hotkeys respectively. In Code Editor the Undo/Redo commands are disabled if there are no changes in undo or redo history.
Each file, opened in editor has it's own history.
In the Code Editor operation "Format" means fixing row indentations of the HTML, Groovy, JavaScript, XML content with length = 2 space by default. To do this, please, use "Format" button of Toolbar or "Edit->Format" top menu item.
In the left gray field the Code Editor displays line numbers (see picture above). To hide this field in the all opened file tabs, please, call "Edit->Hide Line Numbers" top menu item. Also this action turns off line numbers field in the opening later file tabs, and this settings will be saved in browser cookies. To view line numbers again in the all opened Code Editors call "Edit->Show Line Numbers" top menu item.
You can quickly move to the specific line in editor, using "Go to line" dialog window.
Picture 14. Go to line
If you want to call "Go to Line" dialog window, you can click "View->Go to Line..." from menu, or double click on label, that shows current cursor position in the Status Bar.
When "Go to line" dialog window appears, you can enter number of line to the input field and click "Go" button. Label, above text field, shows range of lines in active file. Only number values can be entered and if you print number out of range, error will be shown.
Tip
You can also call "Go to line" dialog window by "Ctrl+L" hotkeys (use hot key manager to customize your hotkeys).
When editor is opened, current cursor position is shown in status bar. The first number is line number and the second - is column position. If you make one mouse click on this label, "Go to line" dialog window will be shown.
You can quickly delete current line in editor using "Delete Current Line" command. Move cursor to the line, you want to delete and then call "Edit->Delete Current Line" in top menu or use hotkeys "Ctrl+D" (use hot key manager to customize your hotkeys).
This function is used to do the following actions with text files:
Find and select phrase in the text from cursor position (button "Find").
Replace found phrase with replacement (button "Replace").
Replace found text with replacement and then try to find and select next occurrence (button "Replace/Find").
Replace all phrases in the text with replacement from cursor position (button "Replace All").
Picture 15. Find and replace operations with file's content
To open dialog window for finding and replacing text you could :
Open at least one file. Find "Find/Replace..." button on Toolbar or use "Edit->Find/Replace..." top menu command.
Type phrase, that you would like to find in file, into "Find" field. Text for replacing may be entered in "Replace with" field.
Click "Find" button.
If text is found - "Replace" and "Replace/Find" buttons become active - so you can replace founded phrases with another, entered in "Replace with" field, by clicking "Replace" or "Replace/Find" buttons.
If you need to replace one text on another from cursor to the end of file at once, please, click "Replace All" button.
To perform case sensitive search in file, you need to check the field "Case sensitive".
If you do find/replace actions with one file and then switch to another the dialog window saves the state of the performed actions of each editor's opened file.
This feature allows 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 on "Ctrl+Space" hotkeys. After this gadget displays autocomplete form at the start of word:
Picture 16. Autocomplete form
In Google Gadget, HTML and Groovy Template files autocomplete list content depends on cursor position within the file: between <script> tags there will be autocomplete list for JavaScript content, between <style> tags - for CSS content. In the other places there will be autocomplete list for HTML content.
To use autocomplete function you have to:
Open target file with supported file type (JavaScript, CSS, HTML, Google Gadget, Groovy Template) into editor
Set cursor at the needed postition in the document.
Press the "Ctrl+Space" to get autocomplete form.
Select token in the list of this form. Or you may type first letters of token to reduce token list and then select token.
Press "Enter" key to paste selected token into document despite of word, or press "Esc" key to cancel autocompletion.
Also you may mouse double click on needed token in the list to paste this token into document. To close autocomplete form you may also click outside the form.
Picture 17. Autocomplete form with description
There are special template tokens in the autocomplete list, which are aimed to insert code template, e.g. "if-condition" template is:
if (condition)
{
}Tokens of different types are marked by different colors:
Green token is a function, will be inserted name of function.
Red token is variable, will be inserted name of variable.
Grey token is keyword of JavaScript.
Templates have special icon (see "Pic. 16. Autocomplete form" above)
Picture 18. CSS autocomplete
In CSS file autocomplete list contains all the properties of Cascading Style Sheets. They are marked with yellow token picture.
There are two HTML autocomplete lists: first is a list of all HTML tags, second is a list of all properties of the pointed tag.
Picture 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.
For now, there is no autocompletion for Groovy code in Groovy Template file. Content of Groovy tags (<%%>) is ignored. For other content autocompletion same as for HTML file.
Code Outline can help productively create JavaScript code. Outline is available for Google Gadget, JavaScript, XML, HTML and Groovy Template files.
Picture 20. Code outline
When you create file with type from the above list, Outline Panel appears in the right panel. When you open file of other type (or select other tab), this panel will hide. You can close Outline Panel, by clicking on close button on the tab header. Also, you can show/hide Outline Panel by pressing "Show/Hide Outline" button on Toolbar or use "View->Show Outline" top menu command (if check is present near command's title - then Outline Panel is shown, otherwise - hidden).
In Outline Panel you can see the tree of global variables and functions and also 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).
Outline tree refreshes automatically after 2 seconds from stop typing code. You can click on the item in outline tree, then cursor will set on the line, where this item is defined. When you move cursor on the page, current token is selected in outline tree.
Instead of Code Editor you can open and edit HTML files and Google Gadgets within the WYSIWYG Editor based on CKEditor. Even more, it is possible to set WYSIWYG Editor for those files as default. WYSIWYG Editor is 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 files.
WYSIWYG Editor doesn't support line numbering, auto indentation and format, code coloring, autocomplete, code outline. Instead of these, you will have powerful editor, which means that the text edited in it looks as similar as possible to the results, that users have when publishing it. It brings to the web common editing features found on desktop editing applications like Microsoft Word and OpenOffice. How to open file in WYSIWYG Editor is explained in the point "Open file with non-default editor" above.
This User Guide is a good start point to get advanced information about this editor.
Connected with JCR repository node, file properties are displayed in the special Properties Tab in bottom part of Content Panel. To view file properties:
Open this file in the Content Panel.
Click on "Show Properties" button at the right part of the Toolbar or call the "View->Properties" top menu command.
Picture 21. View file's properties
Note
It is impossible to view the properties of created at the JCR file only.