Top > Blog Index > Griffon で Hello World !

Griffon で Hello World !

いつのまにか Griffon が 0.9 になっていた。 Griffon で Hello World に挑戦してみた。

Griffon は Eclipse を起動して開発するのが面倒と感じている Swing プログラマーに最適かも。 Grailsとディレクトリレイアウトが同じなので、Grailsに慣れている場合はさらに楽になります。

ただ、Swing プログラマとしては SwingBuilder だけで書ける内容というのでは ちょっと濃いことはできない気がする (実際はまだGriffon初心者なのでわからないですけど) ここでは、自分でつくったカスタムUI を入れるところまでいきます。

手順(概要)

  1. Griffon のダウンロードとインストール
  2. griffon create-app helloworld
  3. cd helloworld; griffon run-app
  4. vi src/main/test/TestPanel.groovy にてカスタムパネルを作成
  5. vi griffon-app/views/helloworld/HelloworldView.groovy で TestPanel.groovy を使用
  6. griffon run-app

Step1 Griffon download and install

griffon home へいき binary をダウンロードします。 アーカイブを展開して、~/.bashrc に 環境変数 GRIFFON_HOME を設定した上で、

export PATH=$PATH:$GRIFFON_HOME/bin

するだけでOKです。Grails,Groovyと同じ作法なので迷うことはないはずです。

Step2 とりあえず create-app と run-app

griffon をインストールできたら、例によって griffon create-app helloworld してアプリを作成します。 その後、cd helloworld で アプリケーションのルートディレクトリに入って、griffon run-app すると 以下のようにとりあえずのアプリが起動できます。

ここで Views を確認しておきます

$ cat griffon-app/views/helloworld/HelloworldView.groovy 
package helloworld

application(title: 'helloworld',
  //size: [320,480],
  pack: true,
  //location: [50,50],
  locationByPlatform:true,
  iconImage: imageIcon('/griffon-icon-48x48.png').image,
  iconImages: [imageIcon('/griffon-icon-48x48.png').image,
               imageIcon('/griffon-icon-32x32.png').image,
               imageIcon('/griffon-icon-16x16.png').image]) {
    // add content here
    label('Content Goes Here') // deleteme
}

どうやら SwingBuilder でViewは記述しているようです。 ここに自分で通常のSwingのお作法でつくったカスタムUI を入れます。

Step3 カスタムパネルを作成

$ mkdir src/main/test
$ vi src/main/test/TestPanel.groovy

してカスタムUI(パネル)を作成してきます。 このとき、カスタムパネルは必ずパッケージに入れる必要があるようです。 （デフォルトパッケージで済ませる方法がわからなかった。） ここでは test パッケージに入れています。

code : TestPanel.groovy

groovy で記述している・・・という以外はなんてことないパネルです。 センターに JButton で Hello World! の文字を入れたボタンを入れています。

package test

import java.awt.*
import javax.swing.*

class TestPanel extends JPanel{

  def TestPanel(){
    super()
    doMyLayout()
  }
  def doMyLayout(){
    setLayout(new BorderLayout())
    add( new JButton('Hello World!'),BorderLayout.CENTER )
  }
}

Step4 作成した TestPanel.groovy を HelloworldView.groovy に追加

HelloworldView.groovy に widget(new test.TestPanel()) を追加。

griffon-app/views/helloworld/HelloworldView.groovy

package helloworld

application(title: 'helloworld',
  //size: [320,480],
  pack: true,
  //location: [50,50],
  locationByPlatform:true,
  iconImage: imageIcon('/griffon-icon-48x48.png').image,
  iconImages: [imageIcon('/griffon-icon-48x48.png').image,
               imageIcon('/griffon-icon-32x32.png').image,
               imageIcon('/griffon-icon-16x16.png').image]) {
    // add content here
    //label('Content Goes Here') // deleteme
    widget(new test.TestPanel())
}

Step5 griffon run-app

アプリケーションのルートディレクトリに戻って

$ griffon run-app

結果...

まとめ 実用に耐えるアプリにするには...

カスタムUI はできたのですが、 そのUIに対してリスナをつけて...というところで止まりました。 Griffon では View を SwingBuilder 的な記述で実装し、そのコントロールは、 controller で定義する必要があるのですが カスタムなUI のカスタムのアクションをどう定義してやればいいのか？ ドキュメントも見あたりません。 Griffonの立場としては簡単なことを簡単にできるところにフォーカスしていて、 そういう難しいことは プラグインで実装しろ、ということなのかもしれません。