Skip to content

User interface

Jump to bottom
Marko Njegomir edited this page Oct 25, 2019 · 13 revisions

User Interface

On the one hand, the default interface in i386ide was made with the idea to be helpful and welcoming for the people who have just started programming in Assembly language.
We tried to pick the most useful tools that a beginner will need, and make those tools available from the get-go.

On the other hand, the whole interface is a collection of widgets that the user can individually move, show or hide.
This creates a highly customizable interface that experienced users can tune to their liking.

Basic Layout

The basic layout that you encounter when you start the application should feel familiar and intuitive, and consist of the following elements:

Menu bar

The menu bar is located at the top of the application window. It contains the File, Edit, View and Help drop-down menu's.

File drop-down menu

Here you can find the following functionalities:

Quick assembly project (activated via Ctrl + P)

Activating this option will prompt you to enter the name of the project, and then the project and the file with the same name will be created and instantly opened in the Code editor.

New workspace (activated via Ctrl + N)

This option will prompt you to choose a location for a new workspace, and if the location is valid, it will then create and open a new empty workspace.

Open workspace (activated via Ctrl + O)

When activated, you will be prompted to choose the location of the workspace you want to open.
There are a few cases depending on what folder you chose.

If a folder with an existing .metadata file is chosen (indicating it is a Workspace folder), that .metadata file will be loaded and the workspace with all the projects tied to it will be opened.

Alternatively, if the folder you chose does not contain a .metadata file, then a new empty workspace will be created at that location.

Switch workspace (activated via Ctrl + W)

Switch workspace action work similarly to the Open Workspace action in that you are prompted to choose a location of the workspace you want to switch to.

If it is a folder with an existing .metadata file, then that workspace and all the project tied to it will be opened.

Otherwise if the folder doesn't contain a .metadata file, then a new empty workspace will be created at that location.

Save workspace (activated via Ctrl + Shift + S)

Using this option will allow you to save all the changes you have made to you files in the editor.

Save file (activated via Ctrl + S)

This option will save the file whose tab is currently active.

Edit drop-down menu

Here you can find the following actions:

View drop-down menu

In the view drop-down menu you can toggle the visibility of the widgets in the program such as:

  • Terminal
  • Workspace explorer
  • Instructions help
  • ASCII table
  • Toolbar

Help drop-down menu

Here you can find the About option that displays some basic information's about i386ide.

This whole guide can also be accessed by choosing the Getting started action.

Toolbar

Toolbar contains the option to select a project and then 'Compile', 'Debug' or 'Run' the selected project.
For more information on those actions see entries for Compiling, Debugging and Running the code in the user guide.

Workspace explorer

Workspace explorer displays the current projects and files contained in those projects in the form of a tree view. It can be moved to the left or the right position of the applications main window.

At the top or the Workspace explorer is the name of the current workspace.

All the projects in the workspace are displayed in the Workspace explorer with the option to expand or contract them to show or hide the contents of the project.

Projects can contain both the Assembly (.S) and C language (.C) files.

Workspace context menu

Right click on the workspace name or in the empty area in the Workspace explorer will open a context menu with the following actions:

New project

This option will prompt the user to enter the name of the new project, and if the name is not taken, that project will be created in the workspace.

Import project

A project with all the .S and .C files can be imported by choosing the folder of the project you want to import when this option is selected.

Show in files

Workspace folder will be opened in file explorer.

Open file as assembly project

This option will prompt you to choose an Assembly (.S) file, and it will open that file in an completely new project with the same name. If the project with the same name already exists, then an available number will be added to the project name.

Rename workspace

This option will allow you to rename the workspace. Simply enter the new workspace name when prompted.

Update workspace

Updating the workspace will refresh the contents of the Workspace explorer.

Project context menu

Right clicking on the project in the Workspace explorer will bring up the context menu with the following options:

Save project

This option will save the files that are contained in the project.

Show in files

This will open the project folder in the file explorer.

New file

This option will prompt to you to enter the file name and choose the file type. If the file with the same name doesn't already exist in the project, then the file will be created.

Import file

