eXo Platform 3.5

- Prev
- Next

## Chapter 4. Operations With File

## Create File

To create a file, do as follows:

- Step 1: To create a new file click the New button on the left of the toolbar. Select the required file type in 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 the 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 the new file.

Illustration. Create new REST Service

## Save/Save As... File

Once you have changed content of the 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 any file with the same name in the target folder, it will be rewritten by the "Save As..." command.

## Save All Files

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. The Save All command does not have any effect on new files.

## Delete File

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 are closed after being removed. You can view the full path to the opened file in the tip of file tab in the Content Panel.

### Note

In eXo IDE, you cannot delete items from different folders simultaneously. The "Delete..." function is disabled in such cases.

## Rename File

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: Enter the new name into the Rename item to field.

- Step 4: Click Rename to take effect.

### Note

If your new file name has been existing 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.

## Change MIME Type of File

You can change the MIME type of the closed file as follows:

- Step 1: Click the target file in the Workspace Panel.

- Step 2: Go to File > Rename... from the top menu.

- Step 3: Select the new MIME type from Select mime-type combo-box, or type another non-registered MIME type in this field.

- Step 4: Click Rename to change the MIME type.

### Note

You cannot open the file with the non-registered MIME type in eXo IDE.

## Lock File

This feature is used to protect your files from being changed or removed by another users. You can lock or unlock the file by clicking the Lock or Unlock icon on the toolbar, or going to Edit > Lock/Unlock File on the top menu.

The "Lock" icon is located next to the title of the locked file in the Workspace Panel and at the title of such file tab in the Content Panel:

Illustration. Locked file in Workspace Panel

Illustration. Locked file in Content Panel

Another users can open the locked files to read only, but can not edit, save, delete, move or rename.

### Warning

If you open the locked file with the WYSIWYG Editor, you can edit its content, but the "Save" function is disabled.

## Open Files with the Non-default Editor

HTML and Google gadget files can be opened in either the default Code Editor or WYSIWYG Editor. To open a file in the WYSIWYG Editor, do as follows:

- Step 1: Click the needed HTML or Google Gadget file in the Workspace Panel.

- Step 2: Go to File > Open With... on the top menu.

- Step 3: Select WYSIWYG Editor and then click Open to show the selected file in the WYSIWYG Editor.

If the target file has been opened in the Content Panel before, the confirmation dialog is shown for you to affirm reopening it:

Illustration. Open the HTML file in the WYSIWYG editor

Illustration. Opened the HTML file in the WYSIWYG editor

If you want to change the default editor, simply click your desired editor and mark the Use as default editor checkbox in the Open File With dialog.

The new settings are stored in the User Settings File at the server that will be the default editor in next sessions. The default editor is marked by the "Default" text in the Open File With window.

## Go to Folder

You can quickly find the opened file in the Workspace Panel using the Go to Folder function 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.

Your selected file will be highlighted in the Workspace Panel. Similarly, you can localize the found file from the Search Tab.

## Download File from Server

If you want to get some files from the IDE Workspace, 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 and the suggestion window will be shown for you to save the file into your local device.

## Open Local File

In 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 in 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.

Illustration. Example of opening the local REST service

The following table is the list of MIME types registered in the eXo IDE.

Table. Registered MIME Types

Table 4.1.

File Type | 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 | .grs | Code Editor
POGO | application/x-groovy | .groovy | Code Editor
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
Netvibes Widget | application/x-uwa-widget | .html | Code Editor
Data Object | application/x-chromattic+groovy | .groovy | Code Editor
<unrecognized> | binary/octet-stream |  |

### Note

To load the Google Gadget file, you should set the MIME Type as "application/x-google-gadget" in the "Open file" dialog as figured out in the below illustration:

Illustration. Open the Google Gadget file

## Upload File

To upload a file directly to the IDE Workspace on the server, go to File > Upload File... on the top menu. For example, to upload the gadget.xml file to the Gadget folder, do as follows:

- Step 1: Select the Gadget folder in the Workspace Panel.

- Step 2: Go to File > Upload File... on the top menu.

- Step 3: Click the Browse... button to select the gadget.xml file from the local device in the File upload dialog.

- Step 4: Select the appropriate MIME type as application/x-google-gadget.

- Step 5: Press the Upload button.

