CODIGO.actionscript » Tutoriales http://www.codigoactionscript.org Blog de programación en ActionScript. Tips, tutoriales, ejemplos de Adobe Flash, Flex y AIR Fri, 30 Sep 2011 11:25:38 +0000 en hourly 1 http://wordpress.org/?v=3.3 AdobeTV: Screen density http://www.codigoactionscript.org/adobetv-screen-density/ http://www.codigoactionscript.org/adobetv-screen-density/#comments Tue, 06 Sep 2011 14:54:58 +0000 admin http://www.codigoactionscript.org/?p=719

En los dispositivos móviles el DPI (puntos por pulgada) es muy variable. Esto tiene un efecto directo sobre el tamaño de su contenido. En este vídeo vemos como ajustar el tamaño de los gráficos en función del dispositivo.

Related posts: AdobeTV: Determining [...] Related posts:

  1. AdobeTV: Determining speed data from GPS
  2. AdobeTV: Air for Android Development
  3. AdobeTV: Desarrollo AIR para Android con Flash CS5
]]> En los dispositivos móviles el DPI (puntos por pulgada) es muy variable. Esto tiene un efecto directo sobre el tamaño de su contenido. En este vídeo vemos como ajustar el tamaño de los gráficos en función del dispositivo.

Related posts:

  1. AdobeTV: Determining speed data from GPS
  2. AdobeTV: Air for Android Development
  3. AdobeTV: Desarrollo AIR para Android con Flash CS5

]]> http://www.codigoactionscript.org/adobetv-screen-density/feed/ 0 Cómo mostrar subtitulos de forma automática con Adobe Encore http://www.codigoactionscript.org/como-mostrar-subtitulos-de-forma-automatica-con-adobe-encore/ http://www.codigoactionscript.org/como-mostrar-subtitulos-de-forma-automatica-con-adobe-encore/#comments Tue, 10 Aug 2010 21:26:42 +0000 admin http://www.codigoactionscript.org/?p=667 En este segundo Tip sobre Adobe Encore CS5, y siguiendo el =http://www.cristalab.com/tips/cmo-aadir-subtitulos-a-videos-en-dvd-con-adobe-encore-cs5-c90085ltema anterior sobre los subtítulos[/url], voy a explicar cómo hacer para que un subtitulo aparezca de forma automática al visualizarse un video sin que el usuario tenga que habilitarlo desde el menú.

Imaginemos que tenemos un DVD con un único video grabado en un idioma concreto. Y el DVD dispone de un menú inicial con varios botones, uno en cada idioma para visualizar todos ese mismo video pero que cada uno lo muestre automáticamente con los subtítulos visibles para dicho [...] Related posts:

  1. Cómo añadir subtitulos a videos en DVD con Adobe Encore CS5
  2. Cómo mostrar tooltips dentro de componentes List de Flex
  3. Obtener elementos de un listado de forma aleatoria sin que se repitan
]]> En este segundo Tip sobre Adobe Encore CS5, y siguiendo el =http://www.cristalab.com/tips/cmo-aadir-subtitulos-a-videos-en-dvd-con-adobe-encore-cs5-c90085ltema anterior sobre los subtítulos[/url], voy a explicar cómo hacer para que un subtitulo aparezca de forma automática al visualizarse un video sin que el usuario tenga que habilitarlo desde el menú.

Imaginemos que tenemos un DVD con un único video grabado en un idioma concreto. Y el DVD dispone de un menú inicial con varios botones, uno en cada idioma para visualizar todos ese mismo video pero que cada uno lo muestre automáticamente con los subtítulos visibles para dicho idioma.

Para hacer esto iremos al menú y seleccionaremos por ejemplo el primer botón que sería para ver el video con subtítulos en inglés. Haremos click en el botón derecho del mouse, y seleccionaremos la opción "Specify Link".

Esto nos mostrará el menú de selección de enlace de video para ese botón de menú. Ahí tendremos la opción de especificar una pista de subtitulo (también de otro audio si fuese el caso) que queremos activar automáticamente al entrar desde ese botón.

Ahora solo tendríamos que asignar al resto de botones el mismo enlace al video pero seleccionando la pista de subtitulo que nos interese.

Related posts:

  1. Cómo añadir subtitulos a videos en DVD con Adobe Encore CS5
  2. Cómo mostrar tooltips dentro de componentes List de Flex
  3. Obtener elementos de un listado de forma aleatoria sin que se repitan

]]> http://www.codigoactionscript.org/como-mostrar-subtitulos-de-forma-automatica-con-adobe-encore/feed/ 0 Cómo añadir subtitulos a videos en DVD con Adobe Encore CS5 http://www.codigoactionscript.org/como-anadir-subtitulos-a-videos-en-dvd-con-adobe-encore-cs5/ http://www.codigoactionscript.org/como-anadir-subtitulos-a-videos-en-dvd-con-adobe-encore-cs5/#comments Tue, 10 Aug 2010 20:57:54 +0000 admin http://www.codigoactionscript.org/?p=664

Cómo hace tiempo que no escribo ningún =http://www.cristalab.com/tipsTip[/url] (y he recibido varias patadas por ello) voy a escribir un par sobre Adobe Encore CS5 dado que estos días ando trabajando en un proyecto con él.

En este caso voy a explicar [...] Related posts:

  1. Cómo mostrar subtitulos de forma automática con Adobe Encore
  2. Videos online de las sesiones del Adobe MAX 2009
]]> Cómo hace tiempo que no escribo ningún =http://www.cristalab.com/tipsTip[/url] (y he recibido varias patadas por ello) voy a escribir un par sobre Adobe Encore CS5 dado que estos días ando trabajando en un proyecto con él.

En este caso voy a explicar cómo añadir subtítulos a nuestros vídeos del DVD.

El primer paso es tener un archivo de texto (.TXT) con los tiempos de entrada y salida del subtitulo y su texto. En mi caso me llegó un archivo excel con la información con lo que tuve que exportarlo a texto y autoformatearlo para dejarlo con el formato adecuado.

El formato del tiempo de entrada y salida debe de ser: hora:minuto:segundo:frame y deben de estar separadas por un espacio, tal cómo se ve en la imagen. Por ejemplo, en este caso el primer subtitulo aparecerá en el segundo 30 y desaparecerá en segundo 34 (el último dígito es el frame rate con lo que la numeración irá de 0 a 25)

Después de los tiempos, separados por otro espacio, pondremos el texto a mostrar por el subtitulo (En la imagen he emborronado los textos ya que es una captura de un proyecto real y no me interesa mostrarlo U_U).

Una vez tenemos el archivo de texto con los subtítulos para cada idioma entraremos en Encore.

Desde la ventana de Timeline donde visualizamos la pista de video y audio haremos click en el botón derecho del mouse donde apareceré el menú desplegable que nos permitirá añadir una pista de subtitulo.

Al crear la pista deberemos seleccionar el idioma del subtitulo que queremos añadir.

Ahora, con la pista ya creada volveremos a hacer click en el botón derecho del mouse para añadir los subtítulos a esa pista. Cómo nuestros subtítulos se encuentrar dentro de un archivo .TXT seleccionaremos "Text Script".

Con el archivo de texto seleccionado se nos abrirá una ventana donde especificar las propiedades de formato de los subtítulos. Podremos elegir color, tipo de letra, posición, etc..

Introducidos todos estos formatos, nuestra pista de subtítulos ya estará disponible. A partir de aquí podremos añadir tantas pistas de subtítulos como idiomas disponga nuestro DVD.

Related posts:

  1. Cómo mostrar subtitulos de forma automática con Adobe Encore
  2. Videos online de las sesiones del Adobe MAX 2009

]]> http://www.codigoactionscript.org/como-anadir-subtitulos-a-videos-en-dvd-con-adobe-encore-cs5/feed/ 0 Recursos para Flash Catalyst CS5 http://www.codigoactionscript.org/recursos-para-flash-catalyst-cs5/ http://www.codigoactionscript.org/recursos-para-flash-catalyst-cs5/#comments Thu, 13 May 2010 16:10:44 +0000 admin http://www.codigoactionscript.org/?p=625

