New Features of ZK 6.5"

From Documentation
Line 43: Line 43:
 
{{ZK PE and EE}}
 
{{ZK PE and EE}}
  
−
The Cardlayout is a new component which enables end-users to switch components like switching cards. On tablet, this navigation operation is supported by simply swiping or switching through components. On tablets the swipe actions are handled automatically.
+
The Cardlayout is a new component which enables end-users to switch components like switching cards. On tablet, this navigation operation is supported by simply swiping or switching through components.  
  
−
The following video shows the Cardlayout in action.
+
The image and source below shows an example of the Cardlayout component being used.
 +
 
 +
[[Image:ZKComRef_Cardlayout_Example.png]]
 +
 
 +
<source lang="xml" >
 +
<cardlayout id="card" width="300px" height="200px" style="border:1px solid red" selectedIndex="1">
 +
<div vflex="1" hflex="1" style="background-color:yellow;padding:20px">flex component</div>
 +
<window title="Window Component" border="normal" width="250px">content...</window>
 +
<listbox>
 +
<listhead sizable="true">
 +
<listheader label="name" sort="auto" />
 +
<listheader label="gender" sort="auto" />
 +
</listhead>
 +
<listitem>
 +
<listcell label="Mary" />
 +
<listcell label="FEMALE" />
 +
</listitem>
 +
<listitem>
 +
<listcell label="John" />
 +
<listcell label="MALE" />
 +
</listitem>
 +
<listfoot>
 +
<listfooter>
 +
<label value="This is footer1" />
 +
</listfooter>
 +
<listfooter>
 +
<label value="This is footer2" />
 +
</listfooter>
 +
</listfoot>
 +
</listbox>
 +
</cardlayout>
 +
<hlayout>
 +
<button onClick="card.previous()">previous</button>
 +
<button onClick="card.next()">next</button>
 +
<button onClick='card.setOrient("horizontal".equals(card.getOrient()) ? "vertical" : "horizontal")'>change orient</button>
 +
</hlayout>
 +
</source>
 +
 
 +
==Tablet Behaviour==
 +
 
 +
{{ZKEE}}
 +
 
 +
In addition to the ability to change the Cardlayout view using commands (next and previous) ZK also includes default swipe behaviour for tablets. On swipe in an appropriate direction, the viewport will change which component is shown. The following video demonstrates this behaviour.
 +
 
 +
{{#ev:youtube|qTnIi-LNlR4}}

Revision as of 07:07, 5 September 2012

DocumentationSmall Talks2012SeptemberNew Features of ZK 6.5
New Features of ZK 6.5
Author
Timothy Clare, Potix Corporation
Date
September 12, 2012
Version
ZK 6.5

Device Transparency - desktop, tablet & smartphone support

Touch Event Detection

Detect orientation changes

Responsive Components

HTML 5 Support

File Upload now supports dragging & dropping local files

Input elements support HTML 5 types

Input element supports placeholder

Closable Notification

Calendar support shows the week's number

Autopopup menu for listbox

Scrollview Component

  • Available for ZK:
  • http://www.zkoss.org/product/zkhttp://www.zkoss.org/whyzk/zkeeVersion ee.png

Cardlayout Component

  • Available for ZK:
  • http://www.zkoss.org/product/zkhttp://www.zkoss.org/whyzk/zkeeVersion pe-ee.png

The Cardlayout is a new component which enables end-users to switch components like switching cards. On tablet, this navigation operation is supported by simply swiping or switching through components.

The image and source below shows an example of the Cardlayout component being used.

ZKComRef Cardlayout Example.png 

	<cardlayout id="card" width="300px" height="200px" style="border:1px solid red" selectedIndex="1">
		<div vflex="1" hflex="1" style="background-color:yellow;padding:20px">flex component</div>
		<window title="Window Component" border="normal" width="250px">content...</window>
		<listbox>
			<listhead sizable="true">
				<listheader label="name" sort="auto" />
				<listheader label="gender" sort="auto" />
			</listhead>
			<listitem>
				<listcell label="Mary" />
				<listcell label="FEMALE" />
			</listitem>
			<listitem>
				<listcell label="John" />
				<listcell label="MALE" />
			</listitem>
			<listfoot>
				<listfooter>
					<label value="This is footer1" />
				</listfooter>
				<listfooter>
					<label value="This is footer2" />
				</listfooter>
			</listfoot>
		</listbox>
	</cardlayout>
	<hlayout>
		<button onClick="card.previous()">previous</button>
		<button onClick="card.next()">next</button>
		<button onClick='card.setOrient("horizontal".equals(card.getOrient()) ? "vertical" : "horizontal")'>change orient</button>
	</hlayout>

Tablet Behaviour

Template:ZKEE

In addition to the ability to change the Cardlayout view using commands (next and previous) ZK also includes default swipe behaviour for tablets. On swipe in an appropriate direction, the viewport will change which component is shown. The following video demonstrates this behaviour.

Retrieved from "https://www.zkoss.org/_w/index.php?title=Small_Talks/2012/September/New_Features_of_ZK_6.5&oldid=29677"