アピラクンのFlashどしろーとがS2Flexに挑戦記

2004-10-09

思うところあり・・・ 16:17

ちょっと日記の構成を変えます。Flexに特化した内容だけがひたすら続き、この分だとS2Flexが登場するのがかなり先になってしまいそうです。ここで書いている以上それは良くないと思ったので、Flexだけに特化した内容はなるべくメインで書かないようにしたいと思います。S2と絡む部分についてはある程度書こうと思いますが。

ここ数日書いてきたコンポーネント概観は移動させました。あとちょっとだけ残っているのですが、重要度はそれほど高いないものだと思うので、そのうちこっそり埋めておきます(^^ゞ

ここ数日Flexを触り、マニュアルもぼちぼち読み始め(マニュアル、1000ページ以上もあるんですけど・・・)、ぼちぼちFlexがわかってきました。とはいえ使ってまだ数日、どしろーとの域は脱していないと思うのですが・・・。

というわけで、次からいきなりS2Flexを触っていきたいと思います。だいじょうぶかなー・・・。

コンポーネント概観は、1900年に書いていたってことで・・・(^^ゞ

[]使ってみました。 22:09

S2Flexのサンプル動かして、<mx:RemoteObject>近辺のマニュアル読んで、S2Flexのソース読んで・・・あーなるほどー。終了ー・・・じゃなくて(^^ゞいや、あまりネタにならなさそうなので・・・困ったな。自分用のメモとして書いておこう。まずS2を使った開発で行うことは以下のようなものがありますが・・・

  • コンポーネントのインターフェースを作成
  • コンポーネントの実装を作成
  • diconファイルにコンポーネントを定義
  • (DTOを使う場合)DTOの作成

S2Flexを使う場合は、(初期設定を除き)これに加えて以下のことをやります。

  • flex-config.xmlに、diconファイルに登録したコンポーネントを定義
  • (DTOを使う場合)DTOに対応するActionScriptのクラスを作成

これだけー。mxmlファイル上では<mx:RemoteObject>を使ってコンポーネントを呼び出す。DTOを使う場合はFlexのコンポーネントとDTOとのバインディングを定義する、と。

higayasuohigayasuo2004/10/09 16:52この日記、IE5.5だとおもいっきりレイアウトが崩れることがあるみたい。

apiraapira2004/10/09 17:01IE5.5手元に無いのですが、ちょっと変えてみました。どうすか?会社でもこっそり書いちゃうんで地味ーなのを選んでます(^^ゞ

RezhaRezha2013/11/22 03:00You've captured this perflctey. Thanks for taking the time!

JakubJakub2013/11/23 01:55Tip top <a href="http://vorfbsia.com">stffu.</a> I'll expect more now.

AlfonsoAlfonso2013/11/24 13:38Lot of smarts in that <a href="http://exyyfw.com">pognits!</a>

2004-10-08

[]Flex本 (ひがさん) 18:03

よ、よみたい・・・。

2004-10-07

[]Flex Builder5分だけ使ってみた 00:29

これもインストールはすんなり。Flex_Builder1.5_Beta1.exeをたたいてぺしぺしと。関連づけはJSP他いろいろはずしておきました。さてマニュアル全く見ずに使ってみよー。

お、かなりDreamWeaverっぽい!動作もさくさくだしいい感じ。でもラベルのコントロールを見つけるのに約3分(^^ゞコントロールのアイコンがあるのは画面右じゃなくて画面上側です。タブが並んでいますが左から4番目の「controls」というタブを開くと出てきます。

DreamWeaverみたいに画面上側がソース、下側がデザイン、みたいなスプリット構成が出来ます。コントロールが並んでいるメニューの一段下、左から2番目の「Split」を押します。で、デザイン領域にラベルをドラッグ&ドロップ。ラベル文字を「Hello World Builder」にして、右側のプロパティシートっぽいのから文字色、フォント変えてみて・・・おーVBっぽい感じ。

さて実行。「Split」ボタンの右2つ、「Run」ボタンがあるのでいかにも押せば実行出来るっぽい。でもサーバの設定をしなきゃいけないみたい。めんどうなので、とりあえずローカルファイルに保存するだけの設定にしました。Eclipseプロジェクト直下(Helloや足し算のmxmlを作ったのと同じ場所)を指定して、普通にTomcatを起動して・・・出た!Hello World Builder!

というわけで、まずはFlexもBuilderもとてもすんなり入っていけました。うーんいい感じ!ま、Hello Worldですから当然か・・・。

2004-10-06

[]はじめてみる 12:54

ひがさんの日記を見てFlexのベータテスター応募したので、ここでいろいろ書いてみます。ちなみに私はFlash経験が2、3時間というちょーFlashド素人です(WEB+Db Press Vol20のはぶさんの記事をみてちょっとMX 2004を触っただけ!)。そんな私でもFlexは使いこなせるのか!?身をもって体験してみます。

たぶんものすごい初心者な内容になると思うので、たぶんFlash,Flexを仕事で使っている方には有用な内容は提供出来ないと思うのであしからず・・・

もちろんここに書く以上、ゆくゆくはS2Flexも使っていきたいです。

[]インストール!でいきなりはまる 13:04

環境はJDK1.5(おいおい)にTomcat5.5.2、という環境で、まずはマニュアル通りにインストールしてみる。Flex-15-win.exeたたいて、ペシペシやってインストール終了。よしよし。

で、Tomcatにデプロイだ!flex.warが本体で、サンプルはsamples.warですね。マニュアルにはwarを解凍してなんたらかんたら書いてありますが、めんどうなのでTomcatManagerを使ってwarをデプロイ。で、いきなりエラーが!

致命的: サーブレット /flex がload()例外を投げました
javax.servlet.ServletException: org.apache.commons.logging.LogConfigurationException: org.apache.commons.logging.LogConfigurationException: Invalid class loader hierarchy.  You have more than one version of 'org.apache.commons.logging.Log' visible, which is not allowed. (Caused by org.apache.commons.logging.LogConfigurationException: Invalid class loader hierarchy.  You have more than one version of 'org.apache.commons.logging.Log' visible, which is not allowed.) (Caused by org.apache.commons.logging.LogConfigurationException: org.apache.commons.logging.LogConfigurationException: Invalid class loader hierarchy.  You have more than one version of 'org.apache.commons.logging.Log' visible, which is not allowed. (Caused by org.apache.commons.logging.LogConfigurationException: Invalid class loader hierarchy.  You have more than one version of 'org.apache.commons.logging.Log' visible, which is not allowed.))
	at flex.bootstrap.BootstrapServlet.init(BootstrapServlet.java:57)
	at org.apache.catalina.core.StandardWrapper.loadServlet(StandardWrapper.java:1003)
	at org.apache.catalina.core.StandardWrapper.load(StandardWrapper.java:836)
	at org.apache.catalina.core.StandardContext.loadOnStartup(StandardContext.java:3823)
	at org.apache.catalina.core.StandardContext.start(StandardContext.java:4128)
	at org.apache.catalina.core.ContainerBase.addChildInternal(ContainerBase.java:755)
	at org.apache.catalina.core.ContainerBase.addChild(ContainerBase.java:739)
	at org.apache.catalina.core.StandardHost.addChild(StandardHost.java:525)
	at org.apache.catalina.startup.HostConfig.deployWAR(HostConfig.java:774)
	at org.apache.catalina.startup.HostConfig.deployApps(HostConfig.java:497)
	at org.apache.catalina.startup.HostConfig.check(HostConfig.java:1153)
	at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
	at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:39)
	at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:25)
	at java.lang.reflect.Method.invoke(Method.java:585)
	at org.apache.commons.modeler.BaseModelMBean.invoke(BaseModelMBean.java:503)
	at com.sun.jmx.mbeanserver.DynamicMetaDataImpl.invoke(DynamicMetaDataImpl.java:213)
	at com.sun.jmx.mbeanserver.MetaDataImpl.invoke(MetaDataImpl.java:220)
	at com.sun.jmx.interceptor.DefaultMBeanServerInterceptor.invoke(DefaultMBeanServerInterceptor.java:815)
	at com.sun.jmx.mbeanserver.JmxMBeanServer.invoke(JmxMBeanServer.java:784)
	at org.apache.catalina.manager.ManagerServlet.check(ManagerServlet.java:1402)
	at org.apache.catalina.manager.HTMLManagerServlet.doPost(HTMLManagerServlet.java:209)
	at javax.servlet.http.HttpServlet.service(HttpServlet.java:709)
	at javax.servlet.http.HttpServlet.service(HttpServlet.java:802)
	at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:237)
	at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:157)
	at org.apache.catalina.core.StandardWrapperValve.invoke(StandardWrapperValve.java:214)
	at org.apache.catalina.core.StandardContextValve.invoke(StandardContextValve.java:178)
	at org.apache.catalina.authenticator.AuthenticatorBase.invoke(AuthenticatorBase.java:482)
	at org.apache.catalina.core.StandardHostValve.invoke(StandardHostValve.java:126)
	at org.apache.catalina.valves.ErrorReportValve.invoke(ErrorReportValve.java:106)
	at org.apache.catalina.core.StandardEngineValve.invoke(StandardEngineValve.java:107)
	at org.apache.catalina.connector.CoyoteAdapter.service(CoyoteAdapter.java:148)
	at org.apache.coyote.http11.Http11Processor.process(Http11Processor.java:799)
	at org.apache.coyote.http11.Http11Protocol$Http11ConnectionHandler.processConnection(Http11Protocol.java:705)
	at org.apache.tomcat.util.net.TcpWorkerThread.runIt(PoolTcpEndpoint.java:576)
	at org.apache.tomcat.util.threads.ThreadPool$ControlRunnable.run(ThreadPool.java:684)
	at java.lang.Thread.run(Thread.java:595)
2004/10/06 12:37:23 org.apache.catalina.core.ApplicationContext log
情報: HTMLManager: list: Listing contexts for virtual host 'localhost'

うーんCommons Loggingが複数あるからだめよ、みたいなメッセージだなー。しょうがないのでTomcat 5.0.28にしてやってみる。お、うまくいった!サンプルのHelloWorldみれた!うーむ、おとなしくTomcat 5.0.28でやろうと思います・・・。

やば! 13:05

昼休み終了ー。このペースだと先は長いぞ・・・。

[]ひがさんのFlex入門記を実践 17:02

仕事中に・・・これも仕事(^^ゞどしろーとでもばっちりOKなステキな入門記です。

Hello World編

足し算編(イベントにロジック直書き)

足し算編その2(ローカル関数呼び出し)

足し算編その3(関数を別ファイルに外だし)

ちょっとはまったのが足し算編その2。ソースをそのまま実行すると、こんなエラーがでちゃいました。

Error F:\App\eclipse\workspace\flex_beta\Add2.mxml:16
XML document structures must start and end within the same entity.

うーん、mxmlファイルはどこも悪くなさそうだけど・・・と、いろいろ試行錯誤の結果、原因はわからないですが以下の修正で直りました。修正前を一部抜粋。

2: <mx:Script>
3: 
4: function calc():Void {
5:   result.text=Number(arg1.text) + Number(arg2.text);		}
6: ] ]>