Entender la diferencia: diseño visual vs diseño interactivo Welcome to Flash Catalyst (2:40) Las mejores prácticas para trabajar con Flash Catalyst Adobe Flash Catalyst best practices Diseñando en Flash Catalyst Getting started with Adobe Flash Catalyst CS5

Más información sobre diseño interactivo y [...] Related posts:

  1. AdobeTV: Conectar un diseño de Flash Catalyst a una Base de datos con Flash Builder
  2. Adobe lanza Adobe Labs Ideas para Flash Catalyst
  3. Betas de Flash Builder 4 y Flash Catalyst en Adobe Labs
]]>

Entender la diferencia: diseño visual vs diseño interactivo

Las mejores prácticas para trabajar con Flash Catalyst

Diseñando en Flash Catalyst

Más información sobre diseño interactivo y cómo se puede utilizar Flash Catalyst y Creative Suite 5 para construir sitios Web interactivos y interfaces de aplicaciones de usuario, desde el prototipo de traspaso para un desarrollador de Flex con Flash Builder:

Related posts:

  1. AdobeTV: Conectar un diseño de Flash Catalyst a una Base de datos con Flash Builder
  2. Adobe lanza Adobe Labs Ideas para Flash Catalyst
  3. Betas de Flash Builder 4 y Flash Catalyst en Adobe Labs

]]> http://www.codigoactionscript.org/recursos-para-flash-catalyst-cs5/feed/ 0 Videos online de las sesiones del Adobe MAX 2009 http://www.codigoactionscript.org/videos-online-de-las-sesiones-del-adobe-max-2009/ http://www.codigoactionscript.org/videos-online-de-las-sesiones-del-adobe-max-2009/#comments Wed, 07 Oct 2009 11:46:17 +0000 admin http://www.codigoactionscript.org/?p=542 Como ya se anunció, para los que no hemos podido asistir en directo a las conferencias del Adobe MAX se han colocado la grabación de las sesiones en la web de Adobe.TV.

Este es el listado completo, vale la pena ir dándole un vistazo:

MAX 2009 Keynote - Day 1

MAX 2009 Keynote - Day 1 MAX Keynote Day 1. To remain competitive and viable in a rapidly changing world, entire industries are faced with reinventing the way they do business. Runtime: 01:01:25 Average Rating: Added: Tuesday, October 6, 2009

What's Coming in Adobe [...] Related posts:
  1. Adobe MAX 2009
  2. URL para ver las conferencias de Adobe en Vivo 2009
  3. Adobe en Vivo 2009 en su versión onLine
]]> Como ya se anunció, para los que no hemos podido asistir en directo a las conferencias del Adobe MAX se han colocado la grabación de las sesiones en la web de Adobe.TV.

Este es el listado completo, vale la pena ir dándole un vistazo:

MAX 2009 Keynote - Day 1

MAX 2009 Keynote - Day 1 MAX Keynote Day 1. To remain competitive and viable in a rapidly changing world, entire industries are faced with reinventing the way they do business. Runtime: 01:01:25 Average Rating: Added: Tuesday, October 6, 2009

What's Coming in Adobe AIR 2

What's Coming in Adobe AIR 2 Adobe AIR allows developers to build rich Internet applications (RIAs) that run outside the browser on multiple operating systems. In this session, you will learn about the planned capabilities of the upcoming release of Adobe AIR 2. Runtime: 01:00:00 Average Rating: Added: Tuesday, October 6, 2009

Understanding the Building Blocks of Adobe’s Solution...

Understanding the Building Blocks of Adobe’s Solution Accelerator Program Learn how to accelerate enterprise application development while reducing costs and time to market by leveraging LiveCycle and Adobe Solution Accelerators. The session will include a review of all the available Solution Accelerators... Runtime: 01:00:00 Average Rating: Added: Tuesday, October 6, 2009

What's Next in LiveCycle ES?

What's Next in LiveCycle ES? Discover the latest application constructs that integrate the best-in-class technologies such as Flash Builder, Data Services, and LiveCycle ES solution components. Participants will learn how this software platform can be leveraged to enable the developm Runtime: 01:00:00 Average Rating: Added: Monday, October 5, 2009

PDF Files via the Web: Creating a Better Experience

PDF Files via the Web: Creating a Better Experience Learn how to get PDF files to behave on the web the way that you and your viewers want. We'll share best practices for making sure that PDF files are easy to read, navigate, and access, as well as how to make PDF files as streamlined as possible. Runtime: 01:00:00 Average Rating: Added: Tuesday, October 6, 2009

ColdFusion with Microsoft Office, SharePoint, and Exc...

ColdFusion with Microsoft Office, SharePoint, and Exchange Discover how ColdFusion 9 builds on existing support for Microsoft .NET and Exchange by featuring integration with Microsoft Office and SharePoint. In this session, you'll learn how to work with Excel spreadsheets and create PowerPoint presentations in CF Runtime: 01:00:00 Average Rating: Added: Tuesday, October 6, 2009

PDF: Inside and Out

PDF: Inside and Out Learn surprising details about the inside of a PDF file. Learn about Adobe turning PDF over to the International Standards Organization(ISO). Adobe expert Jim King will describe what Adobe's original intentions were with PDF. Runtime: 01:00:00 Average Rating: Added: Tuesday, October 6, 2009

Explore Deployment and Distribution Options for Adobe...

Explore Deployment and Distribution Options for Adobe AIR Applications Learn how to get your AIR applications to your users and how to keep them up to date. We will discuss important considerations for distribution on the Internet or an intranet, including impacts on your auto-update mechanism. Runtime: 01:00:00 Average Rating: Added: Monday, October 5, 2009

Effects in Flex 4

Effects in Flex 4 Explore the new and improved animation engine in Flex 4 that makes it possible to create richer and more dynamic applications. Come see how you can take advantage of the new effects and functionality, such as doing transformations in all three planes... Runtime: 01:00:00 Average Rating: Added: Tuesday, October 6, 2009

Exploring New Uses for Rich Internet Applications in...

Exploring New Uses for Rich Internet Applications in Education Join Kellen Maicher from Purdue University for a demonstration of the development of several Adobe AIR applications that integrate Flash, AIR, and Flex into existing curriculums. Maicher will describe the evolution of course material from primarily SWF co Runtime: 01:00:00 Average Rating: Added: Tuesday, October 6, 2009

Adobe Enterprise Cloud Computing: LiveCycle Express

Adobe Enterprise Cloud Computing: LiveCycle Express See an overview of the technology behind recently released Adobe LiveCycle ES Developer Express. LiveCycle Express is an enterprise Software-as-a-Service (SaaS) product that leverages Adobe LiveCycle ES and cloud-based computing services. Runtime: 01:00:00 Average Rating: Added: Tuesday, October 6, 2009

Building Applications for iPhone with Flash Professio...

Building Applications for iPhone with Flash Professional CS5 Learn how Adobe is working to bring Adobe technologies out of the desktop and onto a the iPhone. Learn how Flash Professional and the Flash platform will add capabilities to help developers iPhone enable, test, and publish their content. Runtime: 01:00:00 Average Rating: Added: Tuesday, October 6, 2009

Advanced Data Visualization with Flex

Advanced Data Visualization with Flex Join fellow developers and information architects interested in going beyond the standard Flex Charting to focus on creating innovative and compelling data visualizations used to solve a wide range of data visualization challenges. Runtime: 01:00:00 Average Rating: Added: Tuesday, October 6, 2009

Developing Social Flex Apps with the Flash Collaborat...

Developing Social Flex Apps with the Flash Collaboration Service - a Primer Learn everything you need to know to get up and running with the Adobe Flash Collaboration Service, a powerful way to add real-time social features to your Flex applications, such as live audio/video/data streaming... Runtime: 01:00:00 Average Rating: Added: Tuesday, October 6, 2009

