Model-Driven User Interfaces

Mike's Notes

This was a massive job. I hacked and recombined several useful standards that had been forgotten about, and now it works.

Resources

• https://www.w3.org/TR/WCAG21/
• https://www.blog.ajabbi.com/p/pipi.html
• https://en.wikipedia.org/wiki/User_interface_markup_language
• https://www.w3.org/2005/Incubator/model-based-ui/
• https://en.wikipedia.org/wiki/Interaction_Flow_Modeling_Language
• https://www.omg.org/ifml/
• https://storybook.js.org/
• https://en.wikipedia.org/wiki/Domain-driven_design

References

• Reference

Repository

• Home > Ajabbi Research > Library >
• Home > Handbook > 

Last Updated

17/05/2025

Model-Driven User Interfaces

By: Mike Peters

On a Sandy Beach: 26/12/2023

Mike is the inventor and architect of Pipi and the founder of Ajabbi.

In 2023, putting a User Interface (UI) on the front end of Pipi 9 has been challenging. I wanted it to be

• Model-driven
• Adaptive to the users' devices
• Automated
• Meet the individual needs of each logged-on user

Resources used

• OMG Interaction Flow Modelling Language (IFML)
• The CAMELEON References Framework (CRF)
• User Interface Description Language (UIDL)
• W3C Model-based UI Incubator

IFML

Interaction Flow Modelling Language (IFML) is an abstract user interface (AUI) modelling language adopted as a standard by the OMG in March 2013. IFML supports;

• UI general structure
• Content
• Events
• Event handlers
• I/O parameters bound to specific view components

CAMELEON Reference Framework (CRF)

The FP5 CAMELEON (Context-Aware Modelling for Enabling and Leveraging Effective Interaction) project was carried out by a consortium of universities and research groups in the EU from about 2000 to 2010. CHAMELEON has three layers: abstract UI, Concrete UI, and Final UI.

UIDL

User Interface Description Language (UIDL) examples include

• Maria XML
• usiXML
• UIML
• XUL
• XAML
• WasabiXML

W3C Model-based UI Incubator

Architectural Decisions

• The USI engine is in charge
• Use Workflow Patterns to describe/break down tasks
• Use IFML to describe the AUI layer
• Keep the usiXML version of CUI and FUI layers
• Use Open-sourced UI Component Libraries to  populate CUI and FUI
• I added two more layers: a Locale UI and a Personalisation UI.
• The UI generator process is DDD > Wfl > AUI > CUI > FUI > LUI > PUI
• CAMELEON was initially meant to run both ways. I made it generative only, driven by DDD workflows.
• Use Design Tokens with a CCS framework to make "look" highly tweakable.

Current Status

• All the different layers work independently, but don't work together.
• Initial user testing is with hand-built web pages.
• HTML 4 and HTML 5 will be the initial output.
• Once basic assumptions have been tested and corrected, live pages will be produced for testing, working backwards from PUI to AUI.
• I'm using the namespace engine (NSP) to reorganise the USI engine's 30+ internal systems into compartments.

User Testing

Assuming every person is unique, allowing for personalisation. W3C WCAG 2.1 is the standard. Accessibility testing is underway in English for

• Braille Devices for the Deaf-Blind
• Screen Readers
• Screen Magnifiers
• Low Vision
• Irlen's
• Colour Blindness
• Dyslexia
• Autism
• Epilepsy
• Synethesia
• Older adults requiring simpler UI
• Muscular Dystrophy (large buttons)