Realaxy Actionscript Editor Tutorial - "First Meet"

INTRODUCTION

We entered the early access and early beta stages .
Experience has shown that the user basically sees another AS editor in Realaxy and perceives it through the prism of other editors. Habits, memory consumption, preferences in everything, how it should work. The user does not want a revolution - he just wants a little bit better. Well, of course, he doesn’t see all the “hulk” that stands behind Realaxy and MPS. We are partly to blame - we simply did not have the time and energy for documentation. If you look through the eyes of the user, then we say common phrases and throw ourselves in beautiful words. But there is no specifics. So I made a decision: no development next week. I will write a series of articles about the work in the editor. Objective number one - the reader of articles should find understanding. Objective number two - the reader must gain a feeling that I myself experience - a feeling that something is starting, a sense of the closeness of the revolution in programming and, in general, in everything that is called "writing programs."

FOR HABRA READERS

Today it was thought that for our joint benefit would be if I put articles first here on Habré. This will help to find problem areas and misunderstandings in the text. The topic of editing in MPS and RASE, and the topic of meta-programming, is really difficult to describe clearly in familiar terms, so I really need your help. It is simple and understandable to convey to the reader sometimes complex, or rather just unfamiliar things. If there are comments and thoughts on the case - I beg you - tell me. One head is good, but a few hundred is better. Who is not in the subject - go to the site realaxy.com and watch the videos on the first page. Then start reading this lesson. Follow the instructions and maybe even penetrate you. If there is interest further - read the articles on the site.

Thank you so much. So, let's begin.
')

INSTALLATION RASE

If the editor is not installed, install . The first opening in the beta version takes a sufficient amount of time. In the first discovery, there are some processes that we will get rid of in the future - compilations and the creation of indexes - this is beta, we know about it and know how to solve it.

Before build 8000 (transition to the MPS 1.5 platform), serious problems with memory and performance are possible. Pay attention to the memory consumption sensor in the bottom-right - if the memory consumption is more than 500 mb and there is a significant “slowdown”, then RASE should be overloaded. This is an early beta and not everything is as good as we would like. Correctly close the editor and run it again. Again, when the editor is urgently closed, launching it after the “crash” may take considerable time.

NEW PROJECT

Create a new RASE project - File-> New ActionScript Project.



1. In the first window, click "Next"
2. In the second step, we will name the project Tutorial and name our module ActionScript
3. In the third window, leave the same way - we need the Main class.
4. Click "Finish" and wait for some time (in beta, it may take a few minutes, so pour the tea).
5. The wait is over. Before us is our first project in the Realaxy ActionScript Editor. In the left pane, expand the tree and open our class Main.

Again this is beta and marked crashes. If there is no class, right-click on the “ActionScript” module - create the package “com.example”. Right click on the package - create a class "Main"

PRELIMINARY PREPARATION

Move the cursor to the class and do a little preparation.
Press ctrl + R and write Sprite. Press enter.
We made our first import - flash.display.

This point was specifically noted, because in beta, as it turned out, the problem is “how to import a class or there is no 90% of AS3 classes in RASE” second after “a long project load” - we will decide to give us only a little time.
And the important point is that nothing should happen in the “code” :) “Import” went quite correctly after pressing ENTER. This is not a mistake - read on and everything will be clarified literally in the next paragraph. At this point in the text, occurrences of infinite recursion are noted.

Let's import something else for training - Event is a good option.

CODE IS NOT CODE

Now we look into the “code” and see no imports. Where are they? Select our package “com.example” in the project panel and right-click to call the properties panel (you can just press alt + enter). In the tab “Common” we see the imported models.



Why models? In terms of MPS, there is no concept of class and package. These are ActionScript entities. (the essence of a particular language, and languages ​​can be many). From the point of view of the editor there are rues and models. We use the word package or class, but we still mean that a class is this kind of root (interface, global function is also root). And a package is a model that stores ActionScript root data. I hope no one confused. In general, if you see the mention of "model" - you can read the "package". If this is root, then this is what may lie in the model (package).