GPU Acceleration in the next Flash Player

GPU Acceleration in the next Flash Player Learn what's possible with GPU acceleration in the next version of Flash Player. NVIDIA and Adobe collaborated to develop GPU acceleration that enables Flash Player to run fluidly on battery-powered mobile devices that are changing the face of computing. Runtime: 01:00:00 Average Rating: Added: Tuesday, October 6, 2009

Building Accessible Flex and Adobe AIR Applications

Building Accessible Flex and Adobe AIR Applications Learn how to comply with accessibility standards and provide access for people with disabilities within your Flex and AIR applications. This session will provide an overview of how Flash Player communicates accessibility name, role, and state information Runtime: 01:00:00 Average Rating: Added: Tuesday, October 6, 2009

What's New In Flash Player

What's New In Flash Player A new and improved version of Flash Player is on its way! Discover how you can deliver optimized user experiences that leverage the same code, tools, and skills that reach millions of new users across multiple devices with the next version of Flash Player Runtime: 01:00:00 Average Rating: Added: Tuesday, October 6, 2009

Leveraging Exposed Services in ColdFusion Centaur

Leveraging Exposed Services in ColdFusion Centaur Discover the incredible array of integrated services in ColdFusion that were previously available only to your ColdFusion code. ColdFusion Centaur now exposes these services via SOAP and AMF. In this session, you will learn how to deploy CF Centaur... Runtime: 01:00:00 Average Rating: Added: Tuesday, October 6, 2009

Moving from Flex 3 to Flex 4

Moving from Flex 3 to Flex 4 Learn about the new features in Flex 4 from the perspective of someone who has been doing Flex 3 development. We'll discuss changes in MXML, states, effects, and CSS, as well as the new component model. Runtime: 01:00:00 Average Rating: Added: Tuesday, October 6, 2009

Encoding Best Practices for H.264 Video Using Flash

Encoding Best Practices for H.264 Video Using Flash This expert-driven deep dive will demonstrate how to get the best quality from your H.264 encoding and publishing to the web on the Adobe Flash Platform. Topics will include encoding parameters, analysis, resolutions, dynamic streaming, filtering Runtime: 01:00:00 Average Rating: Added: Monday, October 5, 2009

Wow Your Audience with Multimedia PDF Documents

Wow Your Audience with Multimedia PDF Documents Join U.K.-based Harry Hemus for a demonstration of some incredible PDF documents, all of which started life as static, noninteractive collateral. He'll show how to use various Creative Suite tools to create compelling content Runtime: 01:00:00 Average Rating: Added: Tuesday, October 6, 2009

Building Flex Collaboration Components

Building Flex Collaboration Components Learn how to use the Adobe Flash Collaboration Service to quickly add out-of-the-box collaboration components to your Flex applications. More importantly, discover a framework for creating custom components that include collaboration. Runtime: 01:00:00 Average Rating: Added: Tuesday, October 6, 2009

The Advantages of Flex

The Advantages of Flex Learn why Flex is great for RIA development and how it compares with other RIA technologies. This introductory level session will provide a high-level overview of the tools, languages, and framework provided by Flex. Runtime: 01:00:00 Average Rating: Added: Tuesday, October 6, 2009

Developing for Information Assurance with LiveCycle E...

Developing for Information Assurance with LiveCycle ES Find out how to think proactively about security in order to manage risk and compliance when approaching design or development projects. Participants will learn best practices for leveraging LiveCycle ES to provide information-centric controls Runtime: 01:00:00 Average Rating: Added: Tuesday, October 6, 2009

Adobe Services, SOA, and Cloud Roadmap

Adobe Services, SOA, and Cloud Roadmap Join us for unique insight into Adobe's roadmap for SOA and cloud computing. Adobe technology entrepreneur Bill Shapiro will illustrate work that has been done for cloud-based products such as LiveCycle ES Developer Express Runtime: 01:00:00 Average Rating: Added: Tuesday, October 6, 2009

Customizing the University Experience with a Rich Med...

Customizing the University Experience with a Rich Media Delivery System Explore the potential of developing a customized, security-focused, RSS-driven delivery solution. This session shows how you can use Adobe Flash Media Rights Management Server, Flash Media Server 3, and Adobe Media Player Runtime: 01:00:00 Average Rating: Added: Tuesday, October 6, 2009

ActionScript 3.0 Tastes Good (and Is Good for You, To...

ActionScript 3.0 Tastes Good (and Is Good for You, Too!) Learn how to harness ActionScript 3.0 to build meaningful and practical applications, including effective approaches to typical programming tasks. The building blocks we'll share are designed to take full advantage of ActionScript 3.0 as well as lay the f Runtime: 01:00:00 Average Rating: Added: Tuesday, October 6, 2009

Flex and SAP: Transforming Enterprises with RIA

Flex and SAP: Transforming Enterprises with RIA SAP evangelist Robert Horne will demonstrate how to create rich, Flex and AIR based data visualization dashboards using SAP BusinessObjects tools. Get an inside look at BusinessObjects Explorer, a powerful new way of gathering enterprise information. Runtime: 01:00:00 Average Rating: Added: Tuesday, October 6, 2009

Introduction to ColdFusion ORM

Introduction to ColdFusion ORM Discover one of the most significant additions to ColdFusion development, the object-relational mapping (ORM) framework built into ColdFusion 9. Powered by the Hibernate framework, ColdFusion 9 reintroduces the rapid in rapid application deployment. Runtime: 01:00:00 Average Rating: Added: Tuesday, October 6, 2009

Student Work and Curricular Design at RIT

Student Work and Curricular Design at RIT Explore the use of Adobe products as a platform for academic support. See how students discover the design process through team-based development and assessment in the Interactive Games and Media Department at Rochester Institute of Technology (RIT). Runtime: 01:00:00 Average Rating: Added: Monday, October 5, 2009

What's New in Flex 4

What's New in Flex 4 Come hear why folks are excited about the upcoming release of Flex 4. This session will explore the new component architecture and how skinning, effects, and layouts have been enhanced as a result. Also see how you can leverage new Flash Player 10 capabil Runtime: 01:00:00 Average Rating: Added: Tuesday, October 6, 2009

Preview: Flex for Mobile Devices

Preview: Flex for Mobile Devices Hear directly from the team involved in enabling Flex on mobile devices regarding the challenges faced and progress made in optimization, components, and tooling. Runtime: 01:00:00 Average Rating: Added: Tuesday, October 6, 2009

P2P on the Flash Platform with RTMFP

P2P on the Flash Platform with RTMFP Hear an introduction to peer-to-peer (P2P) communication and the Real Time Media Flow Protocol (RTMFP), used to create real-time social media applications that leverage the Adobe Flash Platform. Learn how the technology works from the engineers. Runtime: 01:00:00 Average Rating: Added: Tuesday, October 6, 2009

Managing ColdFusion Multi-Instance Environments

Managing ColdFusion Multi-Instance Environments Learn how to create a production environment that can support multiple ColdFusion projects concurrently, without sacrificing security, scalability, or performance. Runtime: 01:00:00 Average Rating: Added: Tuesday, October 6, 2009

Designing and Developing for the Multiscreen Web

Designing and Developing for the Multiscreen Web Enhance your content by making the most of its environment. As Flash Player supports new platforms and devices, your content is running on a diverse set of devices. Learn how to create applications that consider all factors. Runtime: 01:00:00 Average Rating: Added: Tuesday, October 6, 2009

The Future of Digital Publishing: Delivering News thr...

The Future of Digital Publishing: Delivering News through Adobe AIR Learn from Jeremy Clark of Adobe's Experience Design team how his group has leveraged Adobe AIR, Flex, and the Text Layout Framework (now in beta on Adobe Labs) to help the New York Times and others reach new and existing customers. Runtime: 01:00:00 Average Rating: Added: Tuesday, October 6, 2009

Advanced ColdFusion Caching Strategies

Advanced ColdFusion Caching Strategies Learn about the many built-in caching mechanisms available in ColdFusion for improving application performance, including exciting new features in the ColdFusion 9 release. Runtime: 01:00:00 Average Rating: Added: Tuesday, October 6, 2009

Related posts:

  1. Adobe MAX 2009
  2. URL para ver las conferencias de Adobe en Vivo 2009
  3. Adobe en Vivo 2009 en su versión onLine

]]> http://www.codigoactionscript.org/videos-online-de-las-sesiones-del-adobe-max-2009/feed/ 1 Curso de Adobe AIR, online y gratuito, en Video2brain http://www.codigoactionscript.org/curso-de-adobe-air-online-y-gratuito-en-video2brain/ http://www.codigoactionscript.org/curso-de-adobe-air-online-y-gratuito-en-video2brain/#comments Tue, 28 Jul 2009 14:35:00 +0000 admin http://www.codigoactionscript.org/?p=517 Para quienes no lo conozcan aun, Video2brain es Centro de formación autorizado de Adobe que ofrece cursos online en vídeo de calidad de numerosas aplicaciones de Adobe.

