¿Alguna vez has experimentado que los informes se cortan al usar el reporteador de Visual FoxPro? Si es así, hay una serie de procedimientos que puedes realizar en tu computadora para solucionar este problema. A continuación, te los detallaré.

1)Cambiar el Impresor Predeterminado

Puede que tu impresor emita tus reportes salgan cortados, te recomendamos que cambies el impresor predeterminado ; para hacerlo, en los sistemas operativos Windows siempre existe un impresor PDF que puedes usar como predeterminado, te recomendamos que lo uses de esta manera para evitar que tus reportes aparezcan cortados.

¿Como activar el impresor Microsoft PDF como predeterminado ?

Para activar este impresor primero debes desactivar la gestión automática de impresores por windows. Cuando esta opción esta activada, windows se encarga de establecer a que impresor se enviarán tus reportes, impidiendo que puedas seleccionar el impresor Microsoft PDF que es el que necesitamos.

DEBES DESACTIVAR ESE CHEQUESITO. (en español pueda que diga algo así como: «Dejar que Windows administre mi impresor por default»)

Establecer el impresor Microsoft PDF como predeterminado

Ahora que ya puedes seleccionar por tu cuenta el impresor predeterminado debes seleccionar realizar lo que te indico a continuación:

Selecciona el impresor y a continuación el botón administrar

A continuación debes establecer el impresor como predeterminado

Intenta volver a imprimir los reportes, siguen cortados ? prueba cualquiera de los procedimientos a continuacion

2)Cambiar Configuración PPP

Sucede que a veces los reportes te salen cortados cuando los observas en pantalla.

Esto pasa por que windows agranda las fuentes de los programas cuando la resolución de la pantalla que usas es demasiado grande.

Por ejemplo puede pasar cuando tiene un monitor muy grande de 32» o mas.

Pero no es necesario que el monitor en uso sea grande, ya que una mayor pantalla no necesariamente significa una mayor resolución ejemplo de ellos son las pantallas de celulares que con tamaños de 4» o 5» tiene igual resolución que un monitor de 17».

Como windows agranda las fuentes de los programas para que las pantallas de los programas no se vean muy pequeñas, debes hacer lo siguiente para evitar este comportamiento en Contaportable, y así evitar ver los reportes cortados.

Paso 1) click derecho sobre el icono de Contaportable y luego clic en propiedades

Paso 2) busca la pestaña que dice compatibilidad en tu ficha de windows e identifica el botón cambiar opciones de DPI.

Paso 3 ) Debes marcar las opciones que configuran el comportamiento de programas en resoluciones altas de pantalla, tal y como lo ves a continuación

Una vez hecho esto ya podrás ver tus reportes con normalidad.

Generalmente este problema sucede en Windows 10 y Windows 8/8.1

3)Cambiar la resolución de pantalla

Otra opción que puedes probar es cambiar la resolución de pantalla

En general solo necesitas altas resoluciones si ocupas tu computadora para diseño gráfico o para juegos de alta gama; por lo demás puedes perfectamente trabajar con una baja resolución sin notar la diferencia.

Si necesitas una resolución alta en tu computadora, entonces te recomiendo seguir el primer tutorial para ajustar la configuracion PPP de cada programa en windows.

---

Al momento de escribir esto ya existe Vue 3, por lo que he decidido instalar también la versión 2 a fin de que pueda comprender los conceptos básicos y partir de ahi para entrarle a a Vue 3

Para instalar lo hago por medio del manejador de paquetes NPM

Como siempre primero debo poner en uso la version de node que deseo usar, esto lo hago con NVM

nvm use v16.17.1

npm init vue@2.2.0

Need to install the following packages:
  create-vue@2.2.0
Ok to proceed? (y) y

Vue.js - The Progressive JavaScript Framework

✔ Project name: … vue2
✔ 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

cd vue2/

npm install

npm run dev

code .

---

En este post tengo planeado ir guardando aquellos aspectos nuevos de JavaScript que me parecen extraños

Transpiler

