Chapter 4. Operations With File

To create a file, do as follows:

Illustration. Create new REST Service

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.

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.

To delete a file, do as follows:

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.

To rename a file, do as follows:

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.

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

Note

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

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.

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:

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.

You can quickly find the opened file in the Workspace Panel using the Go to Folder function as follows:

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

If you want to get some files from the IDE Workspace, do as follows:

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.

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:

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

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:

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

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

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

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

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.

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

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

You can also save the uploaded file as template.

Illustration. Save file as 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:

Illustration. Create the gadget from template

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

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.

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.

To create a project template, do as follows:

Illustration. "Create project template" dialog window.

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.

To create a project from template, do as follows:

Illustration. Create project from template

To remove a project template, do as follows:

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.

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.

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:

Note

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

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:

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

Note

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

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.

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.

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

(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

Note

If "Ctrl+L" does not work, 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.

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

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

(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.

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

Illustration. Find and replace operations with file's content

Note

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:

Note

Illustration. 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 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

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.

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.

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

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.

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:

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

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:

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".

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:

Illustration. Groovy autocomplete form for classes

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

Illustration. Groovy autocomplete form for public methods

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 ".".

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

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:

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.

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

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.

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. View file's properties

Note

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