Xoetrope
View
Login Sitemap Contact Us RSS
Home product

Screenshots •  Videos •  Demos •  Documentation •  Tutorials •  Articles •  Knowledge Base •  Zone


Templates in Survey Applications

The layout of survey application pages can be configured via an included templates. This is makes it possible to define custom layout for each question or for subcomponents.

Question Page templates

Question Page templates define a layout for questions that appear on a single page. A simple example of such template is shown below.

 
 
Listing 1 - sample Question Page template
 
 
 
<XPage question_page="questionPage" 
  finish_page="ThankYou" 
  class="com.xoetrope.swing.survey.XQuestionPage">
	
  <Components>
    <Panel layout="Box" x="0" y="20" w="800" h="440" 
      style="Question" layoutStyle="1">
		
      <Repeat while="${hasMoreQuestions()}">   
        <Include execute="${getNextQuestion()}"
          file="${getCurrentQuestionTemplate()}"/>
					
      </Repeat>
    </Panel>
  </Components>
	
</XPage>
 
 

The question_page attribute of the <XPage> element specifies the next question page that should be shown (in most cases this will be same page as the current one). The finish_page is a page that will be shown when the survey is over. The com.xoetrope.swing.survey.XQuestionPage class, associated with the page, serves as a main "entry point" to the survey API.
As the page xml is parsed the methods: hasMoreQuestions(...), getNextQuestion(..), getCurrentQuestionTemplate(..) are invoked which results in including the templates for successive questions belonging to the current question group. The getCurrentQuestionTemplateMethod(...) returns the name of the file (template) for the current question type.

Question Component templates

Each Question Component template contains an xml defining how the questions of certain type should appear on the page. The Listing 2 shows a sample template for the mutually exclusive type of question.

 
 
Listing 2 - sample Question Component template
 
 
 
<XPage>
  <Components>
    <Panel layout="Border" w="800" h="120" 
      constraint="center" opaque="false" border="0">
		
      <Panel constraint="north" w="800" h="60" 
        opaque="true" style="Question/Header">        
        <Label name="qtext" x="20" w="400" h="20" 
          content="${getCurrentQuestion()}" 
            constraint="CENTER" antialias="true" opaque="false"/>
      </Panel>
			
      <Panel layout="Flow" layoutStyle="0" 
        constraint="CENTER" w="800" h="100" opaque="false">
				
        <Layout vgap="15" hgap="8"/>
        <Repeat while="${hasMoreOptions()}">
          <Include file="radiobutton"/>					
        </Repeat>
      </Panel>
			
    </Panel>
  </Components>
</XPage>
 
 

The template "iterates" over the options of the current question taking an advantage of the API provided by the XQuestionPage class. Each iteration includes a subcomponent template which, in this case is a radioButton as the current question type is mutually exclusive.

Subcomponent templates

Subcomponent templates specify the layout of the question's available responses, set up the bindings and define the action events.

 
 
Listing 3 - sample Subcomponent template
 
 
 
<XPage>
  <Components>
    <RadioButton w="100" h="20" qid="${getCurrentQuestionId()}" 
      content="${getNextOption()}" name="${getCurrentOptionName()}" 
      opaque="false"/>	  
  </Components>
	
  <Data>
    <Bind target="${getCurrentOptionName()}" 
      source="${getExclusiveOptionModelPath()}" 
      output="${getExclusiveOptionModelPath()}" reeval="false"/>
  </Data>
	
  <Events>
    <Event method="handleMouse" 
      target="${getCurrentOptionName()}" type="MouseHandler"/>
  </Events>	
</XPage>
 
 

The template from the listing above includes the actual radioButton component to the page, sets up the required bindings and events in order to save the answers given by the user. Each method being used by the template is defined in the XQuestionPage class

Generated Question Page

The screenshot below shows one of the sample application's question pages built with the templates described above

 
 
 Sample question page