Actualmente tienen disponible un curso de Adobe AIR totalmente gratuito a cargo de Jorge Glez. Villanueva, responsable de, entre otros, los cursos Adobe Flash CS3 y Adobe Dreamweaver CS3. Este vídeo-training es una introducción en el uso de AIR, para aprender a programar aplicaciones de escritorio usando los programas de Adobe, Flex y Flash. Índice del curso:

Descripción del runtime AIR. Instalación de la aplicación Creación de [...] Related posts:
  1. Tutoriales de Adobe Flex y Apollo para principiantes
  2. Adobe en Vivo 2009 en su versión onLine
  3. Aplicaciones iOS 4 veces más rápidas con Adobe AIR 2.7
]]> Para quienes no lo conozcan aun, Video2brain es Centro de formación autorizado de Adobe que ofrece cursos online en vídeo de calidad de numerosas aplicaciones de Adobe.

Actualmente tienen disponible un curso de Adobe AIR totalmente gratuito a cargo de Jorge Glez. Villanueva, responsable de, entre otros, los cursos Adobe Flash CS3 y Adobe Dreamweaver CS3. Este vídeo-training es una introducción en el uso de AIR, para aprender a programar aplicaciones
de escritorio usando los programas de Adobe, Flex y Flash.


Índice del curso:

  • Descripción del runtime AIR. Instalación de la aplicación
  • Creación de un ejemplo de xml cargado a través de PHP en un DataGrid que corra como aplicación de escritorio
  • Creación de un ejemplo simple de drag and drop sobre el escritorio
  • Creación de una aplicación AIR basada en ActionScript 3. Control de la ventana de la aplicación
  • Uso de la API de control de ficheros de ActionScript/AIR: crear, copiar, borrar y seleccionar archivos
  • Uso del drag and drop de AIR. Aplicación que permite arrastrar imágenes al escritorio
  • Creación de aplicaciones AIR: personalización del icono de las aplicaciones. Uso de certificados

Enlace del curso:

Related posts:

  1. Tutoriales de Adobe Flex y Apollo para principiantes
  2. Adobe en Vivo 2009 en su versión onLine
  3. Aplicaciones iOS 4 veces más rápidas con Adobe AIR 2.7

]]> http://www.codigoactionscript.org/curso-de-adobe-air-online-y-gratuito-en-video2brain/feed/ 0 Programación orientada a objetos: Herencia de clases. http://www.codigoactionscript.org/programacion-orientada-a-objetos-herencia-de-clases/ http://www.codigoactionscript.org/programacion-orientada-a-objetos-herencia-de-clases/#comments Mon, 02 Feb 2009 00:49:59 +0000 admin http://www.codigoactionscript.org/?p=325 La herencia de clases es uno de los conceptos básicos de la programación orientada a objetos. Decir que una clase hereda de otra quiere decir que esa clase obtiene los mismos métodos y propiedades de la otra clase. Permitiendo de esta forma añadir a las características heredadas las suyas propias.

Supongamos que tenemos una clase "Persona" con los métodos y propiedades básicas de una objeto persona como podrian ser "caminar" o "hablar", podríamos tener otras clases como "Guillermo" o "Elder" que comparten todas las características de una "Persona" pero que añaden [...] Related posts:

  1. Comunicación entre clases Actionscript 3 con EventDispatcher
  2. POO: Dependencia de clases y Polimorfismo
  3. Cómo duplicar MovieClips con gráficos en ActionScript 3
]]> La herencia de clases es uno de los conceptos básicos de la programación orientada a objetos. Decir que una clase hereda de otra quiere decir que esa clase obtiene los mismos métodos y propiedades de la otra clase. Permitiendo de esta forma añadir a las características heredadas las suyas propias.

Supongamos que tenemos una clase "Persona" con los métodos y propiedades básicas de una objeto persona como podrian ser "caminar" o "hablar", podríamos tener otras clases como "Guillermo" o "Elder" que comparten todas las características de una "Persona" pero que añaden características propias. Por lo que "Guillermo" y "Elder" pueden realizar las

mismas funciones que puede realizar una "Persona" y además cada una puede realizar las suyas propias, por ejemplo, "Guillermo" sabe nadar pero "Elder" no, y "Elder" sabe bailar reggeton pero "Guillermo" no.

En terminos de programación estaríamos diciendo que "Guillermo" y "Elder" son dos clases especializadas que heredan o extienden de la superclase "Persona".

Tipos de herencia de clases

Existen dos tipos de herencia:

  • Herencia por especialización
  • Herencia por generalización

En realidad la herencia es la misma, esta es una diferenciación puramente conceptual sobre la forma en que se a llegado a ella.

Una herencia por especialización es la que se realiza cuando necesitamos crear una clase nueva que disponga de las mismas características que otra pero que le añada funcionalidades. Por ejemplo si tenemos una clase que genera un botón simple, y necesitamos crear un botón que sea igual que el anterior pero que además añada un efecto al ser clicado.

La herencia por generalización es la que realizamos cuando tenemos muchas clases que comparten unas mismas funcionalidades y por homogeneizar las partes comunes se decide crear una clase que implemente toda esa parte común y se dejan solo las partes especificas en cada clase. Por ejemplo si tenemos clases para dibujar formas geométricas todas ellas

disponen de las mismas propiedades (un color de fondo, color de linea, etc..), todas estas características pueden estar en una clase general de la que hereden todas las clases concretas, evitando tener que escribir todo ese código común en todas ellas.

Herencia de clases en Actionscript

En Actionscript definimos que una clase hereda de otra con la sentencia "extends".

PLAIN TEXT
Actionscript:
  1. public class Guillermo extends Persona

Public, private o protected

Una consideración a tener en cuenta de la herencia es que una clase no hereda la propiedades o métodos privados, con lo que no tendrán acceso a ellas. Si necesitamos heredar propiedades o métodos que no queremos que sean accesibles desde fuera de las clases las definiremos como protected.

Sobreescritura de métodos

Una característica muy importante que permite la herencia es que podemos hacer que una clase implemente de manera diferente un método heredado. Haciendo que dos clases que heredan de la misma clase y heredan los mismos métodos se comporten de maneras diferentes.

Por ejemplo, unas clases de dibujo de figuras geométricas pueden heredar de una clase general la función "dibujar". Todas las clases dispondrán de esa función, pero cada clase la implementará de diferente manera y por lo tanto dibujará una figura diferente.

Para sobrescribir un método de la superclase utilizaremos la sentencia override en la definición del método.

PLAIN TEXT
Actionscript:
  1. //función de la superclase
  2. public function traza():void
  3. {
  4.     trace("superclase");
  5. }

PLAIN TEXT
Actionscript:
  1. //función de la subclase
  2. override public function traza():void
  3. {
  4.     trace("subclase");
  5. }

