cuba-rest-js Library

Under the hood, cuba-app uses the cuba-rest-js library. This library provides a convenient methods for working with CUBA REST API, such as:

login(login: string, password: string, options: object): Promise.
loadEntities(entityName: string, optoins: object): Promise.
getUserInfo(): Promise.
and so on.

As you can see, a lot of methods return promises. You can read about promises in MDN documentation.

In some cases you may want to use this API directly instead of using CUBA Polymer components. It can be achieved by implementing the CubaAppAwareBehavior behavior. This behavior provides the app property that has public API mentioned above.

For example, below is a simple application that shows an information about the currently authenticated user.

Source code

index.html

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

src/cuba/init/user-info-component.html

<link rel="import" href="../../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../../../bower_components/polymer/lib/elements/dom-if.html">
<link rel="import" href="../../../bower_components/cuba-app/cuba-app.html">
<link rel="import" href="../../../bower_components/cuba-app/cuba-app-aware-behavior.html">

<dom-module id="user-info-component">
  <template>

    <cuba-app api-url="/app/rest/"></cuba-app>

    <template is="dom-if" if="[[userInfoLoaded]]">
      <p><b>First name:</b> [[userInfo.firstName]]</p>
      <p><b>Last name:</b> [[userInfo.lastName]]</p>
      <p><b>Locale:</b> [[userInfo.locale]]</p>
    </template>

  </template>
  <script>
    // CUBA elements are currently in hybrid mode.
    // So, we have to use special mixin syntax to extend its behaviors.
    class UserInfoComponent extends Polymer.mixinBehaviors([CubaAppAwareBehavior], Polymer.Element) {
      static get is() {
        return 'user-info-component';
      }

      static get observers() {
        // In the most cases an observer on `app` is not required
        //  because 'app' is usually used when we are 100% sure that
        //  the application is already initialized
        return [
          '_requestUserInfo(app)'
        ];
      }

      static get properties() {
        return {
          userInfo: Object,
          userInfoLoaded: Boolean
        };
      }

      _requestUserInfo() {
        // CubaAppAwareBehavior provided us with the 'app' property.
        this.app.getUserInfo().then(function(userInfo) {
          this.set('userInfo', userInfo);
          this.set('userInfoLoaded', true);
        }.bind(this));
      }

    }

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

Result

Content of the userInfo object is described in the REST API Swagger documentation.

The way we extended CubaAppAwareBehavior might seem unintuitive. The reason is that CUBA elements are currently in hybrid mode, which means that they support both Polymer 1.0 and Polymer 2.0 syntax. In Polymer 1.0 there were behaviors instead of mixins. You can find more information about hybrid elements at https://www.polymer-project.org/2.0/docs/devguide/hybrid-elements.