So why there are no imports in the "code"? This is the moment I love the most. This is not a code. This is not a text. This is such a GUI. Pause.

How does the regular TEXT code editor work? You write some text that must conform to the syntax rules of a particular language. Those. there is a text, and there is a certain controlling tool - a “parser” that helps to write “correctly”.

Our editor is based on completely different principles. No more text. There is a specially designed for "writing" GUI code. User interface. There is no “parser”, but there are rules for working with code that decide not so much the issue of compliance with certain rules of a specific programming language, as they solve questions of usability - working with the interface.

Sasha also asked me to write that we work with AST. Hi Sasha!

Why is this done? First of all, these are language extensions. Writing a “parser” for the language each time is another job. Having abandoned the “parser”, we untie our hands in the extensibility of languages. And the second (and maybe the first) reason is that the GUI is more convenient than the text, damn it. Most of the words in the program code are not for us, but for the computer - for the compiler. We convey our thoughts to the compiler. RASE, on the contrary, initially has an understanding of the structure, it works with the syntax tree. You just can not enter the wrong code. Therefore, at first writing the code seems so unusual. But believe me - not familiar at first, but work in this environment for a couple of days - you will get used to it, and after a week I am sure that you will voice the idea as I once did - “as it used to be — writing code as text is wrong!”

As it is sung in a famous song in Russia about the future - “robots are driving, not a man!”. This is for the Western reader.

We return to our tutorial.

LEARNING TO JUMP BY CODE - KEY TAB

Open the class, put the cursor on the code and press the TAB key several times.
This is an important point in understanding code navigation in Realaxy.
Unlike moving by keyboard arrows, we move to edit points. All code points that can be edited “invite” our cursor. If you press TAB. TAB is the nearest edit point in front, Shift + TAB behind. Tab - an important combination when editing code in RASE. Well, nobody cancels the arrows - two or three presses of the down arrows - have reached the approximate editing zone. TAB was pressed several times - “aimed”.

ADD ANYTHING - ENTER key

The second most important principle of working with code in Realaxy is the addition of a child element.
Such elements can be methods, fields, method parameters. There is a “father” class, and he has children: methods and fields. The method has children parameters. The body of the method has children-lines of code. Lines of code have child-expression. The Enter key adds new children at the edit point.

Pressing Tab, move to the point with the method - it says << methods >>.



We have moved to a point that may contain instance methods. Press Enter - added a new method and our cursor moved to the point where you need to enter the name of the method. The name is red - RASE signals to us that we need to add something. We write the name of the method. Immediately press the tab and move to the parameter point - (|). Press Enter - again we added the child code, we call the parameter “a” (a: <type>). Press TAB again and get to the place where you need to specify the type (<type>), we write “int” - the parameter is added. Add another parameter - b: int (enter, "b", tab, "int"). Add the third parameter - c: int (well, you understand).



If you want to add a child “before”, press shift + enter (mac) or insert (win). Press shift + tab several times and move to the edit point. In the name of the first parameter of the method a: int. Add a new parameter "to" (your choice).

LEARNING TO SELECT ELEMENTS
PARENT-CHILD ctrl + UP / DOWN

At the beginning of acquaintance with RASE it is necessary to understand the principles of the selection of elements. This is not text, we work with cells. The cells are included in each other. To select the parent cell, you need to press the ctrl + UP combination. Add a method and write if (ctrl + space). Move the cursor to the body if () {|} and add one more if block. Inside the method body, press ctrl + UP several times. When the whole class turns blue, press the key combination clrl + DOWN several times and return to the initial position. I think this will stop.



Selecting elements, we move to different editing contexts and actions for a specific element become available to us. One example is a method parameter with a default value. We want to add a new parameter. The value is an expression and, by pressing ENTER, we will most likely change the expression, but we will not add a new parameter. By pressing ctrl + UP several times, we will select the method parameter and pressing the ENTER key will add its neighbor. So ctrl + UP / DOWN.

