모바일 UI 프레임워크란 모바일 디바이스에서 사용자와 콘텐츠간 상호작용 할 수 있도록
개발 모듈로 제공되는 틀을 의미합니다.
안드로이드와 비교하자면 안드로이드는 XML로 UI를 꾸미듯이 하이브리드 앱에서는
HTML5 + 모바일 UI 프레임워크 (안드로이드 XML)
를 이용하여 UI를 꾸밉니다.
모바일 UI 프레임워크는 네이티브 앱과 UX가 거이 비슷하게 만들어 집니다.
모바일 UI 프레임 워크 종류로는 JQuery Mobile, Sencha Touch, DHTMLX Touch 등 종류가 어러개 있으며
가장 대중적인 JQuery Mobile 을 사용하여 UI를 만들어 보도록 하겠습니다.
1. JQuery Mobile 다운 또는 CND 링크걸기
http://jquerymobile.com/download/
홈페이지에서 다운받아 루트에 풀어서 테스트결과 출력이 나오지 않아서
CND으로 링크걸어서 진행하겠습니다.
루트에 풀어 직접 경로 지정해주셔도됩니다.
저는 CND로 링크걸어서 진행하겠습니다.
CND : Contents Delivery Network
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
Head 태그 사이에 넣어주시면 됩니다.
2. 프로젝트 적용
지난시간에 설치한 NodeJS Command Prompt 실행해줍니다.
명령라인에서 Project 생성한 폴더로 이동합니다.
cd projects
jquery_mobile 프로젝트 생성합니다.
phonegap create jquery_mobile
jquery_mobile 디렉토리로 이동
cd jquery_mobile
로컬 경로로 이동하여 index.html 을 열어줍니다.
<!DOCTYPE HTML>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>Page Structure</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<div data-role="page">
<div data-role="header">
<h1>Header</h1>
</div>
<div data-role="content">
<p>Contents</p>
</div>
<div data-role="footer">
<h2>Footer</h2>
</div>
</div>
index.html을 다음과 같이 수정합니다.
명령 커맨 라인드에서
phonegap serve
서버 가동시켜줍니다.
휴대폰 폰갭을 이용하여 접속하거나, 인터넷 IP주소를 이용하여 웹브라우저에서도 접속 가능합니다.
입력해주시면 됩니다.
다음과 같이 화면이 생성됩니다.
다음시간에는 JQuery Mobile을 활용하여 UI를 꾸며보도록 하겠습니다.
감사합니다.
'Android' 카테고리의 다른 글
| [Hybrid App] Custom 테마 만들기 (0) | 2017.11.07 |
|---|---|
| [Hybird App] 페이지간 링크 연결 (0) | 2017.11.06 |
| [Hybird App] 하이브리드 앱 개발환경 세팅 (2) | 2017.10.24 |
| [Android] 카카오톡 페이지 만들기(PagerSlidingTabStrip + Viewpager) (0) | 2017.09.12 |
| [Android] FragmentTabhost를 이용한 카카오톡 페이지 만들기 (0) | 2017.09.08 |
