2009-12-29

javaFXオーサリングツール

java javaFX

JavaFX Composer
待望のjavaFXのオーサリングツールが出ていました。

スクリーンキャストはこちら
http://netbeans.org/project_downloads/javafx/fxc_simpleapp/

IDE は NetBeans 6.8 。
NetBeans のプラグインをインストールすることにより使用可能らしいです。

ビジネスに使えるかどうかも含めて、この冬休みに少し触ってみたいと思います。
もっとも、Java SE6 Update 10 以降じゃないと動かない　とか、
IDEがNetBeans ってことで、今すぐの導入は厳しそうですが、触ってみようかと思います。
（Eclipseばかり使っていたので、NetBeansはまだ不明点が多いため。）

2009-06-23

FlashDevelopでtrace()を出力する

IDE ActionScript

IDE Verstion：FlashDevelop3.0.0
flexsdk: FlexSDK3

デバック機能付きのFlashPlayerをインストールする。

%flex3sdkホーム%\runtimes\player\10\win\FlashPlayer.exe
※パスのホームは、人によって変わります。

たぶん上記を一度実行するとOKだと思います。
(今回は、flash10用をインストールします)

IDEから起動するプレイヤーを変更する

Project > Properties > Output（タブ） > TestMovie
を「Play in externalplayer」と設定する。

動作確認

trace()をソース内に組み込んで、実行すれば、コンソールに出力されます。

2009-05-19

xmlsocket

air

air にて、ソケット通信を行おうと思い、そのメモ。
Socket と、 XMLXocket 両方あったが、今回は XMLSocket のメモ。

var xmlsock = new air.XMLSocket(); 
xmlsock.connect("127.0.0.1", 8080);
xmlsock.send("テスト\n");

少し間違えやすいんですが、 send()メソッドにて、改行コード(\n)を入れないと、SocketServerが受信を終了したと認識しないようです。

実際に、Socket　の場合は、改行コードは無くても動くので、初めてやるときは注意が必要です。

2009-04-29

要素の座標

javascript air

AIRの開発にて、ドラッグアンドドロップ後の要素の座標を取得したいと思いました。

その時のメモです。

簡単に、座標を取得するために、 getBoundingClientRect()を使いました。

var elm = document.getElementById('適当なID');
// 絶対座標の取得
var position = elm.getBoundingClientRect();

// X、Y座標を取得する
var left = Math.round(window.scrollX+position.left);
var top = Math.round(window.scrollY+position.top);

上記ソースによって、firefox3系では、動作できました。

そして、本題の AIR にて確認してみました。
（Adobe AIR 1.5.1）
すると、動きません。。
ということで、別の方法を考えなければならなくなりました。

prototype.js の cumulativeOffset() を使うことにしました。

var elm = document.getElementById('適当なID');
// 絶対座標の取得
var position = Position.cumulativeOffset(elm); 

// X、Y座標を取得する
var left = Math.round(window.scrollX+position.left);
var top = Math.round(window.scrollY+position.top);

この実装に変更しました。
上記ソースによって、firefox3系では、動作できました。

そして、本題の AIR にて動作確認できました。

しかし、一つ問題が。。
AIRの場合のみなんですが、 valign="bottom"とした箇所の座標を求めると、取得するY座標が正しい値（firefoxで実行したときの座標）になりません。

<td valign="bottom">
  <div id="適当なID"></div>
</td>

上記のようにあるdiv の座標がうまくとれません。
これは、offsetTop の値が air と firefox で違うからでした。
というか、これは AIR のバグかな。。

せっかく、AIR を使うことによりクロスブラウジングから開放されると思ったのに・・・

ということで、valign="bottom" を使用しないレイアウトにして対応したいと思います。
（ブラウザによる分岐処理をかましてもできますが、、さすがに辞めておきます）

2009-04-27

javascript ドラッグアンドドロップについてのメモ

html javascript

HTML

