顯示具有 codova 標籤的文章。 顯示所有文章
顯示具有 codova 標籤的文章。 顯示所有文章

2015年9月7日 星期一

Codova + SQLite

 SQLite 是免費資料庫軟體,也可以跨平台(windows/Linux) ,當然手機也內建,但是和NOSQL概念不同喔,仍是關聯式資料庫,不少codova 會結合SQLite做一些APP的應用,以下範例教學剛好有使用到SQLite 也提供大家一些參考

一、建立SQLite 的函式庫 :寫成獨立的核心SQL元件

var db;
var sqlList = {
    openDB:function myfunction(dbName) {
        db = window.openDatabase("Database", "1.0", dbName, 1000);
        return db;
    },
    executeSQL: function myfunction(db, sqlcommand,  returnSuccessHandler) {
        //宣告 returnSuccessHandler 函式
       db.transaction(selectDBTransactionSuccessHandler,
               errorHandler, function () { });
        function selectDBTransactionSuccessHandler(sqlTransaction) {
            sqlTransaction.executeSql(sqlcommand, [], successHandler, errorHandler);
        };
        function successHandler(sqlTransaction, sqlResultSet) {
//呼叫 returnSuccessHandler 函式 回傳結果
            returnSuccessHandler(sqlResultSet.rows);
        }
        function errorHandler(errorCode) {
            console.log("executeSQL" + " sql: error");
            console.log(errorCode.err);
        };
    },
    executeNonQuery: function executeQuery(db, sqlcommand) {
        db.transaction(function (tx) {
            tx.executeSql(sqlcommand, [], function () { }, errorHandler);
        }, function errorCB(err) {
            alert("error");
            console.warn("Error processing SQL: " + err.code);
        }, function () {
        });

        function errorHandler(err) {
            alert("無法執行sql指令!" +sqlcommand + "錯誤碼" + err.code);
        }
    },
    executeNonQueryWithID: function (db, sqlcommand, id) {
        db.transaction(function (tx) {
            tx.executeSql(sqlcommand, [id], function () {
            });
        }, function errorCB(err) {
            alert("error");
            console.warn("Error processing SQL: " + err.code);
        }, function () {
        });
    }
};

executeSQL: function myfunction(db, sqlcommand,  returnSuccessHandler):
要將SQLite執行的結果回傳,需要有一個函式負責接收回傳值,所以returnSuccessHandler 是函數名稱,而非變數名稱,透過此函式回傳結果。

二、新增、刪除、修改等操作

新增資料庫
  var db =sqlList.openDB("clinicDatabase"); //開啟資料表

新增資料表
sqlList.executeNonQuery(db, "CREATE TABLE  IF NOT EXISTS  clinics (id INTEGER PRIMARY KEY AUTOINCREMENT, clinicName TEXT, clinicIP TEXT, user TEXT, password TEXT)");

刪除資料表
sqlList.executeNonQuery(db, "DROP  TABLE  IF EXISTS  clinics ");

新增資料
var sqlValue = "INSERT INTO clinics (clinicName,clinicIP,user,password) VALUES('" + clinicName + "'," + "'" + clinicIP + "','" + user + "','" + password + "')";

刪除資料
  sqlList.executeNonQueryWithID(db, "delete from clinics where id=?", id);

執行SQL的查詢語法
var db =sqlList.openDB("clinicDatabase"); //開啟資料表
   sqlList.executeSQL(db, "select * from clinics",  function (readData) {
       //查詢的資料回傳值… 
        $("#settingPage_clinicName").val(readData.item(0).clinicName);
         $("#settingPage_clinicIP").val(readData.item(0).clinicIP);
         $("#settingPage_user").val(readData.item(0).user);
         $("#settingPage_password").val(readData.item(0).password);
});
   

    將SQLite的執行SQL的共同函式變成物件,程式是不是變得簡潔許多呢? 因為在codova 呼叫sqlLite 會以非同步結果回應傳回值,所以要在function () {} 內才能接受回覆的值,希望這對大家有所幫助~ 感謝各位蒞臨。 

2015年6月11日 星期四

Html5+Css3 初體驗

 許多人對Html5都不陌生,但CSS3 帶來更多驚喜,原本複雜的javascript 才能寫出來的特效,竟然不用寫一行程式,也能達到一樣的效果,作者用之前codova的範例,將畫面重新改版後,同樣也能在手機上呈現豐富的特效。

