<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
	xmlns:g="urn:import:com.google.gwt.user.client.ui"
	xmlns:m="urn:import:de.swm.commons.mobile.client.widgets"
    xmlns:ms="urn:import:de.swm.commons.mobile.client.widgets.scroll">
	<ui:style>
		.modify {
			-webkit-box-orient: vertical !important;
			-webkit-box-align: start !important;		
			
			-ms-flex-direction: column !important;
			-ms-flex-align: start !important;
		}
	</ui:style>
	
	<ui:with field='icon' type='de.swm.mobile.kitchensink.client.theme.icon.IconResources'/>
	
	
	<g:HTMLPanel>
		<m:HeaderPanel ui:field="header" leftButton="Back">
			<m:OnlyDesktopLabel>Check Box</m:OnlyDesktopLabel>
		</m:HeaderPanel>
		<ms:ScrollPanel>
			<m:ListPanel selectable="false">
				<m:ListItem styleName="{style.modify}">
					<g:Label>Horizontal</g:Label>
					<m:CheckBoxGroup ui:field="group1" vertical="false">
						<m:CheckBox>iPhone</m:CheckBox>
						<m:CheckBox>Android</m:CheckBox>
						<m:CheckBox>BlackBerry</m:CheckBox>
						<m:CheckBox>WP7</m:CheckBox>
					</m:CheckBoxGroup>
				</m:ListItem>
				<m:ListItem styleName="{style.modify}">
					<g:Label>Vertical</g:Label>
					<m:CheckBoxGroup ui:field="group2">
						<m:CheckBox>iPhone</m:CheckBox>
						<m:CheckBox>Android</m:CheckBox>
						<m:CheckBox>BlackBerry</m:CheckBox>
						<m:CheckBox>WP7</m:CheckBox>
					</m:CheckBoxGroup>
				</m:ListItem>
				<m:ListItem styleName="{style.modify}">
					<g:Label>with Image</g:Label>
					<m:CheckBoxGroup ui:field="group3">
						<m:CheckBox image="{icon.bus_small}"></m:CheckBox>
						<m:CheckBox image="{icon.ubahn_small}"></m:CheckBox>
						<m:CheckBox image="{icon.tram_small}"></m:CheckBox>
					</m:CheckBoxGroup>
				</m:ListItem>
			</m:ListPanel>			
		</ms:ScrollPanel>
	</g:HTMLPanel>	
</ui:UiBinder>