El concepto de transpiler existe por la gran actualización que se eta teniendo del lenguaje Javascript, ya que cada año surge una nueva especificación se vuelve necesario compilar o mas bien transpilar a una versión que sea reconocida por los navegadores viejos y asi despreocuparnos de los problemas de compatibildad

un buen transpiler es https://babeljs.io/

Setencia let

La sentencia let para declarar variables lo hace en el contexto que se usa, por ejemplo si tu declaras un variable con la palabra var entonces esas variables en realidad se declaran al inicio del archivo js, talvez no quieras que esto suceda

function getAlgoNombre(algo) {
  if (algo.isalgo) {
     var nombre = 'nombre ' + algo.name;
     return nombre;
  }
  return algo.nombre;
}

el codigo anterior es equivalente a lo siguiente

function getAlgoNombre(pony) {
  var nombre;
  if (algo.isalgo) {
     var nombre = 'nombre ' + algo.name;
     return nombre;
  }
  // nombre tambien es accesible aqui 
  return algo.nombre;
}

con let se declara cabal donde se usa

Constants

las constantes se introdujeron en la versión ES2015, la ventaja de una constante es que se mantiene inalterable en todo el código

const algoobjects = 6;

La sentencia anterior no puede se reasignada

También se pueden asignar un objeto una constante, se puede declarar y luego ser asiganada

        const objeto={};
        objeto.nombre="nuevo nombre";
        console.log(objeto.nombre);

y tambien con los arrays

        const arrayan=[];
        arrayan.push("uno","dos");
        console.log(arrayan[1]);

Es genial por que permite definir dinamicamente los valores de un objeto y sus propiedades

---

Agregar al listado de SUDOERS

Al instalar Linux lo primero que necesitaremos es poder dar permisos de instalación al usuario que estamos utilizando, lo que quiere decir agregarlo al listado de sudoers del sistema

/sbin/usermod -aG sudo yec

Evitar que debian busque repositorios en el media CDROM

es probable que te salga este error cuando tengas que instalar

please insert the disc labeled
 'Debian GNU/Linux 7.0.0 _Wheezy_ - Official amd64 CD Binary-1 20130504-14:44'
in the drive '/media/cdrom/' and press enter

si ese es el caso debes comentar la búsqueda en el cd rom de repositorios, esto se hace desde el archivo

 sudo nano /etc/apt/sources.list

dentro del archivo comentar lo siguiente

#deb cdrom:[Debian GNU/Linux 11.5.0 _Bullseye_ - Official amd64 DVD Binary-1 20>

con esto el cdrom de debian dejará de ser el primero en la lista de busqueda de repositorios

Configurar Samba

sudo apt install samba smbclient cifs-utils

Una vez instaladas las dependencias de samba hay que configurar en el archivo

sudo nano /etc/samba/smb.conf 

cambiar el workgroup

   workgroup = NUEVOGRUPO

ahora agregar la carpeta compartida de la siguiente forma

[public]
comment = PUBLIC
path = /home/usr/Public
writeble = yes
guest ok= yes
guest only = yes
force create mode =775
force directory mode=775

Herramientas de programación

Visual Studio Code

se baja y se instala de la pagina

Apache

sudo apt update

Instalación de apache

sudo apt install apache2

checkar que funcione

sudo systemctl status apache2

Crear un virtual Host Apache para pruebas

lo primero será crear una copia del archivo de configuración de apache, con el siguiente comando

cd /etc/apache2/sites-available/

sudo cp 000-default.conf desarrollo.com.conf

