Vision previa de los Archivos SVG

Para usar archivos SVG en tus aplicación móvil, primero agrega el archivo al <project_home>/src directorio de tu proyecto. Una vista rapida al grafico estan facil como hacer doble-click al nombre del archivo. Despues de abrir el archivo, puedes pasar el mouse sobre el grafico para resaltar los diferentes elementos. Has clic sobre el área amarilla en la barra de herramientas para correr las animaciones. También puedes utilizar barra horizontal de desplazamiento para seleccionar en cualquier momento una parte de la animación.

Para agregar gráficos SVG dentro del diagrama de flujo de tu aplicación, arrastra un componente SVGMenú, SVGSplashScreen, o SVGWaitScreen de la Paleta de componentes dentro del Flow Designer (te explicare estos componentes en los siguientes párrafos). Ahora selecciona y arrastra el grafico desde la ventana de proyectos (Projects window) dentro del componente. También es posible solo darle doble-clic al componente para abrirlo en modo Screen Designer, y solo arrastrar el archivo SVG dentro de la pantalla abierta.

De la misma manera puedes seleccionar y arrastrar archivos SVG dentro del Screen Designer, y asi colocar el grafico dentro de la pantalla. Nota que cuando tu arrastras un grafico dentro de un componente, un SVGImage es agregado en el folder "Resources" en la ventana de navegacion (Navigator Window).

Editor Externo

Al ser SVG un lenguaje basado en XML, es posible producir contenidos SVG con un editor de text. De cualquier manera, tu probablemente obtendrás mejores resultado utilizando uno de los muchas herramientas de código abierto o comercial que hay disponibles hoy en día . Las herramientas comerciales que han sido probadas con NetBeans Mobility Pack son:

La W3C mantiene una extensa lista de productos que implementan SVG. Estos aun no han sido probados, pero deberían trabajar sin problema con el IDE.

Para agregar un editor IDE, selecciona Tools > Options. Y selecciona el icono Miscellaneous, se expenderán los Setting de SVG. Clic en el botón Change para agregar la ruta de tu editor al IDE.

Ahora pedes abrir un grafico en tu editor solo haciendo doble-clic en el grafico en la ventana del Screen Designer.

Working with SVG Animations

El componente svgAnimationWrapper permite insertar un archivo SVG animado en cualquier parte del flujo de tu aplicación o dentro de una pantalla. EL componente es una envoltura sobre la clase SVGAnimator de la API JSR-226. de la API JSR-226. Esto es también la base para todos componentes (svgSplashScreen, svgWaitScreen, and svgMenu)—todos ellos lo heredan del svgAnimationWrapper.

Para agregar un archivo SVG dentro de tu aplicación, selecciona y arrastra el componente svgAnimationWrapper de la Paleta de Componentes y colócalo en el Flow Designer. Ahora arrastra un archivo SVG desde la ventana de Proyectos dentro del componente. Para controlar el comportamiento de la animación en la pantalla de tu aplicación puedes modificar las siguientes propiedades:

Trabajando con Splash Screens

Las Splash screens son usadas para mejorar la presentación de una aplicación. Típicamente, se utiliza una splash screen cuando en programa inicia, o para desplegar el logo, marca o información.

Para agregar una SplashScreen a tu aplicación, arrastra una SVGSplashScreen desde la Paleta y colócala en el Flow Designer. Ahora arrastra un archivo SVG desde la Ventana de Proyectos dentro del componente

Como una Splash Screen convencional en el Visual Designer, tu conectas splash screen en el Flow Design de tu aplicación con el Mobile Device "Start Point" con el puerto de la svgSplashScreen y conecta el puerto "Dismiss" con el componente helloForm. Si tu splash screen contiene una animación, puedes utilizar la ventana de propiedades (Properties window) para ajustar el comportamiento, por ejemplo determinar la propiedad "timeout" si quieres que sea interrumpida o no la animación..

Trabajando con Wait Screens

