Mosaic 14 ImageButton

ImageViewを派生させているが、果たしてこれが常套手段か。これはこれで（何となく）分かるのだが、釈然としない感じはどこから来るのか。

まあ確かに他にもやり方はあるだろうし、色々試してみたいことはあるが（実際やろうとしていたが）、それはまた今度にしよう。それよりもっと色んなコードを見る方を優先させたい。せっかく沢山サンプルがあるのだから、VideoCubeとMosaicとの違い以上の違いもあるかもしれない。

ということでそろそろMosaicは終わりにしようと思う。他にコードを見るべきだという声と、今すぐ作りたいプログラムがあるんですけどーという声とが不協和音を奏でる前に、とにかく他のコードを早くもっと見るべきだと思うから。

Mosaic 13 translateXなどの座標系

x,scaleX,translateX,layoutX,minXなど、xyzの座標位置を示す変数が多数ある。どうも分かったようなわからないようなところに持ってきて(API Ref.を見ていたら）layoutBounds(@Node)が出てきてお手上げ。この辺は少し時間をかけて見ないと無理。

Mosaic 12 __PROFILE__

やっと見つけた。JavaFX Language Referenceに書いてあった。Pseudo-variables。
pseudo : スードウ：疑似の。

いやサンプルとかでそれ自体は結果から想像できたのだが、定義が見つからなかった。

Mosaic 11 パッケージ

ImageButton.fx

前から気になっていながら無視していた、プロジェクトのツリーでいうと、ソースパッケージの下のmosaicの黄色い四角い俵のようなアイコンは何だろう。今さら何かというと、ImageButtonの中で使っているpngが、ソースパッケージの下のmosaicと同じレベルの、やはり俵アイコンでmosaic.imageとあって、その下にあるからだ。イメージをプロジェクトに含めたい場合、こういう格好にしなければならないのか、疑問に思ったわけだ。


ここで懸案だったメニューだしっぱの弊害があったので書いておく。いまプロジェクト名Mosaicを右クリックしてメニューを開き、[新規]->で開いたメニューに俵アイコンで「Javaパッケージ...」と表示されるのを見て、ああなるほどこれか、とブログエディタ＠Firefoxに移ると、メニューが表示されたままになる。見易くていいじゃないか、という場合もあるが、出来れば消したい。

フォルダとしてはsrcの下にある。

わからない。まいいや。

Mosaic 10 肝心なことを忘れてしまった

確か、LinearGradient関係で、ネストできる話が何処かに載っていて（日本語）、input（変数/プロパティ）で指定して...みたいなだったと思うのだが、さっぱり思い出せないし、見つけられない。あーしまった。LinearGradientにinputなんて無いしなあ...。effectかとも思ったけどそれはPerspectiveTransformのほうだし。そっちだったっけ。何かコードはうっすら覚えているのに。本当にJavaFXだったかもあやしくなってきた。あーやばい。ウェブ履歴ONにしようかな。

（追記）
APIの中を検索すると、 javafx.scene.effect.Reflectionnのような javafx.scene.effect.*にinputプロパティを持つものがあり、ここにEffectオブジェクトをセットするようになっているので、この辺か。

（追記）あったー！
普通に桜庭さんのITProだった！　あれなんでググれないかなあ。大変失礼致しました。

ふー大騒ぎだよ。

Mosaic 9 適当にもほどがあるが

ThumbImage.fx

とりあえずexecとやらでfirefoxを起動してみよう。さてどこに入れるかと言えばやはり単細胞な自分にはonMouseClickedしかない。onMouse*イベントは、ドラッグに応じてサムネイルが移動したり中央付近で大きくなったりさせるために、いくつかフラグをいじっているが、まずは何も考え無しにonMouseClickedにコードを入れてしまおう。

おお普通にClickした感に応じてFirefoxが起動する！ もっと何かドラッグの終わりでマウスボタンを離してもClickされてしまうのかと思ったが、そんなことはない。

ただ単純にFirefoxを起動すると、二重起動が弾かれるので面倒。

そこで別なウィンドウに大きめの写真をペロんと表示してみる。いきなりStageを書いていいのか。おお、出るじゃないか。

プログラムとしてそれはないだろうという向きはあるだろうが、こうして書いてみて、改めて自分が作ろうとしているもののイメージが反面的に見えてくるから面白い。

override var onMouseClicked = function(e) {
    /*WebDriver driver = new FirefoxDriver();
    driver.get("http://www.google.co.jp/");*/
    //var cmd = [ "/Applications/Firefox.app/Contents/MacOS/firefox-bin" , "http://www.flickr.com/photos/41613114@N08/4887658899/" ] ;
    //var cmd = [ "/Applications/Firefox.app/Contents/MacOS/firefox-bin" , "http://www.flickr.com/photos/{photo.owner}/{photo.id}/" ] ;
    //Runtime.getRuntime().exec(cmd);
    Stage {
        scene: javafx.scene.Scene {
            width:800
            height:600
            content: ImageView {
                        image : Image {
                                    url: "{url}_z.jpg"
                                    backgroundLoading: true
                                }
                        }
            }
        }
    }
}

