Getting Started with Graphical View for WSO2 Enterprise Integrator VS Code Extension

Modern software industry and technology getting advanced and more complex with the rapid development.Text editors which are designed specifically for edit the source code,has become more important in the software industry because of the simplicity and powerful features.Among them VS Code editor has become one of the most popular source code editor with the powerful features.

Over the past few years, WSO2 API Manager has helped with the open source enterprise-class solution which supports API publishing, life cycle management and WSO2 Developer Studio has helped with the complex integration solution requirement with development environment for both source and graphical editing. WSO2 API Manager has built a graphical view to VS Code Tooling extension which has built by WSO2 Enterprise Integrator to enrich the developer experience more and more.

This article will be demonstrating how to use VSCode EI Tooling extension to build your custom mediation sequences and how to get the root level graphical view of the sequence.

Pre-requisites

1. VS Code
2. Java JDK 8 at least (JAVA_HOME environment variable must be set)
3. Maven 3.3.0 or later

By the having above mentioned pre-requisites, you can install and activate the VS Code WSO2 EI Tooling plugin. You can refer https://medium.com/wso2-enterprise-integrator-wso2-dev-studio-wso2/getting-started-with-vs-code-extension-for-wso2-ei-986abac97e8f to install, activate and use EI Tooling plugin.By referring that article you will be able to install & activate EI tooling plugin to create a new ESB project.

WSO2 ESB Project Structure

Creating New Sequence

With WSO2 EI tooling, you can design your own custom mediation sequences & deploy them to API Manager in order to process requests.In this article, I’m going to show you how to create a custom mediation sequence inside an ESB project as an example.

1. Right click on the sequences folder and select Create New Sequence or open the command palette and type WSO2EI: Create New Sequence.
2. Give a name for the sequence in the prompted input box.
3. Create your own sequence.

Creating a custom mediation sequence

You may note that suggestions and auto-completion features are there to give you a more development experience.

Featuring the root level graphical view

By the way now you’re having your own custom sequence.You van view the root level graphical view of the created custom mediation sequence.

1. Open the command palette and type WSO2APIM: Show Diagram or click on the Show Diagram icon in editor tool bar menu.

Viewing the root level graphical view

Root level graphical view is just created for you.You may note that active text editor split in to two.one is to show the sequence xml and other one to show the corresponding root level graphical view.

You may experience that when you update the sequence xml or when you change the active text editor, graphical view gets live updated. Definitely this will help you to have a much more enhanced development experience.

Updating graphical view

In a similar way, you can create any custom sequence and view the corresponding root level graphical view while creating.

In this post, I have demonstrated how to use the VS Code Tooling extension for creating custom mediation sequence and to experience the root level graphical view, facilitating you with the great developing experience. Sooner graphical view will be featured by addition features.Stay tuned with us.Please share your feedback with us in the comments section below.