Las pantallas de espera (Wait Screens) permiten al usuario ejecutar tareas blocking background task (por ejemplo, conectarte a la red), y mostrar el progreso de la tarea o desplegar un mensaje en la pantalla para informar al usuario que la información esta siendo procesada.

Como svgSplashScreen, svgWaitScreen es la versión SVG del componente WaitScreen. Para agregar una SVG Wait Screen, arrastra el componente svgWaitScreen de la Component Palette y colócalo en el Flow Designer. Ahora arrastra un archivo SVG desde la ventana de proyectos y colócalo sobre del componente. El componente svgWaitScreen contiene dos puertos, "Success" y "Failure". Cuando la tarea (background task) es exitosamente terminada (esto es, que ninguna excepción es mostrada), el componente automáticamente continua con la siguiente acción presentada en el en el flujo de la aplicación. Si la tarea falla (una excepción mostrada), el componente automáticamente continua con la acción conectada al puerto "Failure".

Aquí se muestra una SVG wait screen en el emulador.

Trabajando con Menús

Las posibilidades para menús gráficos y animados son virtualmente sin límites cuando tú usas gráficos SVG como fondo o como elementos individuales del menú. En el Visual Mobile Designer, tú puedes agregar un menú previamente creado a tu aplicación, o agregar un menú de fondo y entonces agregar por separado elementos del menú al menú.

Para agregar elementos al menú, arrastra un menú desde la paleta y colócalo en el Flow Designer. Ahora asigna un SVG image al componente arrastrado y colocando un grafico SVG graphic desde la ventana de proyectos.

• If the image you drop contains elements (representing menu items) with IDs that start with the "menuItem_" string, the elements are automatically recognized by the IDE and are added to the component as menu items, sorted alphabetically.
  
• Si el componente SVG image no contiene elementos con IDs con el cual comienza el string"menuitem_", tu puedes agregar nombres a los elementos para representar individualmente cada elemento del menú solo arrastra un componente SVGMenu Element desde la Component Palette y colócalo en el sobre el componente SVGMenu. Ahora que los componentes SVGMenu Element están agregados al SVGMenu puedes obsever que en el Flow Designer nuevos puertos disponibles llamados "menuItem_". Puedes renombrar los puertos de acuerdo al nombre del archivo SVG.

En ventana del Flow Designer, puedes observar que el componente svgMenu ahora contiene varios puertos llamados menuItem_. Esos puertos corresponden a elementos individuales del menú y puedes ser usado en el flow design como cualquier otro puerto. Los elementos del menú también son visibles en la Inspector Window y pueden ser borrados o reordenados en también en esta ventana.

Aquí te mostramos un ejemplo de un menú. Nota como el mouse corre sobre la selección "Download data", esta cambia de color—esta es una función de los gráficos SVG. Observa como tambien la opción "Download data" tiene una línea de puntos alrededor—la línea muestra los límites de el elemento.

Ahora tomaremos este menú y lo agregaremos al diagrama del proyecto. Por medio de una línea de acción desde cada puerto _menuitem, tu conectas las opciones del menú para una acción especifica o otras animaciones SVG.

Generando Archivos PNG desde Archivos SVG

Simplemente has clic-derecho en el nodo de la imagen en la Projects window del Explorer y escoge la opción Export SVG Image to PNG Image, o Export SVG Animation to PNG Animation. Un dialogo se abre, y te da la oportunidad de especificar el tamaño de la imagen exportar la imagen para activar la configuración o todas las configuraciones para tus proyectos.

ISi tu escoges exportar la imagen o animación para todas tus configuraciones, el IDE automáticamente creara raster imágenes basadas en el tamaño de la pantalla de cada configuración individual. Por ejemplo, si tu tienes tres configuraciones, cada una con diferente tamaño de pantalla, la export function automáticamente creara tres imágenes PNG o animaciones con el tamaño correspondiente para cada una de las tres configuraciones.

Siguientes Pasos