sudo nano desarrollo.com.conf 

                                                                                           
<VirtualHost *:80>
        # The SeverName directive sets the request scheme, hostname and port that
        # the server uses to identify itself. This is used when creating
        # redirection URLs. In the context of virtual hosts, the ServerName
        # specifies what hostname must appear in the request's Host: header to
        # match this virtual host. For the default virtual host (this file) this
        # value is not decisive as it is used as a last resort host regardless.
        # However, you must set it for any further virtual host explicitly.
        ServerName desarrollo.com
        ServerAlias www.desarrollo.com
        ServerAdmin webmaster@localhost
        DocumentRoot /home/usr/Documents/desarrollo

        <Directory  "/home/usr/Documents/desarrollo">
                AllowOverride All
                Require all granted
        </Directory>
        # Available loglevels: trace8, ..., trace1, debug, info, notice, warn,
        # error, crit, alert, emerg.
        # It is also possible to configure the loglevel for particular
        # modules, e.g.
        #LogLevel info ssl:warn

        ErrorLog ${APACHE_LOG_DIR}/error.log
        CustomLog ${APACHE_LOG_DIR}/access.log combined

        # For most configuration files from conf-available/, which are
        # enabled or disabled at a global level, it is possible to
        # include a line for only one particular virtual host. For example the
        # following line enables the CGI configuration for this host only
        # after it has been globally disabled with "a2disconf".
        #Include conf-available/serve-cgi-bin.conf
</VirtualHost>

# vim: syntax=apache ts=4 sw=4 sts=4 sr noet

luego debemos poner en uso el virtual host

sudo a2ensite desarrollo.com.conf

ahora debemos reiniciar el apache

sudo systemctl restart apache2

esto lo pasará a la siguiente direccion /etc/apache2/sites-enabled

Crear el directorio

Ahora debemos crear el directorio de pruebas en la carpeta documentos del usuario

mkdir /home/usr/Documents/desarrollo

hay que dar permisos correctos

sudo chown -R usr:www-data /home/usr/Documents/desarrollo/

ahora los permisos correctos

sudo chmod 770 /home/usr/Documents/desarrollo/

ahora debemos crear un index.html para que el directorio muestre algo

Configurar el archivo host

Para que todo funcione correctamente debemos configurar el archivo host

sudo nano /etc/hosts

luego debemos añadir lo siguiente para que redireccione correctamente

192.168.0.4 desarrollo.com

CURL

para descargar desde consola

sudo apt install curl

PHP

Instalar PHP

sudo apt update && sudo apt upgrade

sudo apt -y install php php-common

Probando si ya tenemos php

php -v

ahora que ya tenemos php sale asi

Para comprobar la configuración del php creamos un archivo con lo siguiente

<?php

// Muestra toda la información, por defecto INFO_ALL
phpinfo();

// Muestra solamente la información de los módulos.
// phpinfo(8) hace exactamente lo mismo.
phpinfo(INFO_MODULES);

?>

Todavía falta instalar los modulos y addons

sudo apt -y install php-cli php-fpm php-json php-pdo php-mysql php-zip php-gd  php-mbstring php-curl php-xml php-pear php-bcmath

y para el servidor apache instalar

sudo apt -y install libapache2-mod-php

php7.4-intl

Extension Internacional de PHP,

sudo apt install php7.4-intl

DROPBOX

sudo apt install python

sudo wget -O /usr/local/bin/dropbox "https://www.dropbox.com/download?dl=packages/dropbox.py"

sudo chmod +x /usr/local/bin/dropbox

dropbox

Tiene una variedad de comandos en linea, lo que se ha instalado con lo anterior es la CLI de dropbox para usar desde consola, al ejecutar dropbox nos desplegará la lista de comandos

ote: use dropbox help <command> to view usage for a specific command.

 autostart    automatically start Dropbox at login
 exclude      ignores/excludes a directory from syncing
 filestatus   get current sync status of one or more files
 help         provide help
 lansync      enables or disables LAN sync
 ls           list directory contents with current sync status
 proxy        set proxy settings for Dropbox
 puburl       get public url of a file in your Dropbox's public folder
 running      return whether Dropbox is running
 sharelink    get a shared link for a file in your Dropbox
 start        start dropboxd
 status       get current status of the dropboxd
 stop         stop dropboxd
 throttle     set bandwidth limits for Dropbox
 update       download latest version of Dropbox
 version      print version information for Dropbox

Es necesario instalar el daemon de dropbox y actualizarlo, para ello ejecutamos el siguiente comando

dropbox update 

ahora pedira instalar el servicio de dropbox

