griffon桌面开发之hello world

更多内容请到我的博客:http://www.mikameng.com

 

Griffon是基于Groovy语言， RCP和RIA的很好的解决方案。就像Grails开发java web一样，能够实现快速开发，测试。大大提高生产力。

 

1. 搭建开发环境：

 

下载griffon 压缩包 http://dist.codehaus.org/griffon/griffon/0.9.x/griffon-0.9.2-beta-1-bin.zip ,  解压后添加环境变量GRIFFON_HOME， 输入刚解压的griffon路径， 然后将griffon的bin目录添加到path中。

 

2. 建立项目

 

命令行进入希望创建程序的文件夹， 输入命令griffon create-app HelloWorld, 命令执行完成后， 我们的项目结构都建立起来了。 griffon为我们创建了一套mvc模型，实现是空的，等着我们去实现。

controller: griffon-app\controllers\helloword\HelloWordController.groovy

model:  griffon-app\models\helloword\HelloWordModel.groovy

view :  griffon-app\views\helloword\HelloWordView.groovy

注意：这3个类是一组mvc， 当在这个3个类中使用controller, model和view的时候， 就是指这3中的一个。 这个是griffon的约束。

看下griffon-app\conf\Application.groovy就明白了。

application {
    title = 'HelloWord'
    startupGroups = ['HelloWord']

    // Should Griffon exit when no Griffon created frames are showing?
    autoShutdown = true

    // If you want some non-standard application class, apply it here
    //frameClass = 'javax.swing.JFrame'
}
mvcGroups {
    // MVC Group for "HelloWord"
    'HelloWord' {
        model = 'helloword.HelloWordModel'
        controller = 'helloword.HelloWordController'
        view = 'helloword.HelloWordView'
    }

}

 

3. 运行项目

项目创建后， cd helloworld 进入项目目录，输入griffon run-app 即可运行刚刚建立的项目。

运行效果如下：

 

4.  安装migLayout插件

使用migLayout可以很方便的管理界面上的组件，从而解决了swing/swt的布局比较繁琐的问题。

命令行里运行:  griffon install-plugin migLayout，即可安装此插件。

 

5. 修改model实现

griffon-app\models\helloword下是model类HelloWordModel.groovy， 打开添加如下黑体代码：

 

package helloword

import groovy.beans.Bindable

class HelloWordModel {
   // @Bindable String propName
   @Bindable String userName;
   @Bindable String email;
   @Bindable String phone;
}

属性带有@Bindable意味着， 此属性可以绑定前台UI， 如果属性值发生变化的话， UI会自动更新。

6. 修改view实现

修改view代码，添加我们的简单实现。

代码运行后的界面如下：

代码如下：

package helloword
 
application(title: 'HelloWord',
  pack: true,
  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]) {
    //panel(border:emptyBorder(10)) {

            borderLayout()
           
            panel(constraints: CENTER){
                    migLayout()
                                    
            label ('userName', constraints: 'left')
            textField(columns: 20, constraints: 'growx, wrap', text: bind('userName', target:model, mutual: true))
       
            label ('email', constraints: 'left')
            textField(columns: 20, constraints: 'growx, wrap', text: bind('email', target:model, mutual: true))
                   
                    label ('phone', constraints: 'left')
            textField(columns: 20, constraints: 'growx, wrap', text: bind('phone', target:model, mutual: true))
        }
           
            panel(constraints: SOUTH){
                    migLayout()                   
       
                    button( 'Save', actionPerformed: controller.save,  constraints: 'left')
                    button('Close', actionPerformed: controller.close, constraints: 'growx,wrap')
            }
           
}

页面显示分2部分，中间部分是接受用户输入， 下面是用户操作按钮。

中间部分布局使用midLayout实现：

constraints: ‘left’ 代表控件中左边

constraints: ‘growx, wrap’ 代表此控件在前一个空间后面，它的下一个空间换行。

text: bind() 是绑定刚才创建的model属性， model属性是@Bindable。

绑定提交事件：

button( ‘Save’, actionPerformed: controller.save,  constraints: ‘left’)

此句话是生成一个Save按钮， 当点击按钮的时候，调用controller的save方法。

7. 修改controller代码

griffon-app\controllers\helloword\HelloWordController.groovy是 helloworld对应的controller， 代码比较简单有2个闭包方法 save和close， 就是刚才view里绑定按钮的事件。

package helloword

class HelloWordController {
    // these will be injected by Griffon
    def model
    def view
    
    def save = {
           
            def list = []
            list << 'userName=' + model.userName
            list << 'email=' + model.email
            list << 'phone=' + model.phone
           
           
            javax.swing.JOptionPane.showMessageDialog(
                    app.windowManager.windows[0],
                    list.join('\n')
            )
    }
    
    def close= {
        app.shutdown()
    }
    
}

点击保存时，controller会利用java的JOptionPane弹出窗口， 显示用户输入的信息。

到此为止hello world实例完毕， griffon会自动注入view和model到controll里。

 

下期将改进这个实例， view还可以更简洁。 自动根据model的属性，然后添加加到view上，不用咱们手工输入了。

 

版权声明: 原创作品，允许转载，转载时请务必以超链接形式标明文章出处 、作者信息和本声明。否则将追究法律责任。

 

评论

2 楼 morry 2010-11-12  

我也是刚开始学习

1 楼 leon1509 2010-11-12  

很好，收藏到收藏夹！再深入写点就更好了。