この6行目を、

6: >

あ、あれ出ない!えっと、とりあえず説明すると1個目の「]」と2個目の「]」の間にあるスペースを削除したら通りました。うーんなんででしょ・・・。

higayasuohigayasuo2004/10/06 17:06はてなは、]]が意味を持っていてそのまま書けなかったので、
間にブランクを入れました。
混乱させてしまい申し訳ありません。m(_ _)m

apiraapira2004/10/06 17:07書いてみてわかりました(^^ゞそうですよねー。

toshiyukisasakitoshiyukisasaki2004/10/06 17:29私もFlex初心者ですー、今後の日記楽しみにしてます。今日からBuiderの1.5がうぷされてますねー。

apiraapira2004/10/06 18:19Builder、もちろん使ってみます!自分がはまったり悩んだりしたことをとりあえず何でも書くノリでやってみます。

1900-06-01

[]コンポーネント概観:チャート編 00:24

チャートです。グラフです。やはりこういうコンポーネントが標準で付いているのはいいですね。試しに棒グラフを作ってみました。サンプルソースはこちら。(1行目が空なのは?xml...ってやつがなぜか出ないためなので気にしないでください)

1 : 
2 : <mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml">
3 :
4 :   <mx:Model id="score" source="score.xml"/>  
5 :   
6 :   <mx:ColumnChart dataProvider="{score.student}">
7 : 
8 :     <mx:horizontalAxis>
9 :       <mx:CategoryAxis dataProvider="{score.student}" categoryField="name"/>
10:     </mx:horizontalAxis>
11: 
12:     <mx:series>
13: 	  <mx:Array>
14:         <mx:ColumnSeries yField="kokugo"/>
15:         <mx:ColumnSeries yField="sansuu"/>
16:         <mx:ColumnSeries yField="rika"/>
17:         <mx:ColumnSeries yField="syakai"/>
18:       </mx:Array>
19:     </mx:series>
20: 	
21:   </mx:ColumnChart>
22: </mx:Application>

ちょっと長くなっちゃいました。棒フラグのコンポーネントは6行目のColumnChartです。ここから追っかけていきましょ。属性にdataProviderというのがありますが、これが棒グラフに表示するデータになります。様々なコンポーネントで、このdataProviderという属性で透過的にデータを与えられるようです。データの実体はいろいろなものが使えるみたいですが、今回はxmlをデータとして与えています。ここで注意!値の「{」「}」重要。初心者の私は、これを入れなかったがためにうまくいかず、ちょっとはまりました。Builderでも構文チェックに引っかからないので注意しましょ。

dataProviderの値は、{score.student}です。はじめのscoreの部分は、4行目のModelと対応しています。Modelのsource属性にxmlを指定していますが、このxmlがデータの実体です。こう書いておけば自動でデータを取ってきてくれます。便利ー。私が作ったデータはこんな感じです。

[score.xml]


<score>

    <student name="ichiro">
        <kokugo>90</kokugo>
        <sansuu>75</sansuu>
        <rika>100</rika>
        <syakai>80</syakai>
    </student>

    <student name="jiro">
        <kokugo>60</kokugo>
        <sansuu>50</sansuu>
        <rika>90</rika>
        <syakai>100</syakai>
    </student>

    <student name="goro">
        <kokugo>60</kokugo>
        <sansuu>50</sansuu>
        <rika>40</rika>
        <syakai>30</syakai>
    </student>

</score>

先生になった気分で学生のテストの得点を管理するものです。score,studentときて、項目がkokugo,とかローマ字なのがしょぼい(^^ゞ

このxmlがModelの実データになるわけです。で、6行目に戻って、studentがxml内の<student>と対応するわけです。

8-10行目は軸の見出しに何を表示するかを指定しています。名前を出してます。

12-19行目はデータの定義です。XXXChartのチャートに対して、XXXSeriesがチャートの値、というコンポーネントの対応になるようです。これで、1人に対して棒が4本(国語,算数,理科,社会の棒)が伸びていて、そのセットが3人分(ichiro,jiro,goro)表示される棒グラフになります(グラフの絵が無いとわかりにくいですね・・・)

他のグラフも大体同様に作成出来ます。まとめると、

  • データモデルを定義する
  • チャートを定義し、データモデルとのバインディングを指定する
  • チャートの見出し項目をモデルから指定する。
  • チャートのデータ項目をモデルから指定する。

こんな感じでしょうか。ではグラフの種類いきます。

AreaChart
エリアチャートです。値を塗り分けたグラフです。絵が無いとわかりにくいなー。
BarChart
横棒グラフです。
BubbleChart
バブルチャート。3つの変数の相関を散布図にして表示でき、第3の変数はバブルの直径で表示出来る・・・はず。
ColumnChart
縦棒グラフ。
LineChart
折れ線グラフ。
PieChart
円グラフ。
PlotChart
散布図。
Legend
グラフの凡例だけ抜き出して表示するもののようです。詳しい使い方はそのうち調べます・・・。

次はチャートに対するデータ表示用のコンポーネント

AreaSeries
AreaChartに対応するデータ表示コンポーネント。
BarSeries
BarChartに対応するデータ表示コンポーネント。
BubbleSeries
BubbleChartに対応するデータ表示コンポーネント。
ColumnSeries
ColumnChartに対応するデータ表示コンポーネント。
LineSeries
LineChartに対応するデータ表示コンポーネント。
PieSeries
PieChartに対応するデータ表示コンポーネント。
PlotSeries
PlotChartに対応するデータ表示コンポーネント。

次は軸関係!もうへろへろなので、マニュアルを見ながら・・・。

AxisRenderer
軸の属性をいろいろ変更するもののようです。これも詳しい使い方はそのうち・・・
CategoryAxisr
データをカテゴリ毎に軸にマッピングさせる時に使います。
LinearAxis
数値データを軸にマッピングさせます。

以下の3つはわかりませんでした。マニュアルにも載ってないです。グラフになんかしらのエフェクトを追加するもののようです。

SeriesInterpolate
保留
SeriesSlide
保留
SeriesZoom
保留

いじょ!

JheneferJhenefer2013/11/22 01:09I'm so glad I found my soultion online.

LanaLana2013/11/22 06:51At last! Something clear I can <a href="http://vxizwj.com">unetnsdard.</a> Thanks!

YareeYaree2013/11/23 13:36That kind of thikinng shows you're on top of your game http://bofiylb.com [url=http://bhyzvytviho.com]bhyzvytviho[/url] [link=http://kzemokka.com]kzemokka[/link]

TetrisTetris2013/11/25 08:48This artclie is a home run, pure and simple! http://kuijhnsek.com [url=http://slivxmny.com]slivxmny[/url] [link=http://ngilmlcq.com]ngilmlcq[/link]

1900 | 01 | 02 | 03 | 04 | 05 | 06 |
2004 | 10 |