Andy's Learning Notebooks

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) {