domingo, octubre 9th, 2022
Después de tanto batallar con Angular aprendiendo nuevos conceptos y tratando de mantenerme al dia con cada actualización, sustituyedo componentes que quedan obsoletos y buscando otros compatibles, he decidio dejar atrás Angular, debo decir que el FrameWork me ha superado, me doy por vencido y me paso a algo mas sencillo pero no menos potente como lo es VUE
Lo primero que haré es instalarlo, para ello y como estoy en mi computadora con Sistema Operativo DEBIAN debo recurrir NVM primeramente debo poner en uso el paquete de NPM que quiero utilizar, ya que lo necesito para instalar VUE
nvm use v16.17.1A la fecha de escritura de este post la versión 16.17.1 es la actual, por eso l seleccioné para instalar VUE
npm init vue@latestA continuación nos preguntará el nombre del proyecto y una serie de configuración
✔ Project name: … prueba
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit Testing? … No / Yes
✔ Add Cypress for both Unit and End-to-End testing? … No / Yes
✔ Add ESLint for code quality? … No / Yes
VUE creará una subcarpeta con el codigo base necesario para correr nuestra app y ademas el package.json que contiene las dependencias de nuestros proyecto, pero todavía falta instalarlas
Si miramos el archivo Package.json nos pones la dependencia principal VUE 3.2.38, versión vigente al momento de escribir
{
"name": "prueba2",
"version": "0.0.0",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview --port 4173"
},
"dependencies": {
"vue": "^3.2.38"
},
"devDependencies": {
"@vitejs/plugin-vue": "^3.0.3",
"vite": "^3.0.9"
}
}
cd prueba después de movernos al subdirectorio hacemos los siguientes comandos
npm install con esto se descargarán todos los paquetes contenidos en el package.json y luego ya podemos iniciar la app
npm run dev 
A continuación explicaremos como está organizada una app VUE
domingo, octubre 9th, 2022
Sirve para que el width de una caja se pueda mantener constante a su valor definido por el width
El display determina cómo se agrupan o presentan los elementos html dentro de la página, y existen dos principales que se pueden usar
Block : usa todo el ancho disponible dentro del marco
Ejemplos de elementos que tienen este comportamiento
Inline: muestra todo junto
Ejemplos de elementos que tienen inline
Se puede cambiar el display por default de un elemento cambiandolo con CSS por ejemplo mostrar los elementos de una lista en línea y no por bloque .
li {
display: inline;
}También existe el valor none que oculta el elemento y lo quita del html en un efecto de remove
li {
display: none;
}visibility:hidden por el contrario no lo remueve solo lo hace no visible, dejando siempre ocupado el espacio que tiene originalmente
Si se desea centrar horizontalmente se pueden usar dos combinaciones sencillas para lograr el efecto deseado: Max-Width y Margin:Auto
Este sirve para que los displays alcancen un máximo de ancho y si la ventana se reduce mas allá de ese max-width entonces se ajusta automáticamente.
Si se deja el Margin como automática entonces el navegador agregar espacios iguales a la derecha y a la izquierda, centrando el elemento dentro de la pagina
Ejemplo de uso :
div.ex2 {
max-width: 500px;
margin: auto;
}La posición de un elemento está determinado por el orden en que se declara dentro del documento HTML, por ejemplo :
<div>Div uno </div> <div>Div dos </div> <div>Div tres </div>Sin embargo a veces necesitaremos definir con exactitud la posición de un elemento sin importar el orden en el que se ha declarado, para ello podemos usar la propiedad Position.
La propiedad position tiene 4 estados: static, relative, fixed, absolute, sticky
Esta es la posición por default de los elementos y no se ve afectada de nnguna manera por los posibles valores
La posición relativa de un elemento, se define con las propiedades left top calculadas sobre la base de la posición relativa del elemento: cuando digo posición relativa me refiero a la posición que ocupa por orden de declaración por ejemplo si un elemento ocupa la segunda posición y establecemos su Top a 50 px, entonces su top será
height del div1 + 50px
Esta es la más fácil de las posiciones ya que se mantiene fija con respecto a la pantalla. sirve para mostrar un mensaje fijo en la pantalla, y que se mantenga visible mientras hacemos scroll
Como su nombre lo indica esta posición es absoluta con respecto al «Parent» que lo contiene, si el elemento esta en el body entonces se hace con respecto al «viewport » de la pantalla
Algo que decir es que si el valor que se ocupa es bottom entonces se posiciona con respecto al viewport de la pantalla.
La posición stickcky se pega al top de la pantalla cuando se alcanza
determina el stack position de un elemento, así se pueden mostrar texto encima de una imagen
img {
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}determina el comportamiento de lo que pasa cuando un elemento contiene mas texto del que puede soportar
el contenido se muestra de todas formas aunque la caja no pueda contenerlo
div {
overflow: visible;
}El contenido que no cabe dentro de la caja, se oculta
div {
overflow: hidden;
}se muestran unas barras de navegación en la caja para poder hacer Scroll al contenido
div {
overflow: scroll;
}El navegador decide que hacer y cuando mostrar la barra de scroll
div {
overflow: auto;
}Con estas propiedades se determina cuando mostrar la barra de navegación en el eje x o en el eje y
div {
overflow-x: hidden; /* Hide horizontal scrollbar */
overflow-y: scroll; /* Add vertical scrollbar */
}La propiedad float puede servir para decirle a un elemento que se mueva a la derecha o a la izquierda, según lo necesitemos, una forma de entender esta propiedad es que los elementos se posicionan según los declaramos en el DOM, si hay dos elementos que ocupan una misma línea estos se ponen uno detrás del otro en el orden que se declararon.
Los posibles valores son :
Float permite a un elemento declarado previo al que sigue «Flotar» a la derecha o viceversa
img {
float: right;
text-align:right;
}
<p><img src="pineapple.jpg" alt="Pineapple" style="width:170px;height:170px;margin-left:15px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.<img src="pineapple.jpg" alt="Pineapple" style="width:170px;height:170px;margin-left:15px;">
</p>
Float es como para agrupar los elementos en una misma linea y permite que cuando la pantalla se haga más pequeña se apilan uno tras otro
CSS es para mi, el lenguaje (si se me permite catalogarlo como tal) mas dificil de aprender, iré agregando más funciones a medida las vaya aprendiendo y entendiendo.
martes, septiembre 14th, 2021
Mientras generaba un reporte en excel para uno de nuestros sistemas de licencias, me tope con el error siguiente:
Uncaught Error: Class 'ZipArchive' not found inEl reporte que estoy creando consulta una tabla de la base de datos, realiza un query especifico y luego descarga el excel directamente desde el navegador, estoy usando la libreria de phpoffice: «phpspreadsheet» muy conocida en el mundo php. El código que ejecuto al final de la rutina es el siguiente:
$writer = IOFactory::createWriter($this->sp, 'Xlsx');
$writer->save('php://output');
Me puse a investigar un poco y al parecer el problema radicaba en que la ZipArchive ya no esta disponible en PHP 7.0 por lo que hay que instalar manualmente, puesto que la phpspreadsheet depende de esta ZipArchive debes asegurarte que la tengas habilitada.
Para resolver el problema solo tuve que instalar la mencionada librería ejecutando el siguiente comando en la consola de:
sudo apt-get install php7.0-zipAlgunos tutoriales que encontré me indicaban que modificará el archivo php.ini sin embargo yo solo tuve que reinicar el servidor apache
sudo /etc/init.d/apache2 restartCon esto quedo solucionado, y pude generar el reporte en excel que estaba necesitando
sábado, febrero 20th, 2021
Desde hace tiempo tenia un problema en Debian que me volvía loco, cada vez que el equipo entraba en hibernación o en suspensión, al despertar la Laptop me hacía un ruido terrible siempre cuando el cursor del teclado llegaba al tope, o cuando escribía en consola un comando erróneo, o también cuando en el navegador de archivos llegaba al tope de listado de archivos, al parecer es un sonido de aviso o algo así.
Al parecer es un aviso del sistema, el problema es que en mi computadora por alguna razón este ruido es demasiado fuerte, y bastante molesto cuando te encuentras en el silencio absoluto de la media noche programando o simplemente procrastinando.
Bastaba con un simple comando para desactivarlo:
sudo rmmod pcspkr Con el comando anterior el problema se solucionaba fácil, lo que sucedes es que cada vez que volvía a hibernar la maquina o ponerla en suspensión, cerrar la tapa o apagar el equipo; ahí estaba de nuevo, el molesto ruido una y otra vez; para resolver: ejecutar el comando rmmod pcspkr y el ruido desaparece, pero al cerrar el equipo nuevamente se activaba.
Hice una extensa búsqueda en san Google como resolver este problema y no encontré nada, hasta que por casualidad di con la solucionar por efecto mismo de la serendipia.
La libreria PM Utils sirve para manejo y gestión de la energía del equipo, entre otras cosas te permite hibernar o suspender el equipo desde consola
pm-suspendpm-hibernate Si necesitas mas información sobre este paquete te recomiendo visites los siguientes enlaces:
Todo lo anterior esta magnifico, ¿pero que tiene que ver con el comando rmmod pcspkr que desactiva el molesto ruido en Linux Debian y escritorio Cinnamon?
Los eventos Sleep/Resume te permiten ejecutar un script cada vez el equipo se levanta de una suspensión o hibernación, para hacerlo debes copiar tu código en las carpetas de configuracion de la librerías PM-UTILS
Lo que debes hacer crear un script en el directorio /etc/pm/sleep.d/
#!/bin/sh
case $1/$2 in
pre/*)
echo "Going to $2..."
# Place your pre suspend commands here, or `exit 0` if no pre suspend actio$
;;
post/*)
echo "Waking up from $2..."
sudo rmmod pcspkr
# Place your post suspend (resume) commands here, or `exit 0` if no post su$
;;
esac
y ahi meter el comando que quieres que se ejecute cada que el equipo se levanta de una suspensión o de una hibernación.
Asunto resuelto, nunca mas tuve que escuchar ese horrible ruido cuando despertaba mi equipo.
Referencias:
lunes, octubre 12th, 2020
Anteriormente no era necesario tener un método de facturación asociado a tu cuenta para poder hacer deploys de funciones Firebase, el plan gratuito era suficiente. A partir de la migración a nodejs 10.00 de las funciones Firebase de Cloud Functions, es necesario que cuentes con un método de facturación válido. Es posible que recibas un mensaje como el siguiente
HTTP Error: 400, Billing account for project '68817281782' is not found. Billing must be enabled for activation of service(s) 'cloudbuild.googleapis.com,containerregistry.googleapis.com' to proceed.Para solventarlo simplemente debes cambiar tu plan y registrar tu método de pago en la consola de firebase, para que entiendas mejor lo que ha sucedido te dejo los 3 planes de facturación :
Atención : A partir de Enero de 2020 Google elimina el plan FLAME y quedan disponibles únicamente el plan Spark y Blaze activos, en principio esto no significaría gran diferencia si cuentas con un plan SPARK, a menos que tengas funciones de google deployadas en Google Cloud Function.
Si tienes funciones de Cloud Functions activa en tu proyecto debes migrar tus proyectos al plan Blaze. tus cuotas gratuitas se mantendrían disponibles y siempre que no las sobrepases no se te cobrará nada, aunque si debes contar con un medio de pago registrado, si es este tu caso debes hacer lo siguiente:
Las cuotas disponibles al momento de escribir este articulo octubre 2020 son las siguientes:
Más información sobre los planes de facturación aqui
Puedes cambiar el plan de facturación de tu proyecto dando click en la imagen
A continuación google te pedirá que selecciones el plan de uso Blaze
Firebase es parte de Google Cloud Platform que es la nube de servicios para desarrolladores de google, puesto que estas dos plataformas comparten los proyectos es necesario que configures en Google Cloud Platform la forma de pago.
ya puedes aceptar los términos del contrato
A continuación ya puedes ingresar los datos de tu tarjeta y tus datos de facturación, recuerda que esto es para tener una tarjeta de credito o debito asociada a Google Cloud Platform, pero todavía falta regresar a la consola de firebase y seleccionar el plan Blaze.
Dirigite a la consola de Firebase y selecciona el plan Blaze
Una buena idea es que configures una alerta de presupuesto para evitar que los gastos se te disparen desmedidamente ante un inesperado crecimiento en el uso de tu app
Si tienes dudas sobre el plan con que cuentas en este momento te sugiero que consultes en la configuración de tu proyecto, tal y como se indica en la imagen a continuación
Si tienes dudas sobre los planes de facturación y cuotas gratis te recomiendo visites el siguiente enlace
Planes de Facturación en Firebase
Una vez ya tienes tus plan de pagos establecido para tu proyecto puedes ejecutar el comando para el deploy de la función
firebase deploy --only functionslunes, octubre 12th, 2020
Paso 1) Crear un proyecto nuevo de firebase de pruebas, aceptamos los términos del contrato y le damos continuar
Paso 2) Aceptar la configuración del google analitycs
Paso 3) seleccionar la ubicación de tu google analitycs
A continuación le damos click en crear proyecto
Paso 4) Configurar la primera aplicación en firebase, en nuestro caso para angular debemos seleccionar la opcion de aplicación web
Seleccionamos la opción de aplicación web
Seleccionamos las opciones de configurar un hosting para que podamos almacenar funciones y otros archivos necesarios
Si estuviéramos trabajando con un proyecto web, tendríamos que usar las librerías cargadas en los head de nuestro archivo HTML, pero en nuestro caso los ejemplos de este blog, se harán usando la librería de angularfire2. En esta parte solo le damos siguiente, si tu proyecto fuese en html directamente, si tendrías que copiar estas cabeceras.
Instala la CLI (Command Line Input) para trabajo con firebase, esta te servirá para que puedas ejecutar comandos de firebase directamente en la consola, recuerda que para hacerlo debe tener el manejador de paquetes npm, y la última versión de nodejs instalada en tu sistema operativo.
npm install -g firebase-toolsAhora que ya tienes instalado la CLI de Firebase, puedes ejcutar comandos para inicio de sesión en firebase deployar en el hosting y otros comandos. Te dejo algunos a continuación:
firebase login firebase init firebase deploy 
lunes, octubre 12th, 2020
Puede que al momento de crear funciones de firebase, te de un error como el que sigue
Error: Failed to list Firebase projects. See firebase-debug.log for more info.Si es ese el caso te recomiendo que revises el archivo firebase-debug.log en él puedes encontrar mayor información sobre los errores, pero un error común es que el token de inicio de sesión este desfasado, si es este tu caso, debes re logearte para poder trabajar con funciones
Tu archivo de firebase-debug.log mostrará algo como lo siguiente
Request had invalid authentication credentials.Recuerda
Simplemente debes escribir el siguiente comando
firebase logoutLo anterior te deslogeara para que puedas ingresar de nuevo, al hacerlo el token de inicio de sesión se refrescará
firebase login 
Al volver a logear se renovara el token de inicio de sesión y ya podrá ser posible seleccionar un proyecto existente, o bien crear uno nuevo.
lunes, septiembre 21st, 2020
Advertencia: antes de empezar debes instalar NodeJS y package manager, sacaremos pronto un tutorial acerca de como hacerlo para windows y Linux.
Para crear un nuevo proyecto en Angular 10 debes tomar en cuenta algunos cambios en la sintaxis de los comandos, a continuación te doy mas detalles al respecto:
Crear un nuevo proyecto con el siguiene comando
ng new NuevoProyectoAl hacerlo angular creará una carpeta con el nombre «NuevoProyecto» y dentro copiara todos los archivos necesarios para que tu proyecto funcione, no intentes entender que hay dentro de cada una de esas carpetas, ya que son todas las librerías base para que tu proyecto compile. Cada proyecto angular al momento de escribir este articulo tiene un peso aproximado de 500 mb, esto puede variar de acuerdo a tu versión o librerías que ocupes
En mi caso fue necesario instalar estas librerías , dependiendo de la versión de NPM que estés usando tal vez no las necesites; si al momento de correr tu proyecto angula-cli te las solicita puede ejecutar este comando.
npm i @angular-devkit/schematics
npm i @angular-devkit/core
Si tienes dudas sobre si debes o no instalar estas dependencias de desarrollo, ejecuta en tu terminal el siguiente comando (recuerda que debes estar en el directorio de tu proyecto, justo donde este el archivo package.json)
ng versionSi en la salida de este comando aparece lo siguiente ya lo tienes instalado
Hasta aquí ya puedes empezar a trabajar con tu proyecto, crear componentes e instalar más dependencias, a continuación instalaremos las librerías necesarias para conectarse a una base de datos firebase.
La librería de angularfire2 es la que te permite conectarte a la api de firebase, dependiendo de tu versión del npm tal vez necesites incluir el parámetro –save para que la librería se te agregue como dependencia, aunque a partir de la versión 5 de npm todas se instalan como dependencia.
npm install firebase angularfire2 --saveAl terminar debes tener algo como la siguiente imagen
Material es un patrón de diseño para aplicaciones que google implementa en muchos de sus productos, como angular es de google, también incluye este patrón de diseño, yo lo describiría como una especie de librería visual para hacer que tus aplicaciones tengan mejor presentación.
ng add @angular/materialA continuación el Angular CLI te pedirá el tema a utilizar y al terminar tendrás un resultado como el siguiente:
No es obligación incluir material en tus aplicaciones angular, puedes agregar un estilo diferente incluyendo una librería como bootstrap 4, o bien desarrollando tus propios estilos, en otro post abordaremos este tema.
Una vez que ya tienes la librería de material instalada, debemos probarlo para asegurar que funcione correctamente, para ellos haz lo siguiente:
Por ejemplo si queremos agregar un Slider que es un componente para simular un switch corredizo (ver imagen )
Tendremos que ir primeramente al app.module.ts y luego agregar la importación del componente.
import { MatSliderModule } from '@angular/material/slider';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
BrowserAnimationsModule,
MatSliderModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Ahora buscar el archivo html del componente app.component.html principal y agrega el siguiente selector (el selector es la etiqueta html que hala el componente a su presentación visual en el html )
<mat-slider min=»1″ max=»100″ step=»1″ value=»1″></mat-slider>
Existen más componentes que puedes agregar, no solo el Slider, a continuación te dejo unos cuantos componentes:
Agregando otros componentes de Angular Material
import {MatListModule} from '@angular/material/list';Se agrega ahora los list del material al archivo app.component.html
<mat-list>
<mat-list-item> Pepper </mat-list-item>
<mat-list-item> Salt </mat-list-item>
<mat-list-item> Paprika </mat-list-item>
</mat-list>OJO: siempre hay que añadir la sentencia de importación en el module.ts
Existe un componente para agregar iconos
import {MatIconModule} from '@angular/material/icon';Agregar algunos iconos
<mat-icon aria-hidden="false" aria-label="Example home icon">home</mat-icon>
<mat-icon aria-hidden="false" aria-label="Example home icon">accessibility_new</mat-icon>
<mat-icon aria-hidden="false" aria-label="Example home icon">dialpad</mat-icon>Generar la base de datos tal como se indica aqui: crear una base de datos firebase(pendiente )
Una vez ya tenemos la base de datos de firebase, debemos crear una variable de entorno en el archivo environment.ts ahí debes copiar la firebaseConfig de tu base de datos, esto normalmente se hace en la consola de Firebase, solo para que tenga una idea, esta llave se parece a lo siguiente
firebase: {
apiKey: "ajhajhjshdjshdjshdjshdjhsj",
authDomain: "tubase-sv34.firebaseapp.com",
databaseURL: "https://tubase-sv34.firebaseio.com",
projectId: "tubase-sv34",
storageBucket: "tubase-sv34.appspot.com",
messagingSenderId: "s2736726372",
appId: "1:s2736726372:web:s2736726372",
measurementId: "F_HHDH73"
}El archivo environment.ts se verá como el que sigue
export const environment = {
production: false,
firebase: {
apiKey: "ajhajhjshdjshdjshdjshdjhsj",
authDomain: "tubase-sv34.firebaseapp.com",
databaseURL: "https://tubase-sv34.firebaseio.com",
projectId: "tubase-sv34",
storageBucket: "tubase-sv34.appspot.com",
messagingSenderId: "s2736726372",
appId: "1:s2736726372:web:s2736726372",
measurementId: "F_HHDH73"
}
};
Ahora que ya tienes la constante firebase declarada, debes incluirla en tu archivo del app.module.ts, para que sea pública en todo el proyecto
También debes importar la librerías del angularfire. Agregar las siguientes importaciones en la sección inicial del archivo app.module.ts
import { AngularFireModule } from '@angular/fire';
import { environment } from '../environments/environment';
import { AngularFireAnalyticsModule } from '@angular/fire/analytics';
import { AngularFirestoreModule } from '@angular/fire/firestore';
También debes importarlos el @NgModule del mismo archivo, recuerda que esta directiva une todos los módulos y los presenta en uno solo, como las librerías de angularfire2 son externas van en la sección imports, los componentes que nosotros desarrollemos esos si van en la sección declarations , el archivo app.module.ts quedará mas o menos como te lo muestro a continuación:
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
BrowserAnimationsModule,
AngularFireModule.initializeApp(environment.firebase),
AngularFireAnalyticsModule,
AngularFirestoreModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Comando para crear el modelo
ng generate class nuevo/user --type=modelimportar al componente que queremos usarlo
import {User } from '../nuevo/user.model';
Una vez importado hay que delcararlo dentro de la clase del componente
miércoles, agosto 5th, 2020
Document Object Model, o bien Modelo de objetos de documentos. El DOM es un estandar de miscrosoft para representar archivos XML HTML y otros documentos de marcado extensible, es decir documentos que usan los simbolos «<>» para construir un contenido.
Ejemplo:
<NuevoDocumento>
<titulo>
Documento Hola Mundo
</titulo>
<cuerpo>
Cuerpo del documento
</cuerpo>
</NuevoDocumento>
Los archivos XML pueden ser muy parecidos al HTML que se usa para páginas web, pero en realidad son cosas distintas, el XML es un lenguaje mas ordenado en el cual los nodos e información descriptiva esta delimitadamente con claridad. El HTML por ejemplo tu puedes abrir una etiqueta tras otra sin preocuparte de cumplir estandares, los navegadores leerán el documento a como de lugar.
El DOM por lo tanto es la forma de representar estos objetos, y susa mucho en programación para brindar una forma estandarizada de acceder a la informacion de los documentos.
.jpeg "The save method serializes the DOM tree.")
La idea detrás del DOM es contar con una forma estructurada de mostrar información y hacerla accesible para los programas que utilizan los datos, para hacerlo los parseadores de XML crean un arbol de nodos.
Lo anterior es una representación simple de un DOM, retomaremos mas adelante esta estructura para explicar un par de cosas.
Hace años ya que Microsoft implemento su tecnología de webservices para el tratamiento de documentos XML, recuerdo bien esto porque era apenas un adolescente y estudiante de bachillerato, cuando se anunció con bombo y plantillo toda la estrategia punto net que dominaría la agenda de desarrollo para los próximos años.
En aquella época el acceso a nuestro país era practicamente nulo (1998) y muchos todavía no entendiamos de que se trataba todo este asunto de los web services y los XML; se hablaba mucho de que los sitios web eran islas de información y que para poder extraer toda esta información atrapada en esas islas se necestiba crear puertos vias de comunicacion entre ellas para que los datos circulasen libremente.
El resultado fueron los servicios XML, como dije antes Microsoft anunciaba esta tecnología con bombo y platillo pues era su mayor apuesta por la nube, en aquellos entonces simplemente le deciamos internet.
El MSXML es un standar para varios lenguajes, Jscript VbScript .NET, C y C++, por lo que no es exclusivo para FOXPRO, lo que sucede es que se accede por medio de COM. Punto NEt tiene su propia libreria para XML integrada en el Framework por lo que no es recomendable utilizarlo en esta plataforma de desarrollo.
Existen varias versiones del MSXML, de la wikipedia les comparto la siguiente tabla.
| MSXML 3.0 MSXML3 | MSXML 6.0 MSXML6 |
| Version más antigua | Es la última version |
| Se entrego con Windows XP, Internet Explore 6.0, 7.0,8.0, Windows XP SP2 | Se entrega con : Sql Server Visual Studio, Punto NET Framework, Windows Vista, Windows 7, Windows XP SP3, |
Toda esta serie de estandares, herramientas y librerías se le bautizo con el nombre de MSXML Microsoft XML Core Service. recuerdo que a todos los que habiamos aprendido algo de lenguaje Java en aquella época nos parecía una copia burda del JDK, y es que ene efecto lo fue, punto net, MSXML y otra tecnologías eran una copia descarada de todo lo que Sun Microsystem (Dueña de Java en aquel entonces), ahora ya nadie lo recuerda.
Con la llegada de la factura electrónica a muchos paises de Latinoamérica algunos progamas viejos desarollados en foxpro, tuvieron que adaptarse para el trabajo con los xml que producen las plataformas de las administraciones fiscales; por lo que muchos programadores se vieron en la necesidad de aprender esta tecnología, yo soy uno. A continuación te comparto lo aprendido.
Antes que nada crearemos un archivo XML válido para poder trabajar con él, que luego iremos extendiendo para ir demostrando los ejemplos.
<ElementoRaiz>
<Hijo1>Chepe</Hijo1>
<Hijo2>Juan</Hijo2>
</ElementoRaiz>Por el momento es un archivo sencillo, solo para demostrar algunas funciones básicas. Recuerda que los archivos XML no pueden llevar espacios en los nombres de los nodos por ejemplo : «Elemento Raiz» tambien no deben llevar tildes o caracteres especiales; debes tomar en cuenta las minusculas y mayusculas para trabajar con los nodos.
Pasemos pues a la lectura del archivo anterior
Para leer archivos XML con FoxPro debes primero crear una instancia del objeto MSXML, esto se hace realizando los siguiente pasos:
Debes crear el objeto MSXML y luego cargar el archivo que contiene el archivo XML para ello usamos el método Load
lcFile="ejemplo.xml"
loXML= CREATEOBJECT('MSXML2.DOMDocument')
loXML.LOAD(lcFile)El siguiente paso es obtener algún nodo para poder trabajar con él, para ello usaremos el método selectSingleNode()
node= loXML.selectSingleNode("//")Te preguntarás que significan las dos barritas o plecas «//». Esto significa que podemos acceder a todos los nodos del segundo nivel del archivo xml y obtener el texto del mismo, poniendo las 2 plecas obtendremos acceso a los 2 nodos hijos del archivo de ejemplo XML es decir que obtenemos los nodos de Chepe y Juan
Ahora que ya tenemos creado el objeto node ya se puede obtener el texto del mismo, la ventaja es que al hacerlo, obtendremos una representacion en xml de todos los subnodos, o bien el texto del nodo.
?node.textLa propiedad Text nos devuelve la siguiente salida :
Chepe Juan El anterior ejemplo todo junto queda asi:
lcFile="events.xml"
loXML= CREATEOBJECT('MSXML2.DOMDocument')
loXML.LOAD(lcFile)
node= loXML.selectSingleNode("//")
?node.textEl anterior ejemplo es sumamente sencillo, solo para entender como se organizan los nodos y como obtener algun texto del archivo XML, sin embargo existen más métodos y propiedades que puedes usar, las detallaremos mas adelante en este articulo.
Algo importante que debes comprender antes de trabajar con nodos es como funcionan las rutas de acceso o «paths» para obtener un nodo, casi todo lo que tengas que hacer con un archivo XML tiene que ver con obtener el nodo correcto.
Por ejemplo en el archivo XML solo hay dos niveles, por lo que simplificamos el acceso a los textos del nodo Hijo1 e Hijo2 simplemente escribiendo dos plecas, pero que pasaría si estos los hijos tuvieran un nivel mas de descripción por ejemplo un sub nodo edad.
<ElementoRaiz>
<Hijo1>
<Nombre>Chepe</Nombre>
<Edad>12</Edad>
</Hijo1>
<Hijo2>
<Nombre>Juan</Nombre>
<Edad>7</Edad>
</Hijo2>
</ElementoRaiz>Se ha creado un sub nodo nombre y otro edad, ahora que pasa si deseo acceder solo a los ementos del nodo Hijo1, ¿cómo debo escribir la ruta de acceso a ese nodo ?
node= loXML.selectSingleNode("//Hijo1")El resultado al consultar la propiedad text del nodo seria y la edad y el nombre juntos:
Chepe12 A continuacion te dejo una pequeña tabla donde puesde ver las posible rutas y el resultado según se use para nuestro archivo de ejemplo:
| selectSingleNode(«//Hijo1») | Chepe12 |
| selectSingleNode(«//Hijo2») | Juan7 |
| selectSingleNode(«//Hijo1/Edad») | 12 |
| selectSingleNode(«//Hijo2/Edad») | 7 |
| selectSingleNode(«//Hijo1/Nombre») | Chepe |
| selectSingleNode(«//Hijo2/Nombre») | Juan |
Si deseas devolver la estructura xml del nodo puedes hacerlo, recuerda que el objetivo de usar XML es que puedas obtener un documento estructurado y no simplemente una cadena de texto, un archivo estructurado te permite un mejor control sobre los datos y cuando se trat ade XML tu puedes definir en el mismo archivo a el documento, de modo que la aplicacion que lo leera no tiene que saber de antemano cual es la estrucutura de dicho archivo.
Por ejempo la propiedad XML del Objeto NODE del ejemplo anterior nos devuelve lo siguiente:
node= loXML.selectSingleNode("//")
?node.xmlSalida :
<ElementoRaiz>
<Hijo1><Nombre>Chepe</Nombre><Edad>12</Edad></Hijo1>
<Hijo2><Nombre>Juan</Nombre><Edad>7</Edad></Hijo2>
</ElementoRaiz>Los anteriore sejemplos sirven bien para un solo nodo, pero si lo que necesito es recorrer todos los nodos de un XML y leer sus valores entonces necesito el objeto NodeList, en el próximo parrafo te explico este objeto.
Si lo que necesitamos es recorrer por medio de una estructura for todos los elementos de un archivo XML en FoxPro, entonces necesitamos recurrir al objeto nodeList.
node= loXML.selectSingleNode("//")
oNodeList=node.childNodes
FOR EACH nde IN oNodeList
?nde.text
ENDFOR
La salida del anterior ejemplo seria como sigue:
Chepe12
Juan7 Tambien puede acceder a un elemento directamente por metio de la propiedad ITEM, por ejemplo si deseo acceder al elemento Hijo1 lo haríamos así:
?oNodeList.item(0).textRecuerda que en fox las matrices empiezan con 1 pero en este objeto los elementos empiezan en cero 0, por lo que no debes confundirte sobre todo en caso que utilices un bucle «for n=1 to » , en ese caso el ejemplo anterior debería quedar así:
FOR i=1 TO oNodeList.length
?oNodeList.item(i-1).text
ENDFORLa salida sería exactamente la misma que cuando usamos ForEach, si te fijas bien, verás que le hemos restado uno al indice del bucle FOR esto es por que los elementos en el objeto nodeList, empiezan en cero
Chepe12
Juan7 Próximamente
sábado, agosto 1st, 2020
En el siguiente post exploraremos las posibilidades de mostrar paginas web Html5 incrustadas en un formulario de Visual Fox Pro.
A lo largo del tiempo muchos desarrolladores de Visual FoxPro hemos sufrido la inminente obsolescencia de Internet Explorer, a pesar de que la última versión es la 11.0, al incluir el control Internet Explorer en nuestros formularios las paginas web simplemente no se muestran bien por que no soportan las etiquetas de CSS modernas o etiquetas HTML5 como por ejemplo la etiqueta de vídeo.
Por ejemplo si tu quieres mostrar una pagina que contenga el siguiente código HTML no funcionará por que el control Intenet Explorer sigue anclado a la versión 7 que salio haya por el año 2006.
<video width=»320″ height=»240″ controls> <source src=»movie.mp4″ type=»video/mp4″> <source src=»movie.ogg» type=»video/ogg»>Your browser does not support the video tag.</video>
Basado en un post encontrado en el blog de Rick Strahl’s existe una manera de poder «hackear» el registro de windows para que pueda emular Internet explorer 11.0 en los formularios de Foxpro a continuación el proceso:
HKEY_CURRENT_USER\Software\Microsoft\Internet Explorer\Main\FeatureControl\FEATURE_BROWSER_EMULATION
Una vez hemos modificado el registro, cuando agreguemos un control para navegar en Foxpro sera capaz de reconocer código Html5 como la ya mecionada etiquetas de vídeo; asi como tambien Mapas de Google Maps; por lo que bastará con abrir Foxpro cortar y pegar el siguiente código en la ventana de comandos y listo tendremos un mapa en nuestro form directamente incrustado.
Public Mapform1
Mapform1=Newobject(«MapForm»)
Mapform1.Show
Read Events
Define Class MapForm As Form
Height = 500
Width = 500
ShowWindow = 2
AutoCenter = .T.
Caption = «Google Maps «
WindowState = 0
Name = «Form1»
Add Object olecontrol1 As OleControl With ;
oleclass=»shell.explorer.2″,;
Top = 0, ;
Left = 0, ;
Height = 444, ;
Width = 528, ;
Anchor = 15, ;
Name = «Olecontrol»
Procedure init
thisform.Olecontrol.navigate(«maps.google.com»)
Endproc
Procedure Destroy
Clea Events
Endproc
enddefine
El resultado sera un mapa de Google insertado sin problemas, puedes desplazarte y moverte como quieras sobre el mapa tal cual si estuvieras en una ventana de Internet Explorer 11.0:
En próximos Post exploraremos la posibilidad de poder indicar las coordenadas de Longitud y Latitud para posicionar el mapa en una ubicación en especifico, así como poder indicar el zoom deseado por medio de código FOXPRO.
Nota: Asegúrate de tener instalada la última versión de Internet Explorer, que es la versión 11