<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich"
xmlns:imageSelectTool="http://richfaces.org/sandbox/imageSelectTool"
>
<head>
<title>ImageSelectTool sample</title>
<style type="text/css">
input.short {
width: 30px;
}
</style>
</head>
<body class="rich-container">
<ui:include src="menu.xhtml"/>
<p>
</p>
<rich:messages ajaxRendered="true"/>
<h:panelGrid columns="3">
<h:panelGroup>
<h:form>
<h:panelGrid columns="2">
<h:outputLabel value="srcImage" for="srcImage"/>
<h:inputText value="#{cropper.srcImage}" id="srcImage"/>
<h:outputLabel value="minWidth" for="minWidth"/>
<h:inputText value="#{cropper.minWidth}" id="minWidth"/>
<h:outputLabel value="minHeight" for="minHeight"/>
<h:inputText value="#{cropper.minHeight}" id="minHeight"/>
<h:outputLabel value="maxWidth" for="maxWidth"/>
<h:inputText value="#{cropper.maxWidth}" id="maxWidth"/>
<h:outputLabel value="maxHeight" for="maxHeight"/>
<h:inputText value="#{cropper.maxHeight}" id="maxHeight"/>
<h:outputLabel value="backgroundColor" for="backgroundColor"/>
<h:inputText value="#{cropper.backgroundColor}" id="backgroundColor"/>
<h:outputLabel value="backgroundOpacity" for="backgroundOpacity"/>
<h:inputText value="#{cropper.backgroundOpacity}" id="backgroundOpacity"/>
<h:outputLabel value="aspectRatio" for="aspectRatio"/>
<h:inputText value="#{cropper.aspectRatio}" id="aspectRatio"/>
</h:panelGrid>
<h:commandButton value="Submit"/>
</h:form>
<div id="coords"/>
<input type="text" id="x" class="short"/>
<input type="text" id="y" class="short"/>
<input type="text" id="width" class="short"/>
<input type="text" id="height" class="short"/>
<input type="button" id="setSelection" value="Set selection"/>
<input type="button" id="animateTo" value="Animate to"/>
<h:form>
</h:form>
</h:panelGroup>
<h:graphicImage value="#{cropper.srcImage}" id="image"/>
<rich:panel id="result">
#{cropper.selection}
</rich:panel>
</h:panelGrid>
<script type="text/javascript">
function updateInputs(event) {
jQuery('#coords').html('selected:' + event.x + ';' + event.y + ';' + event.width + ';' + event.height);
jQuery('#x').val(event.x);
jQuery('#y').val(event.y);
jQuery('#width').val(event.width);
jQuery('#height').val(event.height);
}
jQuery('#setSelection').click(function() {
selector.setSelection(
parseInt(jQuery('#x').val()),
parseInt(jQuery('#y').val()),
parseInt(jQuery('#width').val()),
parseInt(jQuery('#height').val())
);
});
jQuery('#animateTo').click(function() {
selector.animateTo(
parseInt(jQuery('#x').val()),
parseInt(jQuery('#y').val()),
parseInt(jQuery('#width').val()),
parseInt(jQuery('#height').val())
);
});
</script>
<h:form>
<imageSelectTool:imageSelectTool id="selector"
for="image"
var="selector"
value="#{cropper.selection}"
aspectRatio="#{cropper.aspectRatio}"
backgroundColor="#{cropper.backgroundColor}"
backgroundOpacity="#{cropper.backgroundOpacity}"
maxHeight="#{cropper.maxHeight}"
maxWidth="#{cropper.maxWidth}"
minWidth="#{cropper.minWidth}"
minHeight="#{cropper.minHeight}"
onchange="updateInputs(event);"
onselect="updateInputs(event);reRenderResult()"/>
<a4j:jsFunction name="reRenderResult" reRender="result"/>
<a4j:commandButton value="ReRender image" reRender="image"/>
<a4j:commandButton value="ReRender imageSelectTool" reRender="selector"/>
<a4j:commandButton value="ReRender both" reRender="selector,image"/>
</h:form>
<rich:insert src="/index.xhtml" highlight="xhtml" rendered="#{showSource!=false}"/>
</body>
</html>