jquery mobile - listview

자바스크립트 모바일 프레임웍 하면 가장 먼저 관심을 가지게되는 것은 무엇일까요? 대부분의 분들이 아마도 얼마나 멋지고 많은 UI를 제공하는지가 가장 관심의 대상일 것입니다. 이것은 매우 자연스러운 결과라고 생각되는데 가장 먼저 사람들에게 보여지는 부분이기 때문입니다. 일반적인 사용자는 내부 구조나 동작 방식에 대해서는 별 관심이 없고 관심 가질 이유도 없기 때문이겠죠. 얼마나 이쁘고 화려하고 멋진 UI 로 내가 원하는 컨텐츠를 제공하는가가 일반 사용자에게는 최고의 관심거리이고 사용자를 만족시켜야하는 개발자는 우선적으로 프레임웍을 바라볼 때 기본 제공되는 UI에 관심을 가질 수 밖에 없습니다.

이런 저런 이유로 UI 는 매우 중요하면서도 늘 이슈의 중심에 있습니다. 이번 강좌에서는 바로 jQueryMobile 이 기본 제공하는 UI 부분에 대해서 알아보도록 하겠습니다.

UI 는 다뤄야하는 분량이 매우 많기 때문에 하나의 강좌에서 모두 다루지 못하고 몇번에 걸쳐 나누어 연재될 예정입니다. 강좌를 올리는 기본 단위를 일주일로 하고있지만 UI 부분은 조금 더 자주 강좌를 올릴 생각입니다. 

ListView

화면의 크기가 제한적인 모바일 앱의 UI 에서 가장 많이 사용하는 UI 컨트롤은 ListView일 것입니다. 매우 일반적이고 중요한 컨트롤인 만큼 쓰임도 다양하고 구성 방법도 다양합니다. 먼저 가장 기본적인 형태부터 차근 차근 익혀나가보도록 하겠습니다.

ListView - 기본형 / Read-only list

 

ListView 는 기본적으로 목록 컨텐츠 입니다. 그렇기 때문에 HTML 마크업중 목록을 표현하는 <UL> <OL> 태그를 사용합니다. 물론 data-role 속성을 지정해 줘야 jQueryMobile 이 지원하는 ListView 로 랜더링되어서 표시되겠지요? 

첫번째 예제를 보면 <UL> 태그에 data-role 속성을 listview로 지정한 것을 보실 수 있습니다. 사실 data-role="listview" 속성을 제외한다면 일반적인 <UL> 마크업과 완전히 100% 동일합니다. 결과적으로 오른쪽의 모양으로 랜더링되어 표시됩니다. 가장 간단한 형태의 ListView 이고 jQueryMobile 에서는 좀더 특별하게 클릭되어 동작되지 않는 ListView 라하여 Read-only list 라고 부릅니다.

ListView - Inset

 

기본형 ListView 는 좌측 여백이 전혀 없이 표시됩니다. 하지만 우리가 일반적으로 봐왔던 ListView는 상하좌우에 약간의 여백이 존재하는 형태였습니다. 더불어 리스트목록 모서리느 둥근 모양을 취하고 있죠. 이런 모양은 어떻게 만들 수 있을까요? 

두번째 예제를 보시면 간단히 이런 형태를 만들 수 있습니다. <UL> 태그에 data-inset 속성을 추가해줌으로서 가능합니다. 지정하지 않았을 경우 기본값은 false 이고 위의 예제처럼 true 로 기본값을 바꿔주면 자주 접하던 모서리가 둥근 모양을하고 사방에 약간의 여백을 가진 ListView 가 만들어집니다. 

ListView - Sub header or Divider

 

ListView 목록중 특정 항목은 대표성을 부여하고 다르게 표시하고 싶다면 어떻게 해야할까요? 대표적인 형태가 연락처 목록인데요 'ㄱ' 으로 시작하는 연락처, 'ㄴ' 으로 시작하는 연락처등으로 구분되는 형태입니다. 예제와 같이 'Apple' 항목은 푸른색으로 다르게 표시됩니다. 

지금까지 <UL> 태그에 속성을 부여했다면 이번에는 개별 항목별로 속성을 부여해야하기 때문에 <LI> 태그에 속성을 부여해야합니다. 예제와 같이 data-role 속성에 list-divider 값을 줌으로서 부타이틀 또는 분할자 (Divider) 아이템을 지정할 수 있습니다. 이 속성을 이용하면 연락처 같은 형태의 목록을 만들 수 도 있고 또는 많은 목록을 그룹화하여 그룹의 타이틀 역할로 만들 수 도 있습니다. 

ListView - Link

 

지금까지의 예제 ListView 는 모두 Read-only 였습니다. 즉 클릭해도 아무런 변화가 없는 목록이었는데요 목록을 클릭해서 다음 화면으로 이동하려면 어떻게 하는지 알아보겠습니다. 

화면을 전환하기 위해서 사용하는 일반적인 방법으로 <A> 태그를 사용합니다. <LI> 태그 안쪽의 컨텐츠를 <A> 태그로 링크를 만들어주면 아주 간단하게 클릭되어 화면전환할 수 있는 ListView 가됩니다. 또한 이런 항목은 예제의 결과에서 보시는 것 처럼 오른쪽 끝단에 작은 화살표 아이콘이 표시되어 클릭되지 않는 항목과 구분해줍니다.

그리고 읽기전용과는 다르게 상하 여백이 생겨 약간 더 폭이 넓게 랜더링됩니다. 

ListView - 목록에 일련번호 넣기

 

