Andy's Learning Notebooks: 2015

2015年12月13日星期日

[JSON] JSON結構 (基礎篇)

JSON是現今常用的資料描述方式，他有很多好處，其中最重要好處之一就是JSON比XML輕量化!!!

陣列
一維陣列
[
"A",
"B",
"C"
]

二維陣列
[
{"A": 50},
{"B": 80},
{"C": 90}
]
JSON成員屬性
{
"國家": "Taiwan",
"姓名": "Andy Wang",
"性別": "男性"
}

JSON複雜結構
範例1
{
"客戶名稱": "SONY",
"交易幣別": ["JPY", "USD"],
"主要產品": ["SP1", "PS2", "PS3", "PS4", "PSP"]
}

範例2

[{ "股號": "1216", "名稱": "統一", "EPS": [ { "2014/Q4": 0.35 }, { "2015/Q1": 0.79 }, { "2015/Q2": 0.81 }, { "2015/Q3": 0.68 } ] }, { "股號": "2311", "名稱": "日月光", "EPS": [ { "2014/Q4": 1.02 }, { "2015/Q1": 0.58 }, { "2015/Q2": 0.48 }, { "2015/Q3": 0.83 } ] } ]
同場加映： [ { "股號": "1216", "名稱": "統一", "EPS": { "2014/Q4": 0.35, "2015/Q1": 0.79, "2015/Q2": 0.81, "2015/Q3": 0.68 } }, { "股號": "2311", "名稱": "日月光", "EPS": { "2014/Q4": 1.02, "2015/Q1": 0.58, "2015/Q2": 0.48, "2015/Q3": 0.83 } } ]

[AJAX] Phonegap APP利用Ajax取得後端資料(使用jQuery)

張貼者： Andy 標籤： Ajax, Android, APP, iOS, jQuery, PhoneGap 於凌晨2:44 沒有留言:

Ref: jQuery Ajax

按照官方文件的標準寫法如下：

var json_string = '{"ID":"123456", "Name":"AndyWang"}';

