新しくブログを開設しました。

Webエンジニアがデザイナーになってみる。


上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

新しくブログを開設しました。

Webエンジニアがデザイナーになってみる。


Flexで開発したアプリケーションを
そのままSWFのまま表示するのもありですが、HTMLでSWFを表示する事もできます。

表示するためにはまず以下のライブラリが必要です

swfobject.js

検索してみればすぐにに探し出す事ができると思います

探せなかった人は以下のURLから
http://blog.deconcept.com/swfobject/#download



次に表示方法です

HEAD部に以下の記述を加えてください
※swfobject.jsのパスは各自環境に合わせてください

<script type="text/javascript" src="swfobject.js" ></script>

そしてBODY部に以下の記述を加えてください
※SWFObjectの引数にはSWFファイルの存在するURLまたは場所を指定して下さい

<div id ="swf" style="text-align:center"></div> //SWFの表示部分

<script type="text/javascript">
  <!--
    var swf = new SWFObject("http://www35.tok2.com/home/kanameboy/temp/HelloWorld.swf","swf",640,400,9,"white");
    swf.write("swf");
  -->    
</script>

以上でSFWをHTMLページ上に表示することができます。
簡単ですねー

テーマ:WEBデザイン - ジャンル:コンピュータ

新しくブログを開設しました。

Webエンジニアがデザイナーになってみる。


FlexにはActionScriptのプログラムにあるコメント等を元に、HTMLドキュメントを生成するツールがあります。
それがASDocです。

プログラムのドキュメント作成は大切です。
Java開発でもJavadocなどの存在は買いshつ社に無くてはならないものとなっています。

ドキュメント作成は労力がかかりますが、Flexにはこのドキュメントを比較的手軽に作成する事ができます。
クラスやメソッドの説明をコメントで書いておくと、それをもとに自動的にクラスを説明するドキュメントを作成してくれます。


■入手方法
Flex SDKをダウンロードすると入手できます。
SDKのbinフォルダに環境設定でパスを通す必要があります。

■使用方法
コマンドプロンプトを開いてください。

-基本書式-
ASDoc -doc-sources ソースファイルのパス

※注意点
文字コードはUTF-8にする必要があるそうです
日本語を含んでいるとうまく動作しない場合があるそうです

※C:\as3\test\Test.as

ASDoc -doc-sources ソースファイルのパス
>cd c:/as3
>ASDoc -doc-sources ./test



コメントの基本構文です

