반응형
블로그 이미지
개발자로서 현장에서 일하면서 새로 접하는 기술들이나 알게된 정보 등을 정리하기 위한 블로그입니다. 운 좋게 미국에서 큰 회사들의 프로젝트에서 컬설턴트로 일하고 있어서 새로운 기술들을 접할 기회가 많이 있습니다. 미국의 IT 프로젝트에서 사용되는 툴들에 대해 많은 분들과 정보를 공유하고 싶습니다.
솔웅

최근에 올라온 글

최근에 달린 댓글

최근에 받은 트랙백

글 보관함

카테고리


반응형

지난 시간에 얘기했던 것 처럼 오늘부터는 소스를 분석해 보겠습니다.


우선 index.html부터 보겠습니다.

일반 웹페이지 만들 때와 똑 같겠죠? jQuery Mobile로 화면부터 만들고 난 다음에 javascript로 dynamic 한 효과를 줍니다.


그럼 jQuery Mobile을 사용하기 위해서는 관련된 js 파일과 css 파일을 불러와야 겠죠.


그리고 이 앱은 두개의 페이지로 돼 있으니까 data-role="page" 가 들어가 있는 div 를 두개 만들어야 할 겁니다.


나머지는 화면에 보이는대로 각 위젯들을 갖다가 넣으면 됩니다.


그럼 전체 소스를 한번 보죠.


<!DOCTYPE html>
<html>
    <head>
    <title>Mobile To-Do</title>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
    <script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>  
</head>
<body>
<div id="mainPage" data-role="page">
    <div data-role="header">
        <h1>Mobile To-Do List</h1>
        <a href="#addPage" data-role="button" data-icon="plus">New</a>
    </div>
    <div data-role="content">
        <ul id="todoList" data-role="listview">
            <li data-priority="2" data-role="list-divider">Important</li>
            <li data-priority="1" data-role="list-divider">Normal</li>
            <li data-priority="0" data-role="list-divider">Low</li>
        </ul>       
    </div>
</div>
<div id="addPage" data-role="page">
    <div data-role="header">
        <a href="#mainPage" data-role="button" data-icon="back">Back</a>
        <h1>New To-Do</h1>
        <a href="#mainPage" id="createButton" data-role="button" data-icon="plus">Create</a>
    </div>
    <div data-role="content">
        <div data-role="fieldcontain">
            <label for="todoDescription">Description:</label>
            <input type="text" name="todoDescription" id="todoDescription" value=""  />
        </div>
        <div data-role="fieldcontain">
            <label for="todoUrgency" class="select">Urgency:</label>
            <select name="todoUrgency" id="todoUrgency" data-native-menu="false">
                <option value="2">Important</option>
                <option value="1" selected="selected">Normal</option>
                <option value="0">Low</option>
            </select>
        </div>       
    </div>
</div>
</body>
</html>


첫번째 줄의 <!DOCTYPE html> 는 HTML5를 사용한다는 태그이구요.

그 다음부터 본격적인 html 이 시작됩니다.

먼저 head 부분이 오게 되는데 이곳에는 title이 있고 필요한 자바스크립트나 스타일 쉬트 파일을 참조하는 태그들이 있습니다.

여기서는 jQuery Mobile을 사용하기 위해 필요한 두개의 자바스크립트 파일과 한개의 스타일 쉬트 파일을 참조했습니다.

오늘은 화면 구성만 할 거기 때문에 다른 dynamic한 처리를 하기 위한 자바스크립트는 일단 제외했습니다.

그건 다음글에서 다룰 생각입니다.


그 다음 나오는 <body> 서부터가 실제로 브라우저에 표시될 내용들입니다.

우선 data-role="page" 가 있는 div를 두개 만들어서 jQuery Mobile에서 사용할 두개의 페이지를 나눕니다. 하나는 mainPage 이고 또 다른 하나는 addPage 이네요.


우선 mainPage 부터 볼까요.


이 mainPage에는 header와 contents 가 있습니다. 이 둘을 나누는 것은 data-role= 를 이용해서 나누구요. 물론 div안에 그것을 넣습니다.

header 부분에는 제목과 New 버튼이 들어가네요.

jQuery Mobile의 header에서는 링크를 만들면 자동적으로 버튼으로 처리하죠?

그리고 그 버튼은 좌,우 각 한개씩 두개까지 만들 수 있습니다.


여기서는 이 New 버튼을 누르면 뭔가가 실행이 되겠네요.#addPage로 링크가 걸렸으니까 그 페이지가 뜰 겁니다.

그럼 addPage는 새로운 것을 입력하는 form 이겠네요.

그건 나중에 보기로 하고.....

그 다음 content 부분에서는 세개의 item 이 있는 listview를 만들었습니다.

data-role 이 listview로 돼 있죠? 그 다음에 아이템들에는 data-role이 list-divider로 돼 있고 각각 data-priority 가 등록 돼 있습니다.

이제 첫번째 페이지가 완성 됐네요.


여기까지 하면 위 화면을 볼 수 있습니다.

다음 두번째 페이지인 addPage를 볼까요.

여기도 mainPage와 마찬가지로 header와 contents 두개가 가장 윗단에 있습니다.

헤더 안에는 #mainPage로 가는 링크가 두개가 있네요. 이 링크는 data-role이 button 입니다.

두개가 다른 것은 두번째 버튼(Create)에는 id="createButton" 이 있습니다

(data-icon 도 다르네요.)

두번째 버튼에 id 를 준 것은 이 아이디를 가진 버튼이 클릭 됐을 때 자바스크립트에서 어떤 동작을 하도록 하기 위해서 입니다.

이 자바스크립트 부분은 다음 글에서 분석해 보겠습니다.

두번째로 content 부분을 볼까요.

여기엔 data-role="fieldcontain" 부분이 두개가 있습니다.

첫번째 것에는 Label 하고 input 박스가 있습니다.

두번째 input 박스에는 id="todoDescription" 이 있죠? 이렇게 id 가 있는 태그는 대부분 자바스크립트에서 어떤 처리를 하는데 필요한 것들이라고 보시면 됩니다.

두번째 fieldcontain에는 Label 하고 select 메뉴가 있습니다. 디폴트로 Normal 이 select 되도록 되 있네요.


두번째 화면을 브라우저에서 실행시키면 위와 같이 됩니다.


첫번째 화면에서 New를 클릭하면 두번째 화면이 나오고 두번째 화면에서 Back을 하거나 Create 버튼을 누르면 다시 첫번째 화면이 나오죠.

아직 자바스크립트 부분을 완료하지가 않아서 form에 value를 넣고 Create를 눌러도 첫번째 화면에는 아무런 변화가 없을 겁니다.

그 자바스크립트 부분은 다음 글에서 다룰 께요.

반응형