이번 예제는 잘 쓰이지는 않지만 그래도 간혹 필요한 경우가 있는 기능입니다. ListView 항목에 일련번호를 표시하려면 어떻게 해야할까요? jQueryMobile 은 아주 쉬운 방법을 제공해줍니다. 눈치 빠른 분이라면 벌써 아실텐데, ListView 를 구성하는 <UL> 태그와 <OL> 태그의 성격을 아신다면 쉽게 사용하실 수 있습니다.

<UL>은 순서없는 목록태그, <OL>은 순서있는 목록태그입니다. 즉 <UL> 을 <OL> 로 바꿔만주면 jQueryMobile 은 ListView 각 항목의 <LI> 항목에 예제 결과와 같이 일련 번호를 표시해줍니다. 

일련 번호를 표시하기 위해 컨텐츠 자체에 번호를 넣지 않아도됩니다.

ListView - Split

 

이번에는 조금 더 복잡한 형태의 ListView 를 만들어보도록 하겠습니다. 복잡하다고 해도 구성 원리만 안다면 복잡한 구성도 간단하게 만들 수 있습니다. 예제 결과와 같은 ListView 는 어떤 원리로 만들어지는 것일까요? 먼저 항목의 구성 요소를 먼저 보도록 하겠습니다.

Google 내용을 표시하는 항목은 세개의 구성요소로 이루어져있습니다. Google 이라는 단어와 Google inc 라는 단어 그리고 별표 아이콘입니다. 마크업 코드를 보면 <LI> 태그에 모두 차례로 마크업되어있습니다. 

자 그럼 어떤 방식으로 각각 결과처럼 랜더링 될까요? 원리는 매우 간단합니다. <LI> 태그 내에는 두개의 <A> 태그가 올 수 있습니다. 그리고 각각 첫번째 나타는 <A> 태그는 왼쪽에 표시되고 - 결과화면의 Google - 두번째 <A> 태그는 오른쪽에 표시됩니다. 아주 간단하죠? 그리고 링크가 아닌 일반 텍스트는 첫번째 <A> 링크 아래에 줄바꿈 되어 표시됩니다. 예제에서는 <P> 태그내의 텍스트가 되겠습니다. 

그런데 이상한 점이 있습니다. 두번째 <A> 링크의 텍스트는 분명 Google 인데 결과 화면에는 별표 아이콘으로 표시되었습니다. 무슨 일이 벌어진걸까요? 해답은 <UL> 태그의 새로운 속성을 보면 알 수 있습니다.

<UL> 태그에는 두개의 속성이 추가되어있는데 각각 data-split-icon 속성과 data-split-theme 속성입니다. Split ListView 는 두번째 <A> 링크를 항상 아이콘으로 랜더링 하게 되어있습니다. 따라서 두번째  <A> 링크의 텍스트는 text-indent 속성에 마이너스 값이 지정되어 화면에 표시되지 않습니다. 대신 data-split-icon 에 지정된 아이콘이 표시됩니다. 아이콘 값은 jQueryMobile 이 기본 지원되는 많은 아이콘이 있는데 이는 테마 강좌를 할 때 자세히 설명하도록 하겠습니다. data-split-theme 는 테마를 지정합니다. 간단하게 a, b, c, d, e 다섯가지 테마를 지정할 수 있는데 각각 다른 컬러 값을 가집니다. 이 또한 테마 강좌에서 자세히 다뤄보도록 하겠습니다.

ListView - Count

 

메일함을 보여주는 앱에서 흔히 볼 수 있는 숫자가 표시된 ListView를 만들어보도록 하겠습니다. 역시나 아주 간단하게 만들 수 있는데요 예제와 같이 <span> 태그를 추가하고 <span> 태그의 class 속성에 ui-li-count 를 지정해주면 됩니다. ui-li-count 스타일은 jQueryMobile 이 제공하는 스타일 입니다.

ListView - Aside text

 

오른쪽에 부가정보를 표시해야할 때가 있습니다. 이 경우도 예제와 같이 간단하게 처리할 수 있습니다. class 속성에 ui-li-aside 를 지정해주면 됩니다. 그러면 예제 결과화면처럼 표시됩니다. 이때 주목해 봐야 할 것이 있는데 <LI> 태그 내의 컨텐츠가 각각 어느 위치에 랜더링 되는가 입니다. 지금까지 설명한 각 각의 항목들을 유심히 지켜보신 분들은 쉽게 아실 수 있으리라고 판단되어 자세한 설명은 하지 않도록 하겠습니다.

ListView - icon

 

좀더 모양을 꾸미기위해 아이콘 같은 이미지를 삽입하려면 어떻게 해야할까요? 예제와 같이 <IMG> 태그를 삽입해서 아이콘을 삽입할 수 있습니다. 그런데 반드시 <IMG> 태그의 class 속성에 ui-li-icon 값을 지정해줘야합니다. 왜 그럴까요? 헤더 텍스트의 위치정렬 때문에 그렇습니다. 아이콘은 기본적으로 20픽셀 이하의 작은 크기인데 텍스트는 이보다 더 큰 경우가 많아서 정확히 한줄로 랜더링 되기 힘듭니다. 따라서 ui-li-icon 이라고 명시해 줌으로서 정렬을 보다 정교하게 할 수 있습니다.

이와는 반대로 아이콘이 아닌 섬네일 크기의 큰 이미지를 삽입할 경우는 ui-li-icon 속성을 주면 안됩니다. 이 경우는 그냥  <IMG> 태그만을 삽입해서 해결할 수 있습니다.

출처 - http://www.webdevmobile.com/xe/index.php?mid=lectureboard&page=2&document_srl=22972