close

Filter

Close X
loading table of contents...

Studio Developer Manual / Version 2010

Table Of Contents

5.3.5 Model Beans for Custom Components

When creating complex GUI components, it is good practice to provide an abstract model in the form of a bean to back the view. It is often helpful to provide an ActionScript base class (MyComponentBase below) for the component and extend it by an MXML component, bundling the application logic in the base class. The base class should therefore also take care of building the model bean.

Note however that when creating the Ext JS component configuration in the MXML component, the constructor of the base class has not yet been invoked. Because the component configuration must reference the model to bind the component's states, the model bean must be created before the base class constructor is used. This can be achieved by an accessor method that creates the bean using the call com.coremedia.ui.data.beanFactory.createLocalBean() upon first access. This is shown in the getModel() method below. 

import com.coremedia.ui.data.Bean;
import com.coremedia.ui.data.beanFactory;
import mypackage.config.myComponent;
import ext.panel.Panel;

public class MyComponentBase extends Panel {
  ...
  private var model:Bean;

  /**
   * ...
   * @param config the config object
   */
  public function MyComponentBase(config:MyComponentBase = null) {
    super(config);
    initModel(config);
    ...
  }

  public function getModel():Bean {
    if (!model) {
      model = beanFactory.createLocalBean();
    }
    return model;
  }

  private function initModel(config:myComponent):void {
    getModel().set('myProperty', ...);
    ...
  }
  ...
}

Example 5.7. Model bean factory method


Given this base class, you can access the model in the MXML class as follows: 

<?xml version="1.0" encoding="UTF-8"?>
<MyComponentBase xmlns:fx="http://ns.adobe.com/mxml/2009"
                 xmlns:exml="http://www.jangaroo.net/exml/0.8"
                 xmlns="exml:ext.config"
                 xmlns:ui="exml:com.coremedia.ui.config">

  <fx:Script><![CDATA[
    import com.coremedia.ui.data.Bean;
    import com.coremedia.ui.data.beanFactory;

    public static const xtype:String = "mypackage.config.myXType";
    private var config:MyComponent;

    public native function MyComponent(config:MyComponent = null);
  ]]></fx:Script>

  <items>
    <TextField>
      <plugins>
        <ui:BindPropertyPlugin bidirectional="true">
          <ui:bindTo>
            <ui:ValueExpression expression="myProperty"
                                context="{getModel()}"/>
          </ui:bindTo>
        </ui:BindPropertyPlugin>
      </plugins>
    </TextField>
  </items>

</Panel>

Example 5.8. Model bean access


Here a text field is configured to display the value of a property, but of course arbitrary widgets can be used.

In fact, the property is not directly accessed by the plugin, but indirectly through a value expression that, in this case, simply evaluates to a property value. Value expressions will be discussed in the next section.

Search Results

Table Of Contents