manage_questions.xhtml

Facelet with JSF and EJB3 XHTML

<?xml version="1.0" encoding="UTF-8"?>
<ui:composition 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"
                template="/skins/default/manage_template.xhtml">
                <ui:param name="MenuSelectItem" value="7" />
               <ui:define name="LeftNav">
                   <ui:include src="question_menu.xhtml">
                   	<ui:param name="selectedMenu" value="questions" />
                   </ui:include>
               </ui:define>
               <ui:define name="EFPTitle">
               	<h:outputText value="Questions" />
               </ui:define>
               <ui:define name="OpFormTitle">
               	<h:outputText value="[Questionaire]/[Questions]" />
               </ui:define>
               <ui:define name="EFPForm">
               	<rich:tabPanel switchType="client">
               	<rich:tab label="Question">
               	<h:panelGrid columns="2">
               		<h:outputText value="Question" />
               		<h:inputText value="#{QuestionMBean.question.questionBody}"/>
               		<h:outputText value="Type" />
               		<h:selectOneMenu value="#{QuestionMBean.question.type}">
               			<f:selectItem itemLabel="Single Option" itemValue="radio" />
               			<f:selectItem itemLabel="Single Option with Other" itemValue="radioother" />
               			<f:selectItem itemLabel="Multi Options" itemValue="checkbox" />
               			<f:selectItem itemLabel="Multi Option with Other" itemValue="checkboxother" />
               			<f:selectItem itemLabel="Text" itemValue="textarea" />
               		</h:selectOneMenu>   
               		<h:outputText value="Remark" />
               		<h:inputTextarea value="#{QuestionMBean.question.questionBody}"/>
               		<h:outputText value="Must be choosed" />
               		<h:selectBooleanCheckbox value="#{QuestionMBean.question.mustBeAnswer}"/>
               		<h:outputText value="Word Style" />
               		<h:inputText value="#{QuestionMBean.question.bodyStyle}"/>
               	</h:panelGrid>
               	</rich:tab>
               	<rich:tab label="Answer">
               		<h:panelGrid columns="3">
               			<h:outputText value="Value" />
               			<h:inputText value="#{QuestionMBean.answerOption.answerValue}" />
               			<h:outputText value="" />
               			<h:outputText value="Answer Body"/>
               			<h:inputText value="#{QuestionMBean.answerOption.answerBody}" />
                                <h:inputHidden value="#{QuestionMBean.answerOption.question.id}" />
               			<a4j:commandButton image="/images/but_add4.gif" action="#{QuestionMBean.saveAnswerOption}">
               				<f:param name="id" value="#{QuestionMBean.instance.id}"/>
               				<f:param name="questionId" value="#{QuestionMBean.question.id}"/>
               			</a4j:commandButton> 
               		</h:panelGrid>
               		<h:inputHidden value="#{QuestionMBean.answerOption.question.id}" />
               		<rich:dataTable id="AnsTable" value="" >
                           <h:column>
                           	<f:facet name="header">
                                    <h:outputText value="Order"/>
							   </f:facet>
								#{item.answerValue}
                           </h:column>
                           <h:column>
                           	<f:facet name="header">
                                    <h:outputText value="Answer"/>
							</f:facet>
							#{item.answerBody}
                           </h:column>
                            <h:column>
                           	<f:facet name="header">
                                    <h:outputText value="Operation"/>
							</f:facet>
                            <a4j:commandLink value="Delete" reRender="EditForm:AnsTable" 
                                    action="#{QuestionMBean.removeAnswerOption}">
                                    <f:param name="answerId" value="#{item.id}" />
                            </a4j:commandLink>							
                           </h:column>                                          		
               		</rich:dataTable>
               	</rich:tab>
               	</rich:tabPanel>
               	<h:inputHidden value="#{QuestionMBean.question.questionaire.id}"/>
               	<h:panelGrid columns="2">
               		<h:outputText value="" />
               		<h:panelGrid columns="2">
                            <h:commandButton image="/images/but_qd.gif" value="Save" action="#{QuestionMBean.saveQuestion}">
                            	<f:param name="id" value="#{QuestionMBean.instance.id}" />
                            </h:commandButton>
                            <h:commandButton image="/images/but_qx2.gif" value="Cancel" action="close" onclick="Richfaces.hideModalPanel('EFP'); return false;"/>               		
               		</h:panelGrid>               	
               	</h:panelGrid> 
               </ui:define>               
               <ui:define name="ContentBody">
               	<a4j:form id="CF">
               		<h:panelGrid columns="5" id="AlsoRender">
               			<h:outputText value="Questionaire" />
               			<h:selectOneMenu value="#{QuestionMBean.instance.id}">
               				<f:selectItem itemLabel="Choose one questionaire" itemValue="0" />
               				<f:selectItems value="#{QuestionMBean.questionaries}" />
               				<a4j:support event="onchange" reRender="CF:QuestionTable,CF:AlsoRender" action="#{QuestionMBean.find}">
               				</a4j:support> 
               			</h:selectOneMenu>
                            <a4j:commandLink value="Search" reRender="CF:QuestionTable,CF:AlsoRender" action="#{QuestionMBean.find}">
                            </a4j:commandLink>
               			<h:outputText value=" " />
                            <a4j:commandLink value="Add Question" reRender="EditForm:EFPanel" 
                                    oncomplete="Richfaces.showModalPanel('EFP', {top:'100px', left:'250px', height:'480', width:'400'});" 
                                    action="#{QuestionMBean.findQuestion}">
                                    <f:param name="questionId" value="0" />
                                    <f:param name="id" value="#{QuestionMBean.instance.id}" />
                            </a4j:commandLink>
                      </h:panelGrid>
                       <rich:dataTable id="QuestionTable" value="#{QuestionMBean.questions}" var="item" rows="10">
                           <h:column>
                           	<f:facet name="header">
                                    <h:outputText value="Question"/>
				</f:facet>
				#{item.questionBody}
                           </h:column>
                          <h:column>
                           	<f:facet name="header">
					<h:outputText value="Type"/>
				</f:facet>
				#{item.type}
                           </h:column>                           
                           <h:column>
                           	<f:facet name="header">
								<h:outputText value="Must Be Answered"/>
							</f:facet>
							<h:selectBooleanCheckbox value="#{item.mustBeAnswer}" disabled="true"/>
                           </h:column>
                           <h:column>			
                           	<f:facet name="header">
								<h:outputText value="Operation"/>
							</f:facet>
                            <a4j:commandLink value="Edit" reRender="EditForm:EFPanel" 
                                    oncomplete="Richfaces.showModalPanel('EFP', {top:'100px', left:'250px', height:'480', width:'400'});" 
                                    action="#{QuestionMBean.findQuestion}">
                                    <f:param name="questionId" value="#{item.id}" />
                                    <f:param name="id" value="#{QuestionMBean.instance.id}" />
                            </a4j:commandLink>
                            <h:outputText value=" "/>
                                <h:commandLink value="Remove" action="#{QuestionMBean.removeQuestion}">
                                        <f:param name="question" value="#{item.id}" />
                                        <f:param name="id" value="#{QuestionMBean.instance.id}" />
                                </h:commandLink>
                           </h:column> 
                            <f:facet name="footer">
                            <rich:datascroller pageIndexVar="pageIndex" pagesVar="pages" maxPages="10">
                            <f:facet name="pages">
                            <h:outputText value="#{pageIndex} /#{pages}"></h:outputText>
                            </f:facet>
                            </rich:datascroller>
                            </f:facet>
                       </rich:dataTable>
                   </a4j:form>
               
               </ui:define>
</ui:composition>