The gadget.xml gadget is uploaded to the server and placed in the Gadget folder.

## Upload Zipped Folder

To upload a zipped folder to the Workspace on the server, the folder must be packaged as the .zip archive.

- Step 1: Select the parent folder item in the Workspace Panel.

- Step 2: Go to File > Upload Zipped Folder... on the top menu.

- Step 3: Click the Browse... button to select the zipped folder from the local device in the Upload folder dialog.

- Step 4: Press the Upload button.

The zipped folder is uploaded to the sever and unzipped in the folder selected in step 1.

## Open File by Path

To open a file by its path, for example Example.groovy, do as follows:

- Step 1: Go to File > Open File By Path... on the top menu.

- Step 2: Enter the path of the target file "http://127.0.0.1:8080/rest/private/ide-vfs-webdav/repository/production/Example.groovy" into the File URL field of the Open file by path dialog.

- Step 3: Click the Open button to show the Example.groovy file in the new file tab of the Content Panel.

You can select View > Get URL... on the top menu to obtain the file path.

### Note

The target file should be placed at the same domain as IDE.

## Use File Template

File Template is stored in the IDE registry file, and then can be used to create another files with the same MIME type.

### Save File as Template

To save the selected file as a template with the same MIME type, do as follows:

- Step 1: Go to File > Save As Template... on the top menu.

- Step 2: Enter the template name.

- Step 3: Define the brief description of the template.

- Step 4: Click Save to accept.

You can also save the uploaded file as template.

Illustration. Save file as template

### Create File from Template

The File From Template... function enables you to create a file from the predefined template. For example, to create a simple gadget XML file, do as follows:

- Step 1: Click the New button on the toolbar and select File From Template... from the pop-up to open the dialog, or press Ctrl+N hotkeys.

- Step 2: Select your desired type and template for the file.

- Step 3: Enter the name into the File Name field, and click Create to complete adding your new file. The newly created file is opened automatically in the Content Panel.

Illustration. Create the gadget from template

### Remove Non-default File Template

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

- Step 1: Click the New button on the toolbar.

- Step 2: Select File From Template...; or press Ctrl+N hotkeys.

- Step 3: Select the needed non-default template in black and click Delete.

The confirmation dialog will appear for you to verify your deletion.

### Warning

After deleting the file template which has been used in the project template, a new project will be created from such project template without this file.

## Use Project Template

Project Template helps you create folders and files with the predefined structure and content. You can create, update or remove your project template and add new folders and files from your template.

### Create Project Template

To create a project template, do as follows:

- Step 1: Go to File > New > Project Template... on the top menu; or click the New button on the toolbar and select the Project Template... command:

Illustration. "Create project template" dialog window.

- Step 2: Enter the name and brief description in the Create project template form, or edit its structure by clicking buttons Add Folder, Add File, Delete at the right part of the Create project template dialog.

- Step 3: Click Create button to complete your project template.

#### Modify the Project Template Structure

You can make changes for your project template structure by adding new folders/files or deleting some elements. To make modifications for your project template structure, do as follows:

Step 1: Open the Create project template window as described in Section "Create Project Template" above.

Step 2: Select the target folder in the project template tree.

Step 3: Add a new folder: 1. Click the Add Folder button to open the Add folder window.

2. Enter your desired folder name into the Name of new folder field and then click Add.

New folder then will be added to the project template.

Step 4: Add a new file:

1. Click the Add File button to open the Add file window.

2. Select your desired file template in the templates list.

3. Enter the file name into the File Name field, and then click the Add button.

Step 5: Delete some elements:

1. Select your desired item (folder/file) in the template project tree.

2. Click the Delete button.

### Create Project From Template

To create a project from template, do as follows:

- Step 1: Select the parent folder in the Workspace Panel.

- Step 2: Click the New button on the toolbar and then select Project From Template... from the drop-down menu; or go to File > New > Project From Template... from the top menu.

- Step 3: Select your desired project template from the templates list.

- Step 4: Enter the project name into the Project name field.

- Step 5: Click the Create button.

Illustration. Create project from template

### Remove Project Template

To remove a project template, do as follows:

- Step 1: Click New > Project From Template... on the toolbar; or go to File > New > Project From Template... from the top menu.

- Step 2: Select your desired target project template from the list.

- Step 3: Click the Delete button.

