What about modifying the GUI at runtime?

[Andriy Tsykholyas]

Hi,

There are many tools for making initial GUI (e.g Matisse). But in a complex application the GUI is not static. And many of those tools simply fails to help you when it comes to modifying the GUI at runtime.
I like the Groovy approach for building the GUI. The code using SwingBuilder is clear, readable and maintainable. I also like the Griffon approach for clear separation of models, controllers and views. But what about modifying the GUI at runtime? I mean how easy/difficult is to add some new components to existing (and visible) container or remove some components from it using Griffon/Groovy.

Thanks in advance,
Andriy

[Andres Almiray]

It's very simple as long as you keep a reference to the container (though you can locate a container easily using Groovy too). Take for example Griffon View taken from the Book's source repository (http://code.google.com/p/griffoninaction/source/browse/#svn/trunk/chap01)

actions {
   // omitted for brevity
}

fileChooserWindow = fileChooser()
fileViewerWindow = application(title:'GroovyEdit', size:[480,320], 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] ) {
   menuBar {
      // omitted for brevity
   }
   borderLayout()
   tabbedPane id: 'tabGroup', constraints: CENTER
}

The tabGroup id: property sets a variable on the current builder. Any code can refer to that JTabbedPane by using that variable name. On a controller we have this

import javax.swing.JFileChooser

class GroovyEditController {
   def view

   def openFile = {
      def openResult = view.fileChooserWindow.showOpenDialog(view.fileViewerWindow)
      if( JFileChooser.APPROVE_OPTION == openResult ) {
         File file = new File(view.fileChooserWindow.selectedFile.toString())
         // let's calculate an unique id for the next mvc group
         String mvcId = file.path + System.currentTimeMillis()
         createMVCGroup("FilePanel", mvcId,
            [file: file, tabGroup: view.tabGroup, tabName: file.name, mvcId: mvcId])
      }
   }

   def quit = {
      app.shutdown()
   }
}

Notice the controller has a 'view' property. Views share variables with the builder that created them, in our case it shares the tabGroup variable. Calling createMVCGroup() with those settings embeds a new tab into the tabGroup tabbedPane.

Another way to do it would be using the builder explicitly from within the controller

class FooController {
    def view
    def builder

    def addDetails = {
        def detailPanel = builder.panel {
           // regular SwingBuilder code goes here
        }
        view.masterContainer.add(detailPanel) // typical Container call
    }
}

Cheers,
Andres

[Andriy Tsykholyas]

Wow!
Andres, thank you for the excellent explanation