Chapter 4. Operations With File

1. Click on the toolbar. Select a file type in drop-down menu.

2. Save the new file in some folders of the repository by selecting the target folder in the Workspace pane, then click on the toolbar;

Or, go to File --> Save As... from the top menu;

Or, press Ctrl+S keys.

3. Type the name of the new file in the Save file as form.

4. Click Yes to accept creating the new file.

Save a file into another folder or with another name

1. Select the target folder in the Workspace pane.

2. Click on the toolbar;

Or, go to File --> Save As... from the top menu;

Or, press Ctrl+S keys.

Note

If there is any file with the same name in the target folder, it will be rewritten by the Save As... command.

If more than one file is created, opened and changed in the Content pane, 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.

1. Select the target file in the Workspace pane.

2. Click on the toolbar;

Or, go to File --> Delete... from the top menu.

3. Confirm the deletion in the Delete form.

Files opened in the Content pane are closed after being removed.

Note

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

Tip

You can view the full path to the opened file when hovering your cursor over the file tab in the Content pane.

1. Select your desired file in the Workspace pane.

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

3. Enter the new name into the Rename item to field.

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.

1. Select the desired file in the Workspace pane.

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

3. Select the new MIME type from Select mime-type combo-box;

Or, type another non-registered MIME type in this field.

4. Click Rename to change the MIME type.

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 on the toolbar;

Or, going to Edit --> Lock/Unlock File from the top menu.

The icon is located next to the title of the locked file in the Workspace pane and at the title of this file tab in the Content pane.

Another users can open the locked files to read only, but they cannot 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.

Open a file in the WYSIWYG Editor

1. Click the needed HTML or Google Gadget file in the Workspace pane.

2. Go to File --> Open With... from the top menu.

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 pane before, the confirmation message will be shown.

Your selected file will be opened in the WYSIWYG editor as below.

If you want to change the default editor, simply select your desired editor and tick the Use as default editor checkbox in the Open File With form.

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

This feature will help you quickly find the opened file in the Workspace pane.

1. Select the appropriate file tab in the Content pane.

2. Go to View --> Go to Folder from the top menu.

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

1. Select the target file in the Workspace pane.

2. Go to File --> Download... from 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.

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.

Edit the local file content in eXo IDE

1. Go to File --> Open Local File... from the top menu.

2. Click Browse... in the Open file form to select the required local file.

3. Check the file's MIME type, based on the file extension. If needed, select another MIME type from the list.

4. Press Open to open the selected file content in the default editor of the Content pane with the local file name.

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

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

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

You can upload a file from your local device to the IDE Workspace.

1. Select the Gadget folder in the Workspace pane.

2. Go to File --> Upload File... from the top menu.

3. Click Browse... to select your desired file from the local device.

4. Select the appropriate MIME type if needed.

5. Click Upload.

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.

1. Select a parent folder in the Workspace pane.

2. Go to File --> Upload Zipped Folder... from the top menu.

3. Click Browse... in the Upload folder form to select a zipped folder from your local device.

4. Click Upload.

The zipped folder is uploaded to the server and automatically unzipped in the parent folder selected in Step 1.

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

1. Go to File --> Open File By Path... from the top menu.

2. Enter the path of the target file into the File URL field.

3. Click Open to show the Example.groovy file in the new file tab of the Content pane.

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

Note

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

1. Go to File --> Save As Template... from the top menu.

2. Enter the template name.

3. Define the brief description of the template.

4. Click Save to accept.

You can also save the uploaded file as template.

Note

The template will have the same MIME type as the selected file.

The File From Template... function enables you to create a file from the predefined template.

Create a simple gadget XML file

1. Click on the toolbar and select File From Template... from the pop-up to open the form;

Or, press Ctrl+N hotkeys.

2. Select your desired type and template for the file.

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

1. Click on the toolbar.

2. Select File From Template...;

Or, press Ctrl+N hotkeys.

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

The confirmation message 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.

1. Go to File --> New --> Project Template... from the top menu;

Or, click on the toolbar and select the Project Template... command.

The Create project template form appears.

2. Enter the name and brief description in the Create project template form.

Optionally, you can restructure the project by clicking Add Folder, Add File, Delete at the right part of the Create project template form.

3. Click Create to complete your project template.

You can make changes for your project template structure by adding new folders/files or deleting some elements.

Make modifications for your project template structure

1. Open the Create project template form as described in the Create a project template section above.

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

Now you can:

Add a folder

i. Click Add Folder to open the Add folder form.

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

Your newly added folder then will be added to the project template.

Add a new file

i. Click Add File to open the Add file form.

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

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

