Application Setup

cuba-app is a mandatory element for any CUBA Polymer application. It should be defined in your application as early as possible. cuba-app contains initialization logic that is required by other CUBA Polymer components. That is, all other CUBA Polymer components won’t work if cuba-app is absent in your code.

Below is an example of using cuba-app element.

index.html

<html>
<head>
	<link rel="import" href="src/cuba/init/empty-app.html">
	<script src="bower_components/webcomponentsjs/webcomponents-loader.js"></script>
</head>
<body>
    <empty-app></empty-app>
</body>
</html>

src/cuba/init/empty-app.html

<link rel="import" href="../../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../../../bower_components/cuba-app/cuba-app.html">

<dom-module id="empty-app">
  <template>

    <!-- 'api-url' informs the component where your CUBA REST API is located. -->
    <!-- By default on application creation it is '/app/rest'. -->
    <!-- It can be different if you have changed "Module prefix" in "Project properties > Advanced", -->
    <!-- e.g. '/sales/rest' -->
    <cuba-app api-url="/app/rest/"></cuba-app>

    <!-- Here goes the rest of the application. -->

  </template>
  <script>
    class EmptyApp extends Polymer.Element {
      static get is() {
        return 'user-info-component';
      }
    }

    customElements.define(EmptyApp.is, EmptyApp);
  </script>
</dom-module>

After including cuba-app, you can use all other CUBA Polymer components.