cordova+onsen-uiでサンプルアプリ - m_shige1979のときどきITブログ

cordovaをまだ、うまく使えていないので

ちょっくらみてみる

まずは初期設定

プロジェクトを作成

$ cordova create hello com.example.hello Helloworld -d
Creating a new cordova project with name "Helloworld" and id "com.example.hello" at location "/Users/matsumotoshigeharu/sample_projects/hello"
Using stock cordova hello-world application.
cordova library for "www" already exists. No need to download. Continuing.
Copying stock Cordova www assets into "/Users/matsumotoshigeharu/sample_projects/hello/www"
$

プラットフォームを追加

$ cd hello/
$ cordova platform add android
Creating android project...
Creating Cordova project for the Android platform:
	Path: platforms/android
	Package: com.example.hello
	Name: Helloworld
	Android target: android-19
Copying template files...
Project successfully created.
$

エミュレータ起動

$ cordova emulate android -d

f:id:m_shige1979:20141113202258p:plain

onsen-ui設定

もともとのwww配下のファイルを削除

f:id:m_shige1979:20141113202527p:plain

http://ja.onsen.io/より取得

f:id:m_shige1979:20141113202738p:plain

www/lib/onsenをvendorsディレクトリを作成してその配下へ配置

f:id:m_shige1979:20141113203241p:plain

画面設定

www/index.html

<!doctype html>
<html lang="en" ng-app="app">
<head>
    <meta charset="utf-8">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="mobile-web-app-capable" content="yes">

    <title>My App</title>

    <link rel="stylesheet" href="lib/onsen/css/onsenui.css">
    <link rel="stylesheet" href="styles/app.css"/>
    <link rel="stylesheet" href="styles/onsen-css-components-blue-basic-theme.css">

    <script src="lib/onsen/js/angular/angular.js"></script>
    <script src="lib/onsen/js/onsenui.js"></script>

    <script src="cordova.js"></script>
    <script src="js/app.js"></script>
    <script>
        ons.ready(function() {
        });
    </script>

    <style>
        .item {
            padding: 10px;
            line-height: 1;
        }
        .item-thum {
            background-color: #ccc;
            width: 50px;
            height: 50px;
            border-radius: 4px;
        }
        .item-title {
            font-size: 15px;
            font-weight: 500;
        }
        .item-desc {
            font-size: 14px;
            color: #666;
            line-height: 1.3;
            margin: 4px 0 0 0;
            padding: 0 30px 0 0;
        }
        .item-label {
            font-size: 12px;
            color: #999;
            float: right;
        }
    </style>
</head>

<body ng-controller="AppController">

<ons-navigator>
    <ons-page>
        <ons-toolbar>
            <div class="center">Master Details</div>
        </ons-toolbar>

        <ons-list ng-controller="MasterController">
            <ons-list-item modifier="chevron" class="item" ng-repeat="item in items" ng-click="showDetail($index)">
                <ons-row>
                    <ons-col width="60px">
                        <div class="item-thum"></div>
                    </ons-col>
                    <ons-col>
                        <header>
                            <span class="item-title">{{item.title}}</span>
                            <span class="item-label">{{item.label}}</span>
                        </header>
                        <p class="item-desc">{{item.desc}}</p>
                    </ons-col>
                </ons-row>
            </ons-list-item>
        </ons-list>
    </ons-page>
</ons-navigator>

<ons-template id="detail.html">
    <ons-page ng-controller="DetailController">

        <ons-toolbar>
            <div class="left"><ons-back-button>Back</ons-back-button></div>
            <div class="center">Details</div>
        </ons-toolbar>

        <ons-list modifier="inset" style="margin-top: 10px">
            <ons-list-item class="item">
                <ons-row>
                    <ons-col width="60px">
                        <div class="item-thum"></div>
                    </ons-col>
                    <ons-col>
                        <header>
                            <span class="item-title">{{item.title}}</span>
                            <span class="item-label">{{item.label}}</span>
                        </header>
                        <p class="item-desc">{{item.desc}}</p>
                    </ons-col>
                </ons-row>
            </ons-list-item>

            <ons-list-item modifier="chevron" ng-click="doSomething()">
                <ons-icon icon="ion-chatboxes" fixed-width="true" style="color: #ccc"></ons-icon>
                Add a note
            </ons-list-item>
        </ons-list>

        <ons-list style="margin-top: 10px">
            <ons-list-item class="item" ng-repeat="i in [1,2,3]">
                <header>
                    <span class="item-title">Lorem ipsum dolor sit amet</span>
                </header>
                <p class="item-desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </ons-list-item>
        </ons-list>

        <br>

    </ons-page>
</ons-template>

</body>
</html>

www/js/app.js

(function(){
    'use strict';
    var module = angular.module('app', ['onsen']);

    module.controller('AppController', function($scope, $data) {
        $scope.doSomething = function() {
            setTimeout(function() {
                alert('tappaed');
            }, 100);
        };
    });

    module.controller('DetailController', function($scope, $data) {
        $scope.item = $data.selectedItem;
    });

    module.controller('MasterController', function($scope, $data) {
        $scope.items = $data.items;

        $scope.showDetail = function(index) {
            var selectedItem = $data.items[index];
            $data.selectedItem = selectedItem;
            $scope.ons.navigator.pushPage('detail.html', {title : selectedItem.title});
        };
    });

    module.factory('$data', function() {
        var data = {};

        data.items = [
            {
                title: 'Item 1 Title',
                label: '4h',
                desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'
            },
            {
                title: 'Another Item Title',
                label: '6h',
                desc: 'Ut enim ad minim veniam.'
            },
            {
                title: 'Yet Another Item Title',
                label: '1day ago',
                desc: 'Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.'
            },
            {
                title: 'Yet Another Item Title',
                label: '1day ago',
                desc: 'Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.'
            }
        ];

        return data;
    });
})();