package{
  /* 文字列操作を行う静的メソッドを集めたクラスです */
  public class KString{
    /**
     * 文字列 str の a を b に置換する
     * @param str 置換対象文字列
     * @param a 検索文字列
     * @param b 置換文字列
     * @return 置換結果
    */

    public static function replace(str:String , a:String , b:String {
      var str_ary:Array = str.split(a);
      return str_ary.join(b);
    }
  }
}


クラス宣言の前に
/** 説明 */
とコメントを入れます

メソッドにも説明を入れます
引数に説明を入れる場合は
@param 変数名 説明
と入れます

戻り値に説明を入れる場合は
@return 説明
と入れます

他にも参照ページを指定する場合は
@see 参照ページ

作者の説明は
@author 作者名
と記述します



http://smileboys.fc2web.com/WebUtility/flex/flexTool.html

テーマ:Flash - ジャンル:コンピュータ

新しくブログを開設しました。

Webエンジニアがデザイナーになってみる。


前回はFlexの単体テストの方法を示しました

しかしFlexには非同期通信が行われます

このような場合のテストはどうやって行うのでしょうか?




AS3Unit for Asyncでは、非同期処理のテストを行うことが出来ます。

非同期処理のテスト行うには、org.libspark.as3unit.assert.async関数を使用します。

async関数は、Functionと制限時間を引数に取り、チェックポイント関数を返します。

このチェックポイント関数が、制限時間内に呼び出されるとテストがパスします。

チェックポイント関数が呼び出される際、引数として渡したFunctionを呼び出すので、そこで更にアサーションを行うことも可能です。




次の例は、Timerクラスのテストです。
タイマーが終了(TimerEvent.TIMER_COMPLETE)した時に、Timerのコンストラクタで指定した回数分、TimerEvent.TIMERが発行されているかをテストします。

import org.libspark.as3unit.test;
import org.libspark.as3unit.assert.*;
import flash.utils.Timer;
import flash.events.TimerEvent;

use namespace test;

public class TimerTest
{
test function timer():void
{
  var count:uint = 0;
  var timer:Timer = new Timer(10, 3);
  timer.addEventListener(TimerEvent.TIMER, function(e:TimerEvent):void
  {
    count++;
  });
  timer.addEventListener(TimerEvent.TIMER_COMPLETE, async(function(e:TimerEvent):void
  {
    timer.stop();
    assertEquals(3, count);
  }, 1000));
  timer.start();
}
}



timer.addEventListenerの部分でイベントハンドラを、チェックポイント関数でラップしています。

その結果、TIMER_COMPLETEハンドラが呼ばれ、はじめてテストがパスするようになります。

「, 1000」という部分が制限時間(ミリ秒)です。

TIMER_COMPLETEハンドラが呼ばれずに1000ミリ秒が経過すると、TimeoutErrorが発生しテストが失敗します。

イベントハンドラの中では、assertEqualsを使い、TIMERハンドラが呼び出された回数(count変数)が、期待する3であるかどうかをテストしています。




http://smileboys.fc2web.com/WebUtility/flex/unitTest.html

テーマ:Flash - ジャンル:コンピュータ

新しくブログを開設しました。

Webエンジニアがデザイナーになってみる。


Flexにはユニットテスト(単体テスト)を自動で行ってくれるものがある。

開発者にとって単体テストは絶対に通らなくてはならない道である

その単体テストを行ってくれるということで調べてみました

業務で使用することがある肩は参考にしてみてください。(ならないか。。)



AS3Unit
これはActionScript3.0上で単体テストを行うためのフレームワークです
ActionScript3.0のネームスペースを用いる事でPOJOによるテストケースの記述を可能にしています。
AS3Unitを用いる事で、テスト効率をアップさせることができます


【目次】
1・テストの作成
2・アサート
3・before
4・after
5・beforeClass
6・afterClass
8・テストスイート
9・ストの実行




■1・テストの作成
テストメソッドは「test」ネームスペースで修飾します。
これで、そのメソッドがテストメソッドとして自動で実行されます。
メソッドは引数なし、voidである必要があります。

import org.libspark.as3unit.test;

use namespace test;

public class SampleTest
{
test function sample1():void
{
}

test function sample2():void
{
}
}

■2・アサート
アサート(assert)は、デバッグ段階でエラーを検出するために、ソース中に埋め込んでおく実行文です。
例えばC言語には、assert()というマクロが用意されています。

org.libspark.as3unit.assert以下に関数として用意されています

import org.libspark.as3unit.test;
import org.libspark.as3unit.assert.*;

use namespace test;

public class SampleTest
{
test function sample1():void
{
var s:Sample = new Sample();
assertTrue(s.f());
}

test function sample2():void
{
var s:Sample = new Sample();
assertEquals("hello", s.h());
}
}



assertEquals()とは
第2引数で渡された値が、第1引数と等しければテストをパスする」ものです

これををデバッグ版で実行すると、テストが失敗している場合はエラー結果が出力されます。



■3・before
「before」ネームスペースで修飾されたメソッドは、各テストメソッドが呼び出される前に毎回必ず呼び出されます。
フィクスチャのセットアップをする必要がある場合などに使います。
※フィクスチャとは、ユニットテストの事前条件となるテストデータ


import org.libspark.as3unit.test;
import org.libspark.as3unit.before;
import org.libspark.as3unit.assert.*;

use namespace test;
use namespace before;

public class SampleTest
{
private var s:Sample;

before function setupSample():void
{
s = new Sample();
}

test function sample1():void
{
assertTrue(s.f());
}

test function sample2():void
{
assertEquals("hello", s.h());
}
}



■4・after
「after」ネームスペースで修飾されたメソッドは、各テストメソッドが呼び出された後に毎回必ず呼び出されます。
フィクスチャのセットアップをする必要がある場合などに使います。
※フィクスチャとは、ユニットテストの事前条件となるテストデータ

import org.libspark.as3unit.test;
import org.libspark.as3unit.before;
import org.libspark.as3unit.after;
import org.libspark.as3unit.assert.*;

use namespace test;
use namespace before;
use namespace after;

public class SampleTest
{
private var s:Sample;

before function setupSample():void
{
s = new Sample();
}

after function teardownSample():void
{
s.finalize();
}

test function sample1():void
{
assertTrue(s.f());
}

test function sample2():void
{
assertEquals("hello", s.h());
}
}



■5・beforeClass
「beforeClass」ネームスペースで修飾されたメソッドは、テストクラス内の全てのテストが実行される前に1度だけ呼び出されます。
フィクスチャのセットアップをする必要がある場合などに使います。
※フィクスチャとは、ユニットテストの事前条件となるテストデータ



■6・afterClass
「afterClass」ネームスペースで修飾されたメソッドは、テストクラス内の全てのテストが実行された後に1度だけ呼び出されます。
フィクスチャのセットアップをする必要がある場合などに使います。
※フィクスチャとは、ユニットテストの事前条件となるテストデータ



■7・test_expected
正常に例外がスローされているかどうかをテストしたい場合は、例外がスローされることを期待するテストメソッドと同じ名前で、static、constなプロパティを作成します。
そして、test_expectedネームスペースで修飾して、期待される例外クラスを指定してください。
以下の例を参考にどうぞ

import org.libspark.as3unit.test;
import org.libspark.as3unit.test_expected;

use namespace test;
use namespace test_expected;

public class SampleTest
{
// ArgumentErrorがスローされることを期待
test_expected static const error:Class = ArgumentError;
test function error():void
{
var s:Sample = new Sample();
s.e(null);
}
}




■8・テストスイート
複数のテストをひとまとめにするために、テストスイートを作ることが出来ます。
次のようなクラスを作り、SuiteClasses配列の中に、テストクラスを列挙してください。
フォルダと同じようにテストスイートをを入れ子にし、階層を作ることも可能です。
また、テストスイートはパッケージごとに作成するのが一般的です。

※クラス名は特に決まっていないがAllTestにするのが一般的だそうです。

import org.libspark.as3unit.runners.Suite;

public class AllTests
{
public static const RunWith:Class = Suite;
public static const SuiteClasses:Array = [
SampleTest,
HogeTest,
FugaTest
];
}


■9・テストの実行
テストを実行するには、AS3UnitCoreクラスを使用するのが簡単です。
mainメソッドを、テスト対象のクラスを引数として呼び出すと、結果がtraceされます。


Flex上で実行する場合の記述




  
          import org.libspark.as3unit.runner.AS3UnitCore;
      
      private function creationCompleteHandler():void{
        AS3UnitCore.main(AllTests);
      }
    ]]>
  