LEARNING THE ELEMENTS (2)
child elements shift + UP / DOWN

To select the elements represented by the list, you need to press the key combination shift + UP / DOWN. Enter the method body and add two comments ("//", “first line”, ENTER, “//”, “second line”),
Got two lines. To select both, you need to press shift + UP twice if we are on the second line or shift + DOWN if we are on the first line.
Add an array in the form of a line of code square bracket and four elements - [1, 2, 3, 4]. This is also a list. Let's practice with the selection of elements.
Selection also works with method parameters (a: int, b: int, c: int).

DELETING ELEMENT - BACKSPACE

In my opinion, everything is clear :) Together with a clever selection, it’s convenient to delete items. Yes.
But in fact, it is still more interesting - in Realaxy, deleting elements is smarter than in any other editor.
For example, create an if block and add some code to it. Now put the cursor on the “if” itself and press backspace. The opposite behavior will be performed (unwrap). Often, the blocks need to be abandoned - the code must be removed outside the block and the block itself removed. In RASE, the easiest way to do this. Try with the with () {} block - everything is still more interesting there.
In addition to blocks of code, many elements react to deletion. Such clever code behavior saves our time.

MOVING ALT + UP / DOWN CODE

At first, this behavior looks like a trick, but when you realize that this is such a GUI, then everything falls into place. Select strings and parameters and move them to another method, to another block of code. It is better to watch the video.

STARTING TO WRITE CODE

We created a method and the method has parameters. Even wrote a couple of blocks of conditions. It is time to write something really.



Already not bad. Select the code (ctrl + UP) to select 1 + 2 + 3 + 4 (without semicolon), and press the key combination ctrl + alt + V.
The result was a variable -

Here you can grab his head and shout - "another keyboard shortcut!". The answer is that from this place of our tutorial additional keyboard shortcuts for refactoring and cell transformation went, and if you forgot something, you can look at it in the menu or press the right button and look at cell actions - there are a lot of things. Immediately you can not remember everything - this is understandable.

And again a little theory. Here you need a little understanding. The code in RASE is represented by cells. Because he is so clever and systematized. The code is “stacked” in cells. There are different cells: some may contain just text, others may contain other cells. There are special cells for links. There are collections that combine cells into vertical and horizontal groups.

Let's return to the topic that has already been discussed: what is the difference between entering text in a text editor and an editor on the MPS platform. When entering text in a text editor, the user can enter anything, and then the “parser” checks if it is correct. In MPS, the editor accepts the text entered by the user and responds to input — creates cells — GUI code.

When you enter text, the user has mechanisms that “understand” that the user has entered the desired text, and it can be interpreted as code. There are two such “cunning mechanisms” - the rule of replacement and the rule of transformation. Let's look at the processes that occur when writing our code.

When entering the expression, three substitutions and two transformations occurred:



First, we entered “var” - the editor sees the context - an empty string and gets a list of substitutions: what he can replace the empty string with.



With this search, he looks at the textual representation of such elements and checks the “entered text” match - the necessary element. Such a list can be viewed in its entirety, if you do not enter text, but simply press ctrl + space - we will see a list of possible elements for REPLACE. And only one of them starts at "var." The editor understands that the user wants to add a variable, and immediately replaces the string with a template — the declaration of a local variable that looks like a string.



The cursor has moved to the name of the variable - this is done by the language developer specifically, because I, as a developer, are developing the script for working with code and I think that after creating the variable, the user will want to name it. Let's call it "name". Next we press TAB and move to the cell where you need to specify the type of the variable. Here we will immediately press ctrl + space and start writing “Str” - we already understand how our interface works and see String in the list and press ENTER.



Replace the empty type with a cell containing a reference to the class String (something like this).

Some classes may not be available in the autocomplete list. In this case, you need to press the key combination ctrl + R and add the import of the desired package.