You will be prompted to choose a location of the file you want to import in the current project. You can only import the file if the file with the same name doesn't already exist in the same project.

Rename project

Using this action will prompt you to type in the new name for the project. If the name if unique for the current workspace (and there is not a file with the same name on the dist at the same location), then the name of the project will be changed.

Remove project

This option will prompt the user to remove the project from the current workspace.

Delete project from disk

This option will prompt the user to delete the project contents from both the disk and the workspace.

File context menu

The following actions are available for files in the context menu:

Show in files

This action will open the location on the disc where the file is located, and highlight the file in the file explorer.

Save file

This option will save just the selected file at the location where it is located.

Rename file

User will be prompted to enter the new name for the file. If the new name is unique to the project where the file is located then the rename action will be successful.

Delete file

This option will delete the file from the disc.

Drag and drop

It is possible to drag and drop files, or even whole projects into the current workspace by simply dragging and dropping the file from the file system into the Workspace explorer.

If the file is dropped in the text field, then the path to that file will be inserted in that text fiels.

Importing projects with drag and drop

To import a whole project, simply drag it into the Workspace explorer, and the project will be included in the workspace. If the project with the same name already exists in the workspace, first available number will be added to the imported projects name.

Importing files with drag and drop

To import the file in the project, simply drag the file from the file explorer to the project you want to import it in. If the file with the same name already exists in the project it will not be imported.

Importing multiple files to the project works the same way. Simply select multiple files in the files explorer, and drag and drop them into the project you want to import them in.

Files can also be imported as individual project. To create an individual project from file simply drag the file from the file explorer to the empty area of the Workspace explorer or to the Workspace name and the new project with the same name will be created. If the project with the same name already exists, first available number will be added to the imported projects name.

If multiple files are selected and dragged into the Workspace explorer from the file explorer, then a new project will be created that will include all the selected files.

Code editor

Code editor takes the central place in the application. It is used to display the content of the opened file, and to allow you to edit and create your own content.

Syntax highlighting

Text is highlighted based on the type of file that is opened.

In assembly files many different elements are highlighted such as comments (both singleline and multiline), sections, instructions, registers, various value types, macros, labels, variables and much more.

I C files elements such as functions, variables, types etc. are highlighted.

Other prominent features

It supports a variety of other features such as code completion, smart navigation etc. You can read about those feature in more detail in the user guide.

Working with tabs

When a file is opened in i386ide by double clicking on the file in the Workspace explorer, a new tab is created. That tab is unique for that file, and will show the name of the file, and indicate if the file has been changed with the * sign.

It is possible to open multiple files in multiple tabs.

One way to close the tab is to click on the X button in the top right corner of the tab. If the file you are about to close was changed, you will be prompted to cancel you action or save or discard the changes you have made to that file.

It is also possible to bring up the context menu for tabs by right clicking on the tab. Context menu actions are self explanatory and include the following options:

  • Close
  • Close Others
  • Close All
  • Close Unmodified
  • Close All to the Left
  • Close All to the Right

When the current workspace is about to be closed, files opened in tabs are checked for any unsaved changes. If there are unsaved changes user will be prompted to save or discard those changes, or cancel the closing action.

Instructions widget

Instructions widget is located on the right side of the main window and it is used for looking up information about the various instructions available in the assembly language.

These are the same descriptions that are shown in the tooltips that appear when you hover over the instruction in the code editor.

Searching for instructions

To search for an instruction simply enter the name of the instruction you want to know about in the input field.
Once the name is entered, if available, information about that instruction will be displayed below the input field.

ASCII table

You can find this widget on the right side, just below the Instructions widget.

It is used to display the values of the first 128 ASCII characters. It show the decimal, octal and hexadecimal value of each character.

Terminal

Terminal is located at the bottom half of the main window. It show the user all the previous commands that were entered, and also allows him to enter his own commands just like he would do in built-in system terminal.

You can read more about the various features of the Terminal at the user guide section for terminal.

Status bar

Status bar is located at the bottom of the main window. It show information about the currently selected syntax for the file that is opened, as well as the tab width.

Tab width can be changed to 2, 4 or 8 spaces in the status bar.

Clone this wiki locally