flex - una - hipervinculos en html ejemplos

¿Cómo creo un enlace de datos bidireccional en Flex 3?

Question

Necesito vincular una propiedad a un control de edición y hacer que el control vuelva a escribir su valor en la misma propiedad. El problema es que estoy configurando el valor de origen antes de crear el control:

<mx:Panel>
    <mx:Script>
        <![CDATA[
            [Bindable] public var editedDocument: XML;
        ]]>
    </mx:Script>
    <mx:TextInput id="docLabel" text="{editedDocument.@label}"/>
    <mx:Binding source="docLabel.text" destination="editedDocument.@label"/>
</mx:Panel>

Yo llamo esto así:

var xmlDoc: XML = <document label="some label" />;
var myPanel: MyPanel = new MyPanel();
myPanel.editedDocument = xmlDoc;
parent.addChild(myPanel);

Lo que sucede es esto:

• el campo de texto docLabel termina en blanco (igual a "")
• el atributo @label de xmlDoc está establecido en ""

Lo que quiero es esto:

• el campo de texto docLabel debe contener "alguna etiqueta"
• el atributo @label de xmlDoc debe cambiar solo cuando la propiedad de texto de docLabel cambie.

¿Cómo logro esto usando Flex 3?

Editar

También he intentado esto:

<mx:Panel>
    <mx:Script>
        <![CDATA[
            [Bindable] public var editedDocument: XML;
        ]]>
    </mx:Script>
    <mx:TextInput id="docLabel"/>
    <mx:Binding source="editedDocument.@label" destination="docLabel.text"/>
    <mx:Binding source="docLabel.text" destination="editedDocument.@label"/>
</mx:Panel>

El resultado es el mismo.

Answer 1

Creo que el enlace de datos bidireccional es una nueva característica en Flex 4.

Answer 2

Eche un vistazo al enlace de datos bidireccional . Eche un vistazo a la parte del texto:

En Flex 3, si desea establecer un enlace bidireccional con el

mx: Enlace

etiqueta debe establecerla dos veces: mx:Binding source="a.property" destination="b.property"/> mx:Binding source="b.property" destination="a.property"/>

que se convierte en:

mx:Binding source="a.property" destination="b.property" twoWay="true"/>

Answer 3

Esto es directamente de Adboe http://opensource.adobe.com/wiki/display/flexsdk/Two-way+Data+Binding , ¡y también es Flex 3!

Answer 4

En Flex 3, sería mejor que hicieras algo como esto. ¿También no está seguro de que pueda enlazar directamente a XML?

En cambio, haz algo como esto:

        [Bindable] public var tmpString: String;


        public var onChange():void {
                tmpString = docLabel.text;
                //set the XML string, etc.
        }

    ]]>
</mx:Script>
<mx:TextInput id="docLabel" text="{tmpString}" change="onChange()" />

Answer 5

Puede intentar usar BindingUtils para crear el enlace mediante programación después de que se haya creado la clase: http://life.neophi.com/danielr/2007/03/programmatic_bindings.html

Hay muchas variaciones de esto que he usado para abordar problemas similares. Si no puede resolverlo desde el enlace, publique un comentario y exploraré mi código fuente para ver qué puedo encontrar.

private function init():void 
{
  var xmlDoc: XML = <document label="some label" />;
  var myPanel: MyPanel = new MyPanel();
  myPanel.editedDocument = xmlDoc;
  parent.addChild(myPanel);
  BindingUtils.bindProperty(docLabel, "text", editedDocument, "label");

  //or maybe it should be one of these, I have not done binding to an XML attribute before
  BindingUtils.bindProperty(docLabel, "text", editedDocument, "@label");
  BindingUtils.bindProperty(docLabel, "text", editedDocument, "{@label}");
}

Answer 6

Creé controles personalizados que crean enlaces bidireccionales mediante programación cuando se les entrega un objeto proveedor que tiene una propiedad adecuada cuyo nombre coincide con el ID del control. Aquí hay un ejemplo para un TextInput :

public class BoundTextInput extends TextInput
{
  // some code omitted for brevity:
  // Create getter / setter pair, call invalidateProperties()
  // and set internal flag for efficiency

  // create bindings in commitProperties:
  override protected function commitProperties():void
  {
    if (this._fProviderChanged) {
      this._fProviderChanged = false;
      if (null != this._provider && this._provider.hasOwnProperty(this.id) && this._provider[this.id] is String) {
        // this is the core bit
        BindingUtils.bindProperty(this, "text", this._provider, this.id);
        BindingUtils.bindProperty(this._provider, this.id, this, "text");
      }
    }
    // Normally, you call the overridden method first,
    // but we want to see the values initialized by the new
    // binding right away, so we first create the bindings
    // and then commit all inherited properties
    super.commitProperties();
}

}

Este es un ejemplo de cómo lo uso dentro de uno de mis otros componentes (un cuadro de diálogo emergente). La propiedad de data se establece en una instancia de la clase de modelo apropiada, que siempre es un contenedor mudo, [Bindable] .

<?xml version="1.0" encoding="utf-8"?>
<PopUp xmlns="com.econemon.suite.gui.components.*" xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:Form width="100%" height="100%" >
    <mx:FormHeading label="Server-URL" />
    <mx:FormItem label="URL" >
      <!--
        If it is available, and of type String, data.urlServer
        is bound to the text property of this TextInput
      -->
      <BoundTextInput id="urlServer" provider="{this.data}"/>
    </mx:FormItem>
    <mx:FormItem>
      <mx:Button label="OK" click="this.submit(event)" />
    </mx:FormItem>
  </mx:Form>
</PopUp>