Code Navigation in Realaxy Editor

Tutorial Details

Difficulty: Low
Estimated Completion Time: 5 mins
Previous part: When Code Is Not A Text

Introduction

This is part 2 of the series Getting Started with Realaxy ActionScript Editor (RASE). In the previous post we have talked about the difference between RASE and text-based IDE: what are “editing point”, “substitution rule” and  ”right and left transformation rules”. Here we’ll clear some moments about code navigation in Realaxy Editor.

The Tab key - jump

The fundamental keyboard shortcut in RASE is a Tab key. In the previous article of this series we have explained that a code in Realaxy Editor is just a text-like GUI, a subsequence of AST nodes (or cells or, that is so to say, “editing points”). Tab is a special key that makes the cursor to jump from one editing point to another. Shift-Tab takes it to the previous point. Of course, you can still use the arrow keys to navigate, though - you might want to get closer to the point needed by pressing up and down arrows to get to the right line faster and then hit Tab.

The Enter key - add something

Another important aspect is adding a child element to the parent one (don’t forget, we deal with AST).

For example, the method is a child of a class. So is the field. Method parameter is a child of a method. A method is also a parent to the method’s body statements, etc. Pressing Enter adds a child to the parent.

Let’s try it - navigate to the <<methods>> point using TAB key (like on the figure below):

It hold the instance methods. Press Enter here - a new method will be added, the cursor will jump to the point where you type its name. 

Note it’s marked in red - RASE is telling us that method’s name is required to be filled. After you’re done with the name, press Tab again which will take you to the point (between the brackets) you can add method parameters to.

Press Enter - there would be another method’s child - a new parameter. A parameter has its own two child elements - name and type. Type “a” as a parameter name, then jump to the parameter type cell using Tab key and type “int” - you’ve got a proper parameter now. Repeat these actions to add a new one (Enter, “b”, Tab, “int”). And another one (call it “c”).

If you need to add a child element before the current one, press Shift-Enter on a Mac or Insert in Windows.

Press Shift-Tab a few times to move the cursor to the first parameter’s name cell. Adding a child “before” will add a new parameter as a first one here.

The Ctrl+Up/Down combination - select vertically

It’s vital to get the idea of elements selection when you start using RASE. We work with the cells, not text. The cells are nested in other cells, forming a tree structure. To select the parent cell, press Ctrl-Up. Let’s give it a try.

Add a method, put a cursor in its body, type “if” and hit Ctrl-Space to add an if statement. Place a cursor in its code block and repeat the previous actions to create a nested if statement. Now start selecting the parent cells from the code block of a nested if statement pressing Ctrl-Up. When the whole method is selected, press Ctrl-Down a few times to go back to the original selection.

The Shift-Up/Down combination - select horizontally

To select the elements represented by a list, press Shift-Up. To try it out, put a cursor in a method’s body and add two comments (type “//”, “first line”, hit Enter, “//”, “second line”). To select both lines place a cursor at the begging of the first comment and press Shift+Down two times. This will select both lines. Also try pressing Shift+Up with a cursor at the beginning of the second comment to start selecting in a reverse direction.

Let’s see another example. Type in an array literal [1, 2, 3, 4]. This is also a list of cells, try Shift+Up/Down on it.

The same goes for the method parameters.

The Backspace - delete the element

Seems pretty clear to me :) It’s really easy to delete the elements when you have smart selection. Deleting code elements in Realaxy is smarter than anywhere else.

For instance, create an if statement and add some code to its code block. Now place a cursor on the if label itself and press Backspace. What would happen next is called unwrap - the code from the if statement’s code block will persist while the if statement would be gone.

This comes in handy when you need to extract the code block up and delete the statement (if, with, while, etc) it’s attached to. Try it with a with statement (with() {}), you’ll be amazed.

Not only these code block structures are affected by the smart delete, there are plenty of them. It really does save you time.

The Alt+Up/Down - move the selected phrase

This looks like some kind of a magic trick for the first time - select the code lines or method parameters and try to move them with Alt+Up. The lines will be moved between the code blocks, methods, etc. Parameters will jump from method to method. Watch our screencast on this feature, it’s amazing.

Summary

You’re probably thinking “Oh no, too much keyboard shortcuts to remember”. Fist, for this reason we have prepared a special cheat sheet for you. Second, don’t worry - you  don’t have to keep all of them in mind - if you forget something, use the context menu - it’s all there.