iUI - iPhone 網頁程式設計

有點小失望，為何標題不是 iPhone 程式設計，多了一個"網頁"內容的確差了十萬八千里啊! iPhone User Interface Framework 簡稱 iUI 是一個可以讓網頁看起來超像 iPhone OS 程式的網頁框架，而最核心的部分是用 JavaScript 撰寫的控制碼，不過呢!不用看懂也是可以使用的很愉快哦。

如何使用 iUI 來建立 iPhone 網頁呢

1. 下載 Framework

• Google Code Project: [專案網頁]
• Download: [檔案下載]，(tar.gz)
• 解壓縮之後: 把 iui 資料夾放到網頁專案的目錄即可

2. 獲取網頁樣板和 JS 語法控制的程式

<style type="text/css" media="screen">@import "iui/iui.css";</style>
<script type="application/x-javascript" src="iui/iui.js"></script>

PHPMailer 利用 GMail 發信

偶爾會想要用簡單的小程式來寄信，寶尼推薦 PHPMailer 因為它確實是一個簡單又好用的工具喔。而且不需要去設定 php.ini 內的 sendmail 以及 port，完完全全跟我們現行的系統平台切割。換個角度說，也稱為完完全全相容，因為檔案下載下來之後，解壓縮就可以使用，還不用更換到原先的設定值，這樣是不是很有趣呢?

以下為建立步驟

1. 下載 PHPMailer 類別檔案

可以到 sourceforge.net 下載，PHPMailer 專案的連結

2. 如何安裝 PHPMailer 呢?

解壓縮後僅需要 class.phpmailer.php, class.pop3.php, class.smtp.php 三個檔案，把它放在程式欲執行的目錄即可。

Xajax 動態更新網頁 - update

AJAX 的最後一個步驟是: 將非同步所取得的資料，回傳到預先規劃好得網頁位置(通常用 id, name 來作辨識)，而在 XAJAX 中 xajaxResponse.inc.php 的 xajaxResponse 物件提供許多函式可以讓我們操作，而我用過得函式大約就是以下這幾個而已，以下是函式說明：

常用的 Response 函式

1. Method assign($sTarget,$sAttribute,$sData)

sTarget (string) 亦即我們所謂的 id，sAttribute (string) 更新之屬性，sData (string) 屬性的值。
用在直接取代,，原本屬性的值。例如：作第二次乘法運算，必須將第一次的結果給覆蓋上次。

$xajax->assign($id, $attribute, $data);

2. Method append($sTarget,$sAttribute,$sData)

參數同 assign。常用於動態資料新增之用, 例如：在龐大的清單中，新增一筆訂單時，動態呈現而不做整頁的重新索取。

$xajax->append($id, $attribute, $data);

3. Method createInput($sParent, $sName, $sId)

sParent (string) 即 id，sNmae (string) 新元素的name標籤，sId (string) 新元素的 id。

$xajax->createInput($parent_id, $new_name, $new_id);

4. Method remove($sTarget)

sTarget (string) 即 id。刪除元素。

$xajax->remove($id);

5. Method script($sJS)

sJS (string) javascript code。在 PHP 中撰寫 Javascript 程式並執行。

$xajax->script($jscode);

綜合範例

動態讓使用者下拉，想做的操作。有 create, assign, append, remove, script。選擇任何一種操作都會跑出對應的控制選項做選擇。create 可以選擇新增 input, password, checkbox, radio 並賦予屬性質呈現，assign 針對 create 出來的值作指派的動作，append 則是針對 create 的值做添加的動作，remove 會把整個元件做刪除，而 script 輸入 javascript 語法賦予在按鈕上面，按下馬上操作，預設是 windows.close() 關閉瀏覽器視窗。

主要的操作函式:

function xajaxcreate($value1, $value2, $value3, $value4){
  $objResponse = new xajaxResponse();
  $objResponse->append('element_panel', 'innerHTML',"type:$value1, 
  name:$value2, id:$value3<br/>");
  $objResponse->createInput('element_panel', $value1, $value2, $value3); 
  $objResponse->assign($value3, 'value', $value4);
  $objResponse->append('element_panel', 'innerHTML', '<br/>');
  return $objResponse;
}

function xajaxassign($value1, $value2){
  $objResponse = new xajaxResponse();
  $objResponse->assign($value1, 'value', $value2);
  return $objResponse;
}

function xajaxappend($value1, $value2){
  $objResponse = new xajaxResponse();
  $objResponse->append($value1, 'value',$value2);
  return $objResponse;
}

function xajaxremove($value1){
  $objResponse = new xajaxResponse();
  $objResponse->remove($value1);
  return $objResponse;
}

function xajaxscript($value1){
  $objResponse = new xajaxResponse();
  $objResponse->script($value1);
  return $objResponse;
}

範例下載

檔案放置於 Google Site 平台，請按[這裡]下載檔案
version: xajax 0.5 Final

備註；寫完之後，感覺跟 createFormInputTest.php 有點像捏，唯一幾點不同的是官方範例比較亂吧，哈!其實也不竟然啦，整個選單是動態產生的會存在瀏覽器中，因此看原始碼會看不出來，建議使用:

$xajax->setFlag("debug", true); 

來檢視產生出來的 HTML 元素做測試，範例也可以說是 createFormInputTest.php 的完全動態版本吧。這也只是練習而以不用太在意，後續會再補上與一些繪圖函式結合的應用上來。

延伸閱讀

[1.] PHP+MYSQL+AJAX網頁程式設計 簡報第十六章