We have the expression



We have created a variable and now we need to specify the value of the variable. Put the cursor after the "String" and enter the equal sign "=". Our expression takes the form:



The cursor is on the value of the variable. Here the second mechanism was launched and executed, the understanding of which is so important for comfortable work in RASE - transformation. A list of all transformations can be seen by pressing the space after / to the element, and ctrl + space. Let's go back (press ctrl + Z or just BACKSPACE when we have the cursor in the <intializer>).
Put the cursor again after the String and press the spacebar.



A temporary cell will appear, which tells us that the editor is in a state of waiting for the transformation. Press ctrl + space. See the list. I have only one item on my list - "= initializer".

Perhaps someone will make a language extension and the second element may appear in the list. But language extensions are a topic for another tutorial. By the way, let's fool around. Press ctrl + L and add the generics language. In the list of transformations, we already have more - three elements!

So, transformation is a change of code through text input after or before the original element. Replacement and transformation - that’s all the principles of working with code in RASE. It is important to know how this happens from the very beginning in order to understand how the code transforms as you type. From the outside, it looks as if you are typing plain text in a regular editor, but in fact a smart interface works for us.

Moving on: press the opening quote once - '"' and get the string pattern (replacement occurred). We write" hello ".

Now add a plus ("+")



and we have another transformation happening - we created a new expression.

Add another line ("," world "). The creation of the expression is complete.

We got our first line with the first expression



And we began to understand how our editor "thinks." In my opinion, a great start.

Replacement and transformation. Replacing a relatively familiar concept for people writing code in editors. Ctrl + Space - yeah, that's understandable. As if the replacement or similar behavior, there is in any other editor. Transformation, I believe, is a new principle of editing code, which is not found anywhere except MPS-based editors.

Another transformation example is to create an if () {} block. (“If”, if block was placed in the code, the cursor was on the condition). Now move the cursor after the closing bracket. You can simply enter “else {”, but we understand what is going on - press the spacebar and ctrl + space. In the list of autocomplex we see two elements - “else” and “else if”.

Love ctrl + space like yourself! :) This tutorial I write on the beach in an open cafe in Montenegro. For me, this is the best way to concentrate. Calm and noisy at the same time. My daughter wants to knock off my beer with my hand, I put him away from her elbow. My macbook is not flooded :)

So, we can already write code. Let's do something real.

Let's delete our test method, and we will write code in the constructor. We write "new" and the code took the form



This is a class instance creation template. We need to create an instance of the text field. Press ctrl + space and try to enter “TextField” and we see that it is not in the list of autocomplete. We have not imported the flash.text package. Press the key combination ctrl + R and write "TextField".

A small tip & trick of autocomplete work in RASE - to quickly find something in the list of elements, and we know for sure that this element is named in the style of “camel case”, we can enter the capital letters of its name - that is, “TextField” is equal to “TF”

Press ENTER - import is added. Repeat the action of adding a text field to the template for creating a new instance (“TF”, ctrl + space) and the code takes the following form:



Now select the text field instance creation expression (yes, press ctrl + UP a few times). Next, press the keyboard shortcut ctrl + alt + V (“introduce variable”) and our code takes the form

Practice writing code through simple refactorings is very productive. Why create a variable and specify its type, if you can first create a value, and only then create a variable through introduce? Let the editor work for us! Another tip & trick of creating a variable: write "TextField" and press ctrl + space - in the select list there is a template for the variable - you only need to press the down arrow once and we have the declaration of the variable with the type we need. But nevertheless, introduce, in my opinion, more productively.

The name of our variable is highlighted and we can change it.
Press ctrl + space and see in the choice of “textFild” - press ENTER.



Create a new line of code where we will specify the parameters of our text field.
To do this, select our code again and press the ENTER key - a new line has been added.

We already know that the line of code is a list item. Remind yourself that we performed one of the most important actions in the RASE editor - adding an item to the list by pressing ENTER

