유혁의 개발 스토리

[Hybird App] 모바일 UI 프레임워크(JQuery Mobile) 사용법 본문

Android

[Hybird App] 모바일 UI 프레임워크(JQuery Mobile) 사용법

유혁. 2017. 10. 30. 18:54

모바일 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주소를 이용하여 웹브라우저에서도 접속 가능합니다.

 

http://xxx.xxx.xxx.xxx:3000

 

입력해주시면 됩니다.

 

다음과 같이 화면이 생성됩니다.

 

다음시간에는 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
'Android' Related Articles more