UI models - Galad/tranquire GitHub Wiki

UI models

UI models allows to map elements of the user interfaces to .NET classes easily. This is useful if you have multiple elements on the user interface that makes sense to group in a an object. For instance you can represent a list of github issues, composed of a title, author, creation date and so on in a list of Issue objects.

image

Creating a model

Create a class that represent the elements on the UI, for instance a Github issue. Use the attribute Target to indicates how to locate the element on the user interface.

public class Issue
{
   [Target(ByMethod.ClassName, "issue-title")]
   public string Title { get; set; }
   [Target(ByMethod.CssSelector, ".issue-author span")]
   public string Author { get; set; }
}

Available methods are:

  • Id
  • Class name
  • CSS selector
  • Tag name
  • XPath selector

You can also create an immutable class that inject the values from the constructor. In this case, constructor parameters name must match the properties name.

Optionally, you can specify how the value is retrieved and transformed with an attribute inheriting from UIStateAttribute. The attributes are similar to the questions inheriting from UIState.

   [Target(ByMethod.ClassName, "issue-selected")]
   [Selected]
   public string IsSelected { get; set; }

Available methods are:

  • Classes
  • CssValue
  • Enabled
  • Html
  • Presence
  • Selected
  • SelectedValue
  • SelectedValues
  • TextContent (default)
  • Value
  • Visibility

You can also create your own method by inheriting from UIStateAttribute and overriding the CreateQuestion method.

Consuming UI models

Once your model created, you can create a question from it, that will return an object where the values are set from the user interface.

var question = UIModel.Of<Issue>(IssueTarget);

You can also get a list of those objects.

var question = UIModel.Of<Issue>(IssueTarget).Many();
⚠️ **GitHub.com Fallback** ⚠️