<div style="position:absolute;  cursor: move; top:0px; left:0px;"><img src='xxx.png'/></div>

javascript

onload=function () {
   if (document.all) {
      // IE用
      objlist = document.all.tags("div");
   } else if (document.getElementsByTagName) {
      // IE以外
      objlist = document.getElementsByTagName("div");
   } else {
      return;
   }
   for (i = 0; i < objlist.length; i++) {
      objlist[i].onmousedown = onMouseDown;
   }
   document.onmousemove = onMouseMove;
   document.onmouseup = onMouseUp;

}
function onMouseDown(e) {
   obj = this;
   if (document.all) {
      offsetX = event.offsetX + 2;
      offsetY = event.offsetY + 2;
   } else if (obj.getElementsByTagName) {
      offsetX = e.pageX - parseInt(obj.style.left);
      offsetY = e.pageY - parseInt(obj.style.top);
   }
   return false;
}
function onMouseMove(e) {
   if (!obj) {
      return true;
   }
   if (document.all) {
      obj.style.left = event.clientX - offsetX + document.body.scrollLeft;
      obj.style.top = event.clientY - offsetY + document.body.scrollTop;
   } else if (obj.getElementsByTagName) {
      obj.style.left = e.pageX - offsetX;
      obj.style.top = e.pageY - offsetY;
   }
   return false;
}
function onMouseUp(e) {
   obj = null;
}

よくみるjavascriptのドラッグアンドドロップの記述方法です。

HTML記述にて必須の項目は、 div タグの position の指定と、 top、left の指定です。
注意する点としては、position 指定はスタイルシートでの記述は可能。
しかし、top 、left 記述は、スタイルシート不可です。

理由は、javascriptの

      obj.style.left = e.pageX - offsetX;
      obj.style.top = e.pageY - offsetY;

があるからです。
つまり、 style.left や、style.top を指定しているから。

というつまらないことに、はまったので、メモしておきます。

ちょっと、ドラッグアンドドロップに似ているので、座標関連も一つ。
IEでのイベント時の座標取得について。

function onMouseUp(e){  
    if (document.all) {
        // IE用
    	var x = event.clientX;
        var y = event.clientY;
    } else {
        // IE以外
    	var x = e.pageX;
        var y = e.pageY;
    }
}

と、することにより座標を取得できます。
しかし、ほんと、IEって使いにくいですね。
クロスブラウジングの対応がほんとうに面倒・・・

2009-03-06

table中の position による配置と考察

html

table 中の、tdタグ中の画像を重ねようとしたときの話です。

/* スタイルシート */
div.demo_img {
    position: relative;
    left:-195px;
}

<td><img src="xxx"/></td>
<td><div class="move"><a href="yyy"><img src="xxx"/></a></div></td>

上記のように、table内で画像を重ねようとしたところ、firefox では問題ないのですが、IE では、うまく重なりませんでした。

詳しい原因は table系にはposition:relativeが効かないに紹介されていました。

これを知らないことにより、後で画面の変更が起きたら大変ですね。。

危ないところでした。

しかし、今回は、どうしてもtable内で重ねたかったので、その対策を残しておきます。

ちなみに

<td>
<img src="xxx"/>
<a href="yyy"><img class="move" src="xxx"/></a>
</td>

のように、１つのtdタグ内に収めれば、それでも問題はないのですが、 aタグで改行されてしまいます。

改行されるとY軸もposition で位置を変更しなければなりません。そうなると保守性が低くなる為却下です。

ということで、今回の目標です。

td内で、画像をposition指定で重ねたい。ただし、移動は　X軸　のみ

やり方は、思いつくところで、２つ。

javascriptにて、positionの移動を変更する
ｔｄタグひとつの中で、うまく画像を重ねる（ただし、改行させないようにする）
最後に・・・

どうでもいいことですが、なんでも１つのやり方しか考えないのは良くないと思うので、良くないとわかっていながらも、javascriptで移動させる方法を試しています。。

