Skip to content

Widgets: Start

A widget is the place where you start to code the user interface. Every CodeCoupler component can instantiate an widget which can be initialized in any DOM element of the component. Let's start with a simple one.

We will place in a separate folder widgets/testing-features as it could be used by multiple applications.

Furhermore we separate HTML and code in separate files and show how to use template variables:

src/widgets/testing-features/index.ejs.html

1
2
3
<h2><%= locals.myHeader %></h2>
<h5><%= locals.myTemplateArg %></h5>
<div class="content"><p>Hello World!</p></div>

src/widgets/testing-features/index.js

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
import { Widget } from "@codecoupler/cc-ui";
import template from "./index.ejs.html";
export default class extends Widget {
  myHeader = "JS Widget Base";
  async init() {
    this.buildStructure();
  }
  buildStructure() {
    this.env.$element.html(
      template({
        myHeader: this.myHeader,
        myTemplateArg: "No Arguments here"
      })
    );
  }
}

For now it is only important to know, that you have an init method where you can start and an element in this.env.element (HTMLElement) or this.env.$element (jQuery Object) what you can fill with live.

Let's drop it into our application content area:

src/apps/first-app/index.js

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
import { Application } from "@codecoupler/cc-ui";
import TestingWidget from "../../widgets/testing-features/index.js";
export default class extends Application {
  async init() {
    return {
      panelSize: "500 400",
      headerTitle: "My First Title"
    };
  }
  async start() {
    this.widget(TestingWidget);
  }
}