【ZK】資料庫應用

本篇範例將介紹在一個以 ZK 為基礎的 UI 下，讀取資料庫並顯示結果在 UI 上

首先先介紹 ZK 長用於顯示資料的 listbox 元件，如下圖

通常一個顯示資料的元件 listbox 來有包含兩個子元件 listhead、listitem

顧名思義 listhead 就是顯示最上面顯示欄位名稱的地方 listitem 則是顯示每筆資料的元件

<listbox id="box" multiple="true" rows="10" >

        <listhead>

            <listheader label="countryID"/>

            <listheader label="locationNO" />

            <listheader label="locationName" />

            <listheader label="countryName" />

        </listhead>

        <listitem>

            <listcell />

            <listcell />

            <listcell />

            <listcell />

        </listitem>

</listbox>   

【pureMVC】教學範例(三)

最後一篇要來介紹 Proxy 的內容了，通常在一般的 Proxy 會與遠端做連接

並處理一些邏輯，在針對做後的結果發出 Notification，以下的範例我並沒有用遠端的方法

來和後台要資源，以簡化這個 pureMVC 的範例

LoginProxy.as

package org.model

{

    import org.puremvc.as3.interfaces.IProxy;

    import org.puremvc.as3.patterns.proxy.Proxy;

    //繼承 Proxy, 並實作 IProxy 介面

    public class LoginFormProxy extends Proxy implements IProxy

    {

        public static const NAME:String = "LoginFormProxy";

        public static const LOGIN_SUCCESS:String = "login_success";

        public static const LOGIN_FAIL:String = "login_fail";

        public function LoginFormProxy()

        {

            super(NAME, null);

        }

       

        public function login(account:String):void

        {

            if(account == "tester1"){

                //發出登入成功事件

                sendNotification( LOGIN_SUCCESS, "welcome " + account);

            }else{

                //發出登入失敗事件

                sendNotification( LOGIN_FAIL, "login fail");

            }

        }

       

    }

}

【pureMVC】教學範例(二)

在第一篇我們已經將 UI 的元件分割出來後，就可以分別依照各個 Component 來建立 Mediator

以下先來看登入元件 "LoginForm.mxml" 的 Mediator -- LoginFormMediator.as

package org.view