De esta manera al ejecutar la función "traza()" desde una subclase obtendremos el texto "subclase" sobrescribiendo las acciones del método de la subclase (no obtendríamos el texto "superclase").

En el caso de no querer sobrescribir por completo toda la implementación del método de la superclase, si no que lo que queremos es ampliarlo, podemos acceder a la implementación de la superclase con el operador "super".

PLAIN TEXT
Actionscript:
  1. //función de la subclase
  2. override public function traza():void
  3. {
  4.     super.traza();
  5.     trace("subclase");
  6. }

En este caso, se ejecutaría la implementación del método en la superclase (obtendriamos el texto "superclase") y luego el de la subclase (obtendríamos también el texto "subclase").

Esto también lo podemos realizar en el constructor de la clase. Es bastante probable que una clase esté definiendo valores dentro de su constructor, de manera que al ser extendida nos interese que esas definiciones se continúen realizando. En este caso deberemos realizar una llamada al constructor de la superclase a través del operador "super".

PLAIN TEXT
Actionscript:
  1. package
  2. {
  3.     public class A
  4.     {
  5.         protected var variable:uint;
  6.        
  7.         public function A(n:uint)
  8.         {
  9.             variable = n;
  10.         }
  11.     }
  12. }

PLAIN TEXT
Actionscript:
  1. package
  2. {
  3.     import A;
  4.  
  5.     public class B extends A
  6.     {
  7.         public function B(n:uint)
  8.         {
  9.             super(n); //ejecuta el contructor de la clase A, enviandole el parámetro
  10.         }
  11.     }
  12. }

En el caso de que queramos asegurarnos de que una propiedad o método no pueda ser sobrescrita por otra clase la definiremos como final.

PLAIN TEXT
Actionscript:
  1. //función de la subclase que no permitirá ser sobreescrita
  2. public final function traza():void
  3. {
  4.     trace("subclase");
  5. }

Ejemplo del uso de herencia de clases:

Veamos un sencillo ejemplo práctico: Crearemos un par de clases muy simples para dibujar un cuadrado o un círculo.

Lógicamente el primer paso es pensar que características compartirán tanto los cuadrados y los círculos.

  • Ambos son elementos gráficos que tienen propiedades que definen su tamaño (size), si disponen de relleno o solo de línea (fill), el color de relleno (bgColor), el grosor de linea (borderSize) y el color de la linea (borderColor).
  • Tambien ambás dispondrán de una función que permitirá actualizar el gráfico en caso de modificar sus propiedades.
  • Por último amb´s dispondran de la método que dibujará el gráfico. Lógicamente esta será la función que cada clase implementará de forma diferente.

Así que lo que haremos es crear una superclase "Grafico" que disponga de todas las propiedades mencionadas anteriormente, y dejaremos la implementación del método "dibuja()" a las subclases "Cuadrado" y "Circulo".

Empecemos escribiendo la interface de métodos públicos que deberán disponer todos los objetos que extiendan de "Grafico". En este caso serán todos los setters y getters para las propiedades, y el método para actualizar el gráfico.

PLAIN TEXT
Actionscript:
  1. package org.cristalab.graphics
  2. {
  3.     public interface IGrafico
  4.     {
  5.         function get size():uint
  6.         function set size(n:uint):void
  7.         function get fill():Boolean
  8.         function set fill(n:Boolean):void
  9.         function get bgColor():uint
  10.         function set bgColor(n:uint):void
  11.         function get borderSize():uint
  12.         function set borderSize(n:uint):void
  13.         function get borderColor():uint
  14.         function set borderColor(n:uint):void
  15.         function update():void
  16.     }
  17. }

Escribiremos la superclase "Grafico" que implementará la interface "IGrafico" y definirá todos los setters y getters de las propiedades.

Las propiedades las definiremos como "portected" para que sean privadas pero heredables.

El constructor de la clase recibirá todos los parámetros necesarios para definir las propiedades (les asignaremos valores por defecto por si se crea una instancia sin pasarle parámetros). Y realizará una llamada a la función "dibuja()" que es la que creará el gráfico.

PLAIN TEXT
Actionscript:
  1. package org.cristalab.graphics
  2. {
  3.     import flash.display.Shape;
  4.     import flash.display.Sprite;
  5.     import org.cristalab.graphics.IGrafico;
  6.     //------------------------------------------------------------------------
  7.     public class Grafico extends Sprite implements IGrafico
  8.     {
  9.         protected var _size:uint;
  10.         protected var _fill:Boolean;
  11.         protected var _bgColor:uint;
  12.         protected var _borderSize:uint;
  13.         protected var _borderColor:uint;
  14.         //------------------------------------------------------------------------
  15.         public function Grafico(size:uint = 10, fill:Boolean = true, bgColor:uint = 0x000000, borderSize:uint = 0, borderColor:uint = 0x000000)
  16.         {
  17.             _size = size;
  18.             _fill = fill;
  19.             _bgColor = bgColor;
  20.             _borderSize = borderSize;
  21.             _borderColor = borderColor;
  22.             dibuja();
  23.         }
  24.         //------------------------------------------------------------------------
  25.         public function get size():uint
  26.         {
  27.             return _size;
  28.         }
  29.         public function set size(n:uint):void
  30.         {
  31.             _size = n;
  32.         }
  33.         //------------------------------------------------------------------------
  34.         public function get fill():Boolean
  35.         {
  36.             return _fill;
  37.         }
  38.         public function set fill(n:Boolean):void
  39.         {
  40.             _fill = n;
  41.         }
  42.         //------------------------------------------------------------------------
  43.         public function get bgColor():uint
  44.         {
  45.             return _size;
  46.         }
  47.         public function set bgColor(n:uint):void
  48.         {
  49.             _bgColor = n;
  50.         }
  51.         //------------------------------------------------------------------------
  52.         public function get borderSize():uint
  53.         {
  54.             return _borderSize;
  55.         }
  56.         public function set borderSize(n:uint):void
  57.         {
  58.             _borderSize = n;
  59.         }
  60.         //------------------------------------------------------------------------
  61.         public function get borderColor():uint
  62.         {
  63.             return _borderColor;
  64.         }
  65.         public function set borderColor(n:uint):void
  66.         {
  67.             _borderColor = n;
  68.         }
  69.         //------------------------------------------------------------------------
  70.         public function update():void
  71.         {
  72.             this.graphics.clear();
  73.             dibuja();
  74.         }
  75.         //------------------------------------------------------------------------
  76.         protected function dibuja():void
  77.         {
  78.             Throw.newError("clase abstracta");
  79.         }
  80.         //------------------------------------------------------------------------
  81.     }
  82. }

Como hemos dicho, la clase "Grafico" no implementa el método "dibuja()" ya que eso depende de cada subclase, con lo que si intentamos crear una instancia de "Grafico" nos lanzará un error. Lo único que hacemos es definir que todas las subclases hereden el método y cada una lo implenete a su manera.

Escribamos ahora la clase "Cuadrado".

Esta clase extendrá de la clase "Grafico" e implementará la interface "IGrafico". Por lo tanto heredará todas las propiedades y métodos de la superclase marcados como public o protected, con lo que no necesitaremos definir las protiedades ni los setter y getters, pero dispondrá de ellos.

El constructor de esta clase recibirá como parámetros los valores del objeto a crear, y deberemos pasarselos al constructor de la superclase para que asigne los valores y ejecute la función de dibujar. Como hemos mencionado esto lo haremos utilizando la sentencia super();

Ahora solo nos quedará sobreescribir el método "dibuja()" para que se dibuje lo que nos interese en función de la clase actual, en este caso queremo sdibujar un cuadrado. Utilizaremos un override para sobrescribir el método.