l   漸層色: -webkit-linear-gradient(bottom , #abd3ee, white);

作者以藍色海洋為構想,所以將背景以藍色漸層方式呈現,越往上顏色就越
淡,讓人感覺色彩更加豐富,如果想改變漸層的角度,可以把bottom改為其他的值,目前所知的參數如下lefttop rightbottom ,還有組合式:left topbottom right,如果都不符合期待的話還有直接輸入角度喔。

<style>
        body {
            width:400px;
            height:600px;
//從底層產生漸層效果,由藍色越往上越來越淡,直到白色為止。
            background: -webkit-linear-gradient(bottom , #abd3ee, white) no-repeat
        }   
</style>

l   點選的行為: #button:hover, button:active

手機並沒有hover的行為,所以用active 代替,讓使用者有種按下按鈕
的體驗,才不會使用者一直重複點選。

        #button {
            position: fixed;           
            background-image: url('images/photoshop-icon.png');
            top: 480px;
            left: 0px;
            background-color: #abd3ee;
            border-radius: 100px 100px;
            width: 100px;
            height: 100px;
        }

        #button:hover, button:active {
            width: 130px;
            height: 130px;
            background-image: url('images/camera.png');
            background-repeat: no-repeat;               
            cursor: pointer;
       }

l   繪圖: cycle.arc(圓心X, 圓心Y,半徑, 起始角度 * Math.PI, 結束角度 * Math.PI, false);

首先要在html中插入<convas></convas>,就能透過javascript
繪製幾何圖形,作者用圓形來做示範教學,根據以下的圖示是各角度的起始點,比方的圖示,就是從0度到1.5度的圓弧,各位一定很好奇,如果想把下面的缺角補滿,角度該從多少到多少可不要被騙喔~ 02.0, 正如同0度和360度都是同一角度,回到原點。




<style>
#seaweed {          
            width:300px;
            height:300px;           
            position:fixed;
            top:400px;
            left:130px;
}
</style>
<canvas id="seaweed"></canvas>
<script>
        drawSeaweed();
        function drawSeaweed() {
            var convas = document.getElementById("seaweed");
            var cycle = convas.getContext("2d");
            var radius = 30; //半徑
//開始繪圖
            cycle.beginPath();
cycle.arc(40, 30, radius, 0.5 * Math.PI, 1.5 * Math.PI, false); //左上半圓
cycle.arc(40, 90, radius, 0.5 * Math.PI, 1.5 * Math.PI, false); //左下半圓
            cycle.arc(40, 30, radius, 1.5 * Math.PI, 0.5 * Math.PI, false); //右上半圓
            cycle.arc(40, 90, radius, 1.5 * Math.PI, 0.5 * Math.PI, false); //右下半圓
            cycle.fillStyle = "green"; //綠色顏色
            cycle.fill();//填滿區塊
            cycle.strokeStyle = "block"; //外框線為黑色
            cycle.stroke();//外框線實心線
        }       
    </script>

l   動畫 : @-webkit-keyframes

這是讓靜態的圖片,也能活生生動起來的魔術語法喔,只要在from的區塊
中, 輸入狀態ACSS樣式內容,然後在to的區塊中,輸入狀態BCSS樣式內容,就能從狀態A變化到狀態B,不論是移動座標、改變顏色、都十分容易上手,以下的參數就是說明如果完成動畫效果。

-webkit-animation-name: 執行的動畫名稱
-webkit-animation- duration: 執行動畫時間
-webkit-animation-iteration-count: 執行動畫次數 (infinite 不限次數)

<style>
   /* The animation code */
   @-webkit-keyframes example {
       from {
          background: -webkit-radial-gradient(white, rgba(158, 226, 218, 0.73) , rgba(158, 226, 218, 0.73)  );
        }
       to {
          width:80px;
          height:80px
           top: 100px;
           background:-webkit-radial-gradient( rgba(0, 0, 100, 0.01) , rgba(0, 0, 100, 0.01) , rgba(158, 226, 218, 0.73) );
           }
        }     
  #bubble {            
            border-radius:100px 100px;
            position:fixed;
            top:400px;
            left:30px;
            width:30px;
            height:30px;                       
            background: -webkit-radial-gradient(white, rgba(158, 226, 218, 0.73) , rgba(158, 226, 218, 0.73)  );
            -webkit-animation-name: example;
            -webkit-animation-duration: 6s;
            -webkit-animation-iteration-count: infinite;
        }
</style>
<div id="bubble"></div>


l   轉角度 : -webkit-transform

作者構想把拍攝的照片轉7度,讓畫面看起來看加生動活潑,所以另要加上
box-shadow 陰影的效果,讓視覺感覺有點立體感…

<style>
   #image {
            top:30px;
            left:30px;
            width:200px;
            height:300px;
            -webkit-transform: rotate(7deg);
            background-color:white;
            box-shadow:3px 3px 5px 6px #ccc
        }

        #takePicture {
            position:relative;
            top:35px;
            left:35px;
            width:185px;
            height:250px;
            -webkit-transform: rotate(7deg);
            border: inset 4px #2bc4c4 ;
        }
</style>
<div id="image">
    <img id="takePicture" />
</div>



完成的成果



































泡泡會動喔~ 各位們有感覺到泡泡的夢幻嗎? 如果有人對拍照的功能有興趣的話,可以參考 『Codova 如何上傳圖片到Server』 , 它說明如何透過codova 呼叫硬體的相機API,拍照後顯示在圖框上,感謝各位的到訪~