para listar los directorios de la cuenta de dropbox hacer lo siguiente

dropbox ls

una vez se instala el servicio empezará a sincronizar en la carpeta de dropbox /home/usr/Dropbox

para ver como va la sincronización podemos usar el siguiente comando

dropbox status

Rclone

Bajar de aquí https://rclone.org/

sudo dpkg -i rclone-v1.59.2-linux-amd64.deb

rclone config

para configurar el rclone y usarlo con google debemos crear una credenciales de api de google, para ello debemos ir a la pa

https://console.cloud.google.com/apis/

debemos crear un nuevo proyecto o bien seleccionar uno existente, yo lo hice en uno ya existente

y ahora debemos ir a la parte izquierda donde dice credenciales, lo que hay que hacer es generar una nueva token para ingresarlo en el Rclone y asi que se pueda conectar a mi cuenta de google

una vez en credenciales podemos seleccionar lo siguiente

seleccionamos la opcion de ID de cliente de OAuth

Seleccionar App de escritorio

poner un nombre y crear

ahi generar la clave secreta y el id de cliente para Rclone

Volviendo a Rclone ahi seleccionar la opción de google

ahora ingresar el id cliente que generamos en cloud engine

a continuación Rclone nos pedirá si deseamos la autoconfiguración y decimos que si

ahí debemos autorizar nuestra propia y seleccionar la cuenta con la que queremos logearnos es decir el correo de gmail donde está los archivos que deseamos de Drive

recuerda que esta autenticación expira en una hora

ahora ya podemos enviar comando que nos devuelvan por ejemplo el listado de archivos de la cuenta que he seleccionado

rclone lsd nombredelremoto:

mas informacion sobre comandos de Rclone y ayuda aqui https://www.tecmint.com/rclone-sync-files-from-cloud-storage/

ahora quier crear un directorio en google drive para guardar la informacion de mi compu

primero crearmos una carpeta en el google drive

rclone mkdir nombredelremoto:bckremoto

ahora podemos subir todo lo que tenemos ahi

rclone sync /home/usr/Google/ nombredelremoto:bckremoto

si quisiera descargar lo haria al reves

rclone nombredelremoto:bckremoto sync /home/usr/Google/

ADVERTENCIA: La sincronización de Rclone no es perfecta no resuelve conflictos ni tiene cuidado de lo que baja o sube, simplemente actualiza todo, por lo que debes ser cuidadoso, para efectos prácticos es lo equivalente a copiar y sustituir en el remoto o en el local dependiendo de la operación que este haciendo

mas información https://rclone.org/docs/

Instalar Node JS y NPM

sudo apt install nodejs npm -y

Instalar NVM

Recomiendo instalar nvm ya que permite tener a nuestra disposición las versiones de node que necesitemos simplemente con un comando, puede ser útil si necesitamos una versión más reciente o una mas antigua por cuestiones de compatibilidad de paquetes

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.2/install.sh | bash

Podríamos reiniciar el sistema operativo para que nvm quede funcional pero existe un comando que nos recarga la configuración del perfil de nuestro usuario

source ~/.profile

Comandos de NVM

Instalar la versión más reciente de node

nvm install node

Instalar una versión en específico

nvm install 14.7.0

listar las versiones disponibles remotamente

nvm ls-remote

poner en uso la versión default

nvm use node

Instalar Mysql

Descargar de aqui https://dev.mysql.com/doc/mysql-apt-repo-quick-guide/en/#apt-repo-fresh-install las claves con los repositorios de instalación e instalarlos

https://dev.mysql.com/doc/mysql-apt-repo-quick-guide/en/#apt-repo-fresh-install

sudo dpkg -i mysql-apt-config_0.8.23-1_all.deb 

sudo apt-get update

sudo apt-get install mysql-server

systemctl status mysql

Instalar DBEAVER

https://dbeaver.io/download/

sudo dpkg -i dbeaver-ce_22.2.2_amd64.deb

Ahora es probable que de un problema al momento de conectar a mysql, es necesario buscar estas dos propiedades en driver properties

