Window StencilJS Integration

Using with StencilJS Framework

This document provides a complete guide on how to build and use the Smart with the StencilJS Framework.

Prerequisities

  • Node.js
  • IDE (e.g. Visual Studio Code )

Setup development environment

  1. Create a new folder called stencil. From inside the folder open the Command prompt/Terminal and run the following command line to install the StencilJS framework:

    on Windows:

    npm init stencil
    

    on Linux:

    sudo npm i stencil
    
  2. When prompted for selection choose app ( we are going to create a simple application) and press Enter to continue.

    When finished, a new stencil Project will be created in the stencil folder.

Create a new StencilJS component

  1. Install the smart-webcomponents npm package in the application folder. From inside the project folder - stencil, type in the following command:
    npm i smart-webcomponents
    
  2. Create a new StencilJS component by running the following command from inside the project folder:
    stencil generate my-first-component
    

    The new component will be generated and placed inside the stencil/src/components.

    my-first-component.tsx file hosts the definition of our new component. Here's the component definition:

    import { Component, h, Prop } from '@stencil/core';
    //Import Calendar Component
    import "smart-webcomponents/source/modules/smart.window.js";
    
    @Component({
      tag: 'my-first-component',
      styleUrl: 'my-first-component.css'
    })
    
    export class MyFirstComponent {
    
      // Window Label property binding
      @Prop() label: string;
    
      render() {
        return (
          <smart-window label={this.label} opened window-parent="body"></smart-window>
        );
      }
    }

    Here we have a simple StencilJS component called my-first-component that contains a Smart.Window component inside it's template with a property called label which is directly binded to the label property of the Window component. The opened property of the Smart.Window component indicates that we want an opened window and window-parent indicates the parent of the window when the component is added to the DOM.

    Notice that we import the Smart.Window component at the top of the file.

  3. Add the necessary CSS import for the Smart Components Library from the my-first-component.css file which is located in the same folder as the .tsx. Here's the content of the file:
    @import url("../../../node_modules/smart-webcomponents/source/styles/smart.default.css");
    
    @font-face {
      font-family: smart-icons;
      src: 
      url(assets/font/smart-icons.woff2) format('woff2'), 
      url(assets/font/smart-icons.woff) format('woff'), 
      url(assets/font/smart-icons.ttf) format('truetype'), 
      url(assets/font/smart-icons.eot) format('embedded-opentype');
      font-weight: 400;
      font-style: normal
    }

    Notice that we also import the icons for the Smart framework. In order to do so we need to copy the font folder from node_modules/smart-webcomponents/source/styles to src/assets.

  4. Add the new component to the stencil/index.html page in order to view the component:
      <body>
        <my-first-component label="Stencil Window Component"></my-first-component>
      </body>
    
  5. Run the application by opening a command promp from inside the root directory of the project and entering the following command:
    npm start
    

    The StencilJS server will run the application on localhost:3333 and a new tab will open in your browser to view the result: