OXM - Object Experience Mapper

Project Name: OXM
Language: C#
GitLab: gitlab.com/immersivegamer/oxm-csharp
Length: This is an ongoing side project.
Snapshot: Generate a dynamic GUI from C# object classes

The idea is inspired by ORM libraries which help programmers map code objects to relational databases. I figured something similar could be done for a user interface. Take an existing code object and dynamically generate a graphical UI to represent it.

In C# you can use reflection to inspect an object's class, properties,methods, etc. Using this and some basics rules the code dynamically builds a UI out of a the object's properties. For example read only properties are displayed as labels, normal properties are input boxes, lists/arrays are shown as lists, and methods that take no parameters are buttons.

Methods that return objects, or lists that are objects, is where the magic starts. If a method returns an object, when you click on it's button the UI window switches over to display that object. So using buttons and a built in back button that saves your navigational history you can navigate a graph of objects via a user interface. Similarly with a list of items, selecting one will object that instance of the object in a new window.

While I don't ever imagine this type of tool being used in a production product, I can see this helping with rapid development or giving a tool a simple interface. Also while all objects can be rendered, objects that are crafted simpler or with the purpose of being displayed objects ensures better control. You could use some patterns like MVC and have a view object overlay the model object.

The project is being coded with extensibility in mind. For example, the code that generates the UI can be different from the code that "parses" an object to get the building blocks. This is already shows with two different UI engines. The first one using Terminal.Gui for a simple text based UI and a WinForms engine for something more graphical. Also work is being done to make data type convertors and custom display layouts extensible or able to replace.

One of the bucket list items is adding some kind of CSS engine that the render engines could use to get clues about more advanced display or layout. CSS would be written with the C# namespace/class/property and limited rules about display. Things like alignment, or forcing a field readonly or hidden. This would help with displaying objects that have more than what the user really needs to see, or help make a basic RAD app a little bit more presentable. Still need to do some more research into CSS engines and how they parse and store the layout information.

Checkout the GitLab repository for more information or to try it out.

Example and Outline

Example

Here is are some example object code and then screen shots of it being rendered by the WinForms engine.

public class ExampleRecord
{
    public Guid ID { get; set; }
    public string Name { get; set; }
    public string Other { get; set; }
    public string CreatedBy { get; set; }
    public DateTime CreatedAt { get; set; }

    public SubRecord ExtraThingWithAReallyLongName {get; set; }

    public SubRecord ViewExtaItem() => ExtraThingWithAReallyLongName;

    public void Save()
    {
        // imagine a simple JSON file save or database call with Dapper
    }
}

public class SubRecord
{
    public int ID { get; set; }
    public string Name { get; set; }
}

Showing the root object

Root object of class ExampleRecord displayed as start up screen

Showing the sub record object

Clicking on the method/button ViewExtaItem the sub record is shown as a new view screen

Outline

parses and sends UI parts
parses and sends UI parts
Navigation
Navigation
generates UI
generates UI
Render Engine
Render Engine
OXM
OXM
on method click for
child the nav changes
view and stores root
in a nav history
(aka a back button)
on method click for...
Displays:
- Properties
- Methods
- Lists
Displays:...
Program
Program
access via method
access via method
root object sent to navigation
root object sent to navigation
Root Object
- param-less method
- properties
Root Object...
Child Object
Child Object
Property updated
through UI updates
the object backing
the view
Property updated...
Viewer does not support full SVG 1.1