3. Visual Designer

The Visual Designer

Overview

The following picture shows the different parts of the Kaoto Visual Editor.

1. The Explorer View with the opened file selected
2. The currently displayed Integration
3. The configuration panel where you can adjust and customize settings for the selected step
4. Drop down showing the currently selected integration type, here Camel Route
5. Drop down showing the currently selected Camel Route. This is handy if you have more than one Camel Route defined in your file. You can rename, delete, select and switch the visibility for each Camel Route here
6. Drop down enabling you to add more Routes or other global elements to your integration. Only visible for Camel Routes!
7. Copies the full source code of your integration to the Clipboard
8. Exports the currently visible Integration as a PNG image
9. Drop down showing the available Camel versions. Different runtimes are available, like Camel Main, Springboot and Quarkus.
10. This button bar provides you with functionalities like Zoom In / Out, Reset the View, Switching the layout direction between horizontal and vertical and grants you access to the comprehensive Camel Catalog, containing all the available Components/Connectors, Enterprise Integration Patterns and Kamelets
11. A step in your Integration with an Error-Marker to indicate a problem with the configuration of the step.
12. The toolbar of the selected step. It provides available actions for the current selection.

Working with Camel Routes

In Apache Camel, a route is a set of processing steps that are applied to a message as it travels from a source to a destination. A route typically consists of a series of processing steps that are connected in a linear sequence.

A Camel Route is where the integration flow is defined. For example, you can write a Camel Route to specify how two systems can be integrated. You can also specify how the data can be manipulated, routed, or mediated between the systems.

Creating a new Camel Route

We already covered how to create a new Camel Route YAML file in the chapter Create your first Camel Route.

Let’s use another way of creating a new Camel Route. If you have your route from the other chapter still open, click on the Route selection drop down and then delete all the routes using the trashbin icon.

Once you confirmed the deletion of all your routes you should see a blank screen like below.

You can now create a new Camel Route by either clicking the + New button in the center of the canvas or by using the same button in the upper menu bar of the Canvas, next to the Route selection drop down, which will both put a template route in place which uses a Timer component to send every second a message to the Log component.

Adding a step

Now lets add a new step between the Timer and the Log component to modify the message body. There are two ways of adding a step to the route. You can either Right-Click on the step you want to insert before or after. This will bring up a context menu with the available actions to choose from. An easier alternative would be to hover over the connection between the two steps you want to insert between and then click on the + button that appears.

Hover over the connection between the Timer and the Log steps now and click the + button to execute the Add step action.

This will open up the Camel Catalog where you can search the step you want to add.

As already mentioned we would like to modify the message body before sending it along to the Log component. To achieve that we need to add a Processor called setBody. Let’s enter this name into the filter text field on top of the Catalog.

You can now select the setBody tile to add it to your route. Select the new added step now on the canvas to open the configuration form to the right.

Let’s change the Expression text field to Hello from Kaoto!.

Now the Log component will receive a Hello from Kaoto! message every second and logs it to the console.

Replacing a step

You can replace any step on the canvas by hovering over or by selecting the step. This will spawn a toolbar which contains a button for the Replace action.

Alternatively you can do that also by invoking the context menu on a step and selecting the item Replace. Both ways it will open up the Camel Catalog and you can choose the replacement from there.

Deleting a step

You can delete any step on the canvas by hovering over or by selecting the step. This will spawn a toolbar which contains a button for the Delete action.

Alternatively you can do that also by invoking the context menu on a step and selecting the item Delete. This will remove the step from your integration.

Enable / Disable a step

You can enable or disable any step on the canvas by hovering over or by selecting the step. This will spawn a toolbar which contains a button for the Enable / Disable action.

Alternatively you can enable / disable any step in your route by invoking the context menu on a step and selecting the item Enable / Disable.

In the picture above the Log component has been disabled. The icon is grayed out and there is a marker icon at the top right of the step to indicate it is disabled.