[Openmcl-devel] Lisp User Interface LUI

[Terje Norderhaug]

On Jan 7, 2009, at 5:38 PM, Alexander Repenning wrote:
> On Jan 4, 2009, at 3:49 PM, Terje Norderhaug wrote:
>> On Jan 2, 2009, at 11:30 AM, Alexander Repenning wrote:
>>> This may be a good moment to discuss some of the ideas regarding  
>>> the creation of LUI, the "Lisp User Interface as a cross  
>>> platform, but Mac first" open source GUI tool.
>>
>> I favor an approach in which the user interface to a high degree  
>> automatically adapt to each platform. That is, the goal is NOT to  
>> create user interfaces that looks and works similar on the  
>> different platforms, but instead adheres to their different HUI  
>> conventions and usability practices. Case in point, I once hoped  
>> CLIM would be a good fit for adaptive user interfaces, but got  
>> disappointed.
>
> Perhaps a better way that is not quite as adaptive would be to deal  
> with a 2 level approach. The first level would be low level control  
> wrappers such:
>
> <slider max-value="2.0"/>
>
> Currently we have this turn into a Cocoa control in CCL Mac and a  
> Window slider widget on Allegro. Modulo some size issue which can  
> be compensated for with automatic layout this can produce native  
> looking controls. Still, the guidelines on Mac and PC do differ. A  
> simple example would be the arrangement of OK, Cancel buttons. One  
> could have a higher level representation, also in XML, to capture  
> this via high level design pattern that may be rendered into the  
> concrete stuff.

It would be beneficial to separate the layout/grouping from the  
presentation style. Consider your example:

-------------- next part --------------
A non-text attachment was scrubbed...
Name: unknown.png
Type: image/png
Size: 15737 bytes
Desc: not available
URL: <https://lists.clozure.com/pipermail/openmcl-devel/attachments/20090108/11c34ce1/attachment.png>
-------------- next part --------------

<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.

One further step could be to facilitate internationalization of the  
application by moving the english language labels into the style  
sheet. That way, translating to another human language can be  
achieved by amending the original stylesheet with one containing just  
the alternative language for the labels.

-- Terje Norderhaug