« Previous day (Jun 7, 2009) | Main | Next day (Jun 9, 2009) »

Download NetBeans!

20090608 Monday June 08, 2009

How to Incorporate a Wizard into a Griffon Application

Let's create a Griffon application that includes a wizard! In the end, you'll have an application, as shown below, with a "New" menu item, which pops up a wizard. When "Finish" is clicked, the text in the wizard is put into the text area in the application:

Here are the steps:

  1. Run "griffon create-app", using "WizardDemo1" when prompted for a name. Or use the "New Griffon Application" template in NetBeans IDE.

  2. Run "griffon list-plugins" and then install the Wizard plugin. Or right-click the application in NetBeans IDE, choose "Griffon Plugins...", and use the New Plugins tab to install the "wizard" plugin (currently the last one in the list). By doing this, you add a new folder, "griffon-app/wizards" and you also have a new scripts available for creating wizard artifacts.

  3. Run "griffon create-wizard-page". Or right-click the application in NetBeans IDE, choose "Run Griffon Command...", choose "create-wizard-page", and choose Run. Type "One" when prompted, which will result in a new file called "OneWizardPage.groovy" in the "griffon-app/wizards" folder.

    The content of "OneWizardPage.groovy" is as follows, none of which you will need to change in this example: 

    class OneWizardPage {
   def stepId = "step1" // must be unique per WizardPage
   def description = "Step Description"
   def autoListen = true

   def pageContents = {
      // remember to always set a name: property to each input widget
      textField( name: "tf1", text: "Add Content Here" ) 
   }

   // Either return a String that indicates a problem
   // or return a null valud indicating no problem
   def onValidate = { component, /*PropertyChangeEvent*/ event ->
      return null // no problems
   }
}

  4. Change the "WizardDemo1View.groovy", in "griffon-app/views", to the following: 
    application(title:'WizardDemo1',  size:[320,200], location:[50,50], locationByPlatform:true) {
    menuBar {
        menuItem('New', actionPerformed:controller.action)
    }
    textArea(id: 'ta','<Empty>')
}

  5. In line 4 above, you're referring to an action in the "WizardDemo1Controller.groovy", which is in "griffon-app/controllers". Define it like this: 
    def action = { evt = null ->
    def wizard = wizard( title: "My Wizard", pages: ["One"] )
    def result = showWizard(wizard)
    view.ta.text = result.tf1
}

    The "One" in line 2 above refers to the "One" you typed when you created the wizard page. From the "showWizard", you get a result, from which you get "tf1", which is the name of the text field in the wizard page. That's what you put in the text area, which has the id "ta", in the view.

Hurray. You're done. Simple example for one wizard page which, when "Finish" is clicked, causes the content of the wizard to be put in the view's text area. And a lot of this is thanks to Tim's wizard.dev.java.net project, as can be seen from the NetBeans 5.0 splash screen in the left of the wizard shown above.

Jun 08 2009, 03:55:06 PM PDT Permalink