ところで＜ｐｒｅ＞が横幅で切れるのをどうするんだっけと思うだけで何もしていなかったが、とりあえずoverflow:autoをセット。あちこちにセット。折り返しも考えたがとりあえずスクロールで。

それと忘れていた。やはりすぐ書かないとダメだよなあ。ソースコード連動型ブログを誰か作ってくれ。レイヤがあってさ、バージョン管理ができてさ、欲を言えばそれ自動で「この辺でバージョンかな？」みたいなちょい賢いやつ。複数のコードを試し書きできて、メトリクスから選べて、で公開ってやるとwiki...は難しすぎて使いこなせないから平場なブログっぽいWebサイト／ページに展開してくれて、それを繋いで同じクラスやメソッドや変数やデザインパターンで縫う、と。

ほらこういうことばっかりやってるからすぐ目的を忘れてしまうのだよ。

    scene: javafx.scene.Scene {

は

    scene: Scene {

だとエラーになってしまうので。

この使い分け、勘所がまだまだ全然だ。Javaの呼び出しといい、もう少し構造的なものがスパッと分かる明晰頭脳にしたい。

Mosaic 8 execよりWebDriverを使ってみたいが。

ダウンロードしたファイルが良くなかったのが、jarファイルの追加の仕方が悪かったのか、コンパイルできない。これも置いておこう。WebDriver自体はとても面白そうなので、いつかソースコードも見てみたい。あとはWebkit。さすがに敷居が高い。

Mosaic 7 PhotoPullParser.fxの[赤!]マーク

プロジェクトを開き直したら復活してしまったため、正確には分からないが、「ファイルの解析中にエラーが発生しました」とか何とかいうエラーがツールチップで表示されていたと思う。

単にプロジェクトを開き直しただけでなく、オリジナルのプロジェクトを開いて閉じて、変更を加えたプロジェクトを開いたらエラーが消えていた次第。

ファイル名の頭のFXアイコンに赤!がつく以外は通常のコンパイルエラーのように、どこかの行に赤!がつく訳でもなく、何がエラーかわからない状態。

前も再構築（プロジェクトを削除して構築）をやったら回復したエラーがあったが、今回は利かなかった。また、PhotoPullParser.fxは編集していない。やったとすれば、デバッグでブレークポイントを張り、onEventのeventの内容を[デバッグ]-[式を評価]で見たのと、コールスタックが見たかったが見れなかったので、冗談で[デバッグ]-[スタック]-[呼び出し元を現在に設定]をやってみたぐらい。その後実行を継続し、（mosaic上の検索窓で）"sun micro"や"oracle"を検索した。oracleで（検索したとき）androidのロゴのロボットの向かって右目に目玉焼きが乗ったイラストがあったがあれはどういう意味だろう。そんなところか。ただその前から赤!がついていたような気がするここまで言っておいて何だが。

目玉焼きのイラストが気になるので、クリックしたらflickrのページが表示されるようにしたいがさてどうしたものか。できればJavaFX上で表示できれば良いが、そんな凄い機能が内蔵されているとは望み薄なので、ブラウザを起動でも好しとしよう。

Mosaic 6 defはoverrideできない

変数のオーバライドで、varは出来て、defは出来ない。なぜだろう？といっても出来ないものは出来ないのだが。

例えばプリセット感覚でLinearGradientの値を設定したものをそのままクラスとして定義できると自分の感覚に合っていて良いのだが。繰り返し数の多い少ないではなく、感覚の問題。他人が作ったグラデーションをただ黙って使いたい。あるいは自分の好きなグラデーションを有無を言わせず使わせたい。

で、いろいろやってみると、自分で定義したクラスの中で宣言した変数にしろ関数（でLinearGradientを返す）にしろ、それをRectangleのfillにセットすると、そのRectangle自体がずれるというか表示されない（完全に消えたのか、ずれたのかは不明）。

だがMain.fxに直に書いた変数にLinearGradientをセットし、それをfillに代入する分には問題ない。

 
def crecendo = LinearGradient {
                    startX: 0.0, startY: 0.0, endX: 0.0, endY: 1.0
                    proportional: true
                    stops: [
                        Stop { offset: 0.0 color: Color.GRAY },
                        Stop { offset: 0.5 color: Color.BLACK }
                    ]
                }
var bottomRect : Rectangle = Rectangle {
    y: bind (height - bottomRect.height)
    // make the bottom rect slightly bigger to fit in TV 'safe area'
    height: bind (tagTextBox.boundsInLocal.height + 35)
    width: bind width
    fill:crecendo
    /*
    fill: LinearGradient {
        startX: 0.0, startY: 0.0, endX: 0.0, endY: 1.0
        proportional: true
        stops: [
            Stop { offset: 0.0 color: Color.GRAY },
            Stop { offset: 0.5 color: Color.BLACK }
        ]
    }
    */
}

LinearGradientのproportionalがtrue（相対）だから、変数だと参照時に参照するRectangleに合わせるからかと思ったが、同じ変数を別なRectangleにセットしても問題ないので、そういうわけでもなさそう。

var tempRect : Rectangle = Rectangle {
    y: bind (height - bottomRect.height - 50)
    height: 35
    width: bind width
    fill:crecendo
}

bottomRectとtempRectは両方ともちゃんと表示される。

まあよくわからないが、これ以上追求してもしょうがないので、現状はそういうものだということで好しとする。そもそもfill:LinearGradient {...}って書くならfill:SomeDesignersGrandientって書けてもいいじゃないか的な発想でしかないので。

Mosaic 5 Main.fx

Main.width

このMainとは何だ？ Main.fxのMainだろうか。確かにMainにpublic var widthがある。きっとこれだろう。だが、Main.widthという構文がいまいち分からない。Mainはクラスか。Main.classがあるしたぶんそうだろう。だがこの仕様がどこかに説明されてないだろうか。SDCのJavaFXチュートリアルにも"書き方"は書いてある（one.someMessage）。

「javafx ファイル単位」で検索。

偶然以前注目していたTerra's Weblogが。JacaFXでSCADA UIが面白い。実務でBACNet対応などの話があるが、JavaFXを実戦配備は品質的に今は無理。成熟してVBの座を奪ってほしい。

Terra's WeblogからJavaFX in Styleに飛んで、漠然とコードを見ていると、LinearGradientが出てくる。Mosaicで見た気がしたのでソースを検索すると、topRectとbottomRectで使っている。http://weblogs.java.net/blog/javakiddy/archive/2008/12/javafx_in_style.htmlでLinearGradientを
alcで引くと"直線的に傾いた"。斜線か。だがAPIリファレンスを見ると、色の話。線形グラデーションか。「線形グラデーション」でググると、HTML5で線形グラデーションを指定するメソッドにcreateLinearGradientが。なぜ日本語だとグラデーションになるのか。

Main.classから「throws」を検索。意味は分かったが、例外クラスリストをシグネチャの次に並べて書くというのは何かなあ、変なのって感じ。

それにしてもリンクを張るのが大変。自動的に張ってくれないだろうか。

Mosaic 4 PullParser

PhotoPullParserはPullParserを使っている。PullParserはどこか日本語の詳しい記事を見た記憶があったが、見つからない。何となく覚えているのは、パースの要所要所でコールバックされることだが、Pullparserじゃない方法も並記されていたはず。それが気になってしょうがない。

こういうときって不思議と探すと見つからないんだよなあ。はてぶしたはずだけど、見つからない。ブックマークしたサイトをググってほしいのだが、方法が分からない。Googleで検索対象に複数URLを指定しても今ひとつ反応が良くない。

とりあえず本当にあったのかどうかも分からない情報のことは忘れてくれ。

PhotoPullParserも本当分かりやすい。

topRectのonMouseDraggedでstageのx,yをいじっている。これは何だろう？と思い、今日はとっても体が冷房病的にきついので、ブレークを張ってみることにした。実は机上で追えないのをすごく嫌う性質（たち）なので、自分的には御法度である。また、去年かもっと前か、ブレークが全然利かなかった不信感もあり、ほとんど投げやりにだったが、大変失礼しました。ちゃんとブレークするじゃん！　一生懸命写真をドラッグしてたが、何の事はない、Mosaicの全体ウィンドウをドラッグしたら掛かった。topRectって書いてあるじゃない。ソースを追うのに定義／参照でやるのが長年染み付いてるせいと冷房病のせいで、なかなかリズムに乗れない。

じゃ写真はどこでやってるのか。

とみていくと、いままで見た事もないThunbImage.fxというファイルが出現した...わけではなく、最初からもちろんそこにあったのだが、何で気づかなかったかなあ。完全に凍ってます。恐るべし冷房力。

これもざーっとみたところ、とっても分かりやすくて、ただzoomTimeline.keyFramesがrotate()の中で設定されているのが何でかなあというぐらいか？ ぐらいか？とは大きく出たが、zoomTimelineを見ていくと全くついていけないのでこの先はまた後で。ちょっと今日中に戻って来れるかどうかは微妙だなあ。

Mosaic 3 関数ポインタ

PhotoPullParserクラスに好例があった。

// Completion callback that also delivers parsed photo metadata
public var onDone: function(data : Photo[]) = null;

こうしてみるとほら、Cと変わらない。

Cと言えば、関数ポインタに始まって関数ポインタに終わると言っても過言ではない・・・とまでは言えないが、通信制御系システムではよく見る光景だ。

ここにも追記した通り、馴れ、馴染みの問題、如何に体に染み込むか、違和感を感じないか、が大きい。

Mosaic 2

Hbox,Vboxについては、ここに非常によいチュートリアルがある。ドメイン名が微妙なのだがどうか無くなりませんように。もしOTNに移行して頂いたら、異動先がすぐ分かるようになってますように。本当にお願いします。

ところでMosaicはFlickr APIを使う。それにはAPI Keyが必要で、これはソースコードに埋め込まれている。デバッグやテストで使うのに、これを使い回して良いのだろうか？(*) API Keyを申請しようにもアプリケーションがあるわけではない。こういう場合はどうするのだろうか。FAQなど調べてみたが、これといってズバリな回答は見つからない。

(2010.8.27追記->) (*)サンプルのページにサンプルで使っているAPI Keyは使わず、自分でAPI Keyを取ってくれと書いてあった。
"Do not use the api-key used by this sample. Obtain your own key from flickr.com"
(<-2010.8.27追記)

だがググってみると、結構みんな適当にアプリ名と内容を書いて取得している様。そこで自分も適当にというわけではないが、将来のアプリケーションとそのためのテスト、みたいな感じで申請、API Keyをゲットした。すると申請の返す刀（次に返ってきたページ）でAPI Keyが取れたので、早速マイキーでMosaicしてみると、問題なくアクセスできた。

これで多少コードを変更してMosaicunになっても、自分のキーだから、文句があったら私に来るのではないかと思う。

あと前から疑問に思っていた、自分アプリをユーザが使う場合にAPI Keyはできればユーザに取得してほしいなあという考えはやはりそうみたい。FlickrのHelp Forumにも載っていたのでメモしておく。

（2010.8.14 追記->)
Help Forum と FAQを勘違いしていた。もう一度探そうと思ったらなかなか見つからなかった。Help ForumのSearchボックスに「api key」で検索。
（<-2010.8.14 追記)