以上をデバッグで実行することによりテストを実行する事ができます。
テスト結果にエラーがあればエラーが出力されます。



全てのテストが成功した場合


Time: 0.009

OK (4 tests)

の様な結果が出力されます
以上がFlexでの単体テストの方法です



詳しくはこちらからどうぞ
http://smileboys.fc2web.com/WebUtility/flex/unitTest.html

テーマ:WEB系勉強中 - ジャンル:コンピュータ

新しくブログを開設しました。

Webエンジニアがデザイナーになってみる。


mxmlファイルはxmlファイルに似ている

今回ははじめてのアプリケーションということで
Hello Worldを作成してみる

Flexアプリケーションは、まずはじめに以下の記述が必要である

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
  
</mx:Application>


先頭の行にある
<font color="red">version="1.0"</font>
はXMLのバージョン

<font color="red">encoding="utf-8"</font>
は文字コードの指定です


次に<mx:Application>タグの中にソースを記述する。


実際に作成してみます


<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" initialize="HelloWorld()">
  <mx:Script>
    <![CDATA[
      import mx.controls.Alert;
      private function HelloWorld():void{
        Alert.show("Hello World!");
      }
    ]]>
  </mx:Script>
</mx:Application>



2行目のinitializeは起動時にはじめに実行される関数です

4行目からAction Scriptを記述しています
記述する場合は
<![CDATA[
]]>
で囲みます

7行目でAlert関数を使用するために5行目でimportをしています

6行目からHello World!を出力する関数を作成しています
この関数をinitializeに設定しています


■実行結果
http://smileboys.fc2web.com/WebUtility/flex/swf/HelloWorld.html



※ちなみにブログ等で<や>を記述するには
< ⇒ &lt;
> ⇒ &gt;
と記述すると変換されます。

余談ですけど~



詳しく知りたい方はこちらから

テーマ:Flash - ジャンル:コンピュータ

前のページ 次のページ
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。