Simple ZK deprecated

{{Template:UnderConstruction}}


<span style="font-family: Times New Roman, georgia, serif;color: #444; margin: 0;padding: 0px 0px 6px 0px;font-size: 44px;
	line-height: 44px;letter-spacing: -2px;font-weight: bold;">
Construct Great UI  Fast 
</span>



<div style="font-family:Verdana; font-size: 16px;line-height: 14px;letter-spacing: 2px;font-weight: bold;">
Construct a great user interface fast by combining ZK components.
</div>

<div style="margin-left:auto;margin-right:auto;width:410px">
[[File:Getstarted-simpleZK-UI.png]]

</div>




<div style="font-family:Verdana; font-size: 16px;line-height: 14px;letter-spacing: 2px;font-weight: bold;">
The source of UI above is easy to read.
</div>

<source lang="xml">

	<window border="normal" width="400px" style="padding-top:20px;padding-left:20px;" title="Welcome! New User">
		<grid hflex="1">
			<auxhead>
				<auxheader colspan="2" label="Registration Form" style="font-size:16px" image="../images/picture.png"/>
			</auxhead>
			<columns>
			</columns>
			<rows >
				<row >
					User Name <textbox hflex="1"/>
				</row>
				<row >
					Blood Type 
					<combobox hflex="1">
						<comboitem label="A" value="A" image="../images/bloodtypeA.png"/>
						<comboitem label="B" value="B" image="../images/bloodtypeB.png"/>
						<comboitem label="O" value="O" image="../images/bloodtypeO.png"/>
						<comboitem label="AB" value="AB" image="../images/bloodtypeAB.png"/>
					</combobox>
				</row>
				<row >
					Birthday <datebox hflex="1"/>
				</row>
				<row spans="2" align="center" >
					<hlayout>
						<checkbox /> Accept Term of Use
					</hlayout>
				</row >
				<row spans="2" align="right">
					<hlayout>
						<button label="Reset" />
						<button label="Submit" disabled="true"/>
					</hlayout>
				</row>
			</rows>
		</grid>
	</window>

</source>


<span style="font-family: Times New Roman, georgia, serif;color: #444; margin: 0;padding: 0px 0px 6px 0px;font-size: 44px;
	line-height: 44px;letter-spacing: -2px;font-weight: bold;">
Control UI Component Directly 
</span>


<div style="font-family:Verdana; font-size: 16px;line-height: 14px;letter-spacing: 2px;font-weight: bold;">
Use Java object to change UI dynamically.
</div>

When users check "Accept Term of Use" checkbox, we enable "Submit" button. Otherwise we disable the button.

<source lang="java">

	@Listen("onCheck = checkbox")
	public void changeSubmitStatus(){
		if (acceptTermCheckbox.isChecked()){
			submitButton.setDisabled(false);
		}else{
			submitButton.setDisabled(true);
		}
	}
</source>



<div style="font-family:Verdana; font-size: 16px;line-height: 14px;letter-spacing: 2px;font-weight: bold;">
Manipulate UI components as what you want.
</div>



<source lang="java">

	@Listen("onClick = button[label='Reset']")
	public void reset(){
		nameBox.setValue("");
		bloodTypeBox.setValue("");
		birthdayBox.setValue(null);
	}

</source>


<span style="font-family: Times New Roman, georgia, serif;color: #444; margin: 0;padding: 0px 0px 6px 0px;font-size: 44px;
	line-height: 44px;letter-spacing: -2px;font-weight: bold;">
Easy Event Handling 
</span>











<span style="font-family: Times New Roman, georgia, serif;color: #444; margin: 0;padding: 0px 0px 6px 0px;font-size: 44px;
	line-height: 44px;letter-spacing: -2px;font-weight: bold;">
Improve User Experience is Simple
</span>


<!--
font style ref:
http://3.7designs.co/blog/2008/06/10-examples-of-beautiful-css-typography-and-how-they-did-it/

Short sentence. 
Elegant font style.

-->