Overview

In this tutorial, you will learn how to create App Components as reusable technical solutions. You will gain experience using and composing Components to quickly create and improve Visual Event Handlers, reducing duplicative tasks.

Part 1: Creating a Component

1: Import the Introductory Tutorial

Use the Project menu to select Import. Select Tutorials as the Import Type. Select the Introductory Tutorial and click Import.

Click Refresh once the import is completed.

Click the com.vantiq.engines.EngineMonitor Source from the Project Contents tree or use the Add menu to select Service and open the com.vantiq.engines.EngineMonitor Service. For more details or information on how the com.vantiq.engines.EngineMonitor Service works, refer to the Introductory Tutorial.

Navigate to the Implement tab in the Service and click on the Inbound section header to view the inbound Event Type handlers. Select the TemperatureEvent event handler. Recall that this event handler receives temperature events, retrieves the current speed value if necessary, then generates an alert message for the event. Notice that there are three similar patterns in this Event Type handler: a Filter task (i.e., NoAlert, NonSpeedOverheat, SpeedOverheat) each followed by a Transformation task (i.e., ClearAlert, AddNonSpeedOverheat, AddSpeedOverheat).

Duplicative tasks are tedious to configure and cumbersome to maintain. To solve this, create a reusable component for filtering and transforming using differing temperature and speed values. The TemperatureEvent Event Handler will use this Component to produce the proper engine alert message based on the sensor data it receives.

2: Create a Component From an Existing Handler

App Components may either be created from scratch or copied from an existing event handler. Use the existing definition of the TemperatureEvent Event Handler to copy the duplicated tasks and create a new App Component.

Hold the shift key and drag your mouse to select the NoAlert and ClearAlert tasks. Notice that the tasks show a green border when they are selected.

Click Create Component in the upper left-hand corner of the pane. Enter FilterAndDiagnose as the App Component name and click OK.

A new App Component has been created with an exact copy of the tasks you selected from the Event Handler.

3: Rename Component Tasks

Notice that an oval bubble called Downstream has been added beneath the Filter task. As the creator of the Component, you may decide how users of the Component will attach tasks beneath the Component. When a Component is used, it appears as a single black box for all the functionality and tasks contained within. For a user to connect another task as a child of the Component, the Component creator must expose downstream connection points to one or more tasks within the Component.

Click on the Downstream bubble and rename it Diagnosis. When this Component is used, if a task is added as a child of the Component using this connection point, it is effectively a child of the Diagnosis task. Rename the NoAlert task to Diagnose and the ClearAlert task to AddDiagnosis.

Save the Component.

4: Expose Component Parameters

Components are sections of Visual Event Handlers that are configurable and reusable to solve a wide range of problems. Components serve as a black box and are represented as a single Task. The user of a Component may treat it like any other Task, configuring a small set of properties to achieve the desired functionality.

The FilterAndDiagnose Component contains two tasks, the Diagnose Filter task and the AddDiagnosis Transformation task. Event Handlers that use FilterAndDiagnose will need to specify the filtering condition and the transformation properties for those tasks. The Expose Parameter feature of the component editor allows task parameters to be designated as “exposed”.

Click the Diagnose task then click the Click to Edit link. Click the Expose Parameter + button to the right of the condition property.

Leave the name of the configuration property as the default condition, then click OK. Click OK again to save the single configuration parameter for the Diagnose task.

Click the AddDiagnosis task then click the Click to Edit link. Click the Expose Parameter + button to the right of the transformation property. Leave the name of the configuration property as the default transformation, then click OK. Click OK again to save the single configuration parameter for the AddDiagnosis task.

Click OK and then Save the Component.

Part 2: Use the FilterAndDiagnose Component

Now that you have created the FilterAndDiagnose Component, it is time to plug it into the Event Handler.

1: Replace Repeated Tasks

Open the Service by using the Add button, click Services and then select com.vantiq.engines.EngineMonitor from the list.

Click on the Implement tab and open the TemperatureEvent Event Handler in the Inbound section.

Expand the Components section of the Task palette in the Event Handler. Notice that the FilterAndDiagnose Component is in the palette. Your component is now available to be used in your Visual Event Handlers.

Delete the NoAlert and ClearAlert tasks by clicking on each task and then clicking the Delete button in the pane’s toolbar.

Drag in the FilterAndDiagnose Component and drop it on the SensorReading Task.

Notice that the Component appears as a single task called FilterAndDiagnose. Also notice a downstream Diagnosis task appears as a triangular node beneath the Component representing a connection point for the component.

Rename the FilterAndDiagnose task to NoAlert then right-click the Diagnosis downstream task connected to the NoAlert task and select Link Existing Task. Select PublishStatus from the Task Name menu, then click OK.

Delete the NonSpeedOverheat and AddNonSpeedOverheat tasks by clicking on the task and then clicking the Delete button in the pane’s toolbar.