Main.fx

なんか私ごときが烏滸がましく申し訳ない。VideoCubeよりかなりきれいなソースコードの出で立ち。とても見易いのか、そもそもJavaFXが分かり易いのか。少しは分かるようになって来たのか。こうなると俄然、「宣言へ移動」が欲しくなる。MLに相談しちゃおうっかな〜と他力大本願！ MLはjp.netbeansとJavafx.jp、どちらにすべきか。とりあえず検索で当座乗り切ろうと思う。

すごく分かり易いというのが今現在の印象、感想。

Mosaic

Mosaicといえば、WWWブラウザの元祖的あれだろう。しかしこれはJavaFXのサンプルコードの話だ。ここからダウンロードできる。

VideoCubeで反省したのでここはさくっと行きたい。ぼやぼやしてたらもう8/12だ。

まずアプリの仕様から。

1. キーワードで写真をFlickrからダウンロード。ただしキーワード以外の条件は不明。
2. マウスが写真の端のほうにあたると写真が回転する。回転にムラかバグがある。
3. マウスが写真の真ん中辺にあたると写真が正面を向いて止まる。
4. 写真をドラッグするとウィンドウの真ん中付近で大きくなる。
5. 写真じゃないところからドラッグを始めると、マウスが写真に乗ったとき、回転したり大きくなったり、規則性の良く分からないランダムな動きになる。

ここで突然firefoxがぶっ飛んだ。再起動してブログを開くと何かエラーが表示されたが、再度アクセスすると大丈夫な様子。２行ほどロス。

6. 拡大した写真の上にサムネイルが被ることがある。
7. 検索ボックスに入れたキーワードは空白で区切ると+で繋がれる。

とりあえず以上。