When Code Is Not A Text
| Tags Realaxyrasearticlesessentialsgetting started |
| 24 August 2011 |
Tutorial Details
Difficulty: Low
Estimated Completion Time: 7 mins
Previous part: Step-by-step tutorial on Hello World Application with Realaxy Editor
Introduction
This is part 2 of the series Getting Started with Realaxy ActionScript Editor (RASE). Here we’ll speak about some several aspects of code editing in RASE. Just like every other code editor, which is based on Jetbrains MPS platform, it can be a bit confusing the first time you use it. There’s no text, but there’s a GUI specially designed for the code input. This may look like a text at first glance, but it’s not. There’s no parser, but there are code editing rules which define the way the code can be input into the GUI.
Jetbrains call it a ‘projectional editor’ which allows you to edit the Abstract Syntax Tree (AST) directly. Remember, the code is edited and stored as an AST.
Such an approach has a number of advantages that go beyond the scope of this post. If you’re interested, please refer to this article and/or to this discussion at stackoverflow.com.
The Typical Newbie Mistake
Let’s give consideration to the very basic trouble you can meet launching RASE the first time. If you have an experience with some other IDE, you, probably, would feel strange when trying to correct a misspelled expression like that:
You have corrected the expression, but your line is still marked as red, and the editor reports an error.
At the same time, if you start to add a new line below, the same code will work just as if nothing had happened:
So, what the nonsense is going on here?
A Look Under The Hood
Let’s go back to the question of difference between typing the code into text editor and an MPS-based editor. In the text editor a user can type anything, and it’s a parser’s job to determine whether the input is valid. With the MPS, an editor accepts the code input by user and reacts by creating some cells for it.
Code is represented by the cells in RASE. There are few kinds of cells - some just display text, some other contain another cells and some others are the special reference cells. The cell which is ready to be modified is called an “editing point”.
Every time you are entering a code, the input is constantly checked against the three basic rules:
- Substitution rule
- Left and Right side transformation rules
The detailed explanation of what does actually mean every rule is given below.
1. The Substitution Rule
For instance, you have typed “this”. The editor checks the current context (which is an empty line at that point) and gets the list of substitutions available for that context - i.e. what can it substitute the empty line with. Then it iterates through that list, checking the text entered against the text representations of the substitutions.
Only one of the elements starts with “thi” - that’s what we’re looking for. Now the editor knows that a user wants to add a “this” expression and substitutes the line with a corresponding phrase.
Hint: One of the most powerful keyboard shortcuts of the Realaxy Editor is Ctrl+Space. Use it to show auto-complete elements list of the current focused/selected element. To get the following pop-up auto-complete menu as shown in the figure 4 just start typing “this”. A list of available substitutions for every position will appear as you type. Select the required entry with arrows and hit Enter key to insert it into your code.
To get a better understanding how the substitution rule works, just press Ctrl+Space without typing anything in the empty line. A list of all the available phrases (eq. commands, eq. cell templates) will appear.
Remember that not every phrase will look exactly as it is shown in this list. For example, if you type “>” and choose the first item…
…the result will be completely different:
To summarize the knowledge about the Substitution rule:
Substitution is the operation, that can be produced on the current focused/selected code element (which is also called “editing point”).
2. Side Transform Rules
Side transform rules (or Side transform actions) are basically similar to the Substitution rule. It’s very easy to remember. If a cursor is on the right of some element, that is a Right side transformation:
If it is on the left, we have a Left side transformation (note the highlighted space character between the cursor and “this” expression).
On the first gaze it seems, that it’s relatively easy to mistake a Left side transform action for a Substitution. Nevertheless, on close inspection, you’ll find that in the Substitution case, the space between the cursor and the modified element is missing.
The next figure shows a Substitution action. If you hit Ctrl+Space here, you’ll be able to replace “this” for some other phrase.
However, if you only want to insert something trivial before your element, you don’t need an extra space. Just type what you want. For example :
Or — in our case — if you want to call the .addChild() member from this, just follow the next screenshots. First, insert a point on the right of “this”:
Hit Ctrl-Space and start typing “add”. The pop-up autocomplete menu will appear.
Select the required item and hit Enter. Operation is completed.
Instead of summary. So, the transformation defines the code changes on typing before or after the source element. Substitution and transformation are the only code editing principles in RASE. It’s important to know them from the very beginning to understand how they affect the code typed. These principles make the code input look like it’s done in a common text code editor - thanks to the smart UI.
Conclusion
Now it becomes quite clear why the expression from “The Typical Newbie Mistake” is considered as an error by RASE: there’s simply no such template (eq. no such a command), “this.addChild()”. That said, first, you insert “this” in a blank “editing point”, then applied a “dot expression” as a right side transformation and after all, inserted the “addChild” method in a new editing point.