Drag in the FilterAndDiagnose Component and drop it on the RetrieveSpeed Task.

Rename the FilterAndDiagnose task to NonSpeedOverheat then right-click the NonSpeedOverheat task and select Link Existing Task. Select PublishStatus from the Task Name menu, then click OK.

Delete the SpeedOverheat and AddSpeedOverheat tasks by clicking on each task and then clicking the Delete button in the pane’s toolbar.

Drag in the FilterAndDiagnose Component and drop it on the RetrieveSpeed Task.

Rename the FilterAndDiagnose task to SpeedOverheat then right-click the SpeedOverheat task and select Link Existing Task. Select PublishStatus from the Task Name menu, then click OK.

Click Save to save the com.vantiq.engines.EngineMonitor Service.

You have now replaced your duplicated tasks with your reusable component. Please note there will be errors displayed after saving the Service. These are expected and will be corrected in subsequent steps.

2: Configure the New Component Tasks

Now that three instances of the FilterAndDiagnose component have replaced six tasks in the TemperatureEvent Event Handler, it’s time to configure each of those component properties.

1. Click the NoAlert task then click the Click to Edit link. Click on the link next to the condition property. Choose Visual Filter as the condition Type then click the Add Visual Condition + button. Enter the following Visual Condition parameters:Property Name: temperatureComparator: <

   Filter Expression: 210

   Click OK. As for the original NoAlert task, this Visual Filter determines if the engine is not overheating by checking if the temperature sensor reading is less than 210 degrees.

   Now click on the link next to the transformation property. Choose Visual Transformation as the transformation Type then click the Add a Transformation + button. Enter the following Visual Transformation parameters:

   Outbound Property: alertMsg

   Transformation Expression: “”

   Click OK. As for the original NoAlert task, this Visual Transformation sets a new event property, alertMsg, to have a string value of “” which effectively means there is no alert to be displayed in the engine dashboard. This is because the NoAlert Filter task has determined that the engine is not overheating. Click OK to save the configuration.

2. Click the NonSpeedOverheat task then click the Click to Edit link. Click on the link next to the condition property. Choose Visual Filter as the condition Type then add the following two Visual Condition parameters, in this order:Property Name: speedComparator: !=

   Filter Expression: null

   and

   Property Name: speed

   Comparator: <

   Filter Expression: 45

   Click OK. As for the original NonSpeedOverheat task, this Visual Filter determines if the engine is overheating and the speed is not null and less than 45. The speed can be null if a speed reading has not yet appeared.

   Now click on the link next to the transformation property. Choose Visual Transformation as the transformation Type then click the Add a Transformation + button. Enter the following Visual Transformation parameters:

   Outbound Property: alertMsg

   Transformation Expression: “Your engine is overheating: check for a malfunctioning fan or a coolant leak.”

   Click OK. Click OK again to save the configuration.

3. Click the SpeedOverheat task then click the Click to Edit link. Click on the link next to the condition property. Choose Visual Filter as the condition Type then add the following two Visual Condition parameters, in this order:Property Name: speedComparator: !=

   Filter Expression: null

   and

   Property Name: speed

   Comparator: >=

   Filter Expression: 45

   Click OK. As for the original SpeedOverheat task, this Visual Filter determines if the engine is overheating and the speed is not null and greater than or equal to 45.

   Now click on the link next to the transformation property. Choose Visual Transformation as the transformation Type then click the Add a Transformation + button. Enter the following Visual Transformation parameters:

   Outbound Property: alertMsg

   Transformation Expression: “Your engine is overheating: please reduce your speed.”

   Click OK. Click OK again to save the configuration.

Click Save to save the com.vantiq.engines.EngineMonitor Service.

3: Run Events through the Component

Now it is time to test that the Component works as expected.

If you’ve imported the Introductory Tutorial or the App Components completed tutorial, you will need to enable the two Sources, com.vantiq.engines.SpeedSensor and com.vantiq.engines.TemperatureSensor in order to begin the flow of simulated sensor events.

Click the Active Resource Control Center (lightning bolt) icon in the IDE Navigation Bar to display the Active Resource Control Center pane:

Activate the SpeedSensor and TemperatureSensor Sources by clicking their Active Slider.

Click the com.vantiq.engines.EngineMonitor Client from the Project Contents tree or use the Add menu to select Clients and open the com.vantiq.engines.EngineMonitor Client.

Notice that even though the implementation of the com.vantiq.engines.EngineMonitor Service changed, the Client did not need to be updated because the Data Streams in the Client use the Outbound Service Event Types and the Interface remained unchanged.

Conclusion

Congratulations, you have just created your first App Component!

In this Tutorial you have:

• Created a Component from an existing Event Handler
• Added Configurable Properties to the Component
• Replaced duplicated code by using the same App Component in an Event Handler

In the next tutorial, you will update this App Component to use Stateful Services to store and persist engine data while maintaining scalability and performance.