Ocean 學習筆記

2010年6月15日星期二

Flex4 Dynamic Layout

§利用Flex4的Layout特性寫一個動態更換Layout的例子
關於Flex4的Layout請參考上篇About Layout in Flex4
//動態更換layout Example
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"
applicationComplete="application1_applicationCompleteHandler(event)"
layout="{new VerticalLayout()}"
>

<fx:Script>
<![CDATA[
import mx.events.FlexEvent;
import mx.graphics.SolidColor;
import spark.layouts.HorizontalAlign;
import spark.layouts.HorizontalLayout;
import spark.layouts.TileLayout;
import spark.layouts.VerticalLayout;
import spark.primitives.Rect;

//排版物件參照
private var rectGroupVerLayout:VerticalLayout;
private var rectGroupHorLayout:HorizontalLayout;
private var rectGroupTileLayout:TileLayout;
//色彩存放的Array
private var _colors:Array = [0xff0000,0xffc600,0xfff605,0x00ff00,0x0000ff,0x5a2fe9,0xae2fe9];

protected function application1_applicationCompleteHandler(event:FlexEvent):void
{
　//建立排版物件
　rectGroupVerLayout = new VerticalLayout();
　rectGroupHorLayout = new HorizontalLayout();
　rectGroupTileLayout = new TileLayout();
　createSevenRect();
}

About Layout in Flex, 關於Flex4中 (SDK4) 的排版

§About Layout in Flex4
在Flex4中，顯示元件的動作，樣式(Style)，外觀(Skin)，排版(Layout)都是抽離出來成為一個類別(Class)，如此做法更合乎了物件導向觀念能讓物件之間彼此更鬆散，降低耦合，也更合乎了MVC，因此在Flex4中的顯示元件更顯得靈活好用。

上圖是Layout的類別關係圖，可以看到Flex4中具有四種原生的Layout類別，而這四種Layout類別都繼承了LayoutBase，由此父類來達到超型態(superType)作用，而如果你想要製作自己的Layout工具，繼承LayoutBase來開發自訂的Layout類。

<s:BasicLayout/>　　　　絕對位置佈局
<s:TileLayout/>
<s:HorizontalLayout/>　　水平排列佈局
<s:VerticalLayout/>　　　垂直排列佈局

如何使用：

　使用標籤或是layout屬性來設定，注意在標籤中如果是小寫這代了此標籤是屬性或方法，而layout他是一個屬性。

2010年6月12日星期六

FlashBulider使用AsDoc建立API文件時發生Error loading處理

§FlashBulider使用AsDoc建立API文件時發生Error loading處理

狀況描述：
FlashBulider使用External Tools呼叫AsDoc建立API文件發生Error loading: C:\Program Files\Java\jdk1.6.0_17\jre\bin\server\jvm.dll的處理。

作業系統環境：Windows7 64
系統上具有安裝的程式開發項目：JAVA JDK 6(64位元)(JAVA的開發包) ，FlashBulider ，Flex Bulider ，Eclipse ，Ruby

錯誤訊息：

解決方式：
於External Tools介面中，切到Environment(環境)，

選擇New(新增)，填入以下數值

name(變量): JRE_HOME [可以取你自己習慣的名稱]
value(值): C:\Program File\java\jre\bin [你的Jre所在路徑]

選擇"將本機環境變數替換為指定環境"
按下Apply(應用)
運行，即可再次產生API文件

不知道為什麼不可以使用JDK內部的JRE，而一定要外部的JRE。

2010年6月9日星期三

Java 編譯詳細說明與使用注意事項，package有無差很大

§Javac 與 Java 使用注意細節
今天小弟編譯時未注意package讓我莫名其妙爽爽，所以研究了一下將其寫成筆記記錄。

Setp1.建立測試資料夾結構如下

C:\MyProject\Classes\tw\com\test
C:\MyProject\source
可善用命令列來建立
建立資料夾指令：md [資料夾名稱]

Setp2.於source底下建立SayHello.java檔

於C:\MyProject\source編寫如下Java Source code ，完成後存成SayHello.java檔。

注意此檔未使用package宣告。
注意不管是使用筆記本或是NotePad++來編輯，存檔格式請用ANSI，使用UTF8反而會讓中文輸出會變成亂碼。

public class SayHello

{

public static void main(String[] args)

{

System.out.println("hello 歡迎來到小J的部落格");

}

Step3.用javac編譯.java檔成為.class檔

小技巧：輸入命令可以善用Tab鍵來代替檔名輸入，將會快速許多。

於command line中輸入：

C:\>cd MyProject
C:\MyProject>cd source
C:\MyProject\source>javac SayHello.java

如此會在source產生一個編譯好的SayHello.class於source資料夾中。

Step4.用java執行.class檔

輸入：

C:\MyProject\source>java SayHello

輸出：

hello 歡迎來到小J的部落格

Step5.使用javac與參數-d將編譯好之檔案置放於classes

小技巧：..\其實也可以使用../代替

輸入：

C:\MyProject\source>javac -d ..\classes SayHello.java
C:\MyProject\source>cd.. \classes
C:\MyProject\classes>
C:\MyProject\classes>dir
如此可以看見classes資料夾中產生了一個SayHello.class

輸入:

C:\MyProject\classes>java SayHello

輸出：

hello 歡迎來到小J的部落格

Step6.清除掉剛剛產生的.class檔

2010年6月8日星期二

Blazeds4 配置與Flex Remote測試 ,使用tomcat6

§Blazeds 配置與Flex Remote測試(for windows system)

請先安裝JDK，請參考JDK安裝與配置。
安裝配置tomcat(for windows)，以便運行Java於Server服務端，請參考Tomcat 安裝配置。

注意:本文使用的是tomcat6 , Blazeds 4

Step1.至Adobe Open Source取得Blazeds。

Adobe Open Source頁面用IE開啟版面會跑掉，可以使用google瀏覽器開啟頁面。

點擊Release Builds底下的連結Download the latest BlazeDS Release builds進入adobe下載頁面。
進入後會需要登入網頁，沒有帳號向adobe註冊即可。

　登入後按下IAgree

找到Download，下載BlazeDS binary distribution版本

turnkey是內含了tomcat
binary distrbution單純就只有BlazeDS

Step2.將下載回來的BlazeDS壓縮檔解壓縮

解壓縮後，於資料夾內會有兩隻檔案，blazeds.war 與 blazeds-bin-readme.htm。

Step3.將blazeds.war置放於tomcat底下的webapps資料夾

執行startup運行tomcat，該批次檔位於C:\[你的tomcat資料夾名稱]\bin\startup
Tomcat運行中遇到.war的檔案會自動將他解壓縮，會看見在webapps底下多了一個blazeds資料夾。

問題：未自動解壓，如果tomcat未自動解壓，是因為tomcat的server.xml未配置。

解決方式：

編輯C:\[你的tomcat資料夾]\conf\server.xml檔。
於Host參數中加入deployOnStartup="true"

　　unpackWARs="true" autoDeploy="true"

　　xmlValidation="false" xmlNamespaceAware="false">

如果你覺得麻煩也可以用解壓縮程式來解他，但tomcat如果會自動解是比較方便。

Step4.更改解壓完blazeds資料夾

將blazeds改成blazedsAMF
更改完成後應為：C:\tomcat6\webapps\blazedsAMF
此步驟可以不變更，依照自己的喜好習慣來決定。

Step6.於blazedsAMF\WEB-INF\src裡創建tw\com\myRemoteService的資料夾結構

建立好結構：
C:\[tomcat資料夾]\webapps\blazedsAMF\WEB-INF\src\tw\com\myRemoteService

Step7.於\webapps\blazedsAMF\WEB-INF\src\tw\com\myRemoteService中建立一支SayHello.java。

Tomcat 安裝配置 for windows

§Tomcat 安裝配置 for windows
安裝tomcat前因先安裝JDK，請參考JDK安裝配置。

Step1.下載Tomcat6.x

至Tomcat官方網站點擊DownLoad底下的Tomcat 6.x開啟下載頁面。

點擊TomCat 6. x 以便開啟下載頁面。

Tomcat Connectors是用來讓Tomcat與apache Server連結，也可用來做Load Balancing。

Documentation相關於Tomcat的使用文件。

在下載頁面中可以使用Quick Navigation的快速錨點連結到Tomcat6.x載下處

Tomcat 6.x 個版本下載連結點

32-bit/64-bit Windows Service Installer (pgp, md5)，具有install方便安裝的版本。
32-bit Windows zip (pgp, md5)，for 32位元 windows系統，不具install。
64-bit Windows zip (pgp, md5)，for 64位元 windwos系統，不具install。
請依需求下載，本文使用32-bit Windows zip (pgp, md5)。

Stpe2:將下載完之tomcat解壓縮，並將資料夾更名為tomcat6，並將資料夾複製於C:\底下。
完成後應為： C:\tomcat6

Stpe3-1:設定環境變數 CATALINA_HOME

打開環境變數設定變板：

我的電腦 → 滑鼠右鍵 → 內容 → 進階 → 環境變數。

新增系統變數CATALINA_HOME：

系統變數 → 新增

變數名稱：CATALINA_HOME
變數值　：C:\tomcat6

Step3-2.設定環境變數 CATALINA_BASE

新增系統變數CATALINA_BASE

變數名稱：CATALINA_BASE

變數值　：C:\tomcat6

Step4.StartUp Tomcat

進入C:\tomcat6\bin底下，執行startup.bat批次檔，讓tomcat運行。
檔案所在：C:\tomcat6\bin\startup

執行結果資訊：

Starting Coyte HTTP/1.1 on http-8080，這是目前tomcat預設的Http協定走的Port 為8080，稍後我們再來變更config。
Starting Coyte AJP/1.3 ，這是連接器使用的通訊協定跟Port，是用來與apache連接的通訊方式。

Stpe5.測試Tomcat運行狀況

在瀏覽器中輸入http://127.0.0.1:8080/ ，測試tomcat運作與否。
若Tomcat已運行，會開啟如下畫面。

Step6. shutdown Tomcat

進入C:\tomcat6\bin底下，執行shutdown .bat批次檔，讓tomcat關閉服務。
檔案所在：C:\tomcat6\bin\shutdown
再次用瀏覽器開啟http://127.0.0.1:8080 ，將無法開啟tomcat歡迎頁面

Stet7.更改Http協定使用之通訊Port與編碼

打開C:\tomcat6\conf下的server.xml
檔案所在：C:\tomcat6\conf\server.xml

找到如:

<Connector port="8080" protocol="HTTP/1.1"

connectionTimeout="20000"

redirectPort="8443" />

將port="8080" 改成port="8400"

<Connector port="8400" protocol="HTTP/1.1"

connectionTimeout="20000"

redirectPort="8443" URIEncoding="UTF-8" />

再次以StartUp開啟tomcat服務。

以瀏覽器開啟http://127.0.0.1:8400/
當出現tomcat歡迎頁，代表Port更改完成。

修改編輯一些config的檔案可以使用Notepad++來代替筆記本，算是一個蠻方便的工具。

Step8.編寫一個測試的index.jsp檔

於webapps中建立一個myTestAPP資料夾，路徑結構如下
C:\tomcat6\webapps\myTestApp
使用Notepad++建立一個空白的index.jsp檔，編碼格式選擇編譯成UTF-8(檔頭無BOM)，先行存檔。

編寫index.jsp內容：
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>這是一個JSP的測試頁面</title>
<body>
<center>
　現在時間<%=new java.util.Date()%>
</center>
</body>
</html>

於瀏覽器中開啟http://127.0.0.1:8400/myTestApp/index.jsp
見到以下畫面即JSP正常運作

Step9.建立WEB-INF資料夾與建立web.xml檔
於myTestApp底下建立WEB-INF資料夾，並在WEB-INF資料夾中建立一個web.xml檔。
結構如下：

C:\tomcat6\webapps\myTestApp\WEB-INF\web.xml

編寫內容如下：
<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE web-app
PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"
"http://java.sun.com/dtd/web-app_2_3.dtd">

<web-app>
<display-name>My Web Application</display-name>
<description>
tomcat Web page Test
</description>
</web-app>

Step10.於WEB-INF底下建立classes與source兩資料夾
完成後結構為：

C:\tomcat6\webapps\myTestApp\WEB-INF\classes
C:\tomcat6\webapps\myTestApp\WEB-INF\source

Step11.於classes建立結構tw/com/test
完成後如下結構：

C:\tomcat6\webapps\myTestApp\WEB-INF\classes\tw\com\test

Step12.於source中建立Servlet服務測試檔，檔名為ServletTest.java檔案內容如下：

package tw.com.test;
import java.io.*;
import javax.servlet.*;
import javax.servlet.http.*;
public class ServletTest extends HttpServlet
{
public void doGet(HttpServletRequest request,HttpServletResponse response)
throws ServletException,IOException
{
response.setContentType("text/html");
PrintWriter out = response.getWriter();
out.println("<html>l;<head><title>");
out.println("This is my first Servlet");
out.println("<</title></head><body>");
out.println("<h1>Hello 綾瀨遙</h1>");
out.println("</body></html>");
}
}

Step13.編譯ServletTest.java
輸入命令：

C:\tomcat6\webapps\myTestApp\WEB-INF\source>javac -d ../classes ServletTest.java

結果：出現錯誤

由錯誤訊息得知主要無法import javax.servlet.*與javax.servlet.http.*

Step14.新增CLASSPATH修正無法import問題
修正方式：
於原本CLASSPATH按下編輯新增以下兩個變數值
%CATALINA_HOME%\lib;%CATALINA_HOME%\lib\servlet-api.jar;
設定後CLASSPATH環境變數應為：
.;.\classes\;..\classes\;%JAVA_HOME%\lib;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar;%CATALINA_HOME%\lib;%CATALINA_HOME%\lib\servlet-api.jar

Step15.再次編譯ServletTest.java
輸入命令：

C:\tomcat6\webapps\myTestApp\WEB-INF\source>javac -d ../classes ServletTest.java

結果：
此次通過編譯，可於
C:\tomcat6\webapps\myTestApp\WEB-INF\classes\tw\com\test
路徑裡看到編譯輸出的ServletTest.class檔。

Step16.再次打開編輯WEB-INF底下的web.xml檔，來登記ServletTest.class這隻檔案的映射服務。
/

PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"
"http://java.sun.com/dtd/web-app_2_3.dtd">

<web-app>
<display-name>My Web Application</display-name>
<description>
tomcat Web page Test
</description>

<servlet>
<servlet-name>ServletTest</servlet-name>
<servlet-class>tw.com.test.ServletTest</servlet-class>
</servlet>

<servlet-mapping>
<servlet-name>ServletTest</servlet-name>
<url-pattern>/ServletTest</url-pattern>
</servlet-mapping>
</web-app>

使用瀏覽器輸入http://127.0.0.1:8400/myTestApp/ServletTest

輸出結果：
Hello,world!

資料參考於以下兩個關於Tomcat的網站
Tomcat官方網站： http://tomcat.apache.org/
Tmcat維基百科： http://zh.wikipedia.org/zh-tw/Apache_Tomcat

2010年6月7日星期一

Flash AMFPHP Remote 測試範例

§使用NetConnection來做AMF Remote

範例雖是Flex撰寫，但由於使用NetConnection來做Remote連線,所以Flash也適用。

example:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application applicationComplete="init();" xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
<![CDATA[
import mx.rpc.events.ResultEvent;
private var _btnEnable:Boolean;
private function init():void
{
_btnEnable = true;
initNetConnection();
}

private var _nc:NetConnection;
private function initNetConnection():void
{
_nc = new NetConnection();
//回呼處理物件
_nc.client = this;
//序列化格式指定
_nc.objectEncoding = ObjectEncoding.AMF3;
//指定AMFServer服務位置
_nc.connect(amfServerUri);
_nc.addEventListener(NetStatusEvent.NET_STATUS , onStatus);
}

private var amfServerUri:String="http://127.0.0.1/flashservices/gateway.php";
private var _source:String = "tw.remote.test.Hello.sayHello";

訂閱：文章 (Atom)

Ocean 學習筆記

2010年6月15日星期二

Flex4 Dynamic Layout

About Layout in Flex, 關於Flex4中 (SDK4) 的排版

2010年6月12日星期六

FlashBulider使用AsDoc建立API文件時發生Error loading處理

2010年6月9日星期三

Java 編譯詳細說明與使用注意事項，package有無差很大

2010年6月8日星期二

Blazeds4 配置與Flex Remote測試 ,使用tomcat6

Tomcat 安裝配置 for windows

2010年6月7日星期一

Flash AMFPHP Remote 測試範例

常拜讀的Blog

關於我自己

2010年6月15日 星期二

2010年6月12日 星期六

2010年6月9日 星期三

2010年6月8日 星期二

2010年6月7日 星期一

2010年6月15日星期二

2010年6月12日星期六

2010年6月9日星期三

2010年6月8日星期二

2010年6月7日星期一