Adding More Elements

파일 찾기 대화창에 몇 가지 상자를 추가하면서 상자에 대한 논의를 마무리 하겠습니다.

우리의 파일 찾기 예제에 몇가지 요소 추가하기

이제 파일 찾기 대화창에 몇 가지 요소를 추가하겠습니다. 먼저 파일크기 및 날짜와 같은 정보를 검색할 수 있는 기능을 추가할 것입니다.

<hbox>
  <menulist id="searchtype">
    <menupopup>
      <menuitem label="Name"/>
      <menuitem label="Size"/>
      <menuitem label="Date Modified"/>
    </menupopup>
  </menulist>
  <spacer style="width: 10px;"/>
  <menulist id="searchmode">
    <menupopup>
      <menuitem label="Is"/>
      <menuitem label="Is Not"/>
    </menupopup>
  </menulist>
  <spacer style="width: 10px;"/>
  <textbox id="find-text" flex="1" style="min-width: 15em;"/>
</hbox>
Image:boxfinal1.png

2 개의 드롭 다운 상자가 대화창에 추가되었습니다. 이들을 구분짓기 위해서 각 요소 사이에 spacer가 추가되어 있습니다. 이들 spacer는 각각 10픽셀 너비가 주어졌습니다. 창 크기가 바뀌면, 글상자는 커지지만 다른 구성요소는 그대로 있는 것을 보실 수 있습니다. 또한 라벨이 제거된 것을 보실 수 있습니다.

세로 방향의 창 크기를 바꾸더라도, 해당 요소들의 크기는 변하지 않습니다. 이것은 해당 요소가 가로상자 내부에 있기 때문입니다. 만일 찾기(Find)와 취소(Cancel) 버튼이 항상 창 하단에 있게되면 보기가 더 좋을 것입니다. 이것은 2개의 가로상자 사이에 spacer를 추가해서 간단하게 처리할 수 있습니다.

<spacer style="height: 10px"/>
<hbox>
  <menulist id="searchtype">
    <menupopup>
      <menuitem label="Name"/>
      <menuitem label="Size"/>
      <menuitem label="Date Modified"/>
    </menupopup>
  </menulist>
  <spacer style="width: 10px;"/>
  <menulist id="searchmode">
    <menupopup>
      <menuitem label="Is"/>
      <menuitem label="Is Not"/>
    </menupopup>
  </menulist>
  <spacer style="width: 10px;"/>
  <textbox id="find-text" flex="1" style="min-width: 15em;"/>
</hbox>

<spacer style="height: 10px" flex="1"/>

<hbox>

이제 대화창 크기가 바뀌면, 2개의 버튼은 항상 대화창 하단에 있도록 움직이게 됩니다. 첫번째 spacer는 제목 라벨과 검색 기준 요소 사이에 여백을 추가한 것입니다.

검색 기준 둘레에 선이 있다면 더 보기 좋을 것입니다. 이를 처리할 수 있는 방법에는 두 가지가 있습니다. CSS의 border 속성을 사용하거나 groupbox 요소를 사용할 수 있습니다. 첫 번째 방식은 상자 자체에 스타일 속성을 사용하면 됩니다. 우리는 후자의 방식을 사용할 것입니다. groupbox는 현재의 테마에 어울리는 보기 좋은 둥근 테두리를 가진 상자를 그려주는 장점이 있습니다.

groupbox로 상자를 변경해 보겠습니다.

<groupbox orient="horizontal">
  <caption label="Search Criteria"/>
  <menulist id="searchtype">
  .
  .
  .
  <spacer style="width: 10px;"/>
  <textbox id="find-text" flex="1" style="min-width: 15em;"/>
</groupbox>
Image:boxfinal2.png

마찬가지로 다른 표면적인 문제가 있습니다. groupbox가 상자 하단 세로방향으로 확장되도록 groupbox를 늘릴 수도 있습니다. 또한 해당 요소가 잘 위치되도록 여백의 일부를 수정할 수도 있습니다.

본 자습서를 통해 요소들을 추가하면서 상자 모델과 그것들의 몇 가지 기능들에 대한 기능들에 대한 더 많은 예제를 보게 될 것입니다..

지금까지의 파일 찾기 예제 Source View

다음에는 스택을 작성하는 방법에 대해 알아 보겠습니다.

Document Tags and Contributors

태그:
Contributors to this page: Suguni
Last updated by: Suguni,