Back to top

Web Components Based on Explicit View Models

Last modified Jan 7, 2016

There are several patterns to separate the data and its internal representations from the ways that this data is presented. One of these patterns is Model View ViewModel (MVVM), which is used when the data presentation has a level of complexity and may be abstracted in the ViewModel. For example, the data can be represented with JSON and its description with JSON-Schema (i.e Model), while for modifying this JSON data in the web a Web Form is needed. This Web Form can be rendered by interpreting a ViewModel.

The main goal of this project is the design and implementation of a ViewModel and a Renderer for Web Forms based on AngularJS. There are several challenges in the creation of ViewModels for Web Forms, such as for example  layouting, server communication, in-line validation, internationalization (i18n), data validation and visualization of validation messages and multi-valued attributes.  However, the strengths of standards like JSON, JSON-Schema, and MV* JavaScript frameworks, like AngularJS, facilitate the implementation of this project.

The realization of this project will contribute to several projects at the sebis chair and the open-source project JSONForms in collaboration with EclipseSource (http://json-forms.org).

We are looking for students who want to work in this project.

Activities

  1. Analyze the relevant standards for data models and view models (e.g. JSON, JSON-Schema, EMF, …)
  2.  Identify a sufficiently expressive collection of core components and view modeling concepts (layout, …)
  3. Create a collection of AngularJS Form Components (AngularJS Directives), e.g.
    · Multi-valued elements
    · Enumerations
    · Autocompleting
    · Multi-selection
    · Sorted lists
    · Optional / alternative form elements
  4. Develop a Web Form ViewModel and its corresponding data bindings.
  5. Implement Inline-Form Validators with i18n error messages.
  6. Develop Services for CRUD operations (AngularJS Services) based on the JSON data, the model in JSON-Schema and the ViewModel from JSONForms.

Requirements

  • Good knowledge in HTML, CSS and JavaScript.
  • Experience with AngularJS.
  • JSON-Schema and REST API knowledge  would be beneficial.
  • Very good command of the English language.

Please get in touch with Adrian Hernandez-Mendez if you have further questions.