Andy's Learning Notebooks

[JSON] JSON結構 (基礎篇)

2015-12-13T03:46:00.000-08:00

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)

2015-12-13T02:44:00.003-08:00

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)

2015-12-13T01:46:00.004-08:00

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)

2015-12-13T01:21:00.001-08:00

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相同

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

2015-09-12T06:25:00.001-07:00

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)

2015-09-12T06:15:00.000-07:00

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

2015-09-12T05:25:00.000-07:00

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)

2015-09-12T05:14:00.000-07:00

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

2015-09-12T05:06:00.001-07:00

Ref: Cordova Command-Line Interface

開啟cmd

cd至PhoneGap專案目錄

安裝: phonegap plugin add [plugin-name]

移除: phonegap plugin rm [plugin-name]

檢視plugin清單: phonegap plugin -l

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

2015-08-10T07:21:00.001-07:00

要怎麼像上圖?可以在執行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

【APP】PhoneGap create Android hello world app

2015-08-09T03:29:00.001-07:00

開啟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

2015-08-09T02:24:00.002-07:00

確認硬體配備 :
使用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會顯示版本號

Done！
整個環境都設定好了！
下一篇將介紹如何利用PhoneGap建置一個Android專案，並且在模擬器上測試APP。

[Blog] Xuite上安裝SyntaxHighlighter

2011-03-04T23:14:00.000-08:00

這麼帥氣的程式碼Hightlight功能要怎麼在 Xuite 的部落格上實現呢? 下文會教你怎麼把 SyntaxHightLighter 套件裝上你的Xuite部落格中。

【1】進入 Xuite 的管理後台\編排欄位。如果，你已經有使用自由欄位的話，那就選擇修改已經存在的自由欄位，否則選擇新增一個自由欄位。

【2】在自由欄位中貼上以下必要程式碼。

<script type="text/javascript" src="http://alexgorbatchev.com.s3.amazonaws.com/pub/sh/3.0.83/scripts/shCore.js"></script>
<link href="http://alexgorbatchev.com.s3.amazonaws.com/pub/sh/3.0.83/styles/shCore.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
     SyntaxHighlighter.all()
</script>

【3】選擇自己所想要的程式碼表現樣式(挑選一種樣式對應之程式碼貼上即可)。

。Default

<link href="http://alexgorbatchev.com.s3.amazonaws.com/pub/sh/3.0.83/styles/shThemeDefault.css" rel="stylesheet" type="text/css" />

圖例:

。Django

<link href="http://alexgorbatchev.com.s3.amazonaws.com/pub/sh/3.0.83/styles/shThemeDjango.css" rel="stylesheet" type="text/css" />

圖例:

。Eclipse

<link href="http://alexgorbatchev.com.s3.amazonaws.com/pub/sh/3.0.83/styles/shThemeEclipse.css" rel="stylesheet" type="text/css" />

圖例:

。Emacs

<link href="http://alexgorbatchev.com.s3.amazonaws.com/pub/sh/3.0.83/styles/shThemeEmacs.css" rel="stylesheet" type="text/css" />

圖例:

。Fade To Grey

<link href="http://alexgorbatchev.com.s3.amazonaws.com/pub/sh/3.0.83/styles/shThemeFadeToGrey.css" rel="stylesheet" type="text/css" />

圖例:

。Midnight

<link href="http://alexgorbatchev.com.s3.amazonaws.com/pub/sh/3.0.83/styles/shThemeMidnight.css" rel="stylesheet" type="text/css" />

圖例:

。RDark

<link href="http://alexgorbatchev.com.s3.amazonaws.com/pub/sh/3.0.83/styles/shThemeRDark.css" rel="stylesheet" type="text/css" />

圖例:

【4】選擇你所需要的程式語言模組。(修改程式碼貼上即可)(可多選)
<script type="text/javascript" src="http://alexgorbatchev.com.s3.amazonaws.com/pub/sh/3.0.83/scripts/+模組檔名"></script>