{

    import org.view.component.LoginForm;

    import org.ApplicationFacade;

    import org.puremvc.as3.interfaces.IMediator;

    import org.puremvc.as3.interfaces.INotification;

    import org.puremvc.as3.patterns.mediator.Mediator;

    import flash.events.Event;

    import mx.controls.Alert;

    //須繼承 Mediator 並實作  IMediator 介面

    public class LoginFormMediator extends Mediator implements IMediator 

    {

        public static const NAME:String = "LoginFormMediator";

       

        public function LoginFormMediator(viewComponent:Object=null)

        {

            super(NAME, viewComponent);

            //註冊 LoginForm 的登入事件  "login", 當處發時呼叫  onLogin() 方法

【pureMVC】教學範例(一)

這裡以一個簡單的登入範例來呈現 pureMVC 的教學介紹

     首先在左圖的 Flex UI 中，紅色部分輸入名稱後
按下 Login 的 Button，在底下的 TextArea 會 show 出結果

     以這樣的案例來思考，整個流程會觸發哪些事件

這在 pureMVC 的應用開發中是很重要的一點


再來就是，在 UI 中有哪些元件會觸發哪些事情，哪些元件需要"關心"哪些事情

因此，對於 UI 的設計也很重要，能否將 UI 切割出合適元件，使得各個元件能簡單明瞭的知道

他們所關心或所發出的事件，而不至於造成混亂。故必須盡量讓每個元件各司其職

先預覽一下整個範例的目錄架構

首先來看看範例的組成，第一點最重要的是 Facade，以下為 ApplicationFacade.as

package org

{

    import org.controller.AppCommand;

    import org.controller.LoginCommand;

    import org.puremvc.as3.patterns.facade.Facade;

   

    public class ApplicationFacade extends Facade //須繼承 Facade

    {

        //以下為本範例的所有事件 (Notification) !!

        public static const START_UP:String="start_up";  //AP初始化 事件

        public static const USER_LOGIN:String="login"; //使用者登入 事件

        //登入成功 事件

        public static const LOGIN_SUCCESS:String = "login_success";

        //登入失敗 事件

【pureMVC】基礎簡介

pureMVC 是以 MVC 架構為基礎的 Framwork，它並不侷限於應用在 Flex 的開發上

在手機、PHP、微軟基礎的架構下都可以使用它

pureMVC 除了 MVC 的基礎之外還額外新增了 Façade，以下說明這四項分類的要點


一、Façade

● Façade 是 pureMVC 的核心，他以單例模式的方法建構了一個唯一的Façade實例

● 一個 Façade 需要繼承 org.puremvc.as3.patterns.facade.Facade 

● Façade 都會定義整個應用程式會用到的所有事件(Notification)  例如以下：

   public static const USER_LOGIN:String="login"; //使用者登入 事件

● 通常都會覆寫(override) initializeController() function，這裡是用來關聯每個 Notification 所對應到的              
   Command  例如以下

   //註冊  USER_LOGIN Notification
   this.registerCommand(USER_LOGIN, LoginCommand);

Hibernate 教學 - 分頁處裡

對於現今網頁技術中，分頁的控制是必須面臨的問題，除了在 SQL 可以控制外

如果在 J2EE 的架構中，持久層採用了 Hibernate。對於分頁技術而言

Hibernate 也讓 HQL 和 QBC 都提供了分頁技術的實現，Hibernate 透過簡單的方法達到分頁的效果

以下來看看 HQL 的實現方法

在 HQL 的方法中　主要是通過 setFirstResult()方法與 setMaxResults()方法來實現


在 setFirstResult(int index) 方法中，只要是用於查詢資料的開始的索引位置


index 即是你要查詢資料的起始位置
而  setMaxResults()方法中，就是最多要查詢出幾筆資料


index 即是你要查詢的筆數　　以下舉一個例子，我們要查詢索引位址從5開始的10筆資料

【BlazeDS】RPC service 範例

遠端是一個包含在 BlazeDS 裡面的一項 RPC 服務，透過這種遠端的方式能夠讓客戶端

存取一個在 Server Side 的 POJO 的方法。本篇用 RemoteObject 來實現客戶端的 Flex 和伺服端的溝通

以下用一個 HelloWorld 的範例來介紹這種方式的實作內容

我透過 MyEclipse plug-in + Flex Builder plug-in 來開發這個範例，這裡先新建一個 WEB 的專案 ，並命名為 BlazeDSServer

第一步先匯入所需的 JAR 包，通常所需要的檔案可以去以下網址找

http://opensource.adobe.com/wiki/display/blazeds/download+blazeds+4   ((選 Turnkey

其實裡面就包含了很多的範例和程式，不妨可以依照裡面的內容學習看看

如果要開發最基本的 BlazeDS Server Side 的話起碼需要以下的 JAR

flex-messaging-common.jar    flex-messaging-core.jar    flex-messaging-opt.jar    flex-messaging-proxy.jar
flex-messaging-remoting.jar    flex-rds-server.jar

如果你不是透過 RemoteObject 的方式，譬如透過了 Message Service 之類的話，

可能還會需要用到 Apache 的 HttpClient，不過放心的是　你所可能用到的包　都可以在剛才的下載點中找到

完成第一步後，先簡單寫的 Echo 的 Java 範例吧

package org.util;
public interface EchoService 
{
    public String echo(String receive);
}

package org.util.impl;
import org.util.EchoService;
public class EchoServiceImpl implements EchoService {

    @Override
    public String echo(String receive) {
        return "Server says : I receive '" + receive + "' from you";
    }
}

【BlazeDS】基本簡介

BlazeDS 提供了一組的服務能夠讓開發者連接客戶端的應用程式到伺服端的資料

並且能夠通過數個客戶端的資料連接到伺服端。簡單說 BlazeDS 實現了客戶端的即時訊息傳遞

一個 BlazeDS 的應用程式由兩部分所組成：

1. 一個客戶端的應用程式
2. 一個伺服端的 J2EE 架構











在客戶端這部份，這些應用程式通常都是 Adobe 的 Flex 或是 AIR，他們都透過 Flex 的眾多元件與 BlazeDS 的伺服端作溝通