Purpose

To demonstrate how to create a compound component using the Coder DevTools.

Prerequisites

1. The fixer-io-wrapper elementary component should be already created

Creating the currency-viewer Compound Component

We will create a compound component called currency-viewer. This compound will use a chart to display the rates that the fixer-io-wrapper elementary will provide it. The dataflow of this compound is shown below:

Our compound component will be created within the same webpackage (thus same project) where you created your fixer-io-wrapper elementary. First, run the following Grunt task from DevTools in the bash (Make sure you are located in your devtools folder):

> grunt +webpackage-createCompound

Second, provide a name for the compound component, in this case currency-viewer and a short description if you want to (e.g. Component to display the rates in a chart).

If everything went well, you will get:

Done, without errors.

Process finished with exit code 0

The manifest file is modified automatically again to include the new compound component and a folder is created named equally to the components name as you just specified. The folder contains a simple structure as follows.

Specify the Compound Configuration in the Manifest File

We now need to modify the manifest.webpackage again to set up the compound component. To support a compound you have to specify the member components and the connections between their slots. As you can see in the dataflow picture above, our compound has two members, the fixer-io-wrapper and the c3-chart component with one connection between one slot of each.

Dependencies section

To have the resources for the compound available, we need to define some dependencies to be loaded at runtime:

The dependencies definition should be as follows:

	"dependencies": [
  		{
   			"artifactId": "fixer-io-wrapper"
  		},
 		{
    		"webpackageId": "com.incowia.lib.chart-library@0.2.0-SNAPSHOT",
    		"artifactId": "bar-chart"
  		}
	],

Slots section

As our compound does't expose any member-slots, just remove the pre-generated slots definition.

Members section

Now we need to add the members that belong to our compound as follows:

        "members": [
          {
            "memberId": "fixer",
            "artifactId": "fixer-io-wrapper"
          },
          {
            "memberId": "chart",
            "artifactId": "bar-chart"
          }
        ],

Per default the CIF will render each member as a direct child node of the compound preserving the order of the members array seen above. However if you want the CIF to render the compound members individually you can provide a custom html template. The following is an example of a template for currency-viewer component (currency-viewer-template.html):

<template id="currency-viewer">
    <div>
        <h1>My Currency Viewer</h1>
        <div class="row">
            <div class="col-xs-6">
                <fixer-io-wrapper member-id-ref="fixer"></fixer-io-wrapper>
            </div>
            <div class="col-xs-6">
                <bar-chart member-id-ref="chart"></bar-chart>
            </div>
        </div>
	</div>
</template>

It is important that the id attribute of the template references the artifactId of the compound component. The member components are added as tags whose member-id-ref attribute references its memberId in the manifest.webpackage. For the html template to be available it needs to be added as resource in the compound component.

"resources": [
  "css/currency-viewer.css",
  "currency-viewer-template.html"
],

Add bootstrap library to the dependency section, because the template above uses bootstrap classes.

"dependencies": [
  		{
   			"artifactId": "fixer-io-wrapper"
  		},
 		{
    		"webpackageId": "com.incowia.lib.chart-library@0.2.0-SNAPSHOT",
    		"artifactId": "bar-chart"
  		},
		{
			"webpackageId": "bootstrap-3.3.5@1.1.1",
  			"artifactId": "bootstrap"
		}
 ],

Connections section

Connections define the data to be transferred between 2 slots of 2 component instances.

To set up the connection between our two member components copy and past the following code to the section "connections":

        "connections": [
          {
            "connectionId": "data-connection",
            "source": {
              "memberIdRef": "fixer",
              "slot": "rates"
            },
            "destination": {
              "memberIdRef": "chart",
              "slot": "dataColumns"
            }
          },
		  {
  			"connectionId": "labels-connection",
			"source": {
			    "memberIdRef": "fixer",
		    	"slot": "currenciesLabels"
			},
			"destination": {
			    "memberIdRef": "chart",
			    "slot": "xLabels"
  			}
		  }	
        ],

Inits section

It might be useful to initialize some slots with values related to our compound:

        "inits": [
	      	{
            	"memberIdRef":"chart",
            	"slot": "dataColumns",
            	"value": [["Rate", 0]]
			}
        ]

See details on Compound slot initialization.

Check your first Compound Component

Now start the embedded webserver using the +startWebserver grunt task available in the DevTools. Then, navigate to the demo (currency-viewer/demo/index.html) and enjoy your work.

You should see something like this: