웹앱 과정 - 제이쿼리 모바일 (4)

#제이쿼리 모바일 대화상자와 폼

대화상자(dialog box)

• 팝업 창 형태의 페이지
• 둥근 모서리와 바깥 여백, 그림자 등의 스타일이 적용되어 기존 페이지 위에 표시됨
• 확인 창이나 경고 창, 액션시트 스타일 등의 유형을 만들 때 사용

<!-- 링크 페이지의 유형을 대화상자로 선언 -->
<a href="#" data-rel="dialog"></a>
<!-- 페이지 유형을 대화상자로 선언 -->
<div data-role="dialog" id="dialog-id">

• 두 번째 바람이 더 바람직하다. 대화상자를 연결하는 버튼마다 data-rel="dialog" 속성을 모두 설정할 필요 없이 단 한 번만 페이지 유형을 대화상자로 설정하면 되기 때문
• 페이지가 열릴 때 중앙에서 점점 확대되는 팝업(pop up)이 기본 화면 전환 효과
• 왼쪽 위에 자동 생성된 닫기 버튼을 선택하면 대화상자는 축소되어 닫히고 이전 페이지가 다시 표시됨
• 이력(history) 정보를 남기지 않음
  • 뒤로 가기 버튼을 클릭하더라도 돌아갈 대화상자에 관한 기록이 없기 때문에 대화상자 페이지를 호출했던 처음 페이지도 돌아감

액션시트(action sheets)

• 헤더와 푸터가 없는 특별한 대화상자
• 보통 사용자의 의견을 묻고 응답을 요청하는 경우에 사용됨
• 취소를 포함한 선택 가능한 작업 항목들을 제시할 목적으로 사용되므로 보통 둘 이상의 버튼을 포함

<a href="#dialog2" data-transition="slidedown">액션시트 페이지</a>

<div data-role="dialog" id="dialog1">
  <div data-role="content">
    <p>액션 시트</p>
    <p>삭제하시겠습니까?</p>
    <a href="#" data-role="button" data-rel="back">예</a>
    <a href="#" data-role="button" data-rel="back">아니오</a>
  </div>
</div>

• 액션시트는 헤더와 푸터가 없기 때문에 대화상자를 닫을 수 있는 링크 버튼이 꼭 필요
• data-rel="back" : 이전 페이지로 되돌아감
• 헤더 없이 화면 윗부분에 붙어있기 때문에 보통 ‘slidedown’ 페이지 전환 효과와 함께 사용됨

페이지 테마

• a : 색상 계열 은색, 일반적인 기본 테마
• b : 색상 계열 검정, 선명한 테마
• 페이지 전체 또는 일부 요소만 다른 테마를 설정할 수 있다.
• 테마를 별도로 정의하지 않으면 보통 부모 엘리먼트의 테마를 상속받는다.

디자인 테마 : 사용자가 직접 26개의 하위 테마를 정의함으로써 독자적인 테마를 적용할 수 있다. 참고 : jquery mobile gallery 테마롤러(Theme Roller) 사이트에서 좀더 쉽게 제이쿼리 모바일 테마를 만들 수 있다. 테마롤러는 사용자 정의 테마 라이브러리 파일을 쉽게 생성할 수 있는 웹 기반의 GUI 개발 도구

콘텐츠 영역의 레이아웃

• 스마트폰은 화면 크기가 작고 폭이 좁음 -> 모바일 페이지의 레이아웃 구성이 중요

기본 레이아웃 형식

• 바 레이아웃 (bar layout)
  • 콘텐츠 영역 안에 제목처럼 한 줄 단위의 정보를 표시
  • class="ui-bar" 속성값에 ui-bar-a부터 ui-bar-b까지의 속성값을 추가로 함께 설정하여 툴바와 비슷한 양식을 만들 수 있다.
• 블록 레이아웃 (block layout)
  • 콘텐츠 영역 안에 사각형 모양의 박스 영역을 생성하여 내용들을 규칙적으로 배치하거나 특정 내용을 강조
  • class="ui-body" 속성값에 ui-body-a 부터 ui-body-b까지의 속성값을 추가로 함께 설정하여 독립된 내용 공간을 만들 수 있다.
• 그리드(격자) 레이아웃(grid layout)
  • 문자열이나 이미지를 행이나 열에 맞추어 일정한 간격으로 배치
  • 화면을 균등하게 여러 행 또는 여러 열로 분할하는 다중 분할 레이아웃
  • 버튼이나 네비게이션바, 아이콘 집합 등 작은 요소들을 나란히 나열할 경우 적합
  • 화면 전체 너비의 100%를 사용

그리드 레이아웃 형식

• 그리드 컨테이너(grid container)
  • 그리드 레이아웃은 둘 이상의 블록들을 갖는 그리드 컨테이너를 생성함으로써 만들어진다.
  • 그리드 컨테이너 내부에 포함하는 열의 개수에 따라 적절한 ui-grid-* 클래스 속성값을 명세해야 하며, 최대 5개의 열까지 가능
  • ui-grid-a : 그리드 열 개수 2 ui-block-a, ui-block-b
  • ui-grid-b : 그리드 열 개수 3 ui-block-a, ui-block-b, ui-block-c
  • ui-grid-c : 그리드 열 개수 4 ui-block-a, ui-block-b, ui-block-c, ui-block-d
  • ui-grid-d : 그리드 열 개수 5 ui-block-a, ui-block-b, ui-block-c, ui-block-d, ui-block-e
• 그리드 블록(grid block)
  • 그리드 안에 생성되는 열의 개수만큼 그리드 블록이 그리드 컨테이너 내부에 생성됨
  • 해당 엘리먼트가 몇 번째 블록에 해당하는지를 지정하기 위해 a~e 값을 사용
  • 각 블록들을 식별하기 위해 ui-block-* 속성값을 지정
  • ui-block-a : 왼쪽 첫번째 블록
  • ui-block-b : 왼쪽 두번째 블록
  • ui-block-c : 왼쪽 세번째 블록
  • ui-block-d : 왼쪽 네번째 블록
  • ui-block-e : 왼쪽 다섯번째 블록
• 다중 열 그리드 레이아웃
  • 콘텐츠 영역을 같은 크기의 2열~5열로 분할
  • 최대 5열로 분할된 그리드 레이아웃을 생성할 수는 있지만 스마트폰의 작은 화면 크기를 고려해 2열이나 3열 레이아웃이 적절
  • 앱 아이콘들을 균등하게 배치한 스프링보드 화면도 그리드 레이아웃을 통해 생성 가능
• 다중 행 그리드 레이아웃
  • 콘텐츠 영역의 여러 행으로 균등 분할
  • 새로운 행이 추가될 때마다 자동으로 줄바꿈

    제이쿼리 모바일은 그리드 안의 모든 블록들을 기본적으로 같은 크기로 분할한다. 스타일을 추가로 정의하여 블록의 크기를 서로 다르게 할 수 있다.

  .ui-grid-a .ui-block-a { width: 75% }
  .ui-grid-a .ui-block-a { width: 25% }

접이식 패널 레이아웃

• 내용을 선택적으로 보일 수 있음
• 특정 영역이 접혔다 펼치기를 반복하며 내용을 숨기거나 표시
• 스마트폰의 좁은 화면 영역에서 전체 내용을 개략적으로 빠르게 파악할 수 있어 내용 검색을 위해 화면 스크롤을 반복하는 번거로움도 피할 수 있다.
• 접이식 패널 안의 블록에는 텍스트, 버튼, 리스트뷰, 폼 요소 등이 포함될 수 있다.

기본 접이식 패널(basic collapsible panel)

• 콘텐츠 영역에 접이식 패널을 여러 개 배치
• <div> 태그에 data-role="collapsible" 속성을 설정함으로써 생성
• 패널 블록은 패널 제목과 패널 내용으로 구성됨
• 보통 패널 제목은 <h1>~<h6> (어떤 태그를 사용해도 표시되는 제목의 스타일은 모두 같음), 패널 내용은 <p> 태그를 이용하여 명세
• 여러 <h> 태그를 사용할 경우, 첫 번째 <h> 태그를 패널 제목으로 표시되고, 나머지 <h> 태그들은 일반 제목처럼 패널 제목 안에 표시됨
• 접이식 패널 안에 <h> 태그가 하나도 없다면 패널은 닫히지 않고 항상 펼쳐져 있게 되니 주의!
• 패널 제목은 클릭할 수 있는 버튼으로 표시됨

중첩 접이식 패널(nested collapsible panel)

• 바깥쪽 패널은 안쪽 패널의 컨테이너가 되어 계층적 패널 블록을 구성
• 중첩 단계에 제한은 없지만 화면 공간 크기와 내부 DOM 트리의 복잡성 등을 고려해 2~3단계 정도가 적당

그룹 접이식 패널(group collapsible panel)

• 여러 접이식 패널들을 하나의 그룹으로 묶은 것
• 하나의 연결된 요소로 동작
• 한 번에 하나의 접이식 패널만 선택하여 펼칠 수 있음
• 단일 접이식 패널 컨테이너 상위에 data-role="collapsible-set" 속성을 갖는 <div> 태그를 설정
• 새로운 접이식 패널을 펼치게 되면 이전에 펼쳐졌던 패널은 자동으로 접힌다
• ‘아코디언 패널’이라고 불리기도 한다.
• 기본적으로 모든 패널은 접힌 상태로 표시됨
• 특정 패널에 data-collapsed="false" 속성을 설정하면 그 패널은 처음부터 펼쳐진 상태로 표시된다.
• 접이식 패널에 data-theme와 data-content-theme 속성을 지정하면 패널 제목 영역과 패널 내용 영역의 테마를 한꺼번에 변경 가능
• 그룹 접이식 패널 안에는 중첩 접이식 패널 포함 불가

폼 요소

• 사용자와의 상호작용을 위해 필수적 요소
• 표준 HTML5 태그 형식의 네이티브 폼 컨트롤을 자동으로 모바일 폼 컨트롤로 렌더링
• data-role 속성을 지정하지 않아도 자동으로 변환 및 표시된다.
• 브라우저가 HTML5 태그를 지원하지 않거나 data-role="none" 속성값을 지정하면 대체 옶션으로 네이티브 폼 컨트롤이 표시된다.

HTML5 표준 폼 태그

• 폼 태그 (<form>)
  • 입력 컨트롤과 관련 정보를 묶어 하나의 입력폼으로 그룹화하고 전송 방식을 설정
  • 입력폼 영역의 시작과 끝을 지정하며 웹 브라우저에 표시되지는 않는다.
  • <form> 태그 하위에 <input>, <select>, <textarea> 등의 태그를 이용하여 입력 컨트롤을 생성하여 폼 완성
  • action : URL 주소를 속성값으로 가지고, 사용자 입력 정보를 전송할 위치(처리 프로그램의 주소)를 지정
  • method : GET 또는 POST를 속성값으로 가지고, 사용자 입력 정보의 전송 방식을 지정한다.
  • name : 문자열을 속성값으로 가진다. 폼의 이름

GET 방식: URL 주소에 입력 정보(변수명+변수값)를 추가해서 문자열로 보내는 방식 POST 방식: URL 주소가 아닌 내부적(트랜잭션)으로 보내는 방식, 비교적 보안성이 높고 전송량에 제한이 없다.

• 입력 태그 (<input>)
  • type 속성값에 따라 다양한 입력 컨트롤 생성
  • 보통 <form> 태그의 하위 태그로 명세하며 정보를 입력받는 가장 기본적인 방식
  • 시작과 종료 태그를 합친 <input /> 형태로 명세
  • text : 문자열 입력양식
  • password : 비밀번호 입력양식
  • hidden : 글자 숨김 입력양식
  • checkbox : 체크박스 버튼 (복수 선택)
  • radio : 라디오 버튼 (단일 선택)
  • button : 일반 버튼
  • submit : 전송 버튼 (데이터를 서버에 전송)
  • reset : 초기화 버튼 (입력 데이터를 모두 지움)
  • image : 이미지 전송 버튼
  • file : 파일 업로드 입력양식
  • name : 입력폼 안에서 명명하기 위한 입력양식 이름, 데이터 전송 시 변수명으로 사용
  • id : 입력폼 안에서 식별하기 위한 고유한 입력양식 식별자
  • value : 컨트롤의 표시 제목이나 내부 기본값(기본 문자열)을 지정, 데이터 전송시 전달될 변수값을 지정
  • max : 입력 최댓값
  • min : 입력 최솟값
  • step : 입력 증분값
  • search : 키워드 검색 입력양식
  • tel : 전화번호 입력양식
  • email : 이메일 입력양식
  • url : URL 웹주소 입력양식
  • number : 숫자 입력양식 (스핀버튼 선택)
  • range : 숫자범위 입력양식 (슬라이드 막대 이동)
  • month : 월 입력양식
  • week : 주 입력양식
  • date : 날짜 입력양식
  • time : 시간 입력양식
  • datetime : 날찌시간 입력양식
  • datetime-local : 지역날짜시간 입력양식
  • color : 색상 입력양식
• 라벨 태그(<label>)
  • 입력 컨트롤에 대한 의미나 설명을 표시
  • <label> 태그의 라벨 문자열과 특정 입력 컨트롤을 연결하려면 <input> 태그의 id 속성값을 <label> 태그의 for 속성값으로 설정 -> <label> 태그의 영역을 선택하더라도 연결된 입력 컨트롤이 자동으로 선택됨
• 복수 문자열 입력 태그(<textarea>)
  • 여러 줄에 걸친 긴 문자열 입력
• 선택 태그 (<select>)
  • 나열된 목록 항목 중 하나를 선택할 수 있는 선택 입력 컨트롤을 생성
  • multipel="multiple"을 설정하면 여러 항목을 동시에 선택할 수 있다.
• 옵션 그룹화 및 옵션 태그 (<option>)
  • <select> 태그나 <optgroup> 태그의 하위 태그로 사용되어 선택할 수 있는 항목들을 표시
  • <optgroup> 태그는 <select> 태그의 하위 태그로 <option> 태그의 선택 항목들을 하나로 묶어 그룹화
  • <optgroup> 태그 안의 label 속성은 선택 옵션 그룹에 대한 이름, 반드시 설정해야 하는 필수 속성
• 입력 양식 그룹화 및 그룹 설명 태그 (<fieldset>)
  • 입력폼 안의 서로 연관된 입력 컨트롤들을 하나로 묶어 그룹화
  • 폼 안의 입력 컨트롤들을 화면 공간에서 분류함으로써 이해하기 쉽도록 함
  • <legend> 태그는 <fieldset> 태그로 묶은 입력 양식 그룹에 대한 설명을 표시하며, <fieldset> 태그의 하위에 표시해야 한다.

네이티브 폼 컨트롤

• 폼 안에 data-role="none" 속성을 추가하면 네이티브 스타일의 폼 컨트롤을 사용할 수 있다.
• 네이티브 스타일(native style): 제이쿼리 모바일이 적용되지 않은 HTML5 태그의 원래 표준 웹 양식

모바일 폼 컨트롤 : 입력 상자(input box)

• 문자나 숫자값을 입력받는 가장 기본적인 폼 컨트롤
• <input> 태그의 type 속성값에 따라 폼 컨트롤 유형이 결정됨
• 둥근 모서리의 긴 상자 모양 컨트롤로 화면 너비에 비례하여 자동 변경됨
• 모바일 폼 요소 그룹화
  • 보통 폼 컨트롤들은 사용자에게 입력 정보를 안내하기 위해 <label> 태그를 함께 쌍으로 묶어 사용
  • data-role="fieldcontain" 속성을 갖는 <div> 태그로 감싸서 둘 이상의 모바일 폼 컨트롤을 하나의 그룹처럼 표시 -> 필드 컨테이너 (field container)
  • 레이블과 폼 컨트롤들을 정렬시키고 다른 컨트롤과 경계선으로 구분짓는 일종의 래퍼
  • 화면의 너비에 따라 자동으로 레이아웃이 조절된다.

    <div data-role="fieldcontain">
      <label for="아이디">라벨명</label>
      <input type="입력 유형" name="변수명" id="아이디">
    </div>
  

  • name 속성값으로 변수명을 명세하면 입력받은 값을 저장하고 이후 추가적인 처리가 가능
• 단일행 입력 상자
  • 가장 간단한 폼 입력 유형
  • <input> 태그의 type="text" 속성값을 준 것
  • <label> 태그의 문자열은 <input> 태그와 연결되더라도 다른 줄에 각각 표시됨
  • 모바일 폼 컨트롤은 모바일 장치의 특성을 고려하여 한 줄에 오직 하나만 표시되기 때문
  • 모바일 화면의 너비가 커지면 한 줄에 나란히 표시되기도.
  • <label> 태그 안의 for 속성은 의미적으로 연관된 입력 상자 엘리먼트의 id 속성 값을 가짐
  • <input> 태그를 <label> 태그로 직접 감싸는 것으로도 가능 -> 이렇게 할 경우 for 속성 불필요
  • 그러나 <label>의 for 속성과 <input>의 id를 연결시키는 방법이 가장 바람직하다.
  • class="ui-disabled" : 해당 영역에 있는 폼 요소들을 비활성화할 수 있다. 비활성화하면 선택이나 입력이 불가능해진다.
• 다양한 입력 상자
  • <input> 태그는 입력 값의 유형을 고려하여 type 속성값을 지정
  • type 속성값은 text 이외에도 password, HTML5에서 새로 추가된 number, email, tel, url, search 등이 가능.
  • 모두 비슷한 모양의 입력 컨트롤이 표시된다.
  • 실제 입력할 때는 각 입력 유형에 맞는 가상 키보드가 화면에 표시된다.
  • placeholder : 폼 컨트롤에 기본 값으로 보여지는 내용을 지정
  • ui-hidden-accessible 클래스 : 레이블을 생략
• 다중 행 입력 상자
  • <textarea>

    <textarea cols="열개수" rows="행개수" id="아이디"></textarea>
  

  • 자동 확장(auto-growing) 기능이 적용됨 -> 스크롤바를 사용할 필요가 없음
  • 입력 상자의 크기가 입력되는 문자열의 크기에 비례하여 자동으로 늘어남
• 슬라이더(slider)
  • 이동 바를 좌우로 움직여 최소값과 최대값 사이의 값을 선택하도록 하는 모바일 폼 컨트롤러
  • <input> 태그에 type="range" 속성값을 지정
  • value : 슬라이더의 초기값
  • min : 슬라이더의 최솟값
  • max : 슬라이더의 최댓값
• 스위치 (switch)
  • 서로 대비되는 두 가지 선택 항목 중 하나만 선택 가능한 모바일 폼 컨트롤
  • 대비되는 두 가지 선택 항목은 <option> 태그로 설정
  • <select> 택그 안에 data-role="slider" 속성을 추가

    <select name="변수명" id="아이디" data-role="slider">
      <option value="변수설정값1">옵션1</option>
      <option value="변수설정값2">옵션2</option>
    </select>
  

• 라디오 선택 버튼
  • 선택 항목 중 오직 하나만 선택 가능
  • <input> 태그 안에 type="radio" 속성 설정
  • name과 id 속성은 반드시 설정
  • type="radio" 속성을 갖는 모든 <input> 태그들은 name 속성값이 같아야 함. 다를 경우, 하나가 아닌 여러 항목이 선택될 수 있다.
  • 둘 이상의 라이도 버튼을 그룹으로 묶으려면 <fieldset> 태그로 감싸고 data-role="controlgroup" 속성을 추가.
  • 그룹으로 묶인 버튼 사이의 경계선과 여백은 사라지며 버튼은 컨테이너의 너비에 비례하여 세로 방향으로 나열됨
  • <legend> : <fieldset> 태그의 첫 번째 하위 엘리먼트, 어떤 선택에 관한 것인지의 그룹 제목 표시
  • <label>은 개별 폼 컨트롤에 관한 설명을 위해, <legend> 태그는 폼 컨트롤 그룹 전체에 관한 설명을 위해 사용
  • data-type="horizontal" : 가로 방향으로 나열
• 체크 상자 버튼
  • 선택 항목 중 여러 개를 동시에 선택할 때 사용
  • <input> 태그 안에 type="checkbox" 속성을 설정

    <input type="checkbox" name="변수명" id="아이디" value="변수설정값" />
  

  • checked="checked" 속성은 처음부터 선택되어 있는 항목들에 설정됨
  • 상위에 <fieldset> 태그를 생성하고 그 안에 data-role="controlgroup" 속성을 추가하면 버튼들을 그룹으로 묶을 수 있음

모바일 폼 컨트롤 : 선택 메뉴

• 기본 선택 메뉴(select menu)
  • <select> 태그를 사용하여 여러 항목 중 하나를 선택하도록 하는 폼 컨트롤
  • 비활성화 상태일 때는 하나의 항목만 표시됨
  • 활성화되면 드롭다운 목록이 펼쳐져 목록 중 하나를 선택 가능
  • 표시 공간이 작아 효율적

    <select name="변수명" id="아이디">
      <option> 안내글 </option>
      <option value="변수설정값">옵션</option>
      ...
    </select>
  

  • <option> 태그의 value 속성이 없다면 그 항목은 선택 대상에서 제외됨.
  • data-placeholder="true" 속성값이 지정된 항목도 선택 불가능. disabled="disabled" 속성값을 추가해도 선택할 수 없도록 비활성화됨
  • 선택 항목 수가 적으면 메뉴가 대화 창 모양으로 표시됨
  • 항목 수가 많아 화면 영역을 벗어나게 되면 스크롤 페이지로 변경됨
• 그룹 선택 메뉴
  • 항목들을 몇 개의 그룹으로 묶을 수 있고 <optgroup> 태그 안에 label 속성값을 설정하여 각 그룹의 이름을 선택 항목들 사이에 표시 가능
  • 다른 부류의 선택 항목들을 메뉴에 표시할 때 서로를 구분하기 위해 사용
  • 선택 메뉴의 항목들을 그룹핑하는 효과

    <optgroup label="그룹명">
      <option value="변수설정값">옵션</option>
      ...
    </optgroup>
  

  • data-inline="true" : 선택 메뉴의 표시되는 폭이 선택 문자열 크기에 맞추어 조절됨
• 변형 선택 메뉴
  • <select> 태그 안에 data-native-menu="false" 속성을 지정 -> 선택 메뉴가 대화 상자와 비슷한 모양으로 표시됨
  • multiple 속성을 설정하여 동시에 여러 항목 선택 가능
  • 여러 항목을 선택하고 선택 메뉴를 닫으면 선택 항목들이 표시되고 선택된 개수도 추가로 표시됨
  • 플레이스홀더를 지정하면 선택 후에는 선택 메뉴의 제목으로 변경 표시됨
  • 플레이스홀더를 별도로 지정하지 않으면 기본적으로 목록의 첫 번째 항목이 지정됨
  • data-placeholder="true" 설정은 data-native-menu="false" 설정이 있을 때만 유효

플레이스홀더

• 선택 메뉴의 첫 항목이 기본 제목으로 보여지는 것을 원하지 않을 경우 사용
• 대신 보여질 다른 제목을 설정하는 3가지 방법이 가능
  • 1) 옵션에 특정 값을 지정하지 않고 문자열 추가

    <option>선택하세요</option>
  

  • 2) 옵션에 특정 값과 문자열이 지정된 경우, data-placeholder="true" 속성을 추가

    <option value="xxx" data-placeholder="true">선택하세요</option>
  

  • 3) 힌트나 제목이 없는 선택 메뉴를 만들고자 할 경우, 빈 옵션을 지정

    <option value=""></option>