Instalar PHPMyAdmin

Instalar todo los modulos de php necesarios

sudo apt -y install wget php php-cgi php-mysqli php-pear php-mbstring libapache2-mod-php php-common php-phpseclib php-mysql

Crear un usuario de mysql para phpmyadmin

sudo mysql -u root -p

Ingresamos con nuestra clave y creamos un nuevo usuario

CREATE USER 'user'@localhost IDENTIFIED BY 'password';

GRANT ALL PRIVILEGES ON *.* TO 'yec'@localhost ;

FLUSH PRIVILEGES ;

wget https://www.phpmyadmin.net/downloads/phpMyAdmin-latest-all-languages.tar.gz

sudo tar xvf phpMyAdmin-latest-all-languages.tar.gz

sudo mv phpMyAdmin-*-all-languages/ /var/www/html/phpmyadmin

ahora debemos crear la clave secreta y el archivo de configuracion

cd /var/www/html

sudo cp phpmyadmin/config.sample.inc.php phpmyadmin/config.inc.php

sudo mkdir /var/www/html/phpmyadmin/tmp

openssl rand -base64 32

sudo nano /var/www/html/phpmyadmin/config.inc.php

$cfg[‘blowfish_secret’] = ‘your-key‘; /* YOU MUST FILL IN THIS FOR COOKIE AUTH! */

Ir al final del archivo y ponerle lo siguiente

$cfg['TempDir'] = '/var/www/html/phpmyadmin/tmp';

Dar permisos al directorio

sudo chown -R www-data:www-data /var/www/html/phpmyadmin

sudo nano /etc/apache2/conf-available/phpmyadmin.conf

Alias /phpmyadmin /var/www/html/phpmyadmin

<Directory /var/www/html/phpmyadmin/>
   AddDefaultCharset UTF-8
   <IfModule mod_authz_core.c>
          <RequireAny>
      Require all granted
     </RequireAny>
   </IfModule>
</Directory>

<Directory /var/www/html/phpmyadmin/setup/>
   <IfModule mod_authz_core.c>
     <RequireAny>
       Require all granted
     </RequireAny>
   </IfModule>
</Directory>

sudo a2enconf phpmyadmin.conf

sudo systemctl restart apache2

http://127.0.0.1/phpmyadmin/

Instalar COMPOSER

Para instalar composer necesitamos ya tener disponible php cli en nuestro sistema, bajar el instalador de composer de aquí y luego correo el siguiente comando, al bajar tendremos cualquiere de los dos archivos siguientes

• installer
• composer-setup.php

para instalar globalmente los dejaremos en el directorio bin

sudo php installer --install-dir=/usr/local/bin --filename=composer

Al terminar ese comando ya puede correr el siguiente

composer 

Mostrará lo siguiente

---

¿Que es Git?

Git es el software de control del versiones que se utiliza para compartir código con tus colaboradores. Ideal para controlar las versiones, git te permite realizar un seguimiento completo de los cambios en el código y evitar errores.

Mas de una vez me ha pasado que realizo un cambio en el código de un programa que estoy realizando y por error cambio algo que no debí haber cambiado, con git puedo restaurar un proyecto a su estado inicial.

También me permite combinar el código de 2 programadores o mas en uno solo y así integrar los cambios de un proyecto de software.

¿Que es Github ?

Github es una plataforma en linea donde alojar tu código. Antes de la llegada de Github (2008) tu mismo tenías que instalar tu servidor local para poder compartir código, también se podía hacer en un servidor en la nube, pero entonces había que crearlo y era privado, lo cual hacia mas difícil su mantenimiento.

Con Github tenemos una plataforma en linea fácil de usar para alojar nuestros proyectos de código de manera gratuita y con todas las ventajas del manejo de versiones que nos ofrece git.

Al día de hoy Github ha sido comprado por microsoft y se ha convertido en la plataforma en linea mas importante para alojar compartir y mantener el codigo de multiples proyectos.

Instalar Git

sudo apt update
sudo apt install git
git --version

Iniciar un repositorio

git init