## Open/Select/Close/Browse tabs

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:

Illustration. File tab browsing buttons.

### Note

You can view the full path to the opened file in the tip of the tab title.

You can see some useful commands represented with special buttons on the toolbar and in the Edit on the top menu: Undo/Redo Typing, Format, Show/Hide Line Numbers:

Illustration. Undo/Redo, Format and Show/Hide Line Numbers on the toolbar and on the top menu.

## Undo/Redo Editing

Your actions performed with the text are added to the history as a distinct batch after each pause, saving you from fear of doing something wrong. So, you can restore your file content by using the Undo or Redo functions.

### Undo

The Undo command in eXo IDE helps you obtain your desired changes, such as formatted text, moved blocks, deleted text by following either of two handy ways:

- Press Ctrl+Z.

- Click the Undo Typing button on the toolbar.

### Note

The "Undo" function is disabled in case of no new changes in your text. To undo the Undone action, use the "Redo" function.

### Redo

After you have undone your performed action on the text but unfortunately what recovered is not satisfactory, simply click the Redo function to set back. The Redo function is used in the following cases:

- Get exactly whatever the Undo command does. For example, if you type some text, Undo deletes the text, and Redo recovers the deleted text.

- If you use Undo to recover your deleted text, Redo will delete the text again.

The Redo function can be performed via one the two following ways:

- Press Ctrl+Y

- Click the Redo Typing button on the toolbar.

### Note

- "Redo" is available only after "Undo" is performed.

- In the "Code Editor", the "Undo/Redo" functions are disabled in case of no changes in the "Undo/Redo" history.

- Each file opened in the editor has its own history.

## Edit Files in the Code Editor

Once a file has been created/opened, its content is displayed in the separate tab on the Content Panel in the default Code Editor. eXo IDE Code Editor parses and colors the code, you can indent code, search text, locate open/close braces and brackets, see line numbers and more...

### Format File

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.

### Show/Hide Line Numbers

To show line numbers in the Code Editor, go to Edit > Show Line Numbers from the top menu. The Show Line Numbers is turned into Hide Line Numbers. You will see the left vertical grey area in all opened files.

Select "Hide Line Numbers" to hide line numbers. The last selected settings are saved in the browser cookies for next sessions.

### Go to Line

To go to the exact line quickly, do as follows:

- Step 1: Open the Go to Line dialog by following one of the listed below ways:

(1) select Edit > Go to Line... from the top menu,

or (2) double-click the area showing the current cursor position in the Status Bar,

or (3) press Ctrl+L.

Illustration. Go to line

- Step 2: In Line number, type a number within the allowable range and click Go. If you enter the number out of range, there will be an error message.

### Note

If "Ctrl+L" does not work, use the hot key manager to customize your hotkeys.

### Watch the cursor position in the Status Bar

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.

### Delete line

You can quickly delete the current line in the editor as follows:

- Step 1: Put the cursor on the needed line.

- Step 2: Use Edit > Delete Current Line command from the top menu, or press Ctrl+D to remove the highlighted line from the file.

### Find/Replace

This function is commonly used in text files to quickly search for a specific word/phrase and to replace the text as follows:

- Step 1: Open your desired file.

- Step 2: Open the Find/Replace window by following one of the ways described below:

(1) select the Find/Replace... icon on the toolbar,

or (2) go to Edit > Find/Replace... from the top menu,

or (3) press Ctrl+F.

- Step 3: Enter the word/phrase for which you want to search into the Find field.

- Step 4: Click the Find button to do the search.

Once the text has been found, and if you want to replace the found phrase, continue doing the next steps:

- Step 5: Enter the replacement text into the Replace with field.

- Step 6: Click the Replace or Replace/Find button to replace the found word/phrase, or select Replace All to replace all.

Illustration. Find and replace operations with file's content

### Note

- All functions in the "Find/Replace" window are only performed as from the current position of the cursor to the end of the file.

- "Replace" and "Replace/Find" are only active if the text is found.

- Check the "Case sensitive" field to do the search based on differing the use of uppercase and lowercase letters.

- If you do the "Find/Replace" action with one file and then switch to another, this window will save the status of performed actions of the opened file in each editor.

### Code Autocomplete