Delete some elements

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

ii. Click Delete.

1. Select the parent folder in the Workspace pane.

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

3. Select your desired project template from the templates list.

4. Enter the project name into the Project name field.

5. Click Create.

1. Click New --> Project From Template... on the toolbar;

Or, go to File --> New --> Project From Template... from the top menu.

2. Select your desired target project template from the list.

3. Click Delete.

To switch to the necessary file, click the tab title with the appropriate name.

To close the file, just click on the tab title.

Click , or at the top right corner of the Content pane to browse tabs.

Note

You can view the full path to the opened file when hovering your mouse over the tab title.

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

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 pane 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, click on the toolbar, or go to Edit --> Format from the top menu.

Show Line Numbers

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.

Hide Line Numbers

Go to Edit --> Hide Line Numbers from the top menu.

The last selected settings are saved in the browser cookies for next sessions.

1. Open the Go to Line form by following one of the listed below ways:

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

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.

1. Put the cursor on the desired line.

2. Use Edit --> Delete Current Line command from the top menu;

Or, press Ctrl+D to remove the highlighted line from the file.

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

1. Open your desired file.

2. Open the Find/Replace form by following one of the ways described below:

Select on the toolbar;

Or, go to Edit --> Find/Replace... from the top menu;

Or, press Ctrl+F.

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

4. Click to do the search.

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

5. Enter the replacement text into the Replace with field.

6. Click Replace or Replace/Find to replace the current selected found word/phrase, or select Replace All to replace all the matched phrase.

Note

This feature enables you to auto-complete 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 Auto-complete form is shown as below:

In the files of Google Gadget, HTML and Template types, the auto-complete 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 auto-complete list for JavaScript content, or for CSS content respectively. In the other places, the auto-complete list for the HTML content is displayed.

Use the Auto-complete function

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

2. Put the cursor on the needed position in the document.

3. Press Ctrl+Space to get the Auto-complete form.

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.

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

Note

There are some special template tokens in the auto-complete 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 the Auto-complete form and tokens of different types are marked with different colors, including:

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

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

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

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

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

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

The auto-complete list of the Netvibes Widget files is the same as that of the HTML files.

The auto-complete list inside JavaScript tags is the composition of the JavaScript auto-complete list and Netvibes snippets:

eXo IDE supports auto-complete for Netvibes Universal Widget.

It is possible to auto-complete the created Netvibes object's properties and methods.

You can get more details about this snippets and code that will be inserted via the hint window of the Auto-complete form.

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

IDE compiles classes, which are described in the project's classpath, before generation of the auto-complete list. If the compilation of some class is failed, the error message will appear in the Output pane instead of Auto-complete 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 Auto-complete form, the files with such classes must fulfill the following conditions:

You can view class's JavaDoc and class name from the Auto-complete 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:

You can also view JavaDoc and auto-complete the object's fields and methods as follows:

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

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

3. Select the appropriate item in the Auto-complete form and press the Enter key; or double-click this item.

eXo IDE supports the auto-completion of static fields, methods and object's fields and methods.

Note

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

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

Local variables and method's parameters are marked with in the Auto-complete form. eXo IDE supports the auto-completion for local variables and method's parameters.

Besides, the keywords of Groovy code are not marked with icons in the auto-complete list.

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

View and fix the Java types error

1. Hover the cursor over error marks to see the error message in tooltips.

2. Click the error icon in the Line numbers field.

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

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

The Outline pane is opened automatically once a file has been created or opened. You can close the Outline pane by clicking on the tab header. Also, you can show/hide the Outline pane by pressing on the toolbar or select View from the top menu and then select/deselect Outline from the drop-down menu.

In the Outline pane, 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.

The outline tree is refreshed automatically every two seconds after you stop typing the code. When you click the item in the outline tree, the cursor will be set on the respective line where this item is defined. When you move the cursor into the file content, the respective node is selected in the outline tree.

In the Outline pane 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 table lists icons connected to different access modifiers.

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

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

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 your cursor on "@".

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, auto-complete, code outline or type error validation. However, the text edited with the WYSIWYG editor looks similar to 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 the Open a file with the non-default editor section above.

Connected with the JCR repository node, file properties are displayed in the Properties tab in the bottom of Content pane.

View file properties

1. Open the file in the Content pane.

2. Click at the right corner of the toolbar;

Or, go to View --> Properties from the top menu.

Note

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

To preview the HTML file stored in the JCR, simply click on the toolbar;

Or, go to Run --> Show Preview from the top menu after opening the HTML file in the Content pane. The content of the HTML file is opened as a webpage in the Preview tab.

Note