Purpose

Cubbles supports the integration of any component into a webpage using the html iframe element.

This is a useful option if:

1. You are not allowed to place any <script/> -element into the page.
2. The component's integration via the 2.3 | Cubbles Tag API has side-effects onto the embedding page:
   
   1. styling side-effects - e.g. if css declarations within the component are not consequently defined within their own namespace.
   2. functional side-effects - e.g. if javascript dependencies used by the component are in conflict with javascript dependencies of the embedding page.

The RTE contains a html-resource

1. that can be referenced using the iframe's src-attribute,
2. with parameters to
   
   1. define the component to be loaded
   2. to initialize the component with proper values
   3. to add dependencies

The following sections present a demo to indicates the proper use of the Cubbles iframe.

Demo

Prerequisites

• The webpackageId (e.g. my-webpackage@1.0.0-SNAPSHOT) of the component is known.
• The artifactId  (e.g. my-component)of the component s known.

Sample case

Let's say say you want to show a line chart presenting the sales behavior of your store during the first 4 months of the current year. To aim that, you can use the line-chart component. Let's now say that you sales behavior was as shown in the following tables:

Using iframe app

The iframe app allows users to visualize a component within any web page using the html iframe element. To aim that, the webpackageId and the artifactId of the component should be provided as url parameters. Additionally, the initial values of the component's slots and additional dependencies can be provided using JSON format as url parameters.

The iframe app is available at https://cubbles.world/sandbox/cubx.core.rte@2.3.0/iframe Therefore, to use it you should provide the url as src attribute of an iframe element as follows:

<iframe src='https://cubbles.world/sandbox/cubx.core.rte@2.3.0/iframe'/>

Note that the app itself does not load anything, first it should be initialized. The following sections present this process in detail.

Component initialization (Mandatory)

Component's slots initialization (Optional)

Adding dependencies (Optional)

If you want, you can also add Cubbles dependencies to the component using the dependencies parameter, which accepts an array (JSON format) containing the dependencies like this: [{ "webpackage-id" : "valueX", "artifact-id" : "valueY"}, ...].

For instance if you want to add our bootstrap utility as dependency the code should look as shown below:

<iframe src='https://cubbles.world/sandbox/cubx.core.rte@2.3.0/iframe/index.html?webpackage-id=com.incowia.lib ... &dependencies=[{"webpackage-id" : "bootstrap-3.3.5@1.1.0", "artifact-id" : "bootstrap"}]'/>