Thanks to the pointer from Alex Rufon, I started looking at OpenLazlo.
It will take some time to see how useful it is with J.
Here are some amusing screen shots of my initial play:
<!-- J Sample notes -->
<!-- Menu Key Command Text is truncated. -->
<!-- Default buttons needed padding to line up with wrapped button. -->
<!-- Rich text input won't work in view. -->
<!-- Rotated slider looses max,min,value text. -->
<canvas bgcolor="#EAEAEA" width="600" height="400" >
<include href="lz"/>
<dataset name="items1">
<item value="item1" >apples</item>
<item value="item2" >bananas</item>
<item value="item3" >cherries</item>
<item value="item4" >dates</item>
</dataset>
<dataset name="items2">
<item value="item1" >January</item>
<item value="item2" >February</item>
<item value="item3" >March</item>
<item value="item4" >April</item>
<item value="item5" >May</item>
<item value="item6" >June</item>
<item value="item7" >July</item>
<item value="item8" >August</item>
<item value="item9" >September</item>
<item value="item10" >October</item>
<item value="item11" >November</item>
<item value="item12" >December</item>
</dataset>
<dataset name="items3">
<item value="item1" >Antwerp</item>
<item value="item2" >Brussels</item>
<item value="item3" >Copenhagen</item>
<item value="item4" >Danzig</item>
<item value="item5" >Essen</item>
<item value="item6" >Frankfurt</item>
<item value="item7" >Gstaad</item>
<item value="item8" >Hamburg</item>
<item value="item9" >Illford</item>
<item value="item10" >Krakow</item>
<item value="item11" >Lausanne</item>
</dataset>
<dataset name="items4">
<item value="Goose" >Goose</item>
<item value="Geese" >Geese</item>
<item value="Moose" >Moose</item>
<item value="Meese" >Meese</item>
<item value="Tooth" >Tooth</item>
<item value="Teeth" >Teeth</item>
<item value="Booth" >Booth</item>
<item value="Beeth" >Beeth</item>
</dataset>
<dataset name="items5">
<item value="item1" >Semi Annual</item>
<item value="item2" >Annual</item>
<item value="item3" >Monthly</item>
<item value="item4" >Quarterly</item>
</dataset>
<command id="cmd_new"
onselect="Debug.write('EXECUTED command new')"
key="['Control','Shift','N']"/>
<command id="cmd_open"
onselect="Debug.write('EXECUTED command open')"
key="['Control','Shift','O']"/>
<command id="cmd_exit"
onselect="Debug.write('EXECUTED command exit')"
/>
<resource name="docbutton_rsrc">
<frame src="icons/doc.png"/>
<frame src="icons/doch.png"/>
<frame src="icons/docp.png"/>
</resource>
<resource name="folderbutton_rsrc">
<frame src="icons/folder.png"/>
<frame src="icons/folderh.png"/>
<frame src="icons/folderp.png"/>
</resource>
<resource name="printerbutton_rsrc">
<frame src="icons/printer.png"/>
<frame src="icons/printerh.png"/>
<frame src="icons/printerp.png"/>
</resource>
<resource name="qmarkbutton_rsrc">
<frame src="icons/qmark.png"/>
<frame src="icons/qmarkh.png"/>
<frame src="icons/qmarkp.png"/>
</resource>
<resource name="jbutton_rsrc">
<frame src="icons/j.png"/>
<frame src="icons/jh.png"/>
<frame src="icons/jp.png"/>
</resource>
<resource name="rbutton_rsrc">
<frame src="icons/nopush31a.png"/>
<frame src="icons/nopush31h.png"/>
<frame src="icons/apush2a.png"/>
</resource>
<resource name="lbutton_rsrc">
<frame src="icons/nopush32a.png"/>
<frame src="icons/nopush32h.png"/>
<frame src="icons/apush1a.png"/>
</resource>
<simplelayout axis="y" spacing="0"/>
<view x="0" y="0" width="474">
<menubar name="mbar" placement="menubar">
<menu name="file" width="200" >File
<menuitem text="New" command="cmd_new" />
<menuitem text="Open" command="cmd_open"/>
<menuseparator/>
<menuitem text="Exit" command="cmd_exit"/>
</menu>
</menubar>
</view>
<view width="474" >
<simplelayout axis="x" spacing="0"/>
<basebutton resource="docbutton_rsrc"/>
<basebutton resource="folderbutton_rsrc"/>
<basebutton resource="printerbutton_rsrc"/>
<basebutton resource="qmarkbutton_rsrc"/>
</view>
<view x="5" width="464">
<button x="364" width="50">
Cancel
</button>
<button x="414" width="50">
Ok
</button>
</view>
<view width="464" >
<basetabs tabclass="tab" barclass="basetabsbar">
<basetabpane text="buttons">
<view width="464">
<wrappinglayout axis="x" xspacing="200" yspacing="10" />
<view>
<simplelayout axis="y" />
<text> Radio Buttons </text>
<radiogroup id="group1" >
<radiobutton value="1" text="Active"/>
<radiobutton value="2" text="Inactive" selected="true"/>
<radiobutton value="3" text="Done"/>
</radiogroup>
</view>
<view >
<simplelayout axis="y" spacing="0"/>
<button x="25" width="120">
Default Pushbutton
</button>
<button x="25" width="120">
Pushbutton
</button>
</view>
<view>
<simplelayout axis="y" />
<text> Check Buttons </text>
<checkbox id="check1" text="Checked In"/>
<checkbox id="check2" text="Checked Out"/>
</view>
<view>
<basebutton resource="jbutton_rsrc"/>
</view>
</view>
</basetabpane>
<basetabpane text="edits">
<view width="464">
<wrappinglayout axis="x" xspacing="20" yspacing="10" />
<view>
<inputtext fgcolor="red" font="Bookman Old Style" fontstyle="bold" fontsize="64" width="400">J Release 6</inputtext>
</view>
<view>
<inputtext width="200">Single line edit box</inputtext>
</view>
<view>
<inputtext multiline="true" width="200" height="200">Multi line edit box</inputtext>
</view>
</view>
</basetabpane>
<basetabpane text="selects">
<view width="464">
<wrappinglayout axis="x" xspacing="60" yspacing="10" />
<view>
<list id="a1" width="130" multiselect="1" toggleselected="1"
oninit="selectItemAt(0)"
shownitems="4">
<textlistitem datapath="items1:/item"
text='$path{"text()"}'
value='$path{"@value"}'/>
</list>
</view>
<view>
<list id="a5" width="130"
oninit="selectItemAt(0)"
shownitems="1">
<textlistitem datapath="items5:/item"
text='$path{"text()"}'
value='$path{"@value"}'/>
</list>
</view>
<view>
<simplelayout axis="y" spacing="20"/>
<combobox id="cbox2"
oninit="selectItemAt(0)"
shownitems="12">
width="130" editable="false">
<textlistitem datapath="items2:/item/"
text="$path{'text()'}"
value="$path{'@value'}"/>
</combobox>
<combobox id="cbox3"
oninit="selectItemAt(0)"
shownitems="3">
width="130" editable="true">
<textlistitem datapath="items3:/item/"
text="$path{'text()'}"
value="$path{'@value'}"/>
</combobox>
<view>
<simplelayout axis="y" spacing="0"/>
<text text="${a2.value}"/>
<list id="a2" width="130"
oninit="selectItemAt(0)"
shownitems="3">
<textlistitem datapath="items4:/item"
text='$path{"text()"}'
value='$path{"@value"}'/>
</list>
</view>
</view>
<view>
<simplelayout axis="y" spacing="20"/>
<slider id="slid1" width="150" value="50">
<method name="add">
this.setValue(Math.min((this.getValue()+10),this.getMaxValue()))
</method>
<method name="sub">
this.setValue(Math.max((this.getValue()-10),this.getMinValue()))
</method>
</slider>
<view>
<simplelayout axis="x" spacing="0"/>
<basebutton resource="lbutton_rsrc" onclick="slid1.sub();slid2.sub()"/>
<basebutton resource="rbutton_rsrc" onclick="slid1.add();slid2.add()"/>
</view>
<view>
<simplelayout axis="x" spacing="0"/>
<button width="25" onclick="slid3.add()">
<![CDATA[<>]]>
</button>
<slider id="slid3" width="150" trackheight="24" value="0" showrange="0" showvalue="0" thumbheight="0" thumbwidth="0" >
<method name="add">
this.setValue(Math.min((this.getValue()+10),this.getMaxValue()))
</method>
</slider>
</view>
</view>
<view>
<slider id="slid2" width="100" value="50" rotation="90" showrange="1" showvalue="1" >
<method name="add">
this.setValue(Math.min((this.getValue()+10),this.getMaxValue()))
</method>
<method name="sub">
this.setValue(Math.max((this.getValue()-10),this.getMinValue()))
</method>
</slider>
</view>
</view>
</basetabpane>
</basetabs>
</view>
</canvas>
<!-- @LZX_VERSION@ -->
j_wincontrol_demo.lzx.txt