|
XWorker is an opensource softeare. You can download XWorker english version from here:
note: Require JDK1.6 java compiler, if use JRE1.6 or JDK1.5 need copy tools.rar to webroot/WEB-INF/lib.
Here I want intruduce YUI plugin:
- How to integrate YUI.
- Use YUI.
- Create high-level components, such as data binding components.
1. How to integrate YUI.
First import YUI things from YUI app document, the things importted is at category PlugIn/ui/web/html/yui.
Second implement thing's toHtml method for convert YUI thing to html.
2. Use YUI
Here is some examples of use YUI things, in xworker IDE you can open these example, here are some screen shorts.
AutoComplete(Example at Project/example/ui/html/yui/AutoComplete):
Autocomplete example convert to XML link this :
<view title="ACJSArray" name="view" bodyAttributes="class='yui-skin-sam'">
<XYUI/>
<DS_JSArray name="jsData" data="['Alabama',
'Alaska',
'Arizona',
'Arkansas',
'California',
'Colorado',
'Connecticut',
'Delaware',
'Florida']"/>
<AutoComplete dataSource="jsData" highlightClassName="'yui-ac-prehighlight'"
useShadow="true" forceSelection="true" useIFrame="true" input="aInput"
minQueryLength="0" name="autoComplete1" typeAhead="true"/>
</view>
Calendar(Example at Project/example/ui/html/yui/Calendar):
Calendar example convert to XML like:
<form title="A Simple Calendar" name="form">
<Calendar id="calendar1" name="aCalendar" iframe="false"/>
<XYUI/>
</form>
DataTable(Example at Project/example/ui/html/yui/DataTable):
Datatable example convert to XML like:
<view title="ATable" name="view">
<CreateCode name="jsArrayCode" code="var bookorders = [
{id:'po-0167', date:new Date(1980, 2, 24), quantity:1, amount:4, title:'A Book About Nothing'},
{id:'po-0783', date:new Date('January 3, 1983'), quantity:null, amount:12.12345, title:'The Meaning of Life'},
{id:'po-0297', date:new Date(1978, 11, 12), quantity:12, amount:1.25, title:'This Book Was Meant to Be Read Aloud'},
{id:'po-1482', date:new Date('March 11, 1985'), quantity:6, amount:3.5, title:'Read Me Twice'}
];"/>
<UtilDataSource responseSchema="{
fields: ['id','date','quantity','amount','title']
}" liveData="bookorders" dataType="YAHOO.util.DataSource.TYPE_JSARRAY" responseType="YAHOO.util.DataSource.TYPE_JSARRAY" name="dataSource"/>
<DataTable width="'100%'" scrollable="true" editable="true" height="'400px'" selectable="true" oDataSource="dataSource" name="bascDataTable">
<columns>
<Column minWidth="100" name="id" key="'id'"/>
<Column resizeable="true" minWidth="300" sortable="true" editor="'date'" name="date" key="'date'"/>
<Column resizeable="true" minWidth="80" editor="'textbox'" name="quantity" key="'quantity'"/>
<Column resizeable="true" minWidth="80" name="amount" key="'amount'"/>
<Column resizeable="true" minWidth="100" name="title" key="'title'"/>
</columns>
<CustomEvents>
<rowDblclickEvent name="tableDbClick" code="function(event, target){
alert('row double clicked!');
}"/>
3. Create high-level components
Here are some examples:
AutoFormDialog(Example at Project/example/ui/html/yui/Apps):
AutoFormDialog example convert to XML like:
<view title="AutoDialog" name="view">
<AutoFormDialog addPrefix="false" name="aDialog" dialogWidth="420px">
<MemoryDataSet label="User" name="aDataSet">
<attribute type="integer" name="id" label="ID" n1AutoComplete="false"/>
<attribute name="name" label="Name" n1AutoComplete="false"/>
<attribute type="integer" name="age" label="Age" n1AutoComplete="false"/>
</MemoryDataSet>
</AutoFormDialog>
<Button label="'Show Dialog'" name="showButton" value="'Show Dialog'">
<Event name="showButotnClick" eventName="click" code="function(){
aDialog.show();
}"/>
</Button>
<XYUI/>
</view>
AutoEditor(Example at Project/example/ui/html/yui/Apps):
AutoEditor example convert to XML like:
<SimpleControl name="aEditor">
<view title="Editor" name="view" belongToHtml="false">
<AutoEditor label="User Admin" dataSet="example:ui:html.yui.Apps:/@autoDialog/@view/@aDilaog/@aDataSet" searchHeight="90" editDialogWidth="420" newDialogWidth="420" name="aEditor"/>
</view>
<result name="success" value="example:ui:html.yui.Apps:/@aEditor/@view"/>
</SimpleControl>
edit
|
