<?xml version="1.0" encoding="UTF-8"?>
<Application autoNameMapping="true">
	<Window>

		<!-- 
			
			- Composite Component test -
			
			. load the text of a textfield into the a label at startup
			. update the text in the label as we type and set a warning icon that text changed
			. fake a commit when pressing the button : remove warn icon and set the text to the top(blue) label
			
		-->
		
		<Component width="250" height="80" border="2px groove">
			
			<!-- icon -->
			<Image Property.name="myIcon" height="16" width="16" top="4" right="4" 
				zIndex="99999"  uri="../../html/images/infomark.16.gif" visible="false"
				toolTipText="Text has changed!"/>

			<!-- top label -->
			<Label Property.name="myTopLabel" top="0" left="0" right="0" padding="4" paddingLeft="8" 
				foreColor="FFFFFF" backColor="#3399CC" border="1px outset"/>
			 
			<!-- label -->
			<Label Property.name="myLabel" top="26" left="4" right="4" padding="4" backColor="#EFEFEF">
				<EventListener type="create">	<!-- grab text at startup. -->
					<Reference type="property" name="text">
						<Reference.arguments>
							<Reference type="property" src=".parent.myTextField" name="text"/>
						</Reference.arguments>
					</Reference>
				</EventListener>
			</Label>
				
			<!-- input field -->
			<TextField Property.name="myTextField" text="Text" top="50" left="4" right="34">			
				<EventListener type="keyup">
					<Reference type="property" src=".parent.myLabel" name="text">
						<Reference.arguments>
							<Reference type="property" name="text"/>
						</Reference.arguments>
					</Reference>
				</EventListener>

			</TextField>
			<EventListener type="textchanged" target=".myTextField">
				<Reference type="property" src=".myIcon" name="visible" arguments="true"/>
			</EventListener>			
			<!-- commit button -->
			<Button text="set" top="50" right="4">
				<EventListener type="action">
					<Reference type="property" src=".parent.myTopLabel" name="text">
						<Reference.arguments>
							<Reference type="property" src=".parent.myLabel" name="text"/>
						</Reference.arguments>
					</Reference>
					<Reference type="property" src=".parent.myIcon" name="visible" arguments="false"/>
				</EventListener>		
			</Button>
	
		</Component>

        <TextField id="myField" top="170"/>
        <Label top="200" left="4">
            <EventListener target="#myField" type="textchanged">
                <Reference type="property" name="text">
                    <Reference.arguments>
                        <Reference type="property" src="#myField" name="text"/>
                    </Reference.arguments>
                </Reference>
            </EventListener>
        </Label>

	</Window>
</Application>