Purpose
Demonstrate how to edit a compound properties within the data-flow view. We will concentrate on the edition of the members' properties.
First steps
We are going to compose a component that will allow the visualization of external documents written using Markdown language. Then we will edit it using the BDE. This compound will be composed by the cubx-text-input and the cubx-marked-element components and.
First you need to perform the following steps:
- Open the latest version of BDE at: https://www.cubbles.world/bde/bde@2.0.0-SNAPSHOT/bde/index.html.
- Add the
cubx-text-inputand thecubx-marked-element(both version 1.0), using the dataflow-view. - Then connect the
valueoutput slot ofcubx-text-inputto themarkdownUrlinput slot ofcubx-marked-element, again within the dataflow-view.
After that, you should get the a component with the following dataflow:
And the application view should look as follows:
You can test our compound using the url of a file written using markdown language, e.g. https://raw.githubusercontent.com/iCubbles/cubx-polymer-elements/master/webpackages/com.incowia.cubx-marked-element/README.md. You will see that the file will be displayed below the input field.
If you are not sure about how to perform those steps, check the Compose a compound using BDE tutorial.
Modifying webpackage properties
Now using the Webpackage Explorer (see image below) you can edit webpackage's meta information and the compound's properties.
Webpackage meta information
Now set the meta information of our webpackage (using option 1 in the image above) as follows:
| Name | Value |
|---|---|
| Name | markdown-visualizer |
| Version | 1.0.0-SNAPSHOT |
| Description | This webpackage contains a component to visualize external documents written using Markdown language |
| Keywords | markdown, visualizer |
| Author | Name: Your name Email: your email Url: Optionally your websites url |
Now save the changes.
Compound properties
We will edit the Artifact Id and the Description of the component using the Compound properties dialog (option 2 on image above) as follows:
| Property | Value |
|---|---|
| Artifact Id | markdown-visualizer |
| Description | This component allows to visualize external documents written using Markdown language |
If you check the members and the connections properties the changes you made in First steps section should be reflected. They look similar to the image below:
Modifying members properties
Now we will edit our compound's members properties within the dataflow-view. Right click on the cubx-text-input component. Then, on the context menu that appears click on the edit option. After that, on the Member properties dialog overwrite the default values as follows:
| Property | Value |
|---|---|
| Member id | urlInput |
| Display name | Url Input |
| Description | Input to set the markdown url file to be displayed |
Initializing member's slots
Now we will set an initial value to the label slot of the urlInput member (cubx-text-input). To aim that, you should click on the label slot within the dataflow-view, it would be easier if you zoom in using the mouse scroll. After that, you should click on the edit option on the displayed context menu. The Slot properties of label dialog should appear. Set the following values:
| Property | Value |
|---|---|
| Initial value | Url |
| Description of the initialisation | Labe for the input element |
Then you can initialize the placeholder slot by setting the following values:
| Property | Value |
|---|---|
| Initial value | Markdown file url |
| Description of the initialisation | Placeholder for the input element |
If you switch to the application-view, the input text now has a label and a placeholder.
Now repeat the same process for the value slot of the urlInput member to set the following properties:
| Property | Value |
|---|---|
| Initial value | |
| Description of the initialisation | Default url of the markdown file to be displayed when the component loads. |
The url above address to a markdown file, where the use of the cubx-marked-element is explained.
If you switch to the application-view, the markdown file will be loaded by default.
