[Openmcl-devel] Lisp User Interface LUI

[Terje Norderhaug]

On Jan 9, 2009, at 11:05 PM, Alexander Repenning wrote:
>> Processing this information, the user interface engine can build  
>> the same window as the original "OpenGL 3D" application-window  
>> XMLisp template.
>
> I think one could do this with X-expression transformers.

Such as XSLT. But the examples I have presented are not meant to  
require the interface designer to define how to perform the  
transformation from layout + stylesheet to the equivalent of the  
XMLisp template.

Consider your "Currency Converter" XMLisp template (see below) and  
compare it to the equivalent layout and stylesheet. An XMLlisp parser  
should be able to build the same structure as the template by  
applying its own generalized transformation to the layout and  
stylesheet: For each element in the layout that matches the select  
pattern of a style, add the remaining attributes of the style.

For example, when loading the layout, the XML parser may read the  
layout element starting with <row>. Applying the stylesheet, it finds  
that the <style select="row" align="stretch" minimize="vertical"  
valign="bottom"/> has a select that matches the row element, and  
continues to add the attributes of the style (minus the select) to  
the <row> start tag. The result is  <row align="stretch"  
minimize="vertical" valign="bottom"> which is the same as in your  
XMLlisp template.

In conclusion, a minor change to the XMLisp processor would allow  
user interface templates to be split into layouts and stylesheets,  
with associated benefits.

-- Terje Norderhaug

>>> <application-window title="Currency Converter" width="300"  
>>> height="180">
>>>  <column align="stretch" valign="stretch" padding="9">
>>>    <row align="stretch" minimize="vertical" valign="bottom">
>>>     <label text="Exchange Rate per $1:" align="right" flex="2"/>
>>>     <editable-number name="rate" text="1.0" flex="1"/>
>>>    </row>
>>>    <row align="stretch" minimize="vertical" valign="bottom">
>>>     <label text="Dollars to Convert:" align="right" flex="2"/>
>>>     <editable-number name="dollars" text="1.0" flex="1"/>
>>>    </row>
>>>    <row align="stretch" minimize="vertical" valign="bottom">
>>>     <label text="Amount in the other Currency:" align="right"  
>>> flex="2"/>
>>>     <editable-number  name="amount" text="1.0" flex="1"/>
>>>    </row>
>>>    <row align="right" valign="bottom" vflex="1">
>>>      <button text="Convert" action="convert-currency-action"  
>>> default-button="true"/>
>>>    </row>
>>>  </column>
>>> </application-window>
>>>
>>> This can be split into two parts, first layout:
>>>
>>> <application-window title="Currency Converter" >
>>>  <column>
>>>    <row>
>>>     <label text="Exchange Rate per $1:" />
>>>     <editable-number name="rate"/>
>>>    </row>
>>>    <row>
>>>     <label text="Dollars to Convert:"/>
>>>     <editable-number name="dollars" />
>>>    </row>
>>>    <row>
>>>     <label text="Amount in the other Currency:" />
>>>     <editable-number  name="amount""/>
>>>    </row>
>>>    <row class="convert">
>>>      <button text="Convert" action="convert-currency-action"/>
>>>    </row>
>>>  </column>
>>> </application-window>
>>>
>>> Here is an example of what a style sheet could look like that  
>>> combined with the layout would produce the same result as the  
>>> original example:
>>>
>>> <style select="application-window" width="300" height="180"/>
>>> <style select="column" align="stretch" valign="stretch"  
>>> padding="9"/>
>>> <style select="row" align="stretch" minimize="vertical"  
>>> valign="bottom"/>
>>> <style select="row.convert" align="right" valign="bottom"  
>>> vflex="1"/>
>>> <style select="label" align="right" flex="2"/>
>>> <style select="editable-number"  text="1.0 flex="1"/>
>>> <style select="row.convert button" default-button="true"/>
>>>
>>> End users (and others) can now customize the presentation style  
>>> of the window by adding a (separate) stylesheet containing the  
>>> styles they want to be different.