...
Here's a mockup of how the Add Element Dialog should look like:
This dialog groups the various UI Elements into different sections. For each element, it's name and description are shown, and when the user clicks on one of them a dialog is shown, in order for the user to enter further attributes.
...
Each element can specify how the dialog is rendered and how to process the user input. After processing the user input, this dialog should return a string of XML code, that should be entered in the editor. A simple scenario is the Encounter Date dialog. Basically, the designer would recognize the EncounterDateTagHandler from HTML Form Entry module and fetch their attributes, to generate the XML code:
This would generate a <encounterDate> </encounterDate> tag (or <encounterDate default="$VALUE" showTime="$VALUE" /> depending on the user input). It would also show a HTML Preview of that tag.
...
By clicking on the Add button, the XML code would be inserted into the editor.
Architecture
This section details the architecture to support this design.
HTML Form Entry module
The HTML Form Entry module must be expanded in order to provide additional metadata, so the designer can "guess" what new features done in this module (tags) do automatically. The changes are trivial, in order to cause minimum impact.
TagHandler
- Name
- Description
- AllowNested - true or false, basically allows for inserting other elements inside. For instance <obs> tags won't allow to insert elements inside, but <section> tag will.
AttributeDescriptor
- Name - identifier
- Label - to be shown on the add tag dialog (see section 2)
- Required - true/false, if the attribute is required
- Datatype - boolean would render a checkbox. Text would be a simple textbox. More can be specified in the future.