Agregar los archivos que se han cambiado al working tree

git add .

Una vez añadidos al staging area se debe hacer un commit

git commit -m "este es mi primer commit"

Ese comando permite enviar los archivos a una especie de base de datos donde puedes colocar los archivos cuyo estado queremos siempre memorizar.

Configurar GIT con nombre y usuario

Asi es como se configura el usuario y correo

git config --global user.name "Tu nombre aquí"

git config --global user.email "tu_email_aquí@example.com"

Como ver el estado de los archivos

Recordamos los pasos para añadir a GIT

git init 
git add .
git status 

El comando status mostrará los cambios pendientes de confirmar

On branch master
Changes to be committed:
  (use "git reset HEAD <file>..." to unstage)

	modified:   readme.html

ahora que vemos que tenemos pendientes archivos de mandar al commit o más bien de confirmar ya podemos hacer los siguiente:

git commit -m "mensaje para el commit"

Github

Como crear un token de acceso

Ahora debemos configurar

Con el token debemos pegarlo siempre que lo pida en lugar de la contraseña y funciona bien, por eso debemos almacenarlo ya que no lo podremos ver nuevamente, si lo perdemos habrá que generar otro

Clonar un Repo

se clona con la dirección https o bien con el github-cli pero nosotros lo haremos siempre con la url

ejemplo de clonar el siguiente repositorio

https://github.com/Jerga99/exchangario.git

Git Clone https://github.com/Jerga99/exchangario.git

Subir un repo

Para poder subir la información a un repo debemos previamente crear el repo en la web

	estos son los comandos que da GItHub
	echo «# newrepo» >> README.md git init git add README.md git commit -m «first commit» git branch -M main git remote add origin https://github.com/YECAPP/reponew.git git push -u origin main

Si deseo subir al repo creado debo agregar el repositorio remoto y luego pushear

git remote add origin https://github.com/YECAPP/newrepo.git

y luego el push

git push -u origin master

Con esto ya se puede ver en linea el push que acabamos de hacer

El GitHub Cli

GitHub CLI es una interfaz de línea de comandos (CLI) para interactuar con GitHub a través de la terminal de comandos en lugar de utilizar la interfaz gráfica de usuario (GUI) en el sitio web de GitHub.

Con GitHub CLI, los desarrolladores pueden realizar tareas comunes de GitHub, como crear y clonar repositorios, crear y revisar solicitudes de extracción, revisar problemas y realizar comentarios, todo desde la línea de comandos.

GitHub CLI está disponible para Windows, Mac y Linux, y está diseñado para ayudar a los desarrolladores a trabajar de manera más eficiente en la línea de comandos y facilitar la integración de GitHub en sus flujos de trabajo diarios. Con GitHub CLI, los desarrolladores pueden realizar tareas de GitHub de manera más rápida y eficiente, lo que les permite centrarse en escribir código de alta calidad y colaborar con otros desarrolladores.

Instalar GitGub CLI

Instalamos según la documentación oficial

type -p curl >/dev/null || (sudo apt update && sudo apt install curl -y)

El comando anterior verifica si no esta instalado curl y sino lo esta, lo instala para que podamos ejecutar el comando que sigue, que es :

curl -fsSL https://cli.github.com/packages/githubcli-archive-keyring.gpg | sudo dd of=/usr/share/keyrings/githubcli-archive-keyring.gpg

Este comando descarga y agrega la clave de autenticación de paquete para GitHub CLI al almacén de claves del sistema, lo que permite al sistema verificar y descargar paquetes de GitHub CLI de manera segura y autenticada.

sudo chmod go+r /usr/share/keyrings/githubcli-archive-keyring.gpg 

echo "deb [arch=$(dpkg --print-architecture) signed-by=/usr/share/keyrings/githubcli-archive-keyring.gpg] https://cli.github.com/packages stable main" | sudo tee /etc/apt/sources.list.d/github-cli.list > /dev/null 

sudo apt update 

sudo apt install gh -y

El comando anterior completa la instalación

Hacer que Github no pida a cada rato las credenciales

