Chapter 4. Operations With File

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
Save File as Template
Create File from Template
Remove Non-default File Template
Open/Select/Close/Browse tabs
Undo/Redo Editing
Edit Files in the Code Editor
Format File
Show/hide line numbers
Go to lines
Watch the cursor position in the Status Bar
Delete lines
Find/Replace
Code Autocomplete
Code Outline
Edit File in the WYSIWYG Editor
Preview File Properties

To create a file, for example, do as follows:

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:

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:

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:

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:

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:

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:

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:

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:

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:

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:

Illustration 12. Create the gadget from template

To remove the non-default file template, do as follows:

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:

This function is commonly used in text files as follows:

Illustration 15. Find and replace operations with file's content

To open the dialog window for finding and replacing the text, do as follows:

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:

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:

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.

For XML autocompletion, only the previously typed tag is used. There is no schema or name space analyses.

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:

Illustration 21. View file's properties

Note

It is impossible to view the properties of just created and non-saved files.