XForms Tutorial > I-6.2.7. The select Element

xforms:select Element
 
이 폼 컨트롤은 HTML의 <select>와 유사한 유저인터페이스를 제공한다. HTML <select> 컨트롤이 리스트 아이템 선택을 선택하는 방식에 있어서 하나의 컨트롤을 통해 Single 및 Multiple 선택을 지원한다면 XForms는 Single과 Multiple를 분리하여 컨트롤을 제공한다. select element는 multiple 선택을 지원하는 XForms 컨트롤이다.
Common Attributes : Common, UI Common, Single Node Binding
Special Attributes : incremental, selection
  • selection
  • Optional attribute로서 디폴트 값은 “closed” 이다.
  • 이 어트리뷰트는 HTML <select> 컨트롤의 Drop-Down List 형식으로 입력이 불가능한 기능을 개선할 수 있다. 즉, selection 값이 true인 경우 콤보 박스에서 입력 가능한 인터페이스를 제공한다.
  • Data Binding Restrictions
  • Binds to xsd: any derived simpleContent
  • 바인딩시 주의 사항
  • select element 에 바인딩 되는 instance와 Common Markup for Selection Control에 바인딩 되는 instance의 의미는 다르다.
  • 실제 select element에 보여 주는 리스트 아이템은 select에 바인딩시키는 것이 아니라 item element와 value element에 바인딩 시켜야 한다.
  • select element 에 바인딩하는 것은 사용자가 선택했을 경우 그 값을 저장하기 위해 사용되는 instance 이다.
  • 참조 사항
  • 리스트 형식은 공백 문자들로 구분된 값들을 갖는다. 예를 들어 select element를 통해 아이템을 Multiple 로 선택했을 경우 그 선택된 값은 로 바인딩 된 인스턴스 노드로 세팅되게 된다. 이 때 여러 개 선택된 아이템을 구분하는 문자가 공백이다. 따라서 아이템의 value 값에 공백 문자를 사용했을 경우에는 의도된 결과와는 다르게 동작할 수 있다.
appearance="full" appearance="compact" appearance="minimal"
Sample. list datatypes의 예 
…(생략)...
<item>
 <value>United States of America</value>
  ...
</item>
…(생략)...
  • 위와 같은 value은 리스트 데이터형인 경우 의도한 결과와는 다르게 4개의 값, “United”, “States”, “of”, “America”으로 처리 될 것이다.
Sample. 기본적인 예제 
…(생략)...
<xforms:model>
 <xforms:instance>
  <root>
   <listitems>
    <depts> 
     <id>DEV</id>
     <desc>제품개발팀</desc> 
    </depts>
    <depts> 
     <id>SI</id>
     <desc>시스템통합 사업팀</desc> 
    </depts>
   </listitems>
       
   <selectitems />
  </root>
 </xforms:instance> 

 <xforms:bind id="bind_depts" nodeset="listitems/depts" />
</xforms:model>

</head>

<body>
 <xforms:select ref="selectitems"> 
  <xforms:itemset bind="bind_depts">
   <xforms:label ref="desc" />
   <xforms:value ref="id" />
  </xforms:itemset>   
 </xforms:select>
 
 <br />
 <xforms:input ref="selectitems" >
  <xforms:label> 선택한 아이템의 코드는 : </xforms:label>
 </xforms:input>
</body>
…(생략)...
  • 출력하고자 하는 인스턴스의 바인딩과 선택했을 때 그 값을 저장하고자 인스턴스 바인딩을 분리해야 한다.
  • select element를 통해 바인딩하는 대상은 선택한 값을 저장하고자 하는 인스턴스를 지정해야 한다.
  • itemset 그리고 label,value element를 통해 바인딩하는 대상은 출력하고자 하는 인스턴스를 지정해야 한다.

라벨:

댓글 없음:

댓글 쓰기

피드 구독하기: 댓글 (Atom)