Ahora que ya tenemos el Github Cli ya podemos guardar las credenciales para que no las pida a cada rato con el comando

gh auth login

---

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

Como instalar 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.1

A 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@latest

A 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

---

El box-sizing

Sirve para que el width de una caja se pueda mantener constante a su valor definido por el width

El Display

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

Display Block

Block : usa todo el ancho disponible dentro del marco

Ejemplos de elementos que tienen este comportamiento

• <div>
• <h1> <h6>
• <p>
• <form>
• <header>
• <footer>
• <section>

Display Inline

Inline: muestra todo junto

Ejemplos de elementos que tienen inline

• <span>
• <a>
• <img>

Cambiando el Display por default

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;
}

Display None

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

visibility:hidden por el contrario no lo remueve solo lo hace no visible, dejando siempre ocupado el espacio que tiene originalmente

Centrar horizontalmente

Si se desea centrar horizontalmente se pueden usar dos combinaciones sencillas para lograr el efecto deseado: Max-Width y Margin:Auto

Max-Width

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.

Margin : Auto

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;
}

Position

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

Static

Esta es la posición por default de los elementos y no se ve afectada de nnguna manera por los posibles valores

• Left
• Top
• Right
• Bottom

Relative

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

Fixed

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

Absolute

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.

Sticky

La posición stickcky se pega al top de la pantalla cuando se alcanza

Z-index

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;
}

Overflow

determina el comportamiento de lo que pasa cuando un elemento contiene mas texto del que puede soportar

visible

el contenido se muestra de todas formas aunque la caja no pueda contenerlo

div {
  overflow: visible;
}

hidden

El contenido que no cabe dentro de la caja, se oculta

div {
  overflow: hidden;
}

scroll

se muestran unas barras de navegación en la caja para poder hacer Scroll al contenido

div {
  overflow: scroll;
}

auto

El navegador decide que hacer y cuando mostrar la barra de scroll

div {
  overflow: auto;
}

overflow-x overflow-y

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 */
}

Float

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 :

• left
• right
• none
• inherit

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

Conclusión

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.

---

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 in

El 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-zip

Algunos 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 restart

Con esto quedo solucionado, y pude generar el reporte en excel que estaba necesitando

---

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:

Paso 1 ) Crear un nuevo proyecto

Crear un nuevo proyecto con el siguiene comando

ng new NuevoProyecto

Al 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

Paso 2) Instalar librerías complementarias

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 version

Si 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.

Paso 3) Instalar 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 --save

Al terminar debes tener algo como la siguiente imagen

Paso 4) Instalar material

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/material

A 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.

Paso 5) Probar que el material funciona

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:

Material List

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

Material Icons

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>

Firebase

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 { }

Creando el modelo de la base de datos

Comando para crear el modelo

ng generate class nuevo/user --type=model

importar al componente que queremos usarlo

import {User } from '../nuevo/user.model';

Una vez importado hay que delcararlo dentro de la clase del componente

---

Que es el DOM

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.

Estrutura básica de arbol de un DOM

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.

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.

1. Arbol del DOM
   1. Elemento Raiz
      1. Elemento Hijo1
         1. Texto del Elemento
      2. Elemento Hijo 2
         1. Texto del Elemento

Lo anterior es una representación simple de un DOM, retomaremos mas adelante esta estructura para explicar un par de cosas.

Que se necesita para leer XML con FOXPRO

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.

MSXML y los servicios XML

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,

Historia de MSXML

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.

Trabajar con XML y FOXPRO

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.

Leer Un Archivo XML con FOXPRO

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:

Paso 1) Crear el objeto MSXML

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)

Paso 2) Obtener algun nodo

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

Paso 3) Extraer el texto de dicho nodo.

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.text

La 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.text

El 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.

Entender las rutas de acceso a los nodos

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

La propiedad XML de un node

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.xml

Salida :

<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.

Recorrer los elementos de un XML en FOXPRO

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).text

Recuerda 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
ENDFOR

La 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 

Crear un archivo XML con FOXPRO

Próximamente

---