PLAIN TEXT
Actionscript:
  1. package org.cristalab.graphics
  2. {
  3.     import org.cristalab.graphics.IGrafico;
  4.     import org.cristalab.graphics.Grafico;
  5.     import flash.display.Shape;
  6.     import flash.display.Sprite;
  7.     //------------------------------------------------------------------------
  8.     public class Cuadrado extends Grafico implements IGrafico
  9.     {
  10.         //------------------------------------------------------------------------
  11.         public function Cuadrado(size:uint = 10, fill:Boolean = true, bgColor:uint = 0x000000, borderSize:uint = 0, borderColor:uint = 0x000000)
  12.         {
  13.             super(size, fill, bgColor, borderSize, borderColor);
  14.         }
  15.         //------------------------------------------------------------------------
  16.         override protected function dibuja():void
  17.         {
  18.             if (_fill == true)
  19.             {
  20.                 this.graphics.beginFill(_bgColor);
  21.             }
  22.             if (_borderSize != 0)
  23.             {
  24.                 this.graphics.lineStyle(_borderSize, _borderColor);
  25.             }
  26.             this.graphics.drawRect(0, 0, _size, _size);
  27.             if (_fill == true)
  28.             {
  29.                 this.graphics.endFill();
  30.             }
  31.         }
  32.         //------------------------------------------------------------------------
  33.     }
  34. }

Haremos lo mismo para la clase "Circulo". Únicamente deberemos implementar de diferente manera el método "dibuja".

PLAIN TEXT
Actionscript:
  1. package org.cristalab.graphics
  2. {
  3.     import org.cristalab.graphics.IGrafico;
  4.     import org.cristalab.graphics.Grafico;
  5.     import flash.display.Shape;
  6.     import flash.display.Sprite;
  7.     //------------------------------------------------------------------------
  8.     public class Circulo extends Grafico implements IGrafico
  9.     {
  10.         //------------------------------------------
  11.         public function Circulo(size:uint = 10, fill:Boolean = true, bgColor:uint = 0x000000, borderSize:uint = 0, bordeColor:uint = 0x000000)
  12.         {
  13.             super(size, fill, bgColor, borderSize, borderColor);
  14.         }
  15.         //------------------------------------------------------------------------
  16.         override protected function dibuja():void
  17.         {
  18.             if (_fill == true)
  19.             {
  20.                 this.graphics.beginFill(_bgColor);
  21.             }
  22.             if (_borderSize != 0)
  23.             {
  24.                 this.graphics.lineStyle(_borderSize, _borderColor);
  25.             }
  26.             var radio:uint = Math.round(_size / 2);
  27.             this.graphics.drawCircle(radio, radio, radio);
  28.             if (_fill == true)
  29.             {
  30.                 this.graphics.endFill();
  31.             }
  32.         }
  33.         //------------------------------------------------------------------------
  34.     }
  35. }

A partir de aquí iremos creando tantas clases como gráficos diferentes nos interese dibujar, incluso podemos extender estas subclases en otras subclases, por ejemplo para crear objetos más complejos pero que su base sea un cuadrado o un circulo.

Related posts:

  1. Comunicación entre clases Actionscript 3 con EventDispatcher
  2. POO: Dependencia de clases y Polimorfismo
  3. Cómo duplicar MovieClips con gráficos en ActionScript 3

]]> http://www.codigoactionscript.org/programacion-orientada-a-objetos-herencia-de-clases/feed/ 0 AdobeTV: Videotutorial de creacion de componentes en Flex http://www.codigoactionscript.org/adovetv-videotutorial-de-creacion-de-componentes-en-flex/ http://www.codigoactionscript.org/adovetv-videotutorial-de-creacion-de-componentes-en-flex/#comments Fri, 16 Jan 2009 03:24:00 +0000 admin http://www.codigoactionscript.org/?p=302 Videotutorial "Creating New Components in Flex 3" por Deepa Subramaniam

Related posts: Personalizar la tipografía en componentes Flex Personalizar componentes de Flex con estilos programáticos Modificar datos en componentes Flex con ItemEditors

Related posts:
  1. Personalizar la tipografía en componentes Flex
  2. Personalizar componentes de Flex con estilos programáticos
  3. Modificar datos en componentes Flex con ItemEditors
]]> Videotutorial "Creating New Components in Flex 3" por Deepa Subramaniam

Related posts:

  1. Personalizar la tipografía en componentes Flex
  2. Personalizar componentes de Flex con estilos programáticos
  3. Modificar datos en componentes Flex con ItemEditors

]]> http://www.codigoactionscript.org/adovetv-videotutorial-de-creacion-de-componentes-en-flex/feed/ 0 Modificar datos en componentes Flex con ItemEditors http://www.codigoactionscript.org/modificar-datos-en-componentes-flex-con-itemeditors/ http://www.codigoactionscript.org/modificar-datos-en-componentes-flex-con-itemeditors/#comments Thu, 31 Jul 2008 01:10:30 +0000 admin http://www.codigoactionscript.org/?p=131 En este =http://www.cristalab.com/tipstip[/url], siguiendo un poco el ejemplo visto en el tip anterior, mostraré el uso de itemRenderes e itemEditors para mostrar y editar datos dentro de componentes basados en listas, como el componente List, el DataGrid o el TileList...

Como se vió en el tip anterior los itemRenderer (y los itemEditors) nos permiten incrustar otros componentes Flex dentro de los listados de los componentes basados en listas, para poder mostrar la información de manera más compleja. Pudiendo de esta manara mostrar imágenes dentro de un DataGrid o fichas de productos [...] Related posts:

  1. Cómo mostrar tooltips dentro de componentes List de Flex
  2. Cómo personalizar los iconos en componentes Tree de Flex
  3. Personalizar la tipografía en componentes Flex
]]> En este =http://www.cristalab.com/tipstip[/url], siguiendo un poco el ejemplo visto en el tip anterior, mostraré el uso de itemRenderes e itemEditors para mostrar y editar datos dentro de componentes basados en listas, como el componente List, el DataGrid o el TileList...

Como se vió en el tip anterior los itemRenderer (y los itemEditors) nos permiten incrustar otros componentes Flex dentro de los listados de los componentes basados en listas, para poder mostrar la información de manera más compleja. Pudiendo de esta manara mostrar imágenes dentro de un DataGrid o fichas de productos dentro de un TileList.

Hay muchos casos en que esta información mostrada en los componentes nos interesa que sea modificable. Por ejemplo, siguiendo el ejemplo anterior, imaginemos que tenemos un DataGrid que nos muestra un listado de usuarios y su nivel de ClabLevel. El código básico para visualizar este componente sería el siguiente:

PLAIN TEXT
CODE:
  1. <mx:DataGrid
  2.     horizontalCenter="0" verticalCenter="0"
  3.     width="200" height="200"
  4.     dataProvider="{listado}">
  5.            
  6.     <mx:columns>
  7.         <mx:DataGridColumn headerText="Claber" dataField="label"/>
  8.         <mx:DataGridColumn headerText="Clablevel" dataField="level">               
  9.         </mx:DataGridColumn>       
  10.     </mx:columns>      
  11. </mx:DataGrid>

Este sería el resultado:

Para nuestro ejemplo lo que nos interesa es que estos valores de ClabLevel sean modificables. Para poder realzar esta función únicamente deberemos añadirle a las propiedades del DataGrid la opción de "editable".

PLAIN TEXT
CODE:
  1. <mx:DataGrid
  2.     horizontalCenter="0" verticalCenter="0"
  3.     width="200" height="200"
  4.     dataProvider="{listado}"
  5.     editable="true">

Con solo realizar esta acción tendremos la opción de dar doble-clic sobre los campos del DataGrid para modificar los valores.

Hay que tener en cuenta de que todas las columnas del DataGrid ahora son modificables. En el caso de que no queramos que alguna lo sea, por ejemplo la columna que muestra los nombres, deberemos añadir esa propiedad "editable" a la columna pero con valor false.

PLAIN TEXT
CODE:
  1. <mx:DataGridColumn headerText="Claber" dataField="label" editable="false"/>

