MyUI Runtime Environment

The MyUI Runtime Environment implements the concepts of the MyUI system for model-based adaptive user interfaces. It relies on the concept of the Abstract Application Interaction Model (AAIM) that is based on state machine diagrams as described in a public deliverable.

The runtime environment does not contain any adaptive user interface elements or interaction patterns itself. Instead, its modular design allows to integrate components that have been created using the Adaptive Web Components Framework or other client-side user interface frameworks.

How to create your own MyUI application

The MyUI Runtime is pre-bundled in standalone distributable file located at dist/myui-runtime.js. By simply loading this script, the public API is exposed in a global myui object.

• Load MyUI runtime

<script src="dist/myui-runtime.js"></script>

• Define the AAIM for your application

let aaim = {
  initial: <name of initial state>,
  states: [
    {
      name: <name of the state>,
      do: {
        situation: <situation identifier>,
        parameters: [
          <parameter value>, ...
        ]
      },
      events: [
        {
          on: <name of event>,
          goto: <name of target state>,
          do: {
            service: <name of registered serivce>,
            name: <method name>,
            parameters: [
              <parameter value>, ...
            ]
          }
        }, ...
      ]
    }, ...
  ]
}

• Create your SituationFactory implementation

class MySituationFactory extends myui.SituationFactory {
  create(situation, parameters, context) {/*...*/}
  refresh(situation, parameters, context) {/*...*/}
}

• Create your AAIMService implementation

class MyService extends myui.AAIMService {
  constructor() {
    super();

    // Add provided functions
    this._functions.set('myFunction', this.myFunction);
  }

  // Implementation of provided function
  myFunction(firstParam, lastParam) {/*...*/}
}

• Create and configure the AAIMBehavior

let behavior = new myui.AAIMBehavior(new MySituationFactory(), new MyService());

// Optionally register additional services
behavior.registerService('other', new OtherService());

• Create the AAIMInterpreter and load the AAIM

let interpreter = new myui.AAIMInterpreter(behavior);
interpreter.load(aaim);

• Start the interpreter when all application dependencies have been loaded

window.onload = function() {
  interpreter.running = true;
};

For for more details see the API documentation.

License

The MyUI Runtime Environment is licensed under the Clear BSD License.

Funding Acknowledgement

The research leading to these results has received funding from the European Union's Seventh Framework Programme (FP7) under grant agreement no. 248606 (MyUI) and no. 610510 (Prosperity4All).

Visit the GPII DeveloperSpace to find more useful resources.