Editor

Overview

The editor enables text and program files to be created, modified, and saved for each project.

It is also compatible with (optional) web browser text editing functions (e.g. Cut, Copy, and Paste), and includes special features for writing and editing programs, particularly those based on HTML, CSS, and JavaScript.

This document introduces the reader to web-based editing with a set of common editing operations. Then, the components of the editor are explained in detail.

Appendices list editor operations and keyboard shortcuts (on Windows and Mac).

Information about projects may be found in Appception IDE Projects.

Note: files may also be edited with a desktop editor, and drag-and-drop used to copy them from the desktop into an Appception IDE folder.

Common Editing Operations

The examples below use the Navigation Toolbar ('Navbar') menu items and the Navigation tree ('Navtree') project file tree (shown in the Editor components diagram).

Examples:

To create a new file, select a folder in the Project navigation tree ('Navtree'), then select File->New->File from the Navigation toolbar ('Navbar').

For more options, see New.

To edit a file, select the file in the Project navigation tree ('Navtree'), then select File->Open from the Navigation toolbar ('Navbar').

Next, click the position in the file (Edit area) that you wish to edit; a flashing cursor will appear at that position. To add text, just start typing. To remove text, use the delete key.

For more options, see Open.

To save a file, select File->Save from the Navbar.

For more options, see Save.

To save a file using a different file name, select File->Save As from the Navbar

For more options, see Save As.

To save all currently open files names, select File->Save All from the Navbar.

To delete a file, select the file in the Navtree. Then, select File->Delete from the Navbar.

For more options, see Delete.

To rename a file, select the file in the Navtree. Then, select File->Rename from the Navbar

For more options, see Rename.

To upload a file from a local machine, select a destination folder in the Navtree. Then, select File->Upload from the Navbar.

When the Upload dialog box is displayed, Browse to the location of the file on the local machine. If the file is a compressed archive (.zip file), the Uncompress archive checkbox may be selected to indicate that the file should be uncompressed withing the destination folder after it is uploaded; f the checkbox is not selected, then the file is uploaded and left as-is (compressed).

For more options, see Upload.

To download a folder or file, select the folder or file in the Navtree. Then, select File->Download from the Navbar.

The browser displays a message box to ask which action to take for the downloaded item (e.g. Open with an application, or Save to a local file). If a folder was selected, it is automatically compressed into a .zip file before the Download operation.

For more options, see Download.

Editor Components

The editor uses the following components:

1. Navigation toolbar ('Navbar') - File and Edit menus
2. Project navigation tree ('Navtree') - list of all projects, folders, and files
3. Editor toolbar - edit-related tool icons
4. Edit file tabs - file names being edited
5. Edit area - contents of currently selected file (i.e. edit file tab)
6. Browser toolbar [not shown] - File and Edit menus

The Editor menus (and associated mouse and keyboard shortcuts) control editing-related functions. These include File operations and Edit operations. File operations are related to projects, folders, and files as a whole. Edit operations are related to file content. These operations are explained below.

Appendix A contains a list of editor operations, and the menus that may be used for each operation. Appendix B lists keyboard shortcuts.

Note: some web browsers (or versions) display a browser edit menu (not shown). Browser edit menus may contain operations such as Cut, Copy, and Paste. If present, these menu items may normally be used in place of equivalent menu items from the Navigation toolbar ('Navbar').

1. Navigation toolbar ('Navbar')

The Navbar includes two edit-related menu lists: File and Edit. The File menu list items operate on files as a whole, whereas the Edit menu list items operate on file contents.

For convenience, several of the File and Edit items may also be accessed from web browser menus or the Project navigation tree ('Navtree') menu items. Several items also have keyboard shortcuts.

File menu:

Note: some File menu entries may be unavailable (grey), depending upon the current editor state.

To create a new file, either:

• Select a folder in the Navtree, then select File->New->File from the Navbar
• Select a folder in the Navtree, right-click the mouse, and select New->File (from the Navtree context menu)

To open a file, either:

• Select the file in the Navtree, then select File->Open from the Navbar
• Double-click the file in the Navtree

To save a file, either:

• Select File->Save from the Navbar
• Type 'Ctrl-S' (on Mac, type '⌘-S')
• Click in the Edit file tabs. If the file has been modified, a dialog box will be displayed. Click 'Save'

To save a file using a different file name, either:

