Flex 3. Mostrar contenidos pdf en una aplicación Flex
A diferencia de AIR, Flex no incorpora ningún componente capaz de visualizar contenidos PDF.
Para mostrar un documento PDF dentro de un swf se puede recurrir a la técnica del iFrame, que consiste básicamente en superponer sobre el swf una capa con el contenido html deseado, en este caso, un documento pdf. Si cambia el tamaño o posición del swf se redimensiona y coloca el iFrame en la nueva ubicación por medio de javascript, dando la sensación de que el pdf está "dentro" del swf, cuando realmente está "sobre" él.
Descargar código fuente (proyecto Flex Completo) >>
Cuando crees el proyecto Flex asegúrate de reemplazar el archivo index.template.html, de la carpeta html-template, por el archivo del mismo nombre que va en el rar del código fuente. Se ha modificado para crear el iFrame e incorporar el archivo javascript iframe.js con las funciones encargadas de redimensionar y colocar en la posición correcta la capa con el contenido pdf.
El archivo iframe.js lo encontrarás en la carpeta bin-debug/javascript.
En este post puedes encontrar una versión para Flash CS4:
buenos dias:
gran ejemplo
hola si yo necesito que esto corra en un cd que tendria que hacer
gracias por la atencion
Hola Arturo:
No tienes mayor problema si quieres que se vea la aplicación del CD dentro de un navegador. Pero imagino que más bien buscas crear un Flash ejecutable (un *.exe) y esto es más complicado. Como has visto en el ejemplo, lo que hacemos es colocar sobre el swf una capa con el contenido web, utilizando javascript, por lo que es imprescindible que el usuario vea la aplicación en un navegador.
Una opción que te puedes plantear es utilizar AIR, para tu caso concreto. Puedes crearte una aplciación AIR que sí dispone de un componente capaz de mostrar cualquier contenido html (el componente está basado en WebKit, como Safari). El problema, o la ventaja según se mire, que el usuario tiene que instalar dicha aplicación como cualquier otra de escritorio.
Un saludo.
gracia por la idea de adobe air
bueno el problema radica de he buscado de mil forma codigo y ejemplo de como mostra por medio de adobe air un pdf y no encuentro ningun ejemplo.
lo mas triste es q busco, y solo salen articulos q solo mencionan q lo puede hacer pero en la practica te das cuenta q no es asi.
gracias y gran saludo
Hola:
Es que realmente un componente para ver pdf’s no tiene, pero lo que puedes utilizar es el componente HTML. En esta entrada
Navegador web con el componente HTML >>
tienes un ejemplo muy básico de cómo utilizar dicho componente para hacer un navegador web elemental.
El componente HTML permite mostrar dentro de la aplicación AIR cualquier contenido que se pueda ver en un navegador, siempre que esté instalado su correspondiente plugin, claro
Un saludo
Exelente demostracion…
Se puede abrir un PDF desde un SWF o EXE hecho en flash??
o hay alguna manera de abrir dentro de flash un HTML(dentro del mismo SWF, sin ventana externa).
Con codigo AS3.
Gracias.
Hola, Cristian:
Este ejemplo lo hice como proyecto Flex porque era una prueba para una aplicación del trabajo desarrollada en Flex. Creo que no tendrás dificultad en adaptarlo a Flash. Básicamente tendrías que llamar a las funciones javascript cuando se cambie el tamaño del navegador (evento RESIZE) y cuando tengas que mostrar un nuevo contenido.
Por otro lado, como has visto, se trata de un “truco”, ya que mostramos el html en una capa que está sobre el swf. Si lo que quieres es un exe, una aplicación de escritorio, puedes saltarte todo esto y crear una aplicación AIR que posee un componente html que te permite mostrar cualquier contenido html, y quizá sea esta tu mejor opción.
Un saludo.
Muy bien, muchas gracias Luis,y nuevamente excelente ejemplo.
Hola Luis, me descargado vuestro ejemplo de visor de contenidos pdf. Cuando lo pruebo, ejecuto el archivo html “VisorPdf.html” de la carpeta bin-debug y me muestra el siguiente error de seguridad:
******************************
SecurityError: Error #2060: Violación de la seguridad Sandbox: el llamador ExternalInterface file:///C:/VisorPdf/bin-debug/VisorPdf.swf no puede acceder a file:///C:/VisorPdf/bin-debug/VisorPdf.html.
at flash.external::ExternalInterface$/_initJS()
at flash.external::ExternalInterface$/call()
at jel.com.components::IFrame/moveIFrame()[D:\formacion\FlexBuilder3\VisorPdf\src\jel\com\components\IFrame.mxml:26]
at Function/http://adobe.com/AS3/2006/builtin::apply()
at mx.core::UIComponent/callLaterDispatcher2()[E:\dev\3.0.x\frameworks\projects\framework\src\mx\core\UIComponent.as:8460]
at mx.core::UIComponent/callLaterDispatcher()[E:\dev\3.0.x\frameworks\projects\framework\src\mx\core\UIComponent.as:8403]
********************************************************
La carpeta del proyecto descomprimida la importo desde flex 3 y si ejecuto el archivo mxml para mostrar la aplicación en el navegador tambien me muestra el error. Lo curioso es que si ejecuto el archivo html de la carpeta bin-debug desde flex , entonces si funciona. Yo tengo instalado firefox 3 y internet explorer. Y tengo instalado adobe flash player 10.¿Como puedo solucionar el problema?.Gracias. Un saludo
Hola, Oliver:
Cuando importes el proyecto Flex asegúrate de reemplazar el archivo index.template.html que encontrarás en la carpeta “html-template” del archivo rar.
Cuando Flex Builder regenera un proyecto suele volver a crear de nuevo la plantilla html que trae por defecto. Verás que esta plantilla (la que va dentro del *.rar) está modificada para crear una capa llamada “myFrame” donde se muestra el pdf.
El primer error que te da es porque intentas ver la aplicación fuera de tu workspace.
Por cierto, para que funcione correctamente deberías publicar (colocar la carpeta bin-debug) en un servidor web. Por ejemplo Internet Explorer suele fallar si no se hace esto.
Un saludo.
Hola Luis,
gracias por tu información. He remplazado el archivo “html-template” y ya no me da ningun error, pero no me funciona. Abro el archivo mxml en el IDE. Lo ejecuto y se carga la ventana con el arbol y a la derecha el mensaje de espera pero luego pulso en uno de los nodos(uno de los cursos) y no me carga nada en el iframe.Eso sí, ejecuto el html dentro del IDE y me funciona…no entiendo porque. Me imagino que no es necesario tener que subir o publicar una aplicación de flex en el servidor para poder visualizarla y depurarla correctamente.No he mirado mucho el codigo ,¿pero que tiene en particular esta aplicación para no poder visualizarla en modo local?.No se conecta con ningun PHP o algo por el estilo.
Otra cosa, si soys tan amables haber si os animais hacer un tutorial o ejemplo sobre como conectar un cliente flex con BlazeDS(AMF).Creo que sería interesante. Me gustaría hacer una aplicacion flex con Struts y creo que me vendría bastante bien. He leido varias cosas por hay…lástima que no domino mucho el inglés :). Habrá que ponerse.
Una última pregunta ¿Eliminasteis un Post sobre un ejemplo de galeria Flash con Away3D, esta muy bien. Es un post que ví recientemente y me quería bajar el codigo fuente pero ahora no lo veo. Si soys tan amables colgarlo otra vez.Muchas gracias.
Un saludo
Hola:
La aplicación utiliza javascript y hay bastantes navegadores (IE seguro) que dan problemas cuando se ejecuta la aplicación en una carpeta local. No es necesario subir la aplicación a la web, se puede tener instalado Apache en el ordenador y basta colocar la carpeta bin-debug en tu carpeta “htdocs” de Apache y en Flex Builder, dentro de Properties/ActionScript Build Path/Output folder URL la ruta a tu aplicación:
http://localhost/VisorPdf/
Puedes descargarte el servidor Apache, por ejemplo, de:
http://www.apachefriends.org/es/xampp.html
La galería de las cajas, estamos en ello, espero que pronto pueda estar posteada de nuevo. Paciencia O:-)
Un saludo.
Hola Luis, gracias por la aclaración. He visto muchos de tus ejemplos y trabajos. Eres una máquina. Un pregunta indiscreta ¿cuanto tiempo llevas programando en Action Script junto con Flash y Flex. ¿Has aprendidio por tu cuenta o te has formado en algún sitio?
Otra duda que tengo: Entonces si yo creo una página web con flex, haciendo uso de un “index.html”.Tendría que meter el swf generado(carpeta bin-debug) detro de un div en el archivo index.html .Haciendo uso por ejemplo de la librería swfobject,no?. Respecto a lo del servidor apache. Si tengo instalado el easyPhp me valdria no?.Tendría que meter la carpeta “bin-debug” dentro de la carpeta “www”.
Vosotros que soy expertos en esto.¿Una aplicacion flex-php con una pequña BB.DD,cuanto puede costar(€)?
Muchas gracias. Un saludo
Si quiere presupuesto sobre alguna aplicación personalizada, puedes solicitarlo en http://www.caracool.net
Hola, Oliver:
La plantilla index.template.html que aparece en la carpeta html-template es lo que utiliza Flex para generar el html que aparece en la carpeta bin-debug cuando publicas. Y esta plantilla se puede editar según las necesidades que tengas. Por ejemplo, yo utilizo una personalizada para SwfObject y cuando publico automáticamente obtengo el código html necesario para incrustar un swf en un html con SwfObject.
Si abres la plantilla verás que hay muchos tags que enmarcan expresiones del tipo $(swf), $(bgcolor)… esto permite utilizar los valores que has dado a tu proyecto Flex para personalizar el html que se generará. Los dos anteriores corresponden al nombre que se dará al swf creado, que se toma del nombre que des a la clase principal del proyecto Flex, y el color de fondo. En la ayuda puedes encontrar una recopilación de todas estas variables.
Lo que te comento es útil siempre pensando en una página web con un swf al 100%, o con poco contenido html. Si tu página va a llevar mucho contenido html, sería más aconsejable que te olvidaras de esta plantilla, y cuando tengas el swf, lo incrustes en tu página web con un editor de html más completo. Más aún si, por lo que parece, estás pensando en páginas dinámicas con php.
Por otro lado, en esto de Flash soy casi un recién llegado. Empecé en serio con Flash MX 2004 (Flash Player 7); o sea, ayer. He tenido la suerte de trabajar con un grupo de personas enamoradas de Flash/ Flex y, como se dice, lo importante no es saber hacer algo, sino conocer quién sabe hacerlo
Un saludo.
Muchas gracias por tu constestación. Me ha hecho gracia lo último que has dicho.”Lo importante no es saber hacer algo, sino conocer quién sabe hacerlo”.Yo llevo apenas año y medio con todo esto y la verdad que me gusta mucho.Haber si encuntro trabajo sobre Flash o flex, porque me gusta más que lo que estoy terminado de hacer , que es un máster en J2EE :). Aunque por suerte ahora se esta relacionando mucho con flex, para crear el front-end de una aplicación java.
Un saludo desde Valencia.
Buenas Tardes.
Quisiera saber si existe alguna forma de ocultar la barra superior donde aparece el icono de guardar o imprimir el documento y como se haria.
Tambien quisiera saber como se implementa esta aplicacion en un sitio web como se hace el llamado del visor?
gracias
Hola, Snayder:
La barra de herramientas la configura el usuario como desee, ya que se trata del plugin Adobe Acrobat. Si pulsas sobre dicha barra con el botón derecho se mostrará un menú donde puedes personalizarla.
Un saludo.
Gracias Luis stevez pero quisiera saber si es posible por medio del codigo del “visor” dejar oculta por defecto peus mi idea o lo que necesito hacer es aparentar que el documento dpf no se puede descargar gracias.
No me contesto la segunda pregunta. Me peude hacer el favor y me a una breve orientación de como implementar el visor en uan pagina web.
Gracias
Hola Snayder:
Desconozco si se puede modificar por código la barra de herramientas; pero incluso si se pudiera hacer, es algo no muy recomendable. Al usuario le suele “molestar” bastante que un sitio web le cambie su configuración. Si tiene la barra visible, con el botón de imprimir y guardar activados, es por que le gusta así
Si no quieres que se descarguen el pdf, está bastante complicado, aunque hay miles de trucos, que igualmente el que le interese sabrá evitar (eliminarlo de la caché del navegador, hacerlo de sólo lectura…). Lo puedes poner difícil, pero siempre el usuario va a poder usar un programa spider que lo capture.
Con respecto al código html y javascript que debes usar relee los primeros post de este hilo donde se explica cómo hacerlo.
Un saludo.
tu ejemplo esta muy bien pero lo que yo necesito esque el pdf se muestre en un swf que tiene el efecto de hoja,mi proyecto es que que el yo mande a llamar un pdf y yo lo visualice en swf el cual tendra un efecto de hoja como un libro fisico, espero y me explique bien
espero = que alguien me ayude en mi problema
Hola:
La verdad que es algo complicado. Incluso si hicieras una aplicación de escritorio con AIR no podrías rotar el container que muestra el pdf. Una opción es llamar a una aplicación de servidor que te devolviese una imagen rasterizada del pdf y tú mostrarla en el swf (el bitmap); pero, suponiendo que ya tuvieras implementada toda esta parte (algo que no es precisamente inmediato) tendrías el problema de que el usuario perdería la interactividad con el pdf, ya que lo que vería en el swf sería una imagen rasterizada.
Un saludo.
Cordial Saludo:
Soy totalmente nueva en flex, y es de suma importancia el tema que aqui presentas para mi proyecto de la universidad, he tenido problemas con la visualización de los pdf´s:
1. cuando corro el archivo de la carpeta bin-debug (que descomprimí y coloque en htdocs) me abre el pdf en una nueva ventana, incluso si corro el del link que aquí presentas, también lo abre en una nueva ventana.
2. al intentar trabajar y entender el código, al modificar la ruta (creo que es en —- ) para abrir otro archivo pdf distinto de mi pc, no hace absolutamente nada, es necesario colocar el proyecto en algún lado especifico? porque cuando corro el programa desde flex no hace nada, incluso sin modificarle ni una sola línea?
Agradezco de antemano cualquier tipo de ayuda ya que soy super novata en flex
Graaaacias =)
Hola, eirhean:
Imagino que debe ser algo relacionado con la forma que tienes configurado tu navegador, y la visualización de contenidos pdf (el plugin Adobe Acrobat Reader). Creo entender que también cuando ves el ejemplo de esta página te abre el pdf en otra ventana.
El problema de esta técnica (mostrar el pdf en una capa “sobre” el swf), como se ha comentado ya, es que depende bastante del navegador que estés utilizando, cómo lo tengas configurado y cómo tengas configurado el plugin de Adobe.
Este ejemplo lo probé en IE7 , Firefox 3.0 , y Safari 3.0 , y suponiendo que el usuario tiene instalado el plugin; pero hay tantos navegadores, tantas configuraciones de usuario…
Por otro lado, si ves este ejemplo bien, y lo que ocurre es que no lo ves cuando compilas con Flex Builder, ASEGURATE que en la carpeta html-template de tu proyecto TIENES EXACTAMENTE los mismos documentos que hay en el código fuente que te has descargado. Cuando Flex Builder regenera el proyecto sobrescribe dichos documentos con los que tiene por defecto. Esto es fundamental, ya que como verás en el documento index-template.html es donde creo el iframe encargado de mostrar el contenido pdf.
Un saludo.
Hola Luis, tu trabajo me parece excelente. Hace poco que he empezado en el mundo de flex. Me he descargado el codigo fuente y lo he intentadp ejecutar en Flex 3. Al ejcutarla no da ningun problema pero cuando pincho en uno de los pdf da un error al cargarlo. Tb lo he intentado implementar en un proyecto y ahi si lo carga pero al hacer el oncomplete del cargado no encuentra el mc1, me puedes decir si estoy haciendo algo mal??Tengo otro js dentro de este proyecto, puede ser que al hacer el externalinterface.call lo este buscando en este y no en el IFrame??
Muchas gracias
Hola, Oliver:
El error de seguridad que te da cuando abres la aplicación fuera de tu “Sandbox”: “Error #2060: Violación de la seguridad Sandbox: el llamador ExternalInterface…” es debido a que el swf está intentando comunicarse con una serie de funciones javascript. A través de ExternalInterface llamamos a las funciones javascript que están en el archivo “javascript/iframe.js”, llamadas hideIFrame, showIFrame, moveIFrame, loadIFrame, que se ocupan de ocultar, mostrar, mover y cargar el contenido.
Cuando se detecta que el swf está intentando comunicarse con la página html (a través de ExternalInterface) salta el aviso de seguridad que informa de ello y lo bloquea.
En estos casos es fundamental, o publicar en una carpeta segura, o en un servidor web; lo que evita este problema de seguridad (totalmente lógico, por cierto, ya que si no fuera así, se abrirían muchas puertas a código malicioso)
Un saludo.
P.D.: Si me das un correo te mando el proyecto del menú de cajas.
Hola, Enrique:
El iframe que utilizo se llama “myFrame” y se crea al final del html, asegúrate de que existe en el archivo “index.template.html” que hay en la carpeta “html-template”. Esta carpeta la suele regenear Flex Builder cuando se reconfigura algo de las preferencias del proyecto, y la sobrescribe con la que trae por defecto. Si te ha ocurrido esto (el archivo index.template.html, que lleva el código del iframe, se ha regenerado), sobrescribe esta carpeta con la “html-template” que hay en el archivo rar del código fuente que te has descargado.
Otra línea de código muy importante es la que da la ruta al archivo javascript:
iframe.js
Un saludo.
He leido todo el post y me parece excelente, pero me dan los mismos errores que no se como arreglar por ejemplo cuando le doy doble clik para visualizar el pdf no hace nada, no se muestra nada. Por otro lado si puedo ver el ejemplo que esta en esta pagina
saludos
Hola Annier:
Casi seguro que es el problema que comentamos más arriba, asegúrate de que en la carpeta “html-template” existen los MISMOS ARCHIVOS que los de la carpeta de igual nombre que va en el archivo *.rar que te has descargado. Flex Builder regenera esta carpeta (la crea con los archivos que tiene por defecto) en ciertas ocasiones. En la carpeta “bin-debug” debe existir otra carpeta llamada “javascript” conteniendo el archivo javascript “iframe.js”.
Un saludo.
la ruta puede venir desde una pagina http , la ruta donde dice path es local
esta en el propio servidor esos archivos????
como lograr evitar que si el usuario no tiene instalado el plugin de Adobe, se abra la pantalla para guardar el documento… si los documentos queremos protejerlos.
Saludos,
bueno para web, pero no para una multimedia.
El extinto flashpaper >> ahora solo queda pdf2flash