<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>ActivoRicordi Captain&#039;s log &#187; OSFlash</title>
	<atom:link href="http://blog.activoricordi.com/tag/osflash/feed/" rel="self" type="application/rss+xml" />
	<link>http://blog.activoricordi.com</link>
	<description>Delivering Innovation through Technology</description>
	<lastBuildDate>Sat, 21 Jan 2012 00:56:22 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>Desarrollo de Aplicaciones Flex con FlashDevelop &#8211; Primera Parte</title>
		<link>http://blog.activoricordi.com/2009/07/desarrollo-de-aplicaciones-flex-con-flashdevelop-primera-parte/</link>
		<comments>http://blog.activoricordi.com/2009/07/desarrollo-de-aplicaciones-flex-con-flashdevelop-primera-parte/#comments</comments>
		<pubDate>Tue, 07 Jul 2009 23:12:10 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[web 2.0]]></category>
		<category><![CDATA[flashbuilder]]></category>
		<category><![CDATA[Flashdevelop]]></category>
		<category><![CDATA[flex]]></category>
		<category><![CDATA[OSFlash]]></category>

		<guid isPermaLink="false">http://blog.activoricordi.com/?p=122</guid>
		<description><![CDATA[La primera parte de un tutorial que explica como realizar aplicaciones con el FlashDevelop para principiantes que no conocen el mundo Flex.]]></description>
			<content:encoded><![CDATA[<p>Buenas noches:</p>
<p>No hace mucho que descubri el entorno de desarrollo <a class="wp-caption-dd" title="flashdevelop site" href="http://flashdevelop.org" target="_blank">flashdevelop.org</a>, la verdad es aunque no he podido utilizarlo todo lo que quisiera, es bastante <a class="wp-caption-dd" title="Funcionalidades del FlashDevelop.org" href="http://miguelsantirso.es/2008/08/nueva-version-de-flashdevelop-ide-gratuito-para-programar-flash/">potente</a> y permite desarrollar comodamente en Flex sin necesidad de utilizar el FlexBuilder o FlashBuilder. Es cierto que tiene limitaciones pero en su mayoría relativas a que el Flex SDK no posee todas las librerias existentes en el FlexBuilder.</p>
<p>Instalarlo es muy sencillo y existen varios tutoriales que lo explican.  Lo que no he encontrado son tutoriales, ejemplos o artículos que lo utilicen a fondo con todas sus posibilidades. Así que he decido adentrarme yo mismo en este territorio inexplorado.</p>
<ul>
<li>Antes de nada he descargarme Flex SDK. Se trata de un fichero zip que es facil de descomprimir. En mi caso, yo lo he hecho en mi disco secundario D:\FlexSDK.</li>
<li>Se ejecuta el FlashDevelop. Se selecciona la opción</li>
</ul>
<p><strong>Crear un nuevo proyecto</strong></p>
<p>Debajo de la pestaña de proyectos recientes &#8220;Recent Projects&#8221;, existe la opción &#8220;New Project&#8221;. Esta opción nos dirige a una ventana emergente de donde se puede seleccionar el proyecto deseado. En este caso, se selecciona la opción &#8220;ActionScript 3 &gt; Flex Project&#8221;.</p>
<p>En este ejemplo especifico se introduce los siguientes valores:</p>
<ul>
<li><em>Name</em>: AddressBook</li>
<li><em>Location</em>: D:\adobeflexprojects</li>
<li><em>Package</em>: &#8211; Se deja en blanco -</li>
</ul>
<p>Automaticamente, se genera una colección de carpetas como se generarían en el caso de un proyecto utilizando FlexBuilder.</p>
<ul>
<li><em>bin</em></li>
<li><em>lib</em></li>
<li><em>src</em></li>
</ul>
<p>En nuestro caso, se desgarga este fichero (fichero), se introduce en la carpeta lib, que se encuentra en<br />
D:/</p>
<p>Se abre el fichero <em>Main.mxml</em> que se encuentra localizado en la carpeta src, al que se puede acceder desde la pestaña <em>Project</em>.</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
</pre></td><td class="code"><pre class="xml" style="font-family:monospace;"><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;mx:Button</span> <span style="color: #000066;">id</span>=<span style="color: #ff0000;">&quot;myButton&quot;</span> <span style="color: #000066;">label</span>=<span style="color: #ff0000;">&quot;Hello&quot;</span> <span style="color: #000000; font-weight: bold;">/&gt;</span></span></pre></td></tr></table></div>

<p>Queda el siguiente codigo</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
</pre></td><td class="code"><pre class="xml" style="font-family:monospace;"><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;?xml</span> <span style="color: #000066;">version</span>=<span style="color: #ff0000;">&quot;1.0&quot;</span> <span style="color: #000066;">encoding</span>=<span style="color: #ff0000;">&quot;utf-8&quot;</span><span style="color: #000000; font-weight: bold;">?&gt;</span></span>
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;mx:Application</span> <span style="color: #000066;">xmlns:mx</span>=<span style="color: #ff0000;">&quot;http://www.adobe.com/2006/mxml&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span>
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;mx:Button</span> <span style="color: #000066;">id</span>=<span style="color: #ff0000;">&quot;myButton&quot;</span> <span style="color: #000066;">label</span>=<span style="color: #ff0000;">&quot;Hello&quot;</span> <span style="color: #000000; font-weight: bold;">/&gt;</span></span>
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/mx:Application<span style="color: #000000; font-weight: bold;">&gt;</span></span></span></pre></td></tr></table></div>

<p>Una vez salvado, se pulsa sobre el botón &#8220;Test Movie&#8221;, y el SDK de Flex compila el fichero. Y si se ha cometido ningún error al copiar/pegar aparece un botón.</p>
<p>A continuación, se le añade nuevos elementos de UI,como una etiqueta o un campo donde se almacena el Nombre de Pila del contacto.</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
</pre></td><td class="code"><pre class="xml" style="font-family:monospace;"><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;?xml</span> <span style="color: #000066;">version</span>=<span style="color: #ff0000;">&quot;1.0&quot;</span> <span style="color: #000066;">encoding</span>=<span style="color: #ff0000;">&quot;utf-8&quot;</span><span style="color: #000000; font-weight: bold;">?&gt;</span></span>
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;mx:Application</span> <span style="color: #000066;">xmlns:mx</span>=<span style="color: #ff0000;">&quot;http://www.adobe.com/2006/mxml&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span>
	<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;mx:Panel</span> <span style="color: #000066;">title</span>=<span style="color: #ff0000;">&quot;New AddressBook Contact&quot;</span> <span style="color: #000066;">height</span>=<span style="color: #ff0000;">&quot;75%&quot;</span> <span style="color: #000066;">width</span>=<span style="color: #ff0000;">&quot;75%&quot;</span> </span>
<span style="color: #009900;">        <span style="color: #000066;">paddingTop</span>=<span style="color: #ff0000;">&quot;10&quot;</span> <span style="color: #000066;">paddingLeft</span>=<span style="color: #ff0000;">&quot;10&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span>
			<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;mx:Label</span> <span style="color: #000066;">id</span>=<span style="color: #ff0000;">&quot;fNameLabel&quot;</span> <span style="color: #000066;">text</span>=<span style="color: #ff0000;">&quot;FirstName.&quot;</span><span style="color: #000000; font-weight: bold;">/&gt;</span></span>
			<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;mx:TextInput</span> <span style="color: #000066;">id</span>=<span style="color: #ff0000;">&quot;fName&quot;</span> <span style="color: #000066;">text</span>=<span style="color: #ff0000;">&quot;Enter First Name&quot;</span><span style="color: #000000; font-weight: bold;">/&gt;</span></span>
			<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;mx:Button</span> <span style="color: #000066;">id</span>=<span style="color: #ff0000;">&quot;myButton&quot;</span> <span style="color: #000066;">label</span>=<span style="color: #ff0000;">&quot;Submit&quot;</span> <span style="color: #000000; font-weight: bold;">/&gt;</span></span>
	<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/mx:Panel<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/mx:Application<span style="color: #000000; font-weight: bold;">&gt;</span></span></span></pre></td></tr></table></div>

<p>Se ha introducido elementos nuevos</p>
<ul>
<li>Label</li>
<li>TextInput</li>
</ul>
<p>Tambien puedo introducir campos múltiples, como este campo lista que me va a permitir seleccionar el tratamiento del individuo:</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
</pre></td><td class="code"><pre class="xml" style="font-family:monospace;"><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;mx:List<span style="color: #000000; font-weight: bold;">&gt;</span></span></span> 
	<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;mx:dataProvider<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
		<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;mx:String<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>Mr.<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/mx:String<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
		<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;mx:String<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>Ms.<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/mx:String<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
		<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;mx:String<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>Miss<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/mx:String<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
	<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/mx:dataProvider<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/mx:List<span style="color: #000000; font-weight: bold;">&gt;</span></span></span></pre></td></tr></table></div>

<p>Esto es solo el comienzo para abrir boca,en los siguientes capitulos se comenzará de una manera más organizada entendiendo cual debe ser la organización de un desarrollo, como se organiza un formulario y como se puede dar estilos a la aplicación.</p>
<p>Un saludo</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.activoricordi.com/2009/07/desarrollo-de-aplicaciones-flex-con-flashdevelop-primera-parte/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

