<type>documentation</type>
<domain>intro</domain>
<id>tutorial-getting-around</id>
<title>Tutorial: Getting Around Wing</title>
<date>$Date$</date>
<product>all</product>

Let's start with some basics that will help you get around Wing while working with this
tutorial.

Wing's user interface is divided into an editor area and two toolboxes separated by
draggable dividers. Try pressing ``F1`` and ``F2`` now to show or hide the two toolboxes.
Also try ``Shift-F2`` to maximize the editor area temporarily, hiding both tool areas and
toolbar until ``Shift-F2`` is pressed again.

.. image:: getting-around.png
  :width: 954
  :height: 702

Tool and editor tabs can be dragged to rearrange the user interface, optionally creating a
new split or moving them to a separate window. Right click on the tabs for a menu of
additional options, such as adding or removing splits or to move the toolbox from right to
left. The number of splits shown by default in toolboxes will vary according to the size
of your display.

Notice that you can click on an already-active tool tab to minimize that tool area. Click
again on any tab to restore the toolbox to its previous size.

See `User Interface Layout <ref:custom/gui-layout>`__ for details.

**Context Menus**

In general, right-clicking provides a menu for interacting with or configuring a part of
the user interface. On some systems you may need to configure your track pad to allow
right-clicking, or use a keyboard modifier to emulate a right mouse click.

**Splitting the Editor Area**

Splitting your editor area makes it easier to get around this tutorial. To do this now,
right-click on the editor tab area and select ``Split Side by Side``.
~~~if not WING101:
On small monitors and laptops, it may be preferable to create a new window for the
tutorial by right-clicking on its tab and selecting ``Move Wing Help to New Window``.
~~~

By default, the editor shows all open files in all splits, making it easy to work on
different parts of a file simultaneously. This can be changed by unchecking ``Show All
Files in All Splits`` in the right-click context menu on the editor tabs.

**Configuring the Keyboard**

Use the ``Edit > Keyboard Personality`` menu to tell Wing to emulate another editor, such
as Visual Studio, VI/Vim, Emacs, Eclipse, XCode, MATLAB, or Brief.

.. image:: keyboard-personality.png
  :width: 201
  :height: 261

The ``Configure Tab Key`` item in the ``Edit > Keyboard Personality`` menu can be used to
select among available behaviors for the ``Tab`` key. The default is to match the selected
Keyboard Personality. 

When the Keyboard Personality is set to ``Wing``, ``Tab`` acts differently according to
context. For example, if lines are selected, repeated presses of ``Tab`` moves the lines
among syntactically valid indent positions. And, when the caret is at the end of a line,
pressing ``Tab`` adds one indent level.

See `Keyboard Personalities <ref:custom/keyboard-personalities>`__ for details.

**Accessing Preferences**

Preferences for controlling how Wing ~~PRODUCT~~ looks and behaves are available from the
``Edit > Preferences`` menu item (or ``Wing ~~PRODUCT~~ >> Preferences`` on macOS). Try
this now so you will remember how to bring up the preferences dialog as you work through
the rest of this tutorial. However, it's best not to delve into all of the available
options right away. The next few sections will highlight some of the more important ones
that are worth looking at now.

~~~if WINGPRO: 
**Auto-Editing**

Wing Pro implements a variety of auto-editing operations, which are designed to speed up
typing and reduce common errors. A subset of the available operations that does not
require learning different keystrokes is enabled by default. For example, when ``(`` is
typed Wing will enter the closing ``)`` automatically. If the closing ``)`` is pressed
anyway, Wing just skips over it. Auto-editing can be disabled as a whole using the `Editor
> Auto-editing > Enable Auto-Editing
<script:show_preferences_gui#prefname="edit.auto-edit-enabled">`__ preference or
individual operations can be selected.

.. image:: auto-editing.png
  :width: 360
  :height: 375

This topic will be covered in more detail later in the tutorial.
~~~

~~~if not WING101:
**Auto-Completion**

There are many options for Wing's auto-completer. These are set in the ``Editor >
Auto-completion`` preferences group. For example, if you want to use the ``Enter`` key for
completion, you may wish to select that now in the `Editor > Auto-completion > Completion
Keys <script:show_preferences_gui#prefname="edit.autocomplete-keys">`__ preference. 
~~~

**Colors and Dark Mode**

~~~if WEBSITE:
The default display mode on Windows and macOS is to emulate the native look for the OS as
much as possible. On Windows, this is always a light theme. On macOS, Wing tracks the OS's
light or dark display setting as it changes. On Linux, Wing cannot match the OS display
style and instead uses a dark display theme by default.

The
~~~
~~~if PLATFORM == 'win32' and not WEBSITE:
The default display mode on Windows is to emulate a light Windows theme.  Alternatively, the
~~~
~~~if PLATFORM == 'osx' and not WEBSITE:
The default display mode on macOS is to emulate and track the OS's light or dark mode display style 
as it changes.  Alternatively, the
~~~
colors for the user interface can be selected with the `User Interface > Display Mode
<script:show_preferences_gui#prefname="gui.display-mode">`__, `User Interface > Light Theme
<script:show_preferences_gui#prefname="gui.light-display-theme">`__ and `User Interface >
Dark Theme <script:show_preferences_gui#prefname="gui.dark-display-theme">`__
preferences.

The colors used in editor areas and some of the tools, including the Python Shell,
can be set independently with the `User Interface > Light Editor
<script:show_preferences_gui#prefname="gui.light-editor-theme">`__ and `User Interface >
Dark Editor <script:show_preferences_gui#prefname="gui.dark-editor-theme">`__ preferences.

The following screenshot was created by setting ``Display Mode`` to ``Use Dark Theme`` and
selecting ``One Dark`` for the ``Dark Display Theme``. This display mode will be
used in the rest of this tutorial:

.. image:: onedark.png
  :width: 952
  :height: 701

**Other Configuration Options**

To set the fonts in the user interface and editor, change the `User Interface > Fonts >
Display Font/Size <script:show_preferences_gui#prefname="gui.qt-display-font">`__ and
`User Interface > Fonts > Editor Font/Size
<script:show_preferences_gui#prefname="edit.qt-display-font">`__ preferences.

The size and type of tools used in the toolbar at the top of Wing's window can be changed
by right-clicking on one of the enabled tools.

For more information on adjusting the user interface to your needs, see `Customization
<ref:custom/index>`__.