This feature enables you to autocomplete the word, including keywords, statements, declared variables, properties and methods, functions, objects, classes, tags, attributes, annotations in context of JavaScript, HTML, XML, Google Gadget, REST Service, Template, POGO, Netvibes Widget, Data Object files simply by clicking Ctrl+Space hotkeys. The Autocomplete form is shown as below.

Illustration. Autocomplete form

In the files of Google Gadget, HTML and Template types, the autocomplete list displays various content for each case, 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, the autocomplete list for the HTML content is displayed.

To use the Autocomplete function, do as follows:

- Step 1: Open the target file with supported file types (JavaScript, CSS, HTML, Google Gadget, ECM Template and others) with the Code Editor.

- Step 2: Put the cursor on 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 the token to reduce the token list and then select the appropriate token.

- Step 5: Press the Enter key or double-click the selected token to complete the word next to the cursor.

### Note

- Use "Alt+Space" hotkeys instead of "Ctrl+Space" in the Mac OS.

- Click the outside area of the form to quit the "Autocomplete" form.

- Press the "Esc" key to discard the "Autocomplete" form.

Illustration. Autocomplete form with description

#### JavaScript Specific Autocomplete List

There are some special template tokens in the autocomplete list to insert the code template. For example, the if-condition template is shown as below:

    if (condition)
    {

    }

Template tokens have the special icon as shown in Illustration. Autocomplete form and tokens of different types are marked with different colors, including:

Table 4.2.

Token | Marked color
--- | ---
Function name | Green
Variable name | Red
Javascript key | Grey

#### CSS Specific Autocomplete List

Illustration. CSS autocomplete

In the CSS file, the autocomplete list contains all the properties of Cascading Style Sheets. They are marked with the yellow token icons.

#### HTML Specific Autocomplete List

There are two HTML autocomplete lists: one of all HTML tags, and the other of all properties of the pointed tag.

Illustration. HTML autocomplete form

Also, you can call the CSS properties and JavaScript autocomplete list if your current cursor position is inside <style> or <script> tags respectively.

#### XML Specific Autocomplete List

For the XML files, there is only one autocomplete list for the previously typed tag. There is no schema or namespace analysis.

#### ECM Template Autocomplete List

Currently, the autocomplete list of the ECM Template files is the same as that of the HTML files. Moreover, the content between Groovy tags <% %> is ignored.

#### Netvibes Widget Autocomplete List

The autocomplete list of the Netvibes Widget files is the same as that of the HTML files.

The autocomplete list inside javascript tags is the composition of the JavaScript autocomplete list and Netvibes snippets:

- JSON request snippet

- Flash object snippet

- Pager Control snippet

- Tabview Control snippet

- Thumbnailed List snippet

Exo IDE supports autocomolete for Netvibes Universal Widget.

Illustration. Netvibes autocomplete form for UWA classes

It is possible to autocomplete the created Netvibes object's properties and methods.

Illustration. Netvibes autocomplete form for object's properties and methods

More details about this snippets (and code, that will be inserted) you can see in hint window of autocomplete form

#### Groovy Code Specific Autocomplete List

eXo IDE currently supports special features for the Groovy code autocomlete list, including REST Service ("application/x-jaxrs+groovy"), POJO ("application/x-groovy") and Data Object ("application/x-chromattic+groovy"). The autocomplete list varies, depending on Java types and is shown in the following cases:

- <local variable name>.

- <object's field name>.

- <static field name>.

- <method's parameter name>.

- <class name>.

- @<annotation name>

- in the line after the space.

