Learning Resources | Unified UX

Unified UX relies on a host of popular technologies. Here we signpost you to some self-learning resources to get you up to speed quickly. As a starting point, it is assumed that developers are familiar with HTML and JavaScript.

Web Components Crash Course
Building Web Components with lit-html
An introduction to writing raw web components. Get hands on experience by downloading the zip containing example code for creating web component- webcomponent-code.zip

Lit TypeScript starter project

Download the ts starter kit lit-element-starter-ts-main.zip. Unzip, explore to the folder and use ‘cmd’…

npm i
npm audit fix &:: tidy any deprecated packages
npm run build &:: to compile the ts from the /src folder into js
npm run serve &:: to run the web server

browse to http://localhost:8000/ (port may vary!!!) put your ts in the src folder

Lit-VSCode-Extension This VS Code extension is really helpfullit-vcode extension. In a new folder…

npm init @vitejs/app --template lit-element-ts &:: We want a lit ts install        
cd lit-element-ts
npm install
npm run dev

That runs a web server on port 3000 using the files in the (current) folder C:\D\UUX\lit-element-ts.

Simple Example TS:

import {html, css, LitElement} from 'lit';
import {customElement, property} from 'lit/decorators.js';

@customElement('simple-greeting')
export class SimpleGreeting extends LitElement {
  static styles = css`p { color: blue }`;

  @property()
  name = 'Somebody';

  render() {
    return html`<p>Hello, ${this.name}!</p>`;
  }
}

JS:

import {html, css, LitElement} from 'lit';

export class SimpleGreeting extends LitElement {
  static styles = css`p { color: blue }`;

  static properties = {
    name: {type: String},
  };

  constructor() {
    super();
    this.name = 'Somebody';
  }

  render() {
    return html`<p>Hello, ${this.name}!</p>`;
  }
}
customElements.define('simple-greeting', SimpleGreeting);

HTML:

<simple-greeting name="World"></simple-greeting>

More detailed example with buttons

import {LitElement, html, css} from 'lit';
import {customElement, property} from 'lit/decorators.js';

@customElement("my-element")
export class MyElement extends LitElement {
  // Styles are scoped to this element: they won't conflict with styles
  // on the main page or in other components. Styling API can be exposed
  // via CSS custom properties.
  static styles = css`
    :host {
      display: inline-block;
      padding: 10px;
      background: lightgray;
    }
    .planet {
      color: var(--planet-color, blue);
    }
  `;


  // Define reactive properties--updating a reactive property causes
  // the component to update.
  @property() greeting = "Hello";
  @property() planet = "World";

  // The render() method is called any time reactive properties change.
  // Return HTML in a string template literal tagged with the `html`
  // tag function to describe the component's internal DOM.
  // Expressions can set attribute values, property values, event handlers,
  // and child nodes/text.
  render() {
    return html`
      <span @click=${this.togglePlanet}
        >${this.greeting}
        <span class="planet">${this.planet}</span>
      </span>
    `;
  }

  // Event handlers can update the state of @properties on the element
  // instance, causing it to re-render
  togglePlanet() {
    this.planet = this.planet === "World" ? "Mars" : "World";
  }
}

HTML

<!DOCTYPE html>
<head>
  <script type="module" src="./my-element.js"></script>
  <style>
    .mars {
      --planet-color: red;
    }
  </style>
</head>
<body>
  <my-element></my-element>
  <hr />
  <my-element class="mars" planet="Mars"></my-element>
</body>

Vanilla Router supports simple navigation between so-called “pages” in a single page web application. The route/page name is seen after a # in the url shown by the browser. e.g. http://ip:port/mypage.html#main

When routing (“navigateTo”) occurs, a function is run that can re-render some, or all, of the page.

To install

npm install vanilla-router 

To include in your html page

<script defer src="./node_modules/vanilla-router/index.js"></script> 

Setup script

function beforeRoute(){
// optional hook function to execute before any navigation 
} 

function afterRoute(){ 
// optional hook function to execute after any navigation 
} 

var router = new Router({ 
    mode: 'hash', 
    root: '/CSA.html', 
    hooks: { 
        before: function (newPage) { 
            if (logging) {console.info('Before page loads hook', newPage);} 
            beforeRoute();         }, 

        after: function (newPage) { 

            if (logging) {console.info('After page loads hook', newPage);} 
            afterRoute(); 
        } 
    }, 

    page404: function (path) { 
        console.log('"/' + path + '" Page not found'); 
    } 
}); 

router.add('main', function () { 

    if (logging) {console.log('router main');} 
    loadMain(); 
}); 

router.add('txndet', function () { 

    if (logging) {console.log('router txndet');} 
    loadTxnDet(); 
}); 

// activate and make available globally 
router.addUriListener(); 

window.router = router; 

Function to navigate to main (the main page layout)…

// function to route “main” to re-render so page returns to “normal” 
// i.e the “content” div is shown and everything else is hidden or empty 

function loadMain(){ 
    const emptyHtml = html``; 

    // Ensure rendered popup, card and iframe are blank 
    render(emptyHtml, document.body.querySelector('.popuphost'));

    // Show standard content only, not any alternate content
    document.getElementsByClassName('alternatecontent')[0].classList.add('hidden'); 
    document.getElementsByClassName('content')[0].classList.remove('hidden'); 

} 

Function to navigate to txndet (a page layout that includes a popup showing transaction details)…

// function to route “txndet” to render the transaction details popup in div .popuphost 
function loadTxnDet(){ 

    if (logging) {console.log('loading TxnDet');} 

    // this is the actual html to be rendered 
    const popupHtml = html` 

        <transaction-details class="ea transactiondetails popupESC" instance="0" transactiondata="${sessionStorage.getItem('txndet_transactiondata')}" accountid="${sessionStorage.getItem('txndet_accountid')}"></transaction-details> 

    `; 

    // render it into a div called popuphost 
    render(popupHtml, document.body.querySelector('.popuphost')); 

    //post-rendering actions (could be anything you need)... 
    setTimeout( function(){ 

        setupTransactionDetailsListener(); 
        var txnpopup = document.getElementsByClassName("transactiondetails");    
        trapFocus(txnpopup[0]); 
        autoFocus(txnpopup[0]); 

    },1); 

} 

Using vanilla-router to navigate…

      // use this to “goto” the main page layout 
    window.router.navigateTo('main'); 

// or use this to goto/show the txndet popup 
    sessionStorage.setItem('txndet_accountid', myAccountId); 

    sessionStorage.setItem('txndet_transactiondata', myTransactionData); 

    window.router.navigateTo('txndet'); 

In order to access APIs in varying locations, it is necessary to run a cors proxy on your machine. If you do not, the browser will issue a cross-origin error.

Extract the cors-cache-proxy.zip from the resources folder and run the command below to run a proxy on port 8080.

npm start

Any API calls must use the prefix http://localhost:8080/ e.g. http://localhost:8080/http://52.169.75.162:8000/ms-party-api/api/v4.0.0/party/parties?lastName=Green

Whilst this looks strange, the proxy accepts the request and forwards it on to the specified URL.

More reading on CORS: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

Dynamic Module Imports in JavaScript

New user agents will use the Temenos Explorer. However, you can wrap a web component for use in Visualizer by following this video: