The mbed Compiler delivers full online editor, standard keyboard shortcuts, flexible workspace management and easy to use version control via intuitive interface design and innovative workflow, optimized for the mbed eco-system.

In this manual we are going to review the very basics to interact, create and maintain code in your workspace.

Interface basics¶

The mbed Compiler interface consists of five key components - Main toolbar, Navigation tree, Browser panel, Editor and Output panel.

Main toolbar¶

The buttons on the Main toolbar are accessible at all times, though they may not always be active as their state depends on the current context or current task you are attempting to accomplish. For example, when you're browsing a program, a folder or a library, the "Undo", "Redo", "Print" and "Format" buttons won't be active, as their function is relative to text editing, thus a file has to be selected in the Navigation tree for them to be active. Another example is when "My Programs" is selected in the Navigation tree that disables "Compile", "Commit", "Revision History" and other buttons, and which function is relative to program and library contents manipulation ("My Programs" is your workspace root, thus you can't complete these tasks on it). If unsure what is the context you are currently working on, you can always look at the top blue bar that shows your location.

Most of the Main toolbar buttons have a keyboard shortcut, allowing you to easily invoke them, saving a mouse click or two. Some buttons have a dropdown menu with similar or related functions, e.g. several ways to compile under "Compile", different new items under "New" etc.

While editing a file, the Main toolbar looks like the image below (click to enlarge)

On the right side of the Main toolbar you can find the device selection dropdown which lets you change the device you are compiling for. The mbed Compiler Guide is accessible through the top-right Guide button or via F1 (Ctrl+G alternatively) keyboard shortcut.

Navigation tree¶

The Navigation tree lets you browse your workspace, but more importantly it defines the context you are working on.

If "My Workspace", a program, a folder or a library is selected in the Navigation tree, then browse mode is active via Browser panel, allowing you to maintain and control various aspects of the selected item (see Browser panel).
If a file is selected, then editing mode is active and the Editor is open, showing you the contents of that file, but also showing other opened files, presented as Editor tabs (see Editor).
You can always check the top blue bar if unsure what context/location you are currently working on as mentioned already in Main toolbar section above.

We've designed the Navigation tree to be interactive and intuitive like on popular operating systems, allowing you invoke item-specific functions via mouse context menu or via keyboard shortcuts. Additionally, we've enabled complete drag&drop support which lets you drag&drop between Navigation tree items, drag&drop Navigation tree items in the Browser panel (and vice-versa), and even HTML5-driven features like drag&drop files from your operating system file manager inside the Navigation tree, effectively importing them in your workspace!

Browser panel¶

The Browser panel is active when a non-file is selected in the Navigation tree and consists of two sub-panels - Browse list and Sidebar.

The Browse list is tightly related to the Navigation tree selection as being flat, single-level, non-recursive representation of the contents of the currently selected item (or context), showing extended information like Size, Type and Modified time, similarly to the desktop operating system. The Browse list can be sorted differently via the column headers and filtered through the Filter field at the bottom.

A key feature of the Browse list is the ability to manipulate single and multiple items, using mouse context menu functions, keyboard shortcuts and mouse drag&drop. To complete a multi-selection, you have to either use combo Shift/Ctrl+Mouse-Click or use drag-select gesture outside the list, similar to what you'd do on a desktop operating system. A multi-selection has a different mouse context menu to reflect the selection, though keyboard shortcuts and drag&drop functionality remain the same.

Similar to the Navigation tree, the Browse list allows HTML5 drag&drop upload of files and zip archives. Bare in mind that this doesn't offer the same flexibility to upload just anywhere in your workspace and that the uploaded files will exist under the Browse list parent, thus we recommend using the Navigation tree instead.

The Sidebar panel is divided into two tabs - Summary and Build. The Summary tab offers extended information about program or library creation date, last modified date, tags, description, etc; and also collaboration related information like public repository URL, ability to update and publish from/to public repository. The Build tab is essential for successfully built programs, offering valuable statistics about the Flash and RAM usage, allowing you to plan the resources usage for the board you have compiled for.

Editor¶

The Editor is the main tool of the mbed Compiler and it is where all the magic happens. It's a fully featured, lightweight code editor, that uses high standard syntax highlighting, coupled with comfortable keyboard shortcuts and practically unlimited undo/redo operations to enhance the editing capabilities even further. It's also compliant with all major browser's cut/copy/paste text operations, allowing you to easily inject and extract code between your host operating system and the mbed Editor.

There is much to be said about the Editor, but instead of writing pages and pages about it, we have prepared a brief list of the Editor features:

• Standard C/C++ syntax highlighting
• Python, Lua, JavaScript, XML, HTML, CSS syntax highlighting
• Unlimited undo/redo operations buffer
• Compliant clipboard text operations - cut/copy/paste
• "Artistic Style" code formatting for text selections or whole file
• Find text with case, word and regular expression matching
• Find in Files with filtering capabilities
• Mouse, keyboard, touch/tap navigation
• Text selection block comment and code indention manipulation
• UTF-8/Unicode base encoding
• Print-friendly code preview

Additionally we invite you to explore the Editor shortcuts and controls wiki page, where you can find more information on shortcuts and hidden functions.

Output panel¶

The Output panel is located under the Editor (or Browser panel) and it's main purpose is to display the output of the ARMCC compile engine when you decide to compile code.

A typical compile error looks like the image below:

If you click the number under "ErrNo" column a wiki page will be opened with more information about the compile error or warning. You can also open the source file at the line/column of the definition if you double-click the text under "Location".

The Output panel is also used to display results for the "Find in Files" functionality. Having the find result set comfortably under the Editor lets you quickly switch between matches in different files with the already mentioned double-click action.

Now that we tackled the mbed Compiler interface basics let's step forward and...

Create your first program¶

From the Main toolbar click the "New" button, fill the program name field in the dialog like shown on the image below.

Once you click "OK" the program will be created in your workspace and the mbed Compiler will automatically open it.

You might notice that the program is not empty and contains 2 items - main.cpp file and mbed SDK library. This is because the mbed SDK library is applicable (and also very easy to use!) for every project based on mbed hardware board, and additionally the main.cpp file is the main file for every program, thus we decided to make the default new program template a small LED test that is very fast to compile.