• Select File->Save As from the Navbar
• Type 'Ctrl-Shift-S' (on Mac, type 'Shift-⌘S')

To save all currently open files names, select File->Save All from the Navbar.

To delete a file, select the file in the Navtree. Then, either:

• Select File->Delete from the Navbar
• Right-click the file, and select 'Delete'

To rename a file, select the file in the Navtree. Then, either:

• Select File->Rename from the Navbar
• Right-click the file, and select 'Rename'

To display file properties, select the file in the Navtree. Then, either:

• Select File->Properties from the Navbar
• Right-click the file, and select 'Properties'

To upload a file from a local machine, select a destination folder in the Navtree. Then, either:

• Select File->Upload from the navigation toolbar
• Right-click the folder, and select 'Upload'

When the Upload dialog box is displayed, Browse to the location of the file on the local machine. If the file is a compressed archive (.zip file), the Uncompress archive checkbox may be selected to indicate that the file should be uncompressed withing the destination folder after it is uploaded; f the checkbox is not selected, then the file is uploaded and left as-is (compressed).

To download a folder or file, select the folder or file in the Navtree. Then, either:

• Select File->Download from the navigation toolbar
• Right-click the folder or file, and select 'Download'

The browser displays a message box to ask which action to take for the downloaded item (e.g. Open with an application, or Save to a local file). If a folder was selected, it is automatically compressed into a .zip file before the Download operation.

To import a project:

• Select File->Import from the navigation toolbar
• Choose the file from local storage
• Select the project properties
• Click 'Import'

To export a project:

• Select the project name from the Navtree
• Select File->Export from the navigation toolbar

Depending upon your web browser settings, you may be prompted for the location to save the exported project, or it may be saved automatically.

Edit menu:

Note: some Edit menu entries may be unavailable (grey), depending upon the current editor state.

To undo the last edit operation, use Edit->Undo or type 'Ctrl-Z' (on Mac, type '⌘-Z'). Undo operations may be repeated.