$.ajax({

beforeSend : function () {

//送需求前要做的事情

$.mobile.loading('show');

complete : function () {

//完成之後要做的事情

$.mobile.loading('hide');

url: "WebService URL", //網址，需要加上『http://』

type: "POST", //Request type

dataType: "json", //欲接收回傳內容(檔案)的資料型態

async: "false",

data: json_string, //欲傳送的參數/檔案

success: function (result) {

//成功之後要做的事情

error: function (xhr, status) {

//失敗之後要做的事情

$.mobile.loading('hide');

alert("Cancel Executing Query ! ");

}

});

但運用在APP中，可能會碰上使用者在你送出ajax request的結果出來之前，就切換到其它功能的狀況。
如果在使用者切換的瞬間，程式沒有自動把這個ajax request中斷，會自動拋出Exception！
按照上面的邏輯，收到Exception時，會自動呼叫alert('Cancel Executing Query ! ')
事實上這不能算是Exception，那應該要怎麼修改錯誤處理呢???

HTML卸載前的事件(beforeunload event)
想要多了解這個事件的話，建議Google『HTML life cycle』
$(window).on('beforeunload', function(){
try{
windo.ajax.abort(); } catch(err){ }
});
宣告 Ajax request為實體物件
window.xxxx屬於Javascript全域變數

window.ajax = $.ajax({
beforeSend : function () {
      //送需求前要做的事情
      $.mobile.loading('show');
  },
  complete : function () {
      //完成之後要做的事情
      $.mobile.loading('hide');
  },
  url: "WebService URL", //網址，需要加上『http://』
  type: "POST", //Request type
  dataType: "json", //欲接收回傳內容(檔案)的資料型態
  async: "false",
  data: json_string, //欲傳送的參數/檔案
  success: function (result) {
      //成功之後要做的事情
  },
  error: function (xhr, status) {
      //失敗之後要做的事情
  $.mobile.loading('hide');
      alert("Cancel Executing Query ! ");
  }
});

改成這樣之後，使用者急促地切換頁面或選單的時候，就不會發生不必要的錯誤了 !

[jQuery Mobile] 選單使用方法 (List Menu, Select Menu, Nest Menu)

張貼者： Andy 標籤： Android, APP, iOS, jQuery Mobile 於凌晨1:46 沒有留言:

jQuery Mobile的使用方法與應用請參考下列網址
jQuery Mobile Official Demo
jQuery Mobile Official API Docs

jQuery Mobile元件內容更新
大部分jQuery Mobile Component內容都是寫死不變的，若需要動態變更該Component的內容，就必須以Java Script更新內容。
為什麼會用寫死來形容?? 原因是，JQM的元件都經過JQM javascript美化，所以想要再新增東西進去，或是改變內容，就必須按照JQM的『更新』的規矩來重新套用CSS！
選單列 (List View)
$('Selector').listview('refresh');
下拉式選單 (Select Menu)
$('Selector').selectmenu('refresh');
巢狀選單(Nest Menu)

jQuery Mobile的巢狀選單，是利用HTM list來實現，範例如下。
[Nest Menu Live Demo]

[APP] PhoneGap 螢幕翻轉(Orientation)

張貼者： Andy 標籤： Android, APP, iOS, PhoneGap 於凌晨1:21 沒有留言:

Ref: Cordova Plugin Screen Orientation
安裝方式請參閱連結

Android
window.isPortraitComplete = null; //螢幕轉向完成
window.isPageReady = null; //網頁讀取(初始值)完成
window.ScreenWidth = 0;
window.ScreenHeight = 0;
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady()
{
screen.lockOrientation('portrait');
window.isPortraitComplete = true;
}
isScreenReady();
function isScreenReady() {
//判斷手機處於直立狀態innerWidth/Height網頁目前寬/高
if( window.innerWidth<window.innerHeight ){
if ( window.isPortraitComplete!=null && window.isPageReady!=null && window.isPortraitComplete==true && window.isPageReady==true ) {
  window.ScreenWidth = window.innerWidth;
  window.ScreenHeight = window.innerHeight;
//螢幕完成轉向之後要執行的動作
}
else{
  window.setTimeout("isScreenReady();",200);
}
}
else {
window.setTimeout("isScreenReady();",200);
}
}

$(document).ready(function (){
window.isPageReady = true;
}
iOS
與Android相同

2015年9月12日星期六

【APP】PhoneGap讀寫檔案(File I/O)

張貼者： Andy 標籤： Android, APP, iOS, PhoneGap 於清晨6:25 沒有留言:

Ref: Cordova Plugin File

安裝方式請參考連結

Android
Read

window.SaveData = null;

document.addEventListener("deviceready", onDeviceReady, false);

function onDeviceReady(){

readFile();

}

function readFile() {

window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, gotReadFS, null);

}

function gotReadFS(fileSystem){

fileSystem.root.getFile("[FileName檔案名稱]", null, gotFileEntry, null);

}

function gotFileEntry(fileEntry) {

fileEntry.file(gotFile, null);

}

function gotFile(file){

readAsText(file);

}

function readAsText(file) {

var reader = new FileReader();

reader.onloadend = function(evt) {

var txt = evt.target.result;

window.SaveData = txt;

};

reader.readAsText(file);

}

Write

function writeFile() {

window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, gotWriteFS, fail);

}

function gotWriteFS(fileSystem) {

fileSystem.root.getFile("[FileName檔案名稱]", {create: true, exclusive: false}, gotFileEntryWrite, fail);

}

function gotFileEntryWrite(fileEntry){

fileEntry.createWriter(gotFileWriter, fail);

}

function gotFileWriter(writer) {

var txt = "xxxxxxxxxxxxxxxxx";

writer.write(txt);

writer.onwriteend = function(evt){

<<寫檔完成後要做的事情>>

};

}

iOS
程式與Android一樣，不需更改

應用
一進入頁面就馬上讀取檔案，並且將讀取到的值顯示在jQueryMobile的Component上。
範例：App開啟便立即讀取儲存在手機上的帳號資訊，並顯示在帳號、密碼的textbox中

注意！此種一開啟就要開始讀檔的程式必須要確定PhoneGap、jQueryMobile兩Framework皆載入完成後才能執行，否則很容易得到意料之外的效果。

window.PhonegapReady = false; //PhoneGap Framework載入完畢

window.JQMReady = false; //jQueryMobile Framework載入完畢

isReadFileReady("ReadLoginInfo"); //讀檔

isBindLoginReady("BindLoginInfo"); //顯示內容至jQueryMobile的元件上

document.addEventListener("deviceready", onDeviceReady, false);

function onDeviceReady(){

window.PhonegapReady = true;

}

$(document).one("pagebeforeshow", function(){

window.JQMReady = true;

});

function isReadFileReady(action) {

if (window.PhonegapReady == true && window.JQMReady == true && (window.SaveData == "" || window.SaveData == null)) {

if(action=="ReadLoginInfo") {

readFile(); //讀檔

}

else {

window.setTimeout("isReadFileReady(\"" + action + "\");",200);

}

function isBindLoginReady(action) {

if (window.PhonegapReady == true && window.JQMReady == true && window.SaveData != "" && window.SaveData != null) {

if(action=="BindLoginInfo") {

bindContent(); //將讀取到的檔案內容更新至jQM元件中

}

else {

window.setTimeout("isBindLoginReady(\"" + action + "\");",100);

}

【APP】PhoneGap Confirm視窗(Native Confirm/ Dialog)

張貼者： Andy 標籤： Android, APP, iOS, PhoneGap 於清晨6:15 沒有留言:

Ref: Cordova Plugin APIs Ctrl+F "Dialogs"

Cordova-plugin-dailogs

安裝方式請參考連結

Android

結合關閉App的應用:

function show_CloseConfirm(){

navigator.notification.confirm(

'Do you really want to exit?', // message

close_app, // callback to invoke with index of button pressed

"Exit", // title

['Cancel','OK'] // buttonLabels

);

}

function close_app(buttonIndex){

if (buttonIndex==2){

navigator.app.exitApp();

}

}

iOS

還沒想到要應用在哪裡，未有實際應用範例…

Ps. iOS不允許App關閉任何App(包括App自身)

【APP】PhoneGap Icon

張貼者： Andy 標籤： Android, APP, iOS, PhoneGap 於清晨5:25 沒有留言:

Ref: Cordova Icons and Splash Screens

Icon檔案路徑:
[PhoneGap專案路徑]\www\res\icon\
[PhoneGap專案路徑]\platforms\android\res\

Android

請修改原本的PhoneGap config.xml

尋找(Crtl+F): <icon gap:platform="android"

取代: gap:qualifier => density

修改前:

修改後:

iOS

iOS的設定值不需要特別修改
<platform name="ios">
<allow-intent href="itms:*" />
  <allow-intent href="itms-apps:*" />
  <icon src="www/res/icon/android/icon-36-ldpi.png" density="ldpi" />
  <icon src="www/res/icon/android/icon-48-mdpi.png" density="mdpi" />
  <icon src="www/res/icon/android/icon-72-hdpi.png" density="hdpi" />
  <icon src="www/res/icon/android/icon-96-xhdpi.png" density="xhdpi" />
</platform>

【APP】PhoneGap 開場畫面(Splash Screen)

張貼者： Andy 標籤： Android, APP, iOS, PhoneGap 於清晨5:14 沒有留言:

Ref: Cordova-plugin Splash Screen

安裝PhoneGap plugin:

phonegap plugin add cordova-plugin-splashscreen

開場畫面的圖片檔存放路徑如下:

[PhoneGap專案路徑]\www\res\screen\

[PhoneGap專案路徑]\platforms\android\res\

Android

修改PhoneGap config.xml 找到下列設定值

SplashScreen value="screen"
<preference name="SplashScreen" value="screen" />
screen: 設定開場畫面的Resource
SplashScreenDelay value="2000"
<preference name="SplashScreenDelay" value="2000" />
顯示開場畫面的時間(單位: 毫秒)

iOS

修改PhoneGap config.xml找到下列設定值

ShowSplashScreenSpinner value="true"
<preference name="ShowSplashScreenSpinner" value="true" />
True: 在開場畫面出現時，顯示iOS Loading圖樣
AutoHideSplashScreen value="true"
<preference name="AutoHideSplashScreen" value="true" />
True: 自動隱藏開場畫面

iOS預設2秒，iOS開場畫面顯示秒數僅能透過下列方式客製:

config.xml的AutoHideSplashScreen 改為false

index.html頁面中加入下列這段
<script>

document.addEventListener("deviceready", onDeviceReady, false);

function onDeviceReady(){

setTimeout(function(){

navigater.splashscreen.hide();

window.location='./lmain.html';

}, 3500);

}

</script>

【APP】PhoneGap Plugin Install(add)/ Remove/ List

張貼者： Andy 標籤： Android, APP, iOS, PhoneGap 於清晨5:06 沒有留言:

Ref: Cordova Command-Line Interface

開啟cmd

cd至PhoneGap專案目錄

安裝: phonegap plugin add [plugin-name]

移除: phonegap plugin rm [plugin-name]

檢視plugin清單: phonegap plugin -l

2015年8月10日星期一

【APP】PhoneGap設定iOS APP全螢幕，但必須顯示狀態列。 (set iOS app fullscreen but show the status bar.)

張貼者： Andy 標籤： iOS, PhoneGap 於清晨7:21 沒有留言:

要怎麼像上圖?可以在執行APP的時候又要顯示完整的狀態列(Status Bar)?

安裝PhoneGap PlugIn
打開[終端機]切換到PhoneGap APP目錄之下
輸入[phonegap plugin add cordova-plugin-statusbar]按下[Enter]開始安裝
修改Config.xml
在PhoneGap的Config.xml加上下列設定值：
StatusBarOverlaysWebView = true / false?
　true: 代表APP的最頂端要一直延伸螢幕邊緣，也就是說APP最頂端會被狀態列蓋住
　false: 代表APP最頂端會在狀態列的下緣之外
StatusBarBackgroundColor
　狀態列的背景色，沒設定的話就會是白色...
StatusBarStyle
　狀態列的樣式，iOS7有好幾種設定值可以選擇
　　default, lightcontent, blacktranslucent, blackopaque.
　　default = lightcontent
重新編譯APP

ref: https://github.com/apache/cordova-plugin-statusbar

2015年8月9日星期日

【APP】PhoneGap create Android hello world app

張貼者： Andy 標籤： Android, APP, PhoneGap 於凌晨3:29 沒有留言:

開啟AVD Manager
什麼是AVD Manager？(Android Virtual Device Manager)
AVD Manager路徑：C:\
忘了在哪？
開啟[命令提示字元]輸入[echo %ANDROID_HOME%]按下[Enter]
如果有跑出一段路徑，那便是Android SDK安裝路徑！

AVD Manager可以依照需求建立不同解析度、不同記憶體大小的模擬器。
但是都有一個重點，請你記住AVD Name！
因為用PhoneGap啟動模擬器，必須要知道AVD Name！才會用你要的那台模擬裝置開啟！
以PhoneGap建立Android專案
打開[命令提示字元]先切換到你要存放專案的資料夾
輸入[phonegap create "專案名稱"]

PhoneGap會自動幫以專案名稱建立一個專案資料夾，這裡面可以看到下列檔案：
修改config.xml
修改下列設定值：
[android-miniSdkVersion]預設值為[7]，修改成[10]！
因為PhoneGap支援最低Android SDK版本對應的Level Number為10！
Android Version & Level Number mapping list：
http://developer.android.com/guide/topics/manifest/uses-sdk-element.html
編譯PhoneGap專案
打開[命令提示字元]切換至專案目錄之下
輸入[phonegap build android --verbose]

上圖結果是沒加選項[--verbose]的結果！
為什麼要加上[--verbose]？因為這個選項會讓PhoneGap列出整的編譯過程，包含詳細錯誤訊息！
以Android模擬器測試APP
打開[命令提示字元]切換至專案目錄之下
輸入[phonegap run android --target="AVD Name" --verbose]

Done！
Alright，你已經成功揭開了爆肝寫APP之路！

【APP】PhoneGap + Android SDK 環境設定 Windows 7

張貼者： Andy 標籤：教學, Android, APP, PhoneGap 於凌晨2:24 沒有留言:

確認硬體配備 :
使用CPU-Z查看CPU型號
請查看CPU是否有VT(Virtualization Technology)的指令集
如果沒有，則無法安裝Android模擬器。

如果你的CPU有VT技術，請於重新開機時按[Delete]，開啟[VT-x]。
否則你將會在安裝Android Studio時看見下圖錯誤訊息！
安裝Node.JS
為什麼要安裝Node.JS？因為方便，而且PhoneGap官方網站也建議開發者透過Node.JS來安裝。

https://nodejs.org/
安裝沒什麼特別的，就是下一步到底！
安裝PhoneGap
開始功能表\Node.js\Node.js command prompt

系統會開啟一個很像命令提示字元的視窗，請在裡面輸入[npm install phonegap]按下[Enter]
Node.JS會自動連到GitHub上抓取PhoneGap安裝檔，並自動安裝！

裝完之後可以測試一下：
開啟一個新的[命令提示字元]輸入[phonegap --version]按下[Enter]
PhoneGap應該要顯示版本號
安裝JDK
Android 都是Java base的，需要安裝這個應該不意外吧..

http://www.oracle.com/technetwork/java/javase/downloads/index.html

安裝步驟也是，下一步到底，沒什麼特別的。
設定JAVA相關環境變數：

新增變數名稱[JAVA_HOME] 值 [C:\\jdk1.8.0_51]
修改變數[Path] 在值的最前面加上[%JAVA_HOME%\bin\;]
存檔，測試。開啟一個新的[命令提示字元]輸入[javac]按下[Enter]
畫面會列出一堆指令的用法，代表成功！
沒列出指令的用法，可以再重開一個[命令提示字元]重新試試看，還是不行的話請自行Google。
安裝Android Studio
其實可以只安裝Android SDK...
http://developer.android.com/sdk

安裝步驟也是下一步到底！
注意：請不要在安裝結束之後誤開Android Studio，很吃資源會浪費很多時間！
設定環境變數：
Android SDK路徑通常在：C:\Users\<使用者帳號資料夾>\AppData\Local\Android\sdk\
(找不到[AppData]資料夾，請開啟顯示隱藏資料夾與檔案的設定！)
新增變數名稱[ANDROID_HOME]值[C:\Users\<使用者帳號資料夾>\AppData\Local\Android\sdk]
修改變數[Path]在值的最前面加上[%ANDROID_HOME%\tools\;%ANDROID_HOME%\platform-tools\;]
測試：開啟一個新的[命令提示字元]
輸入[adb version]按下[Enter]
adb應該回應版本號！
輸入[emulator -help]按下[Enter]
模擬器應該要顯示指令使用方式！
安裝Apache Ant
這是因為PhoneGap有部分的功能必須透過這個套件執行！乖乖安裝吧！
http://ant.apache.org/bindownload.cgi

安裝方法很簡單，但不是下一步到底...
解壓縮，把整個資料夾剪下，放到[C:\Program Files]之下就好了。(可以自己找一個喜歡的地方來放)
設定系統變數(請按照實際狀況而定)
新增變數名[ANT_HOME]值[C:\Program Files\Apache Ant\apache-ant-1.9.6]
修改變數[Path]在值的最前面加上[%ANT_HOME%\bin\;%ANT_HOME%\lib\;]
測試：開啟一個新的[命令提示字元]輸入[ant –version]按下[Enter]
Apache Ant會顯示版本號