Home » Uncategorized » Framework7, Hello World 출력하기

Framework7, Hello World 출력하기

개요

웹 디자이너와 퍼블리셔의 영역이었된 HTML, CSS에 Bootstrap를 시작으로 다양한 CSS 프레임워크가 등장하면서 개발자 또한 구조화된 웹 디자인이 가능하게 되었다. 시간이 흘러 전통적인 웹 페이지보다 보다 네이티브 클라이언트에 가까운 SPA(Single Page Application) 개념이 웹에 등장하면서 이런 수요를 총족하기 위한 다양한 프레임워크가 등장하고 있다. 이 중에 앱 스타일의 개발에 특화된 Framework7이라는 프레임워크의 사용법을 간단히 설명하고자 한다.

HTML

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="theme-color" content="#2196f3">
    <!-- Framework7 안드로이드 테마 CSS를 로드한다. -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/framework7/1.6.0/css/framework7.material.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/framework7/1.6.0/css/framework7.material.colors.min.css">
</head>

<body>
    <!-- Framework7의 Views를 작성한다. 반드시 메인 뷰를 포함해야 한다. -->

    <!-- Framework7 JavaScript를 로드한다. -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/framework7/1.6.0/js/framework7.min.js"></script>

    <!-- 애플리케이션 JavaScript를 로드한다. -->
    <script src="hello.js"></script>
</body>

</html>

Copy

JavaScript

// Framework7 오브젝트를 초기화한다. 앱 단위의 오브젝트로 단 한번만 초기화한다. 이 시점에 초기 요소들이 화면에 렌더링된다.
var helloApp = new Framework7({});

helloApp.addView('.view-main', {
    dynamicNavbar: true
});

Copy

Views

  • Views는 실제 화면에 출력될 Framework7의 단위이다. HTML로는 아래와 같으며 파일 1개 당 단 1개의 Views 만을 허용한다. Views의 기본 HTML 구조는 아래와 같다.
<div class="views">
    <!-- view-main는 해당 뷰가 메인 뷰임을 의미한다. 페이지 링크 클릭시 페이가 로드될 기본 뷰가 된다. -->
    <div class="view view-main">
        <!-- 하나의 view는 navbar, pages, toolbar를 가질 수 있다. -->
        <div class="navber">...</div>
        <div class="pages">
            <div class="page" data-page="hello">...</div>
            ...
        </div>
        <div class="toolbar">...</div>
    </div>
</div>

Copy

Page

  • Page는 페이지를 나타내는 Framework7의 단위이다. HTML로는 아래와 같다.
<!-- data-page에는 각 페이지를 식별할 수 있는 페이지의 이름을 명시해야 한다. -->
<div class="page" data-page="world">
    <div class="page-content">
        ...
    </div>
</div>

Copy

  • 일반적인 웹 애플리케이션과 가장 차별되는 부분은 a 엘러먼트의 페이지 링크 클릭시 페이지를 새로 로드하는 것이 아니라 해당 HTML 파일을 AJAX로 불러와서 현재 DOM을 갱신한다는 것이다.
  • 한가지 주의할 점은 각 페이지가 JavaScript를 가지고 있어도 실행되지 않는다는 것이다. 모든 페이지 단위 JavaScript는 최초 생성된 Framework7 오브젝트의 통제 하에서만 실행이 가능하다. 아래와 같다.
var world_onPageInit = function(page) {
    // 페이지가 나타난 후 실행될 JavaScript를 작성
}

var world_onPageBeforeRemove = function(page) {
    // 페이지를 사라진 후 실행될 JavaScript를 작성
}

helloApp.onPageInit("world", world_onPageInit);
helloApp.onPageBeforeRemove("world", world_onPageBeforeRemove);
Uncategorized