Ahora bien, supongamos que nos interesa tener una opción contreta a la hora de modificar estos valores. Por ejemplo con un componente NumericStepper, para ir modificando estos valores uno a uno. De manera de que al hacer doble-clic para modificar ese valor numérico apareciese el componente que nos permitiera tener esa función:

Para hacer esto delegaremos la función de editaje a un componente NumericStepper a través de un itemEditor.

PLAIN TEXT
CODE:
  1. <mx:columns>
  2.     <mx:DataGridColumn headerText="Claber" dataField="label" editable="false"/>
  3.     <mx:DataGridColumn headerText="Clablevel" dataField="level" editorDataField="value">           
  4.         <mx:itemEditor>
  5.             <mx:Component>
  6.                 <mx:NumericStepper minimum="0" maximum="99999" stepSize="1"/>
  7.             </mx:Component>
  8.         </mx:itemEditor>               
  9.     </mx:DataGridColumn>       
  10. </mx:columns>

Este es el resultado:

Visto esto, también hay que decir que con un ItemRenderer también podemos hacer que estos datos sean modificables. En este caso haremos que toda la columna de datos se visualicen con el componente NumericStepper indicando que este sea el itemRenderer para esa columna.

PLAIN TEXT
CODE:
  1. <mx:DataGridColumn headerText="Clablevel" dataField="level" rendererIsEditor="true" editorDataField="value">           
  2.     <mx:itemRenderer>
  3.         <mx:Component>
  4.             <mx:NumericStepper minimum="0" maximum="99999" stepSize="1"/>
  5.         </mx:Component>
  6.     </mx:itemRenderer>       
  7. </mx:DataGridColumn>

Fijémonos que hemos añadido el parámetro rendererIsEditor para indicar que el componente añadido como itemRenderer funciona como editor, de manera que al modificar un valor con el componente NumericStepper en cualquiera de los registros este nuevo valor queda registrado.

Este es el código completo con el ItemEditor:

PLAIN TEXT
CODE:
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
  3.     layout="absolute">
  4.    
  5.     <mx:Script>
  6.         <![CDATA[
  7.         ]]>
  8.     </mx:Script>
  9.    
  10.     <mx:ArrayCollection id="listado">
  11.         <mx:Object label="Freddie" level="43458"/>
  12.         <mx:Object label="Elecash" level="7289"/>
  13.         <mx:Object label="_Conejo" level="7203"/>
  14.         <mx:Object label="XKlibur" level="4713"/>
  15.         <mx:Object label="Zguillez" level="4120"/>
  16.         <mx:Object label="Eldervaz" level="3123"/>
  17.         <mx:Object label="Mariux" level="2921"/>
  18.         <mx:Object label="Zah" level="2906"/>
  19.         <mx:Object label="Bleend" level="2016"/>
  20.         <mx:Object label="Carmen Vivas" level="610"/>
  21.     </mx:ArrayCollection>
  22.            
  23.     <mx:DataGrid
  24.         horizontalCenter="0" verticalCenter="0"
  25.         width="200" height="200"
  26.         editable="true"
  27.         dataProvider="{listado}">
  28.                
  29.         <mx:columns>
  30.             <mx:DataGridColumn headerText="Claber" dataField="label" editable="false"/>
  31.             <mx:DataGridColumn headerText="Clablevel" dataField="level" editorDataField="value">           
  32.                 <mx:itemEditor>
  33.                     <mx:Component>
  34.                         <mx:NumericStepper minimum="0" maximum="99999" stepSize="1"/>
  35.                     </mx:Component>
  36.                 </mx:itemEditor>               
  37.             </mx:DataGridColumn>       
  38.         </mx:columns>      
  39.     </mx:DataGrid>
  40.  
  41. </mx:Application>

Related posts:

  1. Cómo mostrar tooltips dentro de componentes List de Flex
  2. Cómo personalizar los iconos en componentes Tree de Flex
  3. Personalizar la tipografía en componentes Flex

]]> http://www.codigoactionscript.org/modificar-datos-en-componentes-flex-con-itemeditors/feed/ 3 Cómo personalizar los iconos en componentes Tree de Flex http://www.codigoactionscript.org/como-personalizar-los-iconos-en-componentes-tree-de-flex/ http://www.codigoactionscript.org/como-personalizar-los-iconos-en-componentes-tree-de-flex/#comments Thu, 31 Jul 2008 00:45:02 +0000 admin http://www.codigoactionscript.org/?p=126 En este =http://www.cristalab.com/tipstip[/url] mostraré como podemos personalizar los iconos de las carpetas y de los objetos que se visualizan en un componente Tree en Flex.

Para empezar veremos que automáticamente Flex coloca unos iconos por defecto al visualizar un componente Tree. Un icono de carpete abierta o cerrada segun sea el caso, y una hoja de papel en blanco para los objetos:

Ahora veremos cómo podemos utilizar nuestros propios iconos.

Para este ejemplo he utilizado el siguiente dataProvider de base, que consta de un XMLList que coloca a los diferentes Claber en nodos [...] Related posts:

  1. Modificar datos en componentes Flex con ItemEditors
  2. Cómo mostrar tooltips dentro de componentes List de Flex
  3. Personalizar la tipografía en componentes Flex
]]> En este =http://www.cristalab.com/tipstip[/url] mostraré como podemos personalizar los iconos de las carpetas y de los objetos que se visualizan en un componente Tree en Flex.

Para empezar veremos que automáticamente Flex coloca unos iconos por defecto al visualizar un componente Tree. Un icono de carpete abierta o cerrada segun sea el caso, y una hoja de papel en blanco para los objetos:

Ahora veremos cómo podemos utilizar nuestros propios iconos.

Para este ejemplo he utilizado el siguiente dataProvider de base, que consta de un XMLList que coloca a los diferentes Claber en nodos según su grupo.

PLAIN TEXT
CODE:
  1. <mx:XMLList id="listado">
  2.     <group name="admin">
  3.         <claber name="Freddie" level="43458"/>
  4.     </group>
  5.     <group name="Bofh">
  6.         <claber name="_Conejo" level="7203"/>
  7.         <claber name="Zguillez" level="4120"/>
  8.         <claber name="Mariux" level="2921"/>
  9.     </group>
  10.     <group name="swat">
  11.         <claber name="Eldervaz" level="3123"/>
  12.         <claber name="Zah" level="2906"/>
  13.     </group>
  14.     <group name="pda">
  15.         <claber name="XKlibur" level="4713"/>
  16.     </group>
  17.     <group name="claber">
  18.         <claber name="Elecash" level="7289"/>
  19.         <claber name="Bleend" level="2016"/>
  20.         <claber name="Carmen Vivas" level="610"/>
  21.     </group>
  22. </mx:XMLList>

Este XMLList añadido a un componente Tree daría el resultado estándar.

PLAIN TEXT
CODE:
  1. <mx:Tree id="listadoClabers"
  2.     horizontalCenter="0" verticalCenter="0"
  3.     width="200" height="200"
  4.     dataProvider="{listado}"
  5.     labelField="@name">
  6. </mx:Tree>

Para poder asignarle unos nuevos iconos al componente lo primero que hay que hacer es incorporar a la aplicación los archivos bitmap de los iconos e incluirlos como Clases. Para ello crearemos las variables dentro del tag , embederemos los bitmaps y haremos las variables Blindables.

PLAIN TEXT
CODE:
  1. <mx:Script>
  2.     <![CDATA[
  3.         [Bindable]
  4.         [Embed(source="img/ico1.png")]
  5.         private var ico1:Class;  
  6.        
  7.         [Bindable]
  8.         [Embed(source="img/ico2.png")]
  9.         private var ico2:Class;
  10.        
  11.         [Bindable]
  12.         [Embed(source="img/ico3.png")]
  13.         private var ico3:Class;
  14.     ]]>
  15. </mx:Script>