Note that several types of operations cannot be undone (e.g. Indent').

To redo an operation that was undone, use Edit->Redo or type 'Ctrl-Y' (on Mac, type '⌘-Y'). Redo operations may be repeated.

To cut a region of text from a file, select the text to be cut by pressing and holding down the mouse-left button at the beginning of the region of text, then move the mouse to end of the region text, then release the button. The region will be highlighted. Next, do one of the following:

• select Edit->Cut
• click the mouse-right button and select 'Cut' (from the browser context menu)
• type 'Ctrl-X' (on Mac, type '⌘-X')

The region of text will be removed.

To replace a region of text that was cut, use Paste.

To copy a region of text in a file, select the text to be copied by pressing and holding down the mouse-left button at the beginning of the region of text, then move the mouse to end of the region text, then release the button. The region will be highlighted. Next, do one of the following:

• select Edit->Copy
• click the mouse-right button and select 'Copy' (from the browser context menu)
• type 'Ctrl-C' (on Mac, type '⌘-C')

The region of text will be internally copied.

To insert this copy into a file, use Paste.

To paste a region of text from a previous cut or copy operation, click the position in the file where the text should be pasted, then do one of the following:

• select Edit->Paste
• click the mouse-right button and select 'Paste' (from the browser context menu)
• type 'Ctrl-V' (on Mac, type '⌘-V')

The region of text will be inserted.

To indent an entire file, use Edit->Indent.

Note that the Indent operation cannot be undone.

To find text within a file, select Edit->Find. A dialog box will be displayed. Enter the text to find and click 'Find'.

If the 'Match case' checkbox is not selected, the find operation will ignore case.

The editor will higlight all occurrences of the matching text within the file. The currently matched text string will also be highlighted, but in a different color. To proceed to the next matching occurrence of the text string, press the ENTER key. If the currently matched text string is the last occurrence of that text string in the file, the find operation will wrap to the beginning of the file.

To find and replace text within a file, select Edit->Find. In the dialog box, enter the text to find and the new text to replace it. Select, either 'Replace' (to replace a single occurrence of the matching text) or 'Replace All' (to replace all occurrences of the matching text).

The editor with highlight all occurences of the matching text within the file. The currently matched text string will also be highlighted, but in a different color. To replace the currently matched text string and proceed to the next matching occurrence, press the ENTER key. To skip the currently matched text string but proceed to the next matching occurrence, press the SPACE key. To end the operation, click the left mouse button.

2. Project navigation tree ('Navtree')

The Project navigation tree ('Navtree') lists all projects, and the folders and files which they contain. The Navtree may be used to create and manage folders and files through a context menu displayed when a project, folder, or file is selected and the right mouse button is clicked:

Most browsers will allow single files to be copied from the desktop to a destination folder in the project navigation tree by selecting the file on the desktop (or from a desktop folder Window), then using drag-and-drop to place it onto a folder. Note that this only reliably works for single files (not multiple files), and not for desktop folders.

The Navtree is described in detail in the Projects tutorial.

3. Editor toolbar

The Editor tool displays a set of edit-related icons, including:

• - Find
• - Goto line
• - Undo
• - Redo
• Indent
• Font size
• Font family
• Save

Find performs exactly as Navbar Edit->Find

To set the current file position to a specified line number, press the 'Goto line' (right arrow) icon, and enter a valid line number, then press 'Go'. The cursor will be moved to the indicated line.

Undo performs exactly as Navbar Edit->Undo.

Redo performs exactly as Navbar Edit->Redo.

Indent performs exactly as Navbar Edit->Indent.

To set the font size used to edit files, choose a size from the 'Font size' menu.

To set the font family used to edit files, choose a font family from the 'Font family' menu.

Save performs exactly as Navbar Edit->Save.

4. Edit file tabs

The Edit file tabs display the name of each file currently being edited. Clicking on a tab makes the file active. Editing operations only apply to active files.

An asterisk ('*') appears next to the file name if the file has been modified since the last time it was saved.

If is clicked, the file will be closed and deleted from the editor. If the file has been modified, a dialog is displayed allowing the user to choose whether to 'Save' the file, 'Discard' the file changes, or 'Cancel' the operation.

5. Edit area

The Edit area displays the content of the currently active file (file being edited).

The edit cursor may be set by clicking the mouse within the Edit area; the cursor will be displayed as a flashing vertical line.

Text may be entered at the cursor location by typing, or text may be removed by using the DELETE key.

The Edit area also has a browser context menu. Although the items in this menu may depend on the browser, they normally include Cut, Copy, and Paste operations.

6. Browser toolbar

Some web browsers (or versions) display a toolbar that contains an Edit menu. This toolbar menu, if present, may contain editing-related items (e.g. Cut, Copy, Paste, Find).

These items, and their keyboard shortcuts, are generally similar (or identical to) Navbar Edit menu items. For example, Cut operations may be identical, while Find operations may display different UI dialogs. The exact menu items and behaviour depend on the web browser.

Other Editor Features

The Appception IDE makes use of the CodeMirror file editor for editing file content.

CodeMirror includes content-related functions for writing program files, such as:

• Balancing of braces
• Highlighting
• Auto-indent
• Line numbering

Visit CodeMirror to learn more about these and related editing features.

Appendix A: Editor Operations

Editing-related operations are organized into File and Edit operations:

• File operations apply to projects, folders, and files as a whole
• Edit operations apply to file content

The editor menu items, keyboard shortcuts, and related UI objects are listed below for each set of operations.

File operations

New (folder)

New (file)

Open

Save

Navbar	File->Save (or Ctrl-S on Windows; ⌘S on Mac)
Navtree	--
Edit toolbar	click
Edit tabs	Select file tab and press Ctrl-S on Windows (⌘S on Mac)
Edit area	--

Save As

Save All

Delete

Rename

Cut

Copy

Paste

Upload

Note: compressed .zip files may be uploaded as-is, or decompressed after upload.

Download

Note: folders will be compressed and downloaded as .zip files.

Import

Note: Import works only at the project level.

Export

Note: Export works only at the project level.

Edit operations

Undo

Navbar	File->Undo
Navtree	--
Edit toolbar
Edit tabs	--
Edit area	--

Redo

Navbar	File->Redo
Navtree	--
Edit toolbar
Edit tabs	--
Edit area	--

Cut

Copy

Paste

Indent

Navbar	Edit->Indent
Navtree	--
Edit toolbar
Edit tabs	--
Edit area	--

Find

Navbar	Edit->Find (or press Ctrl-F on Windows; ⌘-F on Mac)
Navtree	--
Edit toolbar
Edit tabs	--
Edit area	Left-click mouse at position to start Find Press Ctrl-F on Windows; ⌘-F on Mac

Appendix B: Keyboard Shortcuts