We write the text - “textField” and we have a variable reference cell. Push the dot "." and we passed the transformation of the expression - our line took the form



This is the template for accessing the properties and methods of our text field.
Press ctrl + space or just write the text "text". Add an equal sign (transformation) and the expression takes the form:



We specify our text “Hello World!”.



Create a new string and call the method - addChild (textField).

By default, the Main class was inherited from Sprite. If this is not the case, go to the cell after the keyword "extends" and add the superclass "Sprite"

Fine!
Run our application. We need to create a run-configuration. Menu "Run" - "Edit Configuration" - add a new configuration (click the plus icon). Name the configuration “First Tutorial” and save it.
Now click the green “Run” icon in the action menu or press the key combination shift + F10.

Realaxy code is represented by a syntax tree (AST), not text. Therefore, before compiling, the editor starts the process of generating a textual representation of the code from the syntax tree. Working with the syntax tree is a great advantage compared to other (regular text) editors. We can do a lot in the generation process. Optimize code, do transformations, and there is a huge field for language extensions. And even we can get at the output not AS, but HTML5 or Object-C

The first time the generation process may take some time.
Then the editor will do it faster and “generate” only the modified code.

After a while (if we did everything correctly) the flash-player window will appear. And in this window you can see the text - “Hello World!”.

The first part of our acquaintance with the Realaxy ActionScritp Editor, which is commonly called “Hello World!”, Has ended. It remains to describe quite a bit and we can say that we have described the basics of working with RASE.



Small summary -

1. Tab and keyboard arrows are a great way to navigate.
2. The code in RASE is not text.
3. You need to understand the structure of the code. A little bit. To add an item to the list - press ENTER.
4. When writing code in RASE, two principles need to be remembered - subtitute and side transform.
5. In RASE, you need to press a lot ctrl + space
6. BACKSPACE - very smart key
7. We write code through simple refactorings. Instead of creating a variable, we will make introduce variable

We list the main keyboard shortcuts when working with RASE:

TAB - move to the next “edit point”
SHIFT + TAB - move to the previous "edit point"
CTRL + UP - select the code element above in the hierarchy of nesting cells
CTRL + DOWN - go back in the history of selected nodes
SHIFT + UP / DOWN - select list items
ALT + UP - move the list item to the nearest (possible) position to the left
ALT + DOWN - move the list item to the nearest right position
ENTER - add item to list
SHIFT + ENTER (mac) or INSERT (win) - add a list item in front of the element that has focus
CTRL + SPACE - show the replacement list of the item with the focus or selected item.
SPACE (on the right or left of the element) - show the transformation cell (the subsequent pressing of CTRL + SPACE will show the list of available transformations)

Basic refactorings -
ctrl + alt + V - introduce variable - bring the selected value to the variable
ctlr + alt + N (cmd + alt + N) - inline variable - performs the inverse action to introduce - all references to the variable are replaced with values. Inline can behave differently if the cursor is located on the variable declaration or by a link to it (here you need to experiment or wait for the tutorial)

Additional keyboard utilities -
ctrl + alt + T - display the menu Surround With
alt + Enter - the menu of quicks and intentions - assistants (if you see a light bulb in the field to the left - then press this combination - perhaps there is what you are looking for)
Shift + F10 - run the selected (last) RUN-configuration

ENDING

The first lesson has come to an end, I think it is the most important of the series. It provides insights into the fundamental principles in RASE. I hope that really helped.
In two weeks, we are preparing a new beta and everything will work faster several times, and I hope there will be no more complaints about performance.
The following lesson will be devoted to working with language extensions. This is not so boring, believe me.

Good luck and until the next lesson.

The author of the idea, and the head of the development of Realaxy ActionScript Editor
Evgeny Potapenko

UPD: Announcement. English translator required for long-term collaboration. Please, if you pull the translation of such texts (I emphasize - for native readers), write in the comments or in private with me. Thank.