Depende de las necesidades de su aplicación, pero generalmente rompo mi diseño en fragmentos visuales y utilizo componentes MXML personalizados para diseñar las áreas principales y componentes de mi aplicación (paneles de datos, cuadros de diálogo, etc.) utilizando componentes personalizados basados en mxml . Luego lo aumentaré con componentes personalizados de ActionScript en los que necesito más flexibilidad visual de la que proporcionan los componentes de diseño incorporados. MXML es útil porque hace que sea extremadamente fácil obtener componentes en el escenario y establecer sus diversas propiedades y configuraciones de estilo.
Tome este ejemplo de dos paneles de acceso idénticos:
En MXML:
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="290" height="148" title="Login">
<mx:Label text="User name:" width="80" textAlign="right" y="8" x="8"/>
<mx:Label text="Password:" width="80" textAlign="right" y="38" x="8"/>
<mx:TextInput id="txtUsername" maxChars="20" y="8" x="90"/>
<mx:TextInput id="txtPassword" displayAsPassword="true" y="38" x="90" maxChars="20"/>
<mx:Button x="185" y="68" label="Login" id="btnLogin" click="doLogin()"/>
</mx:Panel>
Y en ActionScript:
package
{
import flash.events.MouseEvent;
import mx.containers.Panel;
import mx.controls.Button;
import mx.controls.Label;
import mx.controls.TextInput;
public class MyLoginPanel extends Panel
{
private var _unLabel:Label;
private var _passLabel:Label;
private var _txtUsername:TextInput;
private var _txtPassword:TextInput;
private var _btnLogin:Button;
public function MyLoginPanel()
{
}
override protected function createChildren():void
{
super.createChildren();
this.width = 290;
this.height = 148;
this.title = "Login";
this.layout = "absolute";
_unLabel = new Label();
_unLabel.text = "User Name:";
_unLabel.width = 80;
_unLabel.setStyle("textAlign", "right");
_unLabel.move(8, 8);
this.addChild(_unLabel);
_passLabel = new Label();
_passLabel.text = "Password:";
_passLabel.width = 80;
_passLabel.setStyle("textAlign", "right");
_passLabel.move(8, 38);
this.addChild(_passLabel);
_txtUsername = new TextInput();
_txtUsername.move(90, 8);
this.addChild(_txtUsername);
_txtPassword = new TextInput();
_txtPassword.move(90, 38);
_txtPassword.displayAsPassword = true;
this.addChild(_txtPassword);
_btnLogin = new Button();
_btnLogin.label = "Login";
_btnLogin.move(185, 68);
_btnLogin.addEventListener(MouseEvent.CLICK, doLogin);
this.addChild(_btnLogin);
}
}
}
siete líneas de código vs 62. Eso es un ejemplo bastante simple pero, con un poco de suerte, puede ver cómo puede beneficiarse diseñando muchas partes de su aplicación en MXML, ya sea que esté utilizando el modo de diseño en Flex Builder o no.
Sin embargo, una cosa que recomiendo es mantener ActionScript fuera de tus archivos mxml tanto como sea posible. Trate MXML como su vista y separe cualquier funcionalidad pesada en otras clases.A continuación, puede proporcionar propiedades públicas en aquellas clases a las que los controles en sus componentes MXML puedan enlazarse. MXML es un lenguaje de diseño y, en mi experiencia, al final vale la pena usarlo donde tenga sentido y caer en ActionScript siempre que se requiera un levantamiento más pesado.
Iba a decir más o menos lo mismo, pero me ganaste. Las principales ventajas de MXML son 1) brevedad, y 2) equivalencia estructural entre el marcado y el diseño. – benjismith