Ahora asignaremos estas clases que contienen los bitmaps a los iconos personalizados del componente. Para ello utilizaremos las propiedades del componente folderClosedIcon, folderOpenIcon, defaultLeafIcon para los diferentes casos.

PLAIN TEXT
CODE:
  1. <mx:Tree id="listadoClabers"
  2.     horizontalCenter="0" verticalCenter="0"
  3.     width="200" height="200"
  4.     dataProvider="{listado}"
  5.     labelField="@name"
  6.     folderClosedIcon="{ico1}"
  7.     folderOpenIcon="{ico2}"
  8.     defaultLeafIcon="{ico3}">
  9. </mx:Tree>

Solo con esto al publicar la aplicación ya hemos personalizado los iconos:

Ahora vamos a ver un caso algo más complejo, imaginemos que necesitamos un icono diferente para diferentes grupos de objetos, por ejemplo un icono para los clabers hombre y otro para las clabers mujeres. para realizar esto ya deberemos echar mano de actionscript.

lo primero será asignar una función que controlará los iconos el componente. Si realizamos esta acción podemos eliminar las propiedades de iconos personalizados ya que esos valores se sobreescribirán con los de la función actionscript. En este caso crearemos una función llamada setGeneroIcon.

PLAIN TEXT
CODE:
  1. <mx:Tree id="listadoClabers"
  2.     horizontalCenter="0" verticalCenter="0"
  3.     width="200" height="200"
  4.     dataProvider="{listado}"
  5.     labelField="@name"
  6.     iconFunction="setGeneroIcon">
  7. </mx:Tree>

Ahora bien, para conseguir el mismo efecto de iconos de carpeta abierta y cerrada, y el nuevo icono diferenciado segun el genero del claber, deberemos modificar un poco el XMLList, añadiéndole unos parámetros a los nodos. Añadiremos un parametro que nos indique que el nodo en cuestión es una carpeta (folder="true"), y añadiremos un parámetro a los nodos de los clabers que nos indique su genero (genero="M" o genero="F").

PLAIN TEXT
CODE:
  1. <mx:XMLList id="listado">
  2.     <group name="admin" folder="true">
  3.         <claber name="Freddie" level="43458" genero="M"/>
  4.     </group>
  5.     <group name="Both" folder="true">
  6.         <claber name="_Conejo" level="7203" genero="M"/>
  7.         <claber name="Zguillez" level="4120" genero="M"/>
  8.         <claber name="Mariux" level="2921" genero="F"/>
  9.     </group>
  10.     <group name="swat" folder="true">
  11.         <claber name="Eldervaz" level="3123" genero="M"/>
  12.         <claber name="Zah" level="2906" genero="M"/>
  13.     </group>
  14.     <group name="pda" folder="true">
  15.         <claber name="XKlibur" level="4713" genero="F"/>
  16.     </group>
  17.     <group name="claber" folder="true">
  18.         <claber name="Elecash" level="7289" genero="M"/>
  19.         <claber name="Bleend" level="2016" genero="M"/>
  20.         <claber name="Carmen Vivas" level="610" genero="F"/>
  21.     </group>
  22. </mx:XMLList>

Ahora toca crear la función que asigne los iconos según corresponda.

Empezaremos por los iconos de carpeta abierta o cerrada. Para ello realizaremos una comprobación según si el nodo corresponde a una carpeta, y en tal caso realizaremos una segunda comprobación según si la carpeta está abierta o cerrada (isItemOpen).

PLAIN TEXT
CODE:
  1. private function setGeneroIcon(i:Object):Class
  2. {
  3.     var isFolder:String = String(i.@folder);               
  4.     if (isFolder == "true")
  5.     {
  6.         if (listadoClabers.isItemOpen(i))
  7.         {
  8.             return ico2;
  9.         }
  10.         else
  11.         {
  12.             return ico1;
  13.         }
  14.     }

En caso de no tratarse de una carpeta realizaremos la comprobación de la propiedad genero de los nodos y según sea uno u otro colocaremos el icono que le corresponda.

PLAIN TEXT
CODE:
  1. else
  2.     {
  3.         var genero:String = String(i.@genero);
  4.         if (genero == "M")
  5.         {
  6.             return ico3;
  7.         }
  8.         else if (genero == "F")
  9.         {
  10.             return ico4;
  11.         }
  12.         else
  13.         {
  14.             return null;
  15.         }
  16.     }
  17. }
  18. ]]>
  19. </mx:Script>

NOTA: el icono ico4 es un icono nuevo para los clabers mujeres que deberemos haber creado de la misma manera que los vistos anteriormente.

Este es el resultado:

Este es el código completo y el swf funcional:

PLAIN TEXT
CODE:
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
  3.  
  4.     <mx:Script>
  5.         <![CDATA[
  6.             [Bindable]
  7.             [Embed(source="img/ico1.png")]
  8.             private var ico1:Class;   
  9.            
  10.             [Bindable]
  11.             [Embed(source="img/ico2.png")]
  12.             private var ico2:Class;
  13.            
  14.             [Bindable]
  15.             [Embed(source="img/ico3.png")]
  16.             private var ico3:Class;
  17.  
  18.             [Bindable]
  19.             [Embed(source="img/ico4.png")]
  20.             private var ico4:Class;
  21.            
  22.             private function setGeneroIcon(i:Object):Class
  23.             {
  24.                 var isFolder:String = String(i.@folder);               
  25.                 if (isFolder == "true")
  26.                 {
  27.                     if (listadoClabers.isItemOpen(i))
  28.                     {
  29.                         return ico2;
  30.                     }
  31.                     else
  32.                     {
  33.                         return ico1;
  34.                     }
  35.                 }
  36.                 else
  37.                 {
  38.                     var genero:String = String(i.@genero);
  39.                     if (genero == "M")
  40.                     {
  41.                         return ico3;
  42.                     }
  43.                     else if (genero == "F")
  44.                     {
  45.                         return ico4;
  46.                     }
  47.                     else
  48.                     {
  49.                         return null;
  50.                     }
  51.                 }
  52.             }
  53.         ]]>
  54.     </mx:Script>
  55.    
  56.     <mx:XMLList id="listado">
  57.         <group name="admin" folder="true">
  58.             <claber name="Freddie" level="43458" genero="M"/>
  59.         </group>
  60.         <group name="Both" folder="true">
  61.             <claber name="_Conejo" level="7203" genero="M"/>
  62.             <claber name="Zguillez" level="4120" genero="M"/>
  63.             <claber name="Mariux" level="2921" genero="F"/>
  64.         </group>
  65.         <group name="swat" folder="true">
  66.             <claber name="Eldervaz" level="3123" genero="M"/>
  67.             <claber name="Zah" level="2906" genero="M"/>
  68.         </group>
  69.         <group name="pda" folder="true">
  70.             <claber name="XKlibur" level="4713" genero="F"/>
  71.         </group>
  72.         <group name="claber" folder="true">
  73.             <claber name="Elecash" level="7289" genero="M"/>
  74.             <claber name="Bleend" level="2016" genero="M"/>
  75.             <claber name="Carmen Vivas" level="610" genero="F"/>
  76.         </group>
  77.     </mx:XMLList>
  78.    
  79.     <mx:Tree id="listadoClabers"
  80.         horizontalCenter="0" verticalCenter="0"
  81.         width="200" height="200"
  82.         dataProvider="{listado}"
  83.         labelField="@name"
  84.         folderClosedIcon="{ico1}"
  85.         folderOpenIcon="{ico2}"
  86.         defaultLeafIcon="{ico3}"
  87.         iconFunction="setGeneroIcon">
  88.     </mx:Tree>
  89.    
  90. </mx:Application>

Related posts:

  1. Modificar datos en componentes Flex con ItemEditors
  2. Cómo mostrar tooltips dentro de componentes List de Flex
  3. Personalizar la tipografía en componentes Flex

]]> http://www.codigoactionscript.org/como-personalizar-los-iconos-en-componentes-tree-de-flex/feed/ 2