Editar y probar código HTML con el Visor de Velneo


([N3] pacosatu) #1

Hola.

Bueno ya tenemos un ejemplo de uso de la librería Ace Editor para editar y probar nuestro código HTML/javascript.
El objetivo principal es probar código HTML en tiempo de ejecución y cerciorarse de que funciona correctamente en el explorador Webkit del Visor HTML de Velneo.

El proceso es el siguiente:

  • Leemos el código HTML que queremos probar desde un campo Objeto Texto de Velneo. Lo guardamos en la variable CHTML.
  • Montamos una página HTML siguiendo las instrucciones de la librería Ace Editor insertando el contenido de CHTML en un elemento <textarea>.
  • Mostramos la página HTML en un Visor HTML para operar con el editor Ace Editor.
  • Podemos probar el código en un Visor HTML colocado en un Dock de Velneo.
  • Una vez terminada la edición, desde Velneo recuperamos y guardamos el “código editado” parseando la página HTML del Visor.
  • Información detallada del código javascript en la ayuda del ejercicio (Ctrl+F1).

Quede claro que todo el mérito de este ejercicio está en la librería Ace Editor, otro ejemplo de las cosas bien hechas.

Para acceder a la aplicación, como siempre ----> vatp://pruebas:pruebas@v7cloud6.velneo.com:8894/0PS_Varios_iapp.

Podéis añadir/copiar vuestro código HTML para probarlo. Esta librería es muy potente y solo muestro el funcionamiento básico.
Recordad que la ejecución del código HTML es local en el vClient y la ruta por defecto de las librerías javascript es la caché. Podéis incluir vuestras librerías con paths absolutos o URL’s.

Las dudas sobre la implementación podéis plantearlas sin problema.

Saludos
Paco Satué


([N1] priorcabo) #2

Hola Paco. el usuario? con demo no conecto
Gracias


([N2] Mgalvezh) #3

Hola, gracias Paco, he tenido que poner en esta linea, “<script src= “ckeditor.js”></script>” el path completo para que funcione, estupendo trabajo, una idea, crees que se podría usar una rejilla html, para sustituir la horrible que trae velneo por defecto ?, o petaría con muchos registros ?, te comento que ya he perdido clientes por que han visto rejillas tipo devexpress y las nuestras de Velneo son ridículas en comparación. Gracias y saludos.


([N3] pacosatu) #4

Hola Mgalvezh.

El fichero ckeditor.js debe haberse descargado en la caché y por lo tanto no es necesario poner el path completo. En la variable CKEDITOR_BASEPATH debes poner la Ruta donde has descargado las librerías desde http://ckeditor.com/download.
Teóricamente con esto debe funcionar ya que ckeditor.js lee la variable CKEDITOR_BASEPATH y ya es capaz de encontrar todo lo que necesita.

En cuanto a lo de usar una rejilla HTML sería completamente factible usando una librería javascript adecuada, eso sí, la interacción del Visor HTML con la tabla nativa de Velneo para las Altas/Modificaciones/Borrados sería una auténtica odisea.
De todas formas ¿Tú te crees que yo he comprado Velneo para acabar haciendo Rejillas con html y javascript? Si fuera así debería replantearme la inversión de tiempo y dinero.

Tampoco me dedico a buscar y/o probar otras plataformas, como DevExpress, porque entonces me deprimo.

Con estos ejercicios, solo pretendo solucionar problemas puntuales que tiene Velneo en algunos aspectos del Interface de usuario y en capacidades gráficas. No sé si tienen valor en aplicaciones finales porque yo no me dedico a vender programas.

Investiga las posibilidades de la Rejilla avanzada de Velneo, yo personalmente no la he probado mucho.

Es una pena, pero de momento solo podemos usar los plugins de terceros a través de librerías javascript incrustadas en el limitado Visor HTML de Velneo. Existe también la opción de QML pero ¿quién programa en QML para Velneo? Frente a miles de desarrolladores de javascript tenemos unos poquitos que lo hacen en QML o yo no soy capaz de encontrarlos.

Volviendo a la Rejilla, deseo que Velneo se ponga las pilas y que escriba mucho, muchísimo QT/C++ para que este control y otros muchos mejoren considerablemente y no se nos caigan las lágrimas al probar las demos de otras plataformas.

Saludos
Paco Satué


([N4] bitcodesoft) #5

Lo cierto es que las rejillas son mejorables, pero podemos crear nuestras rejillas con QML, y así siempre estarán a nuestro gusto o al del cliente, implica un poquito más de esfuerzo (para las rejillas no tanto), pero los resultados merecerán la pena.


([N2] Mgalvezh) #6

Gracias por tu comentario, Paco, ya se que no es plan de ninguna manera apostar por una plataforma y buscar, cosas tan básicas como esa en otro lugar, pero ya te digo, que un cliente vio mis app velneo y luego le enseñaron otro verp con esas rejillas, y me puso la cara colorada, cuendo me pidio que yo le hiciera lo mismo, en fin, esperar a ver…


([N4] eic) #7

Hola, Paco.

El visor HTML en el que se edita el código HTML con el editor Ace Editor, ¿debe tener los links delegados?

Es que no me captura el HTML modificado, sino el original, aunque haga cambios.

Saludos,


([N3] pacosatu) #8

Hola Fran.

No es necesario que tenga los links delegados porque no hacemos uso de ningún link. Sin embargo en el ejemplo con ID = 3 con nombre Ace Editor sí que usamos un botón <button id=“btn_guardar”> que llama a la función guardar().

Lo que capturamos desde Velneo es el contenido del <textarea id=“tmp_editor”> que se habrá ido actualizando con el evento change del Ace Editor.

  • var editor = ace.edit(“editor”) // Ace Editor
  • var textoArea = document.getElementById(“tmp_editor”) // Elemento textarea de intercambio entre el Velneo y el Visor
  • editor.on(“change”, function codigo_cambiado() {leer_codigo()}) // Ejecuta la función leer_codigo() cuando cambiamos algo
  • function leer_codigo() {textoArea.innerHTML = editor.getValue()} // Copia el código desde Ace Editor al elemento textarea

Revisa bien el código javascript porque en el Visor no tenemos depurador y los errores son silenciosos.
Comprueba con alert() que se ejecuta correctamente el evento editor.on(“change”, …) porque de lo contrario estarás recuperando el código original tal como te está ocurriendo.

No dudes en preguntar.

Saludos
Paco Satué


([N4] eic) #9

Hola, Paco.

La impresión que me daba es que, al hacer click en mi botón Aceptar (del formulario de Velneo), refrescaba el control HTML, lo cual volvía a cargar el valor original del contenido HTML que quería editar (por estar en la variable local, aún sin modificar).

Al final, utilicé el botón guardar (como en el ejemplo de Ace Editor), capturando el enlace y me funciona bien. Para lo que lo uso (uso interno), es suficiente.

Muchísimas gracias por tu ayuda y tus ejemplos.


([N1] carlos mateos) #10

<html>
<head>
</head>
<body>
<script type=“text/javascript”>
var nombre;
var edad;
nombre=prompt(‘Ingrese su nombre:’,’’);
edad=prompt(‘Ingrese su edad:’,’’);
document.write(‘Hola ‘);
document.write(nombre);
document.write(’ asi que tienes ‘);
document.write(edad);
document.write(’ años’);
</script>
</body>
</html>