2015年1月14日 星期三

Apache Codova初體驗 (Html5+css3+Javascript)

    App大都是都朝向Androidios開發為主軸,但未來window 8 app 又是另一項未知的藍海,更何況只會web的網頁專家們,又有新的領域可以探索,比較起第三元件的phonGapionic ,都不如直接寫native App, 直到最近

Visual Studio 多了新功能Apache Codova Apps ,可以透過 javaScript去呼呼Codova 包裝Native API,同樣也能跨平台,廢話不多說…開始我們的初體驗。

一、 安裝工具

l   需要將Visual Studio 2013更新Update 4

如果您從未裝過Visual Studio,也可以直接安裝以下的版本

如果正常的情況下,你的專案多了Apache Cordova Apps
























一、 安裝常用的套裝工具
已經習慣用jQuery.js angular.js的設計師們有福了,它都可以支援,請從NuGet 管理工具下戴安裝, 另外可以安裝喜歡的css套件,作者選擇metro UI Css,呈現windows 8 的風格。
l  引用metro UI CSS cssjavaScript
    <link href="css/metro-bootstrap.min.css" rel="stylesheet" />
    <script src="js/jquery/jquery-2.1.3.min.js"></script>
    <script src="js/jquery/jquery-ui.min.js"></script>
    <script src="js/metro.min.js"></script>

l  Body 套用metro css
<body class="metro" ng-app="beofreModel" ng-controller="beofreController">

l  Index.html
<div ng-controller="angControl">
        <div class="listview"> //列表樣式
            <a href="#" class="list" ng-click="go('before.html')">
                <div class="list-content">
                    <img src="images/poets/1-0.jpg" class="icon" />
                    <div class="data">
                        <span class="list-title">術前問卷</span>
                        <div class="rating small no-margin" data-role="rating"
                             data-stars="5"></div//星狀排名
                        <span class="list-remark">Price: $1</span>
                    </div>
                </div>
            </a>         
        </div>         
</div>
<script>
    (function () {
        'use strict';     
        var angAppObj = angular.module('angApp', []);
        angAppObj.controller('angControl', function ($scope, $window) {
            $scope.go = function (path) {  
                $window.location.href = path;
            };
        })
    })();
</script>

  Before.html
<body class="metro" ng-app="beofreModel" ng-controller="beofreController"> 
    <i class="icon-arrow-left-3" onclick="window.history.back()"></i>
    <br />
    <div class="listview" ng-repeat="player in players">
        <div class="list-content">
            <i class="icon-rocket on-left">icon-rocket </i>
            <div class="data">
                <span class="list-title">{{ player.name }}</span>
                <div class="rating" id={{ player.name }}>
                    <ul>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                    </ul>
                    <span class="score-hint"></span>
                </div>
            </div>
        </div>
    </div>
<!--如果引用angular.js 請放置最下面,否則angular無法在Android 裝置上正常顯示 -->
  <script src="scripts/angular.min.js"></script> 
<script>
    var before = angular.module("beofreModel", []); 
    before.controller('beofreController', ['$scope', function ($scope) {
        $scope.players = [
          { name: 'Gene', team: '診所的燈光明暗' },
          { name: 'George', team: '診所的的環境衛生' },
          { name: 'Steve', team: '診所的服務品質' },
          { name: 'Paula', team: '診所的人員態度' },
          { name: 'Scruath', team: '診所的手術過程是否滿意' },
          { name: 'Steve1', team: '診所的排約速度' },
          { name: 'Paula2', team: '診所空間舒適感' },
          { name: 'Scruath4', team: '診所的相關設施是否感到滿意' }];
        

        $(document).ready(function () {   //jQuery init
            angular.forEach($scope.players, function (filterObj, filterKey) {
                $("#" + filterObj.name).rating({
                    click: function (value, rating) {
                        rating.rate(value);
                    }
                });
            });
        });       
    }])
</script>
</body>

一、 Debug 工具
檔案搜尋à新增或移除按鈕à方案平台


                    選擇不平裝置模擬程式



使用Android 模擬器

index.html

































引用Campera API範例

<head>
    <title>Codova APP</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" 
charset="utf-8">
    <link href="css/metro-bootstrap.min.css" rel="stylesheet" />
    <script src="js/jquery/jquery-2.1.3.min.js"></script>
    <script src="js/jquery/jquery-ui.min.js"></script>
    <script src="js/metro.min.js"></script>
    <script src="js/metro/metro-dropdown.js"></script>
    <link href="css/index.css" rel="stylesheet" />
    <link href="css/iconFont.min.css" rel="stylesheet" />
</head>
<body class="metro" onload="onLoad()">
        <div class="panel">
            <div class="panel-header bg-lightBlue fg-white">
                <i class="icon-arrow-left-3" onclick="onBackKeyDown()"></i>拍照
            </div>
            <div class="panel-content">
                <button class="shortcut primary" onclick="capturePhoto()">
                    <i class="icon-rocket"></i>
                    Rocket
                    <small class="bg-cobalt fg-white">10</small>
                </button>
                <p></p>
                <div class="image-container selected">
                    <img id="smallImage">
                </div>
            </div>
        </div>
    <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<!--如果引用angular.js 請放置最下面,否則angular無法在Android 裝置上正常顯示 -->
    <script src="scripts/angular.min.js"></script>
<script type="text/javascript" charset="utf-8">
        var pictureSource;   // picture source
        var destinationType; // sets the format of returned value
        document.addEventListener("deviceready", onDeviceReady, false);
        function onDeviceReady() {
            pictureSource = navigator.camera.PictureSourceType;
            destinationType = navigator.camera.DestinationType;
        }

        function onPhotoDataSuccess(imageData) {        
            var smallImage = document.getElementById('smallImage');
            smallImage.style.display = 'block';
            smallImage.src = "data:image/jpeg;base64," + imageData;
        }     
     
        function onFail(message) {
            alert('Failed because: ' + message);
        }

        function capturePhoto() {
            navigator.camera.getPicture(onPhotoDataSuccess, onFail, {
                quality: 50,
                destinationType: destinationType.DATA_URL
            });
        }
    </script>




結論目前作者尚未在實機上實測,但是每次執行模擬器,有些困擾,一直出現以下訊息,不
知各位專家們是否有也這樣的經驗,願易非享的話,我會非常感謝的… 





沒有留言:

張貼留言