Chicago, October 19 - 22, 2010

Griffon for the Enterprise

James Williams – BT/Ribbit

About Me

• Co-creator of Griffon

• Creator of SwingXBuilder

• Sofware Engineer at BT/Ribbit

Griffon Team and Contributors

● Andres Almiray ● Danno Ferrin ● Josh Reed ● Jim Shingler • Hamlet D'Arcy • Nick Zhu

Agenda

● Overview of Griffon● Griffon MVC● Plugins and Addons● Application Packaging● Griffon Competitors● Sample Applications and Demos● Summary

What is Griffon?

● Open source desktop rapid development framework● Leverages Java Swing and the Groovy language● Apache 2 Licensed● Extensible using Plugins and Add-ons● Brings a Grails-inspired experience to the desktop

Structure of a Griffon Application

Structure of a Griffon Application

Yes, all of em.

Griffon MVC

Provides a separation of concerns● Models● Views● Controllers

Griffon Lifecycle

● Bootstrap● Initialize● Startup● Shutdown● Stop

Plugins and Addons

Extend existing features in Griffon applications• Plugins

• Addons

Provide features like

• UI toolkits• Databases• XMPP/REST/RPC

• Testing

• Layout Managers

• Bling

Services and Dependency Injection

Griffon has supports the following• Guice

• Spring

• First-class services when DI is not needed

Application Packaging

● Can easily be deployed as – Fat JARs or collection of JARs

– Java WebStart

– Applets

– Zip file● The Installer plugin can also provide the following

– OS specific executables

– Izpack

– JSmooth

Griffon's Competitors

● Apache Pivot● Eclipse RCP● Netbeans Platform● Many wannabes

Apache Pivot

Rapid application framework including:• WTK user interface elements

• Web libraries

• Charts

• LOTS of XML• Base footprint: Unknown but very small

Code Sample

<Window title="Hello WTKX!" maximized="true" xmlns:wtkx="http://pivot.apache.org/wtkx" xmlns="org.apache.pivot.wtk"> <content> <Label text="Hello WTKX!" styles="{font:'Arial bold 24', color:'#ff0000', horizontalAlignment:'center', verticalAlignment:'center'}"/> </content></Window>

Eclipse RCP

Rapid application framework including:• Eclipse Runtime

• SWT

• JFace

• Workbench• Plugins• Base footprint: 12MB

Netbeans Platform

Toolkit powering Netbeans providing:• Java Swing

• OSGI or Netbeans Modules

• Advanced multi-Window system

• Base footprint: 7-8.5MB

Dependency Handling in Griffon

● Gradle is built in under the covers providing● Compile, Test, and Runtime dependency● Integration with Maven repositories ● Integration with Griffon plugin repositories● No OSGI support yet

Using Eclipse UIs in Griffon

WindowsBuilder Pro• A GUI designer product from Instantiations

• Recently released as a free product

• Provides a competitor to Netbeans Matisse

• Creates human-editable code• Generated UIs can be dropped into a Griffon app

Using Netbeans Matisse with Griffon

Netbeans Matisse ...• Uses GroupLayout for the UIs

• Code is not humanly editable

• No alternate LayoutManagers

• griffon generate-view-script <Qualified UI class name>

Demo

Use Case #1 - Databases

Scenario: Create a database viewer application

Requirements:

• Use MongoDB

• Have the ability to do basic functions like:– CRUD operations

– Simple and advanced query

– Retrieve DB statistics

What is MongoDB?

● Document-oriented database• Documents can be nested• Supports MapReduce

• Used by NYT, SourceForge, foursquare, and others

• Libraries for many programming languages

Demo

Code Sample

jxtitledPanel(title:'Settings', border:new DropShadowBorder(Color.BLACK,15), constraints:'w 30%, h 100%') { jxtaskPaneContainer() { taskPane(id:'conxPane', title:'Connections', layout:new MigLayout()) { scrollPane() { panel(id:'conxIcons', layout: new MigLayout())

} button(text:'Add', constraints:'newline, cell 0 1 ', ...) button(text:'Remove', constraints:'cell 0 1') } taskPane(id:'dbPane', title:'Databases', layout:new MigLayout()) taskPane(id:'collPane', title:'Collections', layout:new MigLayout()) }

}

Code Sample

package griffonmongo

import net.miginfocom.swing.MigLayoutframe (title:'Add a Connection', id:'conx', size:[200,200], layout:new

MigLayout()) {label(text:'Name')textField(id:'txtName', columns:15, constraints:'wrap')label(text:'Host')textField(id:'txtHost', columns:15, constraints:'wrap')label(text:'Port')textField(id:'txtPort', columns:4, constraints:'wrap')button('Add')button('Cancel')

}

Use Case #2 – Websockets / Net Comms

Scenario: Use websockets for communication in a chat and slideware app

Requirements:

• Use WebSockets

• Provide simple chat functions

• Allow controlling slideware app with Websockets

What are Web Sockets?

Web Sockets ...• Address the issues of long polling

• Supported natively by Chrome, Opera, and Firefox

• Enabled with Flash in non-compliant browsers

• Enable bi-directional communication between– Web sites

– Web Services

How Websockets work

Griffon Talk Android App

● Had to play nice with websockets● Needed to display information about the current slide● Needed to control the presentation via Wifi● Had to be Android Cupcake (1.5) compatible

Demo

Code Sample

def listener = [processToken:{aEvent, aToken ->

def json = new JSONObject(aToken.toString())switch(json.getString("operation")) {

...case "broadcast":

def sender = json.getString("user")def msg = json.getString("data")model.msgEventList.add("$sender: $msg")

break}

}, processOpened:{aEvent -> println aEvent}, processPacket:{evt, pkt ->

}] as WebSocketClientTokenListener

Code Sample

scrollPane(id:'screenshot', constraints:'w 700px , h 100%')panel (layout:new MigLayout(), constraints:'w 200px, h 100%') {

scrollPane(id:'scroll', constraints:'h 90%, w 200px, wrap'){jxlist(model:model.msgModel, highlighters:

[HighlighterFactory.createSimpleStriping()])}panel (layout:new MigLayout(), constraints:'w 200px'){

comboBox(id:'cbox', items:['Send Message', 'Send Question'], constraints:'wrap')

textArea(id:'msgText', columns:15, lineWrap:true,constraints:'wrap')

button(text:'Send', actionPerformed:{ controller.sendMessage(msgText?.text)})

}}

Use Case #3 – Converting an app

Scenario: A legacy application that has fallen into disrepair

Requirements:

• Most original functionality must be preserved

• A total rewrite has to be optional

NeoeEdit

● Lightweight BSD licensed text editor● Similar to JEdit

• Built using Java and Swing

• Keyword syntax highlighting

Live coding

Stock Tracker App

● Ported from Apache Pivot to Griffon● Reads stock information from Yahoo! Finance● Track changes in stock information in real-time

Demo

Summary

● UI designer support● Work incrementally with your assets.● Griffon has a small footprint.● Extensible with plugins and addons● You don't have to give up your favorite GUI designer.

Links

● Griffon project: http://griffon.codehaus.org• Code samples:

http://github.com/jwill/SpringOne2GXDemos

• jWebSocket: http://jwebsocket.org/

• websocket4j: https://launchpad.net/websocket4j

• NeoeEdit: http://code.google.com/p/neoeedit/

Q&A