shLegacy.js
shCore.js
shBrushXml.js
shBrushVb.js
shBrushSql.js
shBrushScala.js
shBrushSass.js
shBrushRuby.js
shBrushPython.js
shBrushPowerShell.js
shBrushPlain.js
shBrushPhp.js
shBrushPerl.js
shBrushJScript.js
shBrushJavaFX.js
shBrushJava.js
shBrushGroovy.js
shBrushErlang.js
shBrushDiff.js
shBrushDelphi.js
shBrushCss.js
shBrushCSharp.js
shBrushCpp.js
shBrushColdFusion.js
shBrushBash.js
shBrushAS3.js
shBrushAppleScript.js
shAutoloader.js

例如:

<script type="text/javascript" src="http://alexgorbatchev.com.s3.amazonaws.com/pub/sh/3.0.83/scripts/shBrushPhp.js"></script>

【5】使用方法。

在 brush: 後面加上自己所想要表示的程式語言即可。(ex: js, php, xml, vb, csharp, cpp, java, ...)

<pre class="brush: php">
    <?php
        echo "Hello SyntaxHightLighter!!";
        phpinfo();
    ?>
</pre>

【VisualStudio】VisualStudio2010 ERROR file tracker : error FTK1011

2010-09-25T19:44:00.000-07:00

要解決這個問題有兩個方法 :

方法一 : 更改Framework
1.把 目標Framework 設定成 .NET Framework 4
先開啟專案中的隨便一隻程式，工具列/專案/[你的專名稱]屬性

2.設定成.NET Framework 4

方法二 : 增加環境變數
1.在我的電腦上按右鍵/內容

2.進階系統設定

3.進階(標籤)/環境變數

4.系統變數/新增

5.新增變數名稱: TRACKFILEACCESS 變數值: false

【Linux】安裝 phpMyAdmin 3.3.2 - Ubuntu10.04

2010-09-20T07:49:00.000-07:00

1.安裝phpMyAdmin
使用Synaptic 搜尋 phpmyadmin 並安裝。

開啟Firefox (或任何瀏覽器) 在網址列輸入" http://你的網址/phpmyadmin/ "
若有看到phpmyadmin的網頁就代表安裝成功了。

但是，這種登入方式太過危險，所以我們必須改成使用視窗登入的方式!!!

2.修改設定檔，開啟 phpMyAdmin 的另一種登入模式

開啟終端機切換目錄至/usr/share/phpmyadmin，接著輸入以下指令 :

andy@andy-Server:/usr/share/phpmyadmin$ls -l config*
-rw-r--r-- 1 root root  181 2008-12-10 04:00 config.footer.inc.php
-rw-r--r-- 1 root root  181 2008-12-10 04:00 config.header.inc.php
-rw-r--r-- 1 root root 1263 2008-12-10 04:00 config.inc.php
-rw-r--r-- 1 root root 2162 2008-12-10 04:00 config.sample.inc.php
andy@andy-Server:/usr/share/phpmyadmin$

我們要把config.inc.php先備份起來，拿config.sample.inc.php來改 :

andy@andy-Server:/usr/share/phpmyadmin$sudo mv config.inc.php config.inc.copy.php <---把原本的設定檔名改掉
andy@andy-Server:/usr/share/phpmyadmin$sudo cp config.sample.inc.php config.inc.php <---複製一份sample檔成為主要設定檔
andy@andy-Server:/usr/share/phpmyadmin$ls -l config* <--做完應該要有這幾的檔案
-rw-r--r-- 1 root root  181 2008-12-10 04:00 config.footer.inc.php
-rw-r--r-- 1 root root  181 2008-12-10 04:00 config.header.inc.php
-rw-r--r-- 1 root root 1263 2010-09-14 21:00 config.inc.copy.php <--原本的設定檔
-rw-r--r-- 1 root root 1263 2010-09-14 21:00 config.inc.php <--從Sample檔拷貝過來的
-rw-r--r-- 1 root root 2162 2010-12-10 04:00 config.sample.inc.php
andy@andy-Server:/usr/share/phpmyadmin$

接下來開始編輯設定檔 sudo vim config.inc.php
按下 / 尋找 $cfg['Servers'][$i]['auth_type'] 並且把設定值改成 'http'
然後把游標往下移一些，你會發現以下設定值，請把這些設定值最前面的 // 雙斜線刪掉
存檔後離開

/* Advanced phpMyAdmin features */
$cfg['Servers'][$i]['pmadb'] = 'phpmyadmin';
$cfg['Servers'][$i]['bookmarktable'] = 'pma_bookmark';
$cfg['Servers'][$i]['relation'] = 'pma_relation';
$cfg['Servers'][$i]['table_info'] = 'pma_table_info';
$cfg['Servers'][$i]['table_coords'] = 'pma_table_coords';
$cfg['Servers'][$i]['pdf_pages'] = 'pma_pdf_pages';
$cfg['Servers'][$i]['column_info'] = 'pma_column_info';
$cfg['Servers'][$i]['history'] = 'pma_history';
$cfg['Servers'][$i]['tracking'] = 'pma_tracking';
$cfg['Servers'][$i]['designer_coords'] = 'pma_designer_coords';

這樣就設定完成了，可以再連一次phpMyAdmin看看

【Linux】Ubuntu 10.04 安裝 Apache2, PHP5, no-ip(noip2)

2010-09-08T10:03:00.000-07:00

1.安裝 Apache2 + php5
首先，把Ubuntu 10.04 灌好。
然後用 Synaptic 來安裝以下套件:

apache2
php5
php5-gd
php5-curl
libapache2-mod-php5

安裝完畢後，讓 Apache2 重新啟動一下比較保險 :

sudo /etc/init.d/apache2 restart

進入/var/www 資料夾中 vi phptest.php 在裡面輸入:

<?
      phpinfo();
?>

接著存檔，用瀏覽器測試 http://127.0.0.1/phptest.php
如果看到這個畫面就代表php設定完成了。
但如果你發現瀏覽器沒出現這些php資訊，反而是詢問你要不要下載這個檔案，
那你可能要重安裝一下php5；
或者是按照下面這樣做 :
(會發生這種情況有可能是php模組沒有啟動)

sudo a2ensite php5
sudo /etc/init.d/apache2 restart

如果還不行可能要再查一下真正出錯的原因。

2.安裝 noip2
首先，去 http://www.no-ip.com 申請no-ip的帳號、並且設定 :
申請帳號完畢後，進入使用者管理介面/Hosts Redirects/Add Host 設定自己的Domain Name

用 Synaptic 搜尋 noip2 並安裝。

安裝結束後會看到這個畫面 :
設定完後按下一步。
List of hosts or groups 這邊就輸入剛剛申請的Host Name
Network device Name 如果用ADSL連線的話，應該是"ppp0"

接著開啟終端機設定它的domain...

andy@andy-Server:/$ sudo noip2 -C

Auto configuration for Linux client of no-ip.com.

Please enter the login/email string for no-ip.com XXXXXX@kimo.com.tw //輸入帳號
Please enter the password for user 'XXXXXX@kimo.com.tw' **** //輸入密碼

Only one host [XXXXXX.no-ip.org] is registered to this account.
It will be used.
Do you wish to run something at successful update?[N] (y/N) n //輸入N

New configuration file '/var/lib/noip2/noip2.conf' created. //的設定檔產生在這個路徑下

輸入這個指令可以查看設定檔有沒有設定好

andy@andy-Server:/$ sudo noip2 -S
1 noip2 process active. 

Process 6960, started as noip2 , (version 2.1.9)
Using configuration from /var/lib/noip2/noip2.conf
Last IP Address set 59.xxx.xxx.xxx
Account XXXXXX@kimo.com.tw
configured for:         
     host  XXXXXX.no-ip.org
Address check every 1 minute, directly connected via /dev/ppp0.

andy@andy-Server:/$

這樣就設定成功了。
可以測試一下~

【JAVA】繼承(Inheritance) - extends

2010-09-05T23:58:00.000-07:00

所謂繼承，是指類別物件的資源可以延伸和重複使用，在程式中可以利用 extends 來實作繼承關係。
在JAVA中只允許單一繼承(Single Inheritance)，也就是說子類別同時只能繼承一個父類別。

範例 :
class Son extends Father{ }

繼承的UML結構圖

程式範例 :

class Father{
 public int money=100;
 public void getMoney(){
  System.out.println("我有:"+money);
 }
}

public class Son extends Father{

    public static void main(String[] args) {
     Son son = new Son();
     son.getMoney();
     System.out.println("son.money="+son.money);
    }
}

執行結果 :

我有:100

son.money=100

繼承關係下的建構子:
類別 Father 和 Son 在編譯的時候會產生預設建構子，所以必須看成 :

class Father{
    Father(){  }
}

class Son{
    Son(){ }
}

但是Son 類別繼承Father 類別，所以在預設javac會在Son(){ }建構子中的第一行加入無帶入參數的 super()，也就是呼叫富類別Father 的預設建構子，所以Son 類別應該看成 :

public class Son extends Father{

    Son(){
        super(); //呼叫父類別中的建構子
    }
}

super() 是什麼?
假設父類別是帶有參數的建構子，而又忘了在子類別建構子最前面加入 super()
程式範例 :

class Father{
 String my_son_Name;
 Father(String name){//此父類別建構子需要傳入 字串參數
  my_son_Name = name;
 }

 public void getName(){
  System.out.println("我兒子叫做:"+my_son_Name);
 }
}

public class Son extends Father{
 Son(){
  
 }

    public static void main(String[] args) {
     Son son = new Son();
     son.getName();
    }
}

如上述，如果沒有在子類別建構子中加入super() ，會出現以下錯誤 :

