Composer for BallerinaLang : Ballerina Composer

5 min readFeb 22, 2017

Image Source : http://rico-a-mona.com/our-photoshoot-with-ballerinas-from-singapore-dance-theatre/

WSO2 just launched a whole new paradigm for enterprise integration as Ballerina. You can find out more about the buzz at http://ballerinalang.org/. WSO2 also revolutionised programming by providing a visual interface or rather in this case, a composer for Ballerina. In this post, we will unravel on the next generation of programming editors, the ‘Ballerina Composer’.

What is Ballerina Composer?

If you read through many of the introductory articles on Ballerina, you would know by now that visual representation is one aspect that sets Ballerina aside over many other integration paradigms. In a gist, Ballerina gives you the capability to either write or draw your integrations and switch back and forth as you please. Ballerina Composer is what allows you to do this.

Refer the following sample for Hello World with Ballerina Composer.

Textual Representation / Source View

Visual Representation (Design View)

As you can see above, it is a simple concept, but it is a powerful and an effective representation a source code of any programming language can ever provide. And the Ballerina composer specialises in this aspect.

Getting Started with Ballerina Composer

To get started with Ballerina, follow the user guides at :

Ballerina Composer Feature Overview

Following are some cool features that the Ballerina Composer provides.

Visually compose Ballerina program
Interchange between Source and Visual view of Ballerina program
Swagger view for Ballerina program
Running Ballerina program
Debugging Ballerina program

Visually Compose Ballerina Code

The Design View as we refer it in the Ballerina Composer, provides you with the capability of drawing or composing your Ballerina program.

Life Line/Worker

Some constructs has a life line of execution where you program the statements to be executed. As in the above screenshot, this is the FunctionWorker for functions. Similarly, resources have a ResourceWorker. In simple terms, this defines the flow of execution.

Tool Palette

Following is a screenshot of the tool palette.

Constructs

The constructs section contains the language constructs that can be dragged and dropped to compose the program. It contains the top level constructs, services, resources, functions, main function, connectors, connector actions, structs, type mapper and worker (in the order of appearance). When you add any of these, the relevant construct is created in the program.

The next section contains the statements that can be dropped into a lifeline and gets executed during the program execution. This contains if-else, assignment, variable definition, function invocation, return, reply, while, break, try-catch, throw, worker invoke and worker receive (in the order of appearance).

Current Package

Current Package lists down any of the functions, connectors and connector actions, that you have created in your current program.

Native Packages and Imports

These are the packages that are available to be used by your Ballerina program. By default, the Composer imports few commonly used packages to this section. If you add an import to a different package, it is added to this section.

Composing the Program

To compose the program, you can drag and drop any of the constructs or imports that appear in the tool palette to the editor window.

Let’s look at a simple hello world program. Since we are planning to print a simple hello world message, we will use a main function that can be executed and add a print statement. Steps are listed below.

Create a new file
Drag and drop main function to the editor window
Drag and drop a system println statement

Interchange between Source and Visual Views of Ballerina Program

As you can see in the above shared screencast, after composing the program with the Design View, you can switch to Source View to view the source of the Ballerina program.

If you happen to write the source code completely in the source view, when you switch to Design view, the Visual representation is created.

Ballerina Composer — Source to Design View

You can also open an existing Ballerina program (.bal file) to view it’s visual representation and make changes to the program either visually or textually or both.

Swagger View for Ballerina Program

If your Ballerina program contains services and resources, you can view the generated Swagger definition for your program by switching to the Swagger view. All the changes made on the Swagger definition will reflect on the Ballerina program when you switch back to Source or Design view.

Running Ballerina Program

You can run your Ballerina program in the Composer itself. Set the BALLERINA_HOME to point to the Ballerina runtime and click on Run > Application.

Ballerina Composer — Run Ballerina Application

Debugging Ballerina Program

You can debug your Ballerina program using the debugger of the Ballerina Composer.

Add breakpoints to your Ballerina program from the design view and run the program in debug mode. The program will stop at the breakpoints and you can view the states in the debug view.