javascriptにて、positionの移動を変更する

<script language="JavaScript">
<!--
var isMSIE = /*@cc_on!@*/0;

function updateIECss() {
    // IE以外は対象外
    if ( !isMSIE ) {
        return;
    }
    //IEは、table系に問題あるので、スタイルを変更する
    var cssObj = document.styleSheets[0].cssRules;
    var csslen = cssObj.length;
    for ( var cnt = 0; cnt < csslen; ++cnt ) {
        var css = cssObj[cnt];
        var left = css.style.left;
        // left指定が無いものは対象外
        if ( left == "" ) {
            continue;
        }

        var intleft = parseInt(left);
        // IEは、さらに、９５ピクセル左に移動させてみる
        var ieleft = intleft + 95;
        css.style.left = ieleft + "px";
    }
}

// IEのスタイルシートを更新
updateIECss();
-->
</script>

これは、javascriptを使って、移動する距離を変更してみました。

注：IE用のスタイルシートという案は考えていませんでした。

しかし、ソースを見てみると分かりますが、 95ピクセル移動って。。すごいマジックナンバーが入っていますね。。

ということで、これも却下ですね。。

ｔｄタグひとつの中で、うまく画像を重ねる（ただし、改行させないようにする）

本命です。

/* スタイルシート */
ul.thumbnail {
  padding: 0;
}
ul.thumbnail li {
  display: inline;
  margin: 0;
  padding: 0;
}

<ul class="thumbnail">
  <li><a href="http://www"><img class="thumbnail" src="xxx.png"></a></li>
  <li><img src="yyy.png"/></li>
</ul>

結局、tdタグの中で、リストを作り、そのリスト(ul）をinlineで表示させることにより、改行させないようにしました。

あとは、スタイルシートで移動させるだけです。

最後に・・・

この「最後に」の項目は、全てが書き終えた後に、追記したものです。

div.thumbnail {
    width:200px;
    height:150px;
    background:url("画像のURL") no-repeat; /*１回のみ表示*/
    background-position : center center;   /*画像を中央表示*/
    display:table-cell;                    /*div内で囲まれている中も中央表示*/
    vertical-align:middle;
}

上記のように、display:table-cell 、または、float を使うことにより、もっとよく出来ると思います。

今回はIEとfirefoxでの違いの部分で困ったという経験を忘れないようにするため意味も込めてのメモです。

最後に、今後のためにも最低限 positon や IE、firefoxの違い等、再度勉強しなおした方がいいのかなと思いました。

2009-03-04

Open Laszloの導入

laszlo

OpenLaszloの導入記です。

環境

tomcat　＋ openlaszlo の環境で動作させます。

ダウンロード

OpenLaszloの公式ページのここからダウンロードします。

私は、Tomcat環境もあるので、Dev Kit Any Os をダウンロードします。
何も知らない方は、インストーラーをダウンロードしてもいいと思いますが、お勧めしません。
Tomcatもそうですが、インストーラーで導入すると、インストーラーは何をしているかわかりません。
自分で何をやっているか理解できずにやると、後で大変な目にあいます。
※laszlo は java servletで動作しますので、インストーラーから導入すると、tomcatを自動でインストールされます。

やはり、ここは自分でデプロイする環境を作ります。
今回は、openlaszlo-4.2.0.1.war　をダウンロードしました。

warファイルの解凍

さてと、何も言うこともありません。。
が、warファイルなんで、%CATALINA_HOME%/webapps に配置した後、tomcatを起動します。
すると、自動的に解凍されます。

動作確認

ファイル解凍時に、既にtomcatは起動していますね。
ということで、いきなり行きます。

http://localhost:8080/openlaszlo-4.2.0.1/my-apps/copy-of-hello.lzx

へアクセスします。
※バージョンによりアクセス先は異なります。

と表示されればOKです。
右クリックして、About OpenLaszlo とありますね。どうやらうまく動作したようです。

これで動作確認は終了です。