E:\JAVA 自我練習\Son.java:21: cannot find symbol
symbol  : constructor Father()
location: class Father
 Son(){
      ^
1 error

Process completed.

成上述條件，想要修這這樣的問題，只需要在子類別的建構子中加入super("字串") 即可 :

class Father{
 String my_son_Name;
 Father(String name){
  my_son_Name = name;
 }

 public void getName(){
  System.out.println("我兒子叫做:"+my_son_Name);
 }
}

public class Son extends Father{
 Son(){
  super("Andy");
 }

    public static void main(String[] args) {
     Son son = new Son();
     son.getName();
    }
}

執行結果 :

我的兒子叫做:Andy

this() 是什麼?
this 可以參考到目前使用該物件的屬性、方法、以及建構子，不過 this 只能用用在方法或建構子中。

※this( ) 和 super( ) 必須存在於建構子的第1行，且不能同時存在。
※this( ) 和 super( ) 也不能存在於static成員的程式中實作。

【CSS】圓角屬性 - CSS3 -moz-border-radius, -webkit-border-radius, border-radius

2010-08-29T02:51:00.000-07:00

[Firefox]

-moz-border-radius 是 Firefox 用來顯示圓角的語法。
如果四個角都是相同的設定，可以使用這個方法 :

-moz-border-radius:25px; /*四個角一起設定*/

若需要個別設定四個角的話，有兩種方法 :

-moz-border-top-left-radius:15px; /*左上角*/
-moz-border-top-right-radius:15px; /*右上角*/
-moz-border-bottom-right-radius:10px; /*右下角*/
-moz-border-bottom-left-radius:10px; /*左下角*/

或者是所有設定值都寫在同一句語法中 :
( 依序是 : 左上角; 右上角; 右下角; 左下角;)

-moz-border-radius:15px 0 15px 0;

[Google Chrome, Safari]

Chrome和Safari都是用 -webkit-border-radius 來實現圓角的效果。

如果想要四個角都一樣的話這樣就可以達成你要的效果了。

-webkit-border-radius:25px;

如果是單獨設置四個角的話，需要採取這種方式 :

-webkit-border-top-left-radius:15px; /*左上角*/
-webkit-border-top-right-radius:15px; /*右上角*/
-webkit-border-bottom-right-radius:10px; /*右下角*/
-webkit-border-bottom-left-radius:10px; /*左下角*/

或者是所有設定值都寫在同一句語法中 :

-webkit-border-radius:15px 10px;

ps.下面這種是不合法的方式( -webkit-border-radius 不支援這種寫法) :

-webkit-border-radius:10px 10px 15px 15px;

[IE9]
IE9尚未推出，但已經有許多技術方面的文件流出來了。以下是IE支援圓角矩形的CSS語法。

border-top-left-radius:15px; /*左上角*/
border-top-right-radius:15px; /*右上角*/
border-bottom-left-radius:10px; /*左下角*/
border-bottom-right-radius:10px; /*右下角*/

或者是這樣寫 :

border-radius:15px; /*四個角一起設定*/

【CSS】半透明效果 - CSS3 rgba, hsla, filter, -ms-filter

2010-08-29T00:14:00.000-07:00

[第一種] :內部所有物件皆透明
瀏覽器標準：

標準(Firefox): opacity:0~1
IE7: filter:alpha(opacity=0~100);
IE6: 還要再加上 zoom:1 ，不然會沒效

假設透明度65%

filter:alpha(opacity=65); opacity:0.65; zoom:1;

※當這樣的CSS放在一個 <div> 中，你會發現這個語法，就連div中的圖片、文字都會被設定為65%透明度，但有時候我們只是需要背景透明而已，只有背景透明的效果在第二種作法即可實現。

[第二種] :僅背景透明
瀏覽器標準：

Firefox, Google Chrome : rgba(Red值, Green值, Blue值, Alpha值)
- Red, Green, Blue值可以是0~255的整數值，與一般位元顏色的十進位值相同，惟這類表示法不接受十六進位值(如ff,8c)；
  也可以是0%~100%的百分比值。
  所以例如，rgb(128,128,128)=rgb(50%,50%,50%)=#808080 。
- Alpha值
  0.0~1.0 允許小數一位的數值，
  0 :完全透明， 1 :完全不透明，
  0.7 → 70% 不透明。但W3C 沒有明確地表示是否允許小數一位以上的數值。
- 範例
```
rgba(255, 255, 255, 0.75)/*白色, 透明度75%*/
```

Firefox, Google Chrome :hsla(hue值, saturation值, lightness值, alpha值)
- hue值, saturation 值, lightness 值, alpha 值
  hue值: 色相值，以整數「角度」值表示。如同數學角度，負值或超過360是允許的。
  saturation值: 飽和度值，0%~100%
  lightness值: 亮度值，0%~100%
  alpha值: 透明度，0.0~1.0允許小數一位的數值。

IE:
- IE6,IE7
```
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#99B4B490′,endColorstr=’#99B4B490′); /* IE6,IE7 */
```
  這是DXImageTransform.Microsoft.gradient濾鏡，我們首先要設定 startColorstr、endColorstr。
  在單色透明的情況下，這兩個值是相同的。他們的取值是一組 8位數的 16進位值。
  前2位: Alpha值，00代表完全透明；FF代表完全不透明。
  後6位: 表示這個顏色的RGB值。
- IE8
```
-ms-filter: “progid:DXImageTransform.Microsoft.gradient(startColorstr=’#99B4B490′,endColorstr=’#99B4B490′)”; /* IE8 */
```
  使用方法同上

【BLOG】Blogger 上安裝 SyntaxHighlighter

2010-08-26T03:32:00.000-07:00

有時候想要分享程式碼，卻會遇到使用原本HTML 的或

標籤顯示的樣式太單調、或是原本程式會因為"tab"的空格問題雜亂不堪。這是該使用Syntax Hightlighter的時候了!!

【1】首先去Syntax Highlighter的網站下載程式，然後解壓縮。
http://alexgorbatchev.com/SyntaxHighlighter/download/

然後到解壓縮後的資料夾中

/scripts 資料夾中copy一個必要檔案與自己所需要的程式語言模組。
→shCore.js
※Syntax Highlighter 官方模組清單解釋

/styles 資料夾中copy以下兩個必要檔案。
→ shCore.css, shThemeDefault.css

【2】接下來，去申請一個Google協作平台把需要的檔案都放上去或是放到自己擁有的網頁空間中。
開啟Blogger進入管理介面/設計/修改HTML，插入以下必要之程式碼在<head></head>區域裡面。
※要記得把"https://sites.google.com/site/allforandyuse/"改成自己所上傳的檔案位址。

<!--必要檔案-->
<link href="https://sites.google.com/site/allforandyuse/shCore.css" rel="stylesheet" type="text/css" />
<link href="https://sites.google.com/site/allforandyuse/shThemeDefault.css" rel="stylesheet" type="text/css"/>
<!--必要檔案-->
<script src="https://sites.google.com/site/allforandyuse/shCore.js" type="text/javascript"/>
<!--必要程式-->
<script type="text/javascript">
SyntaxHighlighter.all()
</script>

例如這是我自己所使用的 :

<link href="https://sites.google.com/site/allforandyuse/shCore.css" rel="stylesheet" type="text/css"/>
<link href="https://sites.google.com/site/allforandyuse/shThemeDefault.css" rel="stylesheet" type="text/css"/>
<script src="https://sites.google.com/site/allforandyuse/shLegacy.js" type="text/javascript"/>
<script src="https://sites.google.com/site/allforandyuse/shCore.js" type="text/javascript"/>
<script src="https://sites.google.com/site/allforandyuse/shBrushXml.js" type="text/javascript"/>
<script src="https://sites.google.com/site/allforandyuse/shBrushSql.js" type="text/javascript"/>
<script src="https://sites.google.com/site/allforandyuse/shBrushPython.js" type="text/javascript"/>
<script src="https://sites.google.com/site/allforandyuse/shBrushPhp.js" type="text/javascript"/>
<script src="https://sites.google.com/site/allforandyuse/shBrushJScript.js" type="text/javascript"/>
<script src="https://sites.google.com/site/allforandyuse/shBrushJava.js" type="text/javascript"/>
<script src="https://sites.google.com/site/allforandyuse/shBrushCss.js" type="text/javascript"/>
<script src="https://sites.google.com/site/allforandyuse/shBrushCSharp.js" type="text/javascript"/>
<script src="https://sites.google.com/site/allforandyuse/shBrushCpp.js" type="text/javascript"/>
<script src="https://sites.google.com/site/allforandyuse/shBrushBash.js" type="text/javascript"/>
<script type="text/javascript">
SyntaxHighlighter.all()
</script>

【3】使用方法 :

<pre class="brush:html" name="code">
<!--程式碼-->
</pre>

brush:這裡就放程式語言類型
Example:

brush:java

brush:cpp

brush:xml

ps.使用<pre></pre>區塊必須先將 "&"改成&amp ;、"<"改成<、">"改成>

※程式語言對應表 Syntax Highlighter 官方對應表(請看Brush aliases)

【Apache】Internet 403 Forbidden. You don't have permission to access \ on this server.

2010-08-19T06:29:00.000-07:00

剛灌好Apache Server 結果才輸入http://localhost/ 卻出現這個錯誤...

Internet 403 Forbidden.

You don't have permission to access \ on this server.

其實這是 Apache 的設定檔問題
開啟 httpd.conf 尋找<Directory />

可以找到以下設定值:
<Directory />
   Options FollowSymLinks
   AllowOverride None
   Order deny,allow
   deny from all
   Satisfy all
</Directory>

把deny from all改成 allow from all 就可以了

存檔後重新啟動Apache後再試一次應該就不會再出現先前的問題

【JAVA】用label為迴圈命名。

2010-05-07T09:26:00.000-07:00

用label為迴圈命名。
label代表的是迴圈的標示記號，撰寫JAVE程式的時候可以利用label指向相對應的迴圈，定義標示名稱有以下2種方式：
1. label_name: 迴圈敘述...
2. label_name:
迴圈敘述
在定義的標籤名稱(label_name)後一定要加上冒號(：)，之後才是接回圈的敘述句。
以下為JAVA程式碼。

01 OuterLoop://標籤名稱(迴圈的名字)
02 for( ; ; ){ //外層迴圈
03 　InnerLoop:
04 　for( ; ; ){ /內層迴圈
05 　　break InnerLoop;
06 　　//程式區塊...
07 　　continue InnerLoop;
08 　　//程式區塊...
09
10 　　break OuterLoop;
11 　　//程式區塊...
12 　　continue OuterLoop;
13 　　//程式區塊...
14 　}
15 }

第5行執行break InnerLoop表是直接跳出InnerLoop迴圈，且繼續執行OuterLoop迴圈為完成的程序。第7行執行continue InnerLoop表示直接跳到InnerLoop迴圈的敘述，且執行InnerLoop迴圈未完成的程序。

但是實際上不能直接這樣使用break、continue，例如：

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19

import java.util.*;
public class java_label {

  public static void main(String[] argc) {

    OuterLoop:
    for(int i=0 ;i<2 ; i++){
      InnerLoop:
      for(int j=0 ; j<10 ; j++){
        System.out.println('A');

　　break OuterLoop;
        System.out.println('B');
        System.out.println('C');
        System.out.println('D');
      }
    }
  }
}

假設像這樣使用的話，由於break OuterLoop; 下方還有程式碼在，所以會出現Compiler Error：unreachable statement。所以想要使用這樣的方法，必須在break、continue前面加入條件判斷，或是放在迴圈最末端。

配合判斷式使用，例如：

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19

import java.util.*;
public class java_label {

    public static void main(String[] argc) {

    OuterLoop:
    for(int i=0 ;i<2 ; i++){
        InnerLoop:
        for(int j=0 ; j<10 ; j++){
            System.out.println('A');
　　　　if(j>=0)
　　　　　break OuterLoop;
            System.out.println('B');
            System.out.println('C');
            System.out.println('D');
          }
      }
  }
}

在break OuterLoop前方加入if(j>=0)加以判斷篩選，這樣就可以運作了。
第12行換成其他幾種方式，來比較輸出結果有何不同。
break OuterLoop;

Output:
A

continue OuterLoop;

Output:
A
A

break InnerLoop;

Output:
A
A

continue InnerLoop

Output:
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A

本文章由帳號：andy1989 發布於卡提諾論壇，網址：點我

【JAVA】JAVA 運算子的優先順序

2010-05-07T03:27:00.000-07:00

JAVA 運算子的優先順序

優先權值	運算子
1	( )括號
2	正(+)負(-)號、++、--
3	*、/、%
4	加號(+)、減號(-)
5	>>、<<、>>>
6	<、<、<=、>=、instanceof、!=、= =
7	&、^、\|、&&、\|\|
8	?、:
9	=、+=、-=、*=、/=、<<=、>>=、>>>=

例如：
x = 5 * 3 < 20 & 3 + 7 > 9 - 1 || 20 >= 20 -30 && false
先算 5 * 3 、 3 + 7、 9 - 1 、20-30的結果
再算15 < 20 & 10 > 8、|| 20 >= -10 的結果
true & true || true && false
因為 &， || 與 && 等級相同，所以先算true & true的結果
true || true && false (粗斜體字的部分不做，因為碰到的運算子是 || )
最後可得，x= true

【JAVA】存取修飾元。

2010-05-06T08:37:00.000-07:00

在JAVA裡面有這幾種修飾元：private, default, protected, public
這些修飾元依照存取權限來分成四種等級如下。
存取修飾元權限說明：

存取修飾元	權限說明
private	同一個class才可存取
Default 無修飾元	同一個package的class才可存取
protected	同一個package的class才可存取不同的package得要有繼承關係才可存取
public	皆可存取

存取修飾元的可視範圍:

存取修飾元	同一Class	同一Package	子類別	不同的Package
Private	Yes	-	-	-
Default 無修飾元	Yes	Yes	-	-
Protected	Yes	Yes	Yes	(Yes)要繼承
Public	Yes	Yes	Yes	Yes

【XUL】hbox, vbox 實作。

2010-03-17T12:57:00.000-07:00

hbox, vbox ,box 這三個其實都是相關的物件。
<box orient="horizontal">
   
</box>
<box orient="vertical">
   
</box>
<hbox>
   
</hbox>
<vbox>
   
</vbox>

在<box>中使用orient="horizontal" 效果形同 <hbox>，在<box>中使用orient="vertical" 效果形同 <vbox>。

hbox

<hbox>
       <toolbarbutton id="back" width="32px" height="32px"
         tooltiptext="Back" image="chrome://test/skin/btn/back.png"/>
       <toolbarbutton id="upload" width="32px" height="32px"
         tooltiptext="Upload Files" image="chrome://test/skin/btn/upload.png"/>
       <toolbarbutton id="folder_add" width="32px" height="32px"
         tooltiptext="Add Folder" image="chrome://test/skin/btn/folder_add.png"/>
</hbox&gt

vbox