IDE compiles classes, which is are described in the project's classpath, before generation of Autocomplete list. If the compilation of some class is failed, the error message will be appear in Output Panel instead of Autocomplete Form as shown below:

    [ERROR] Error (500: Internal Server Error)
    startup failed, /ide-project/data/Pojo.groovy: 9: unexpected token: vpid @ line 9, column 3.
    vpid fg(){
    ^

To display classes from folder, described as folder source in the project's classpath, in the Autocomplete Form, the files with such classes should fulfill conditions as follows:

1. Must be located in folder with respect to package structure.

2. The name must be the same as the class name located in a file.

3. Must have extension ".groovy" or ".grs".

##### Class Name

You can view class's JavaDoc and class name from the autocomplete form. eXo IDE provides appropriate import statement into the file header automatically, if needed. There is a list of default packages for the Groovy code and so are imported explicitly:

- java.lang.

- java.io.

- java.lang.

- java.math.BigDecimal

- java.math.BigInteger

- java.net.

- java.util.

- groovy.lang.

- groovy.util.

Illustration. Groovy autocomplete form for classes

##### Object's Fields and Methods Autocomplation

You can also view JavaDoc and autocomplete the object's fields and methods as follows:

- Step 1: Print the instance name with the dot (.) at the end.

- Step 2: Press Ctrl+Space to view all public methods and fields of the object. The JavaDoc for the selected field or method is shown.

- Step 3: Select the appropriate item in the autocomplete form and click the Enter key; or double-click this item.

Illustration. Groovy autocomplete form for public methods

##### Static Fields and Methods Autocompletion

eXo IDE supports the autocompletion of static fields, methods and object's fields and methods.

### Note

The autocompletion for methods and fields of the class or instance can only work, if it is called after the symbol ".".

##### Annotations Autocompletion

It is possible to autocomplete the annotations, followed by symbol "@". The Autocomplete form for annotation contains the list of available annotations like this:

Illustration. Groovy autocomplete form for annotations

##### Local Variables and Parameters Autocomplation

Local variables and method's parameters are marked with the special icon in the autocomplete form - . eXo IDE supports the autocompletion for local variables and method's parameters.

Besides, the keywords of Groovy code are not marked with icons in the autocomplete list.

#### Validate Java Types and Fix Import Statements

If you forget to insert the import statement, the line with error will be marked as follows:

Illustration. Groovy Code Error Mark

To view and fix the Java type error, do as follows:

- Step 1: Hover the cursor on error marks to see the error message in tool tips.

- Step 2: Click the error icon in the Line numbers field.

- Step 3: Select the appropriate import statement and press the Enter key; or double-click to insert it into the header of the file.

### Code Outline

The code outline is used to create codes productively. The outline is available for all types of files, expect for Text or CSS files.

Illustration. JavaScript Code Outline

The Outline Panel is opened automatically once a file has been created or opened. 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 the Show/Hide Outline button on the toolbar or select View on the top menu and then select/deselect Outline from the drop-down menu.

In the Outline Panel, you can see the tree of variables, functions, classes, objects, methods, fields, parameters, annotations, HTML and XML tags with icon "< >", and special code delimiters like "<% ... %>" in the ECM Template file, or "CDATA" in the Google Gadget file as the illustrations below.

Illustration. ECM Template Code Outline

Illustration. Google Gadget Code Outline

The outline tree is refreshed automatically every two seconds after you stop typing the code. You can click the item in the outline tree. The cursor then sets on the line where this item is defined. When you move the cursor into the file content, the appropriate node is selected in the outline tree.

#### Code Outline for Groovy Code

In the Outline Panel for the Groovy code of REST Service, ECM Template, POGO and Data Object files, you can see not only names and types of your classes, variables, methods, fields, or parameters, but also their modifiers and annotations in the view of icons and tooltips.

The following is the list of icons connected to different access modifiers.

Table 4.3.

Access modification | Icon
--- | ---
private | Red square
public | Green circle
protected | Yellow rhombus
without access modifier | Blue triangle

The following is the list of letters placed over the node icons of outline node and one icon connected to special modifiers.

Table 4.4.

Letter/Icon | Modifier
--- | ---
a | Abstract
s | Static
f | Final
t | Transient
v | Volatile
Clock | Synchronized

Class or method with annotation(s) is displayed with the @ symbol near the title in the outline tree. To see the full list of annotations, hover the cursor on @.

Illustration. REST Service Code Outline

## Edit File in the WYSIWYG Editor

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 by default.

Currently WYSIWYG Editor can be used to edit the HTML, Google Gadget or Groovy Template files.

The WYSIWYG Editor does not support the line numbering, auto-indentation and format, code coloring, autocomplete, code outline or type error validation. However, the text edited with the WYSIWYG Editor looks as similar as published results. This editor has many common editing features as working in Microsoft Word, or OpenOffice.

To open a file with the WYSIWYG Editor, see Open File with the Non-default Editor above.

## Preview File Properties

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 corner of the toolbar; or go to View > Properties on the top menu.

Illustration. View file's properties

### Note

It is impossible to view the properties of files created but not saved yet.

- Prev
- Up
- Home
- Next