또한 테이블과 같이 형식에 있는 컴포넌트를 정렬할 수 있습니다.
목록 유형 그룹 상자에는 하나의 열 또는 행만
사용할 수 있지만 눈금 유형 그룹 상자에서는 원하는 만큼의 행 및 열을 사용할 수 있습니다. 이 단계에서 {PRICE} 및
{PHONE} 컴포넌트를 테이블의 DESCRIPTION 열로 이동할 수 있고 컴포넌트에 대한 레이블을 포함할 수 있습니다.
- 팔레트의 향상된 Faces 컴포넌트 드로어에서 데이터 테이블의 DESCRIPTION 열로 패널 - 그룹 상자 컴포넌트를 끌어오십시오. 유형 선택 창이 열립니다.
- 추가할 컴포넌트 유형으로 눈금을 클릭하고 확인을 클릭하십시오.
- 새 눈금 그룹 상자를 클릭하십시오.
- 특성 보기를 사용하여 이 그룹 상자의 열 수가 2가 되도록 설정하십시오.
- 팔레트의 Faces 컴포넌트 드로어에서 눈금 그룹 상자로 출력 컴포넌트를 갖다 놓으십시오. 이 출력 컴포넌트는 판매용 항목의 설명에 대한 레이블입니다.
각 출력 컴포넌트에는 테이블의 왼쪽 셀에
이와 같은 레이블을 가지게 됩니다.
- 출력 컴포넌트(Page Designer에 outputText로 표시)를 클릭하고 특성 보기를 사용하여 Description:의 값에 지정하십시오.
- 눈금 그룹 상자의 맨 아래 에지로 기존 {DESCRIPTION} 컴포넌트를 끌어오십시오. 그룹 상자의 오른쪽 위치로
컴포넌트를 끌어다 놓는 데 문제가 있는 경우 마우스 단추를 클릭한 채로 커서를 주목하십시오. 그룹 상자의 커서 위치는 마우스 단추를 놓을 때 컴포넌트가 표시되는 곳을 나타냅니다. 이 학습에서는 커서가 이전 컴포넌트의 오른쪽에 있을 때 마우스
단추를 놓아야 합니다.
- 팔레트에서 다른 출력 컴포넌트를 끌어 그룹 상자의 오른쪽에 놓으십시오.
- 특성 보기를 사용하여 이를 Price:의 값에 지정하십시오.
- 가격 출력 텍스트의 오른쪽에 있는 기존 {PRICE} 출력 컴포넌트를 끌어 놓으십시오.
- 같은 방법으로 {PHONE} 컴포넌트의 레이블에 해당하는 새 출력 컴포넌트를 끌어와서 Phone:으로 레이블을 붙이십시오.
- 기존 {PHONE} 컴포넌트를 전화번호 출력 텍스트 오른쪽에 있는 눈금 그룹 상자로
끌어오십시오. 페이지가 다음과 같이 표시됩니다.
- 데이터 테이블의 빈 PRICE 및 PHONE 열은 삭제하십시오. 열을
삭제하려면 열을 클릭하여 특성 보기를 여십시오. 그런 다음, 보기의 왼쪽에 있는 HTML 태그 목록에서 h:dataTable를 클릭하고 보기의 오른쪽에 있는 목록에서 삭제할 열을 선택한 후 제거를 클릭하십시오.
- DESCRIPTION 열의 헤더를 클릭하고 특성 보기를 사용하여 값 필드를 세부사항으로 변경하십시오. 페이지가 다음과 같이 표시됩니다.
- 페이지를 저장하고 테스트하십시오. 서버에서 응용프로그램을 실행하는 것에 대한 자세한 정보는 학습 1.3: 웹 사이트 테스트를 참조하십시오.
페이지를 테스트할 때, 페이지가 다음과 같이 표시됩니다.
연관된 이미지가
포함되지 않은 특정 광고는 깨진 링크를 표시합니다. 다음 학습에서는
광고 이미지를 추가 또는 변경하기 위해 파일 업로드 컴포넌트를 페이지에 표시하는
방법에 대해 확인할 수 있습니다.
단추를 클릭하십시오.
페이지 데이터 오브젝트 선택 창이 열립니다.
