Con la llegada de Internet y la Word Wide Web han ocurrido grandes cambios y avances tecnológicos en el área de la Informática y las comunicaciones, un ejemplo de ello son las redes. Antes con terminales tontos conectados con cables en redes locales, ahora con terminales inteligentes conectados virtualmente en redes sin fronteras, así mismo han ocurrido grandes cambios en el diseño de aplicaciones, en especial en el diseño de aplicaciones web, es por ello que nacen los primeros framework para el desarrollo de aplicaciones WEB, como es el caso de Perl con (Mojolicious, Dancer, Gantry, Jifty, CGI::Application, Mason, Interchange, Catalyst, entre otros), java con (Apache Click, Google Web Toolkit, Apache Wicket, Spring, JavaServer Faces, Struts, entre otros), en el caso de PHP con (PhalconPHP, Lamplighter, Lexa-Tools, Yii, Sapphire, CodeIgniter, MODX, CakePHP, symfony, Zend Framework, entre otros), y así una larga lista de framework diseñados cada uno para interactuar del lado servidor con los diferentes lenguajes de programación que existen en el mercado.
BASIS Internacional no se quedo atrás y desarrollo el BWU el cual no tuvo gran éxito, tal vez debido a que por aquella época saco al mercado el BBj.
Este tutorial, tiene como objetivo ayudar a la comunidad de desarrolladores de Business Basic (de la manera mas didáctica y sencilla posible) a crear sus propias aplicaciones web, suministrando el framework necesario para interactuar con la web aplicando la tecnología MVC como se muestra en el siguiente grafico.
{fwBasic} es el framework que he diseñado para Business Basic y que ayudara al desarrollador a interactuar con la WEB, básicamente consta de 2 programas que son:
^GETENV.TCP:
Se encarga de leer las variables enviadas por el cliente (explorador web) y en consecuencia tomar acciones tales como: Actualizar / Eliminar registros, imprimir un reporte, etc., es importante mencionar que esta utilidad incluso puede leer variables tipo "file", es decir, archivos anexos a un formulario, como pueden ser: copia de un documento de pago o la foto de un empleado, etc.
Ejemplo:
rem "Actualiza la Base de Datos call "^GETENV.TCP","button",BUTTON$,SINFONIX_ERROR$,"UNSPACE" if BUTTON$<>"ACTUALIZA" then goto ELIMINA rem "Lee los Datos del Formulario WEB <FORM> call "^GETENV.TCP","Clasificacion",CLASF$,ERROR$,"UNSPACE" call "^GETENV.TCP","Tipo_Persona",TPERSONA$,ERROR$,"UNSPACE" call "^GETENV.TCP","Nombre",NOMBRE$,ERROR$,"UNSPACE" call "^GETENV.TCP","Titulo",TITULO$,ERROR$,"UNSPACE" call "^GETENV.TCP","RIF",RIF$,ERROR$,"UNSPACE" call "^GETENV.TCP","Direccion",DIR$,ERROR$,"UNSPACE" call "^GETENV.TCP","ZP",ZP$,ERROR$,"UNSPACE" rem "Valida los Datos if CLASF$="" ERR$=ERR$+"Debe Indicar el Tipo de Clasificacion\n" if TPERSONA$="" ERR$=ERR$+"Debe Indicar el Tipo de Persona\n" if NOMBRE$="" ERR$=ERR$+"Debe Indicar el Nombre del Contacto\n" if RIF$="" ERR$=ERR$+"Debe Indicar el Numero de RIF\n" if ERR$>"" then goto ERROR_MESG .. ..
^LHTML.TCP:
Se encarga de enviar al cliente (explorador web) la pagina HTML con los datos solicitados, cuenta con características especiales, tales como:
...Codigo de cliente: $CLIENTE$...", la variable "$CLIENTE$" será reemplazada por "0010"
FOR/NEXT", que permite crear bucles interactivos dentro de la pagina Web, de esta forma repetiremos código que muy bien pudiera corresponder a líneas, ideal para crear reportes:
Ejemplo:
<table> <tr> <th>Codigo del Cliente</th> <th>Nombre del Cliente</th> <th>Numero Telefónicos</th> </tr> <!--sii.FOR 10 --> <tr> <td>CODIGO_$sii.next$</td> <td>NOMBRE_$sii.next$</td> <td>TELEFONOS_$sii.next$</td> </tr> <!--sii.NEXT --> </table>haz clic en el siguiente link: http://localhost/cgi-bin/bb.sh?^HTML.www FOR_NEXT, para ver el ejemplo funcionando.
IF THEN ELSE FI", que permite desplegar código en función a una expresión dada:
Ejemplo:
<!--sii.IF $EXPRESION$ --> <span>Codigo de cliente : </span>$COD_CLIENTE$ <!--sii.ELSE --> <span>Codigo de Proveedor : </span>$COD_PROVEEDOR$ <!--sii.FI -->La variable "
$EXPRESION$" es evaluada en el programa Basic y este retorna el resultado el cual será 0 o 1, por ejemplo:
Ejemplo:
... loadHtml: call "^LHTML.TCP ","ED630.htm ",FUNCTION,REPLACE$,CONFIG$,ORG_REPLACE$ ... ... if REPLACE$="$EXPRESION$"then let REPLACE$=str((CONSULTA=CLIENTE)); GOTO loadHtml ...
LOAD", que permite cargar un archivo dentro de una pagina HTML, así podemos reutilizar el código, de otra manera tendríamos que repetirlo en cada pagina HTML, muy útil para crear encabezados y pie de pagina en nuestros programas:
Ejemplo:
<html>
<head>
<title>Contactos</title>
<!--sii.LOAD jqm_header -->
<div data-role="page" id="ED630">
<div data-role="header" data-position="fixed" data-tap-toggle="false" data-theme="b">
<a href="#MenuPanel" data-icon="bars" data-iconpos="notext">Menú</a>
<h1>Contactos</h1>
<a href="#" data-icon="search" data-iconpos="notext" class="ui-btn-right" title="Busquedas de Contactos" onclick="jQuery('#search_contact_form').toggle();jQuery('#search_contact_input').focus();">Search</a>
<form id="search_contact_form" style="display:none">
<input id="search_contact_input" data-type="search" placeholder="Busqueda de Contactos (o Entidades)" data-theme="a">
</form>
</div><!-- /header -->
<div data-role="main" id="single-Main" class="ui-content">
<ul id="search_contact_id" data-role="listview" data-filter="true" data-inset="true" data-input="#search_contact_input" data-sii-pgm="ED63F.sql 1,editContact" data-theme="a" data-mini="true" ></ul>
</div><!-- /main -->
<div id="MenuPanel" data-role="panel" data-position-fixed="true" data-display="reveal">
<ul data-role="listview" style="padding-right:10px">
<li data-icon="back" data-theme="b"><a href="#" data-rel="close">Menú</a></li>
<li><a href="javascript:editContact('0')" data-transition="flip">Nuevo Contacto</a></li>
<li><a href="#">Importar Contactos</a></li>
<li><a href="#">Exportar Contactos</a></li>
<li><a href="#">Configuracion</a></li>
</ul>
</div><!-- /panel -->
</div><!-- page ED630 -->
<!--sii.LOAD jqm_footer -->
</html>
call "^GETENV.TCP","name",value$,error$,flag$
name
|
Nombre de la variable a consultar, esta puede ser una variable del sistema, tal como: "QUERY_STRING" o bien una variable del formulario <form>, tal como <input name="codigo" value="0010">.
|
|
|
|
value$
|
Valor de la variable consultada, en el caso de: "QUERY_STRING" podría tener el valor "hello.bb", en el caso de un formulario: <input name="codigo" value="0010">, tendrá el valor: "0010" en el caso de un formulario que contenga un campo tipo archivo: <input type="file" name="foto_del_producto">, el valor será el nombre del archivo temporal donde se almacena el contenido del archivo enviado.
|
|
|
|
error$
|
Cualquier valor que retorne indica que el nombre de la variable a consultar no existe (normalmente retorna "1"), de otro modo retorna "" (null). |
|
|
|
flag$
|
Opciones que se pasan al programa, actualmente hay una opción que es "UNSPACE", en cuyo caso "value$" retorna sin espacios a la izquierda.
|
ejemplo:
rem 0010 "ED630.www ""6.3A*6 ""Ficha de Contactos ""CEMS, Aug, 31/2016
begin ; setesc ESC_TRAP; seterr ERR_TRAP
rem "Verifica por la variable del formulario CONFIG
call "^GETENV.TCP ","config ",CONFIG$,SINFONIX_ERROR$
if CONFIG$=""then goto new_Record
let CONFIG$=ath(CONFIG$,err=new_Record)
rem "Determina si el programa regresa
let TEMP=dec(CONFIG$(1,4)),CGI_BIN$=CONFIG$(5,TEMP),CONFIG$=CONFIG$(5+TEMP)
if CGI_BIN$<>"ED630.www "then goto new_Record
rem "Codigo del registro a actualizar
let TEMP=dec(CONFIG$(1,4)),K0$=CONFIG$(5,TEMP),CONFIG$=CONFIG$(5+TEMP)
goto edit_Record
new_Record:
rem "Verifica por la variable del Sistema QUERY_STRING
call "^GETENV.TCP ","query_string ",QUERY_STRING$,SINFONIX_ERROR$
let QUERY_STRING$=QUERY_STRING$+""rem "cgi-bin
let TEMP=pos(""=QUERY_STRING$); if TEMP=0 then goto continue
let CGI_BIN$=QUERY_STRING$(1,TEMP-1),QUERY_STRING$=QUERY_STRING$(TEMP+1)
if CGI_BIN$<>pgm(-1) then goto continue
rem "Codigo del Registro a ACTUALIZAR
let TEMP=pos(""=QUERY_STRING$); if TEMP=0 then goto continue
let SQL$=QUERY_STRING$(1,TEMP-1),QUERY_STRING$=QUERY_STRING$(TEMP+1)
rem "Pagina a CARGAR
let TEMP=pos(""=QUERY_STRING$); if TEMP=0 then goto continue
let PAGE$=QUERY_STRING$(1,TEMP-1),QUERY_STRING$=QUERY_STRING$(TEMP+1)
rem "Verifica la acción a realizar (Preview | Edit | .. )
let TEMP=pos(""=QUERY_STRING$); if TEMP=0 then goto continue
let ACTION$=QUERY_STRING$(1,TEMP-1),QUERY_STRING$=QUERY_STRING$(TEMP+1)
let ACTION$=cvs(ACTION$,4)
continue:
...
...
end_of_program:
release
call "^LHTML.TCP","html_name",function,replace$,config$,org_replace$
html_name
|
Nombre de la pagina html a enviar al cliente Web, normalmente es un archivo con extensión .html.
|
|
|
|
function
|
La acción a realizar, Al invocar la aplicación con el valor:
0 o 1 inicia el envió de la pagina web, Al retornar el programa con el valor:
0 Termino de enviar la pagina html al cliente Web, finaliza el programa. |
|
|
|
replace$
|
Variable de Intercambio de datos, normalmente para rellenar variables contenidas en la pagina. |
|
|
|
config$
|
Variable de control Interna (luego analizaremos su estructura), |
|
|
|
org_replace$
|
Valor original de la variable replace$.Ejemplo: replace$=" CODIGO", mientras que org_replace$="Codigo ", replace$ obtiene el valor en mayúsculas y sin espacios a la izquierda de la variable org_replace$, con esto podemos afirmar que {fwBasic} es: case insensitive
|
ejemplo:
... ... continue: gosub read_Record if PAGE$=""then let PAGE$="0 "; rem "Pagina por DEFAULT if cvs(ACTION$,4)="PREVIEW "then goto preview_Record rem "Despliega el Registro en HTML let FUNCTION=1; goto loadHtml loadHtml_Continue: let FUNCTION=2 loadHtml: call "^LHTML.TCP ","ED63 "+PAGE$,FUNCTION,REPLACE$,CONFIG$,ORG_REPLACE$ if FUNCTION=0 then goto end_of_program if REPLACE$="$KEY$"then let REPLACE$ = hta(K0$); goto loadHtml_Continue if REPLACE$="$CODIGO_CLIENTE$"then let REPLACE$ = codigo$; goto loadHtml_Continue if REPLACE$="$NOMBRE_CLIENTE$"then let REPLACE$ = nombre$; goto loadHtml_Continue rem "Valor no definido let REPLACE$=""; goto loadHtml_Continue ... ... end_of_program: release
El primer paso para usar {fwBasic} y comenzar a desarrollar tus aplicaciones WEB es tener un servidor web instalado en la maquina donde desarrollas tus programas, yo recomiendo el Servidor Web Apache ya que es el mas difundido a nivel Mundial y puedes instalarlo en cualquier plataforma, Linux, Windows, Etc.
En Internet encontraras muchos tutoriales de como hacerlo, aquí les dejo un link donde comenzar:
para WINDOW puede comenzar a buscar aquí:
Es importante antes de continuar que verifiques si tu servidor WEB esta instalado correctamente, esto puedes hacerlo colocando en la barra de direcciones del explorador web: http://localhost, (si estas en la maquina donde instalaste apache, si no, reemplaza "localhost" por la dirección IP de la maquina donde esta instalado apache), si te aparece la pagina de bienvenida: "apache2 *(version)* Default Page" es porque todo va bien, puedes continuar con los siguientes pasos.
Una vez que tienes instalado tu servidor WEB el siguiente paso es instalar en el directorio /cgi-bin/ el Script que ejecuta el interprete de Business Basic que a su vez ejecutara tus programas, aquí les dejo una versión (para Linux y otra para Windows), que podrán mantener o adaptar a sus necesidades, el ejemplo lo hacemos con la versión del lenguaje Pro5 y Visual/pro5 de BASIS Internacional, haz los ajustes de acuerdo a la versión de Business Basic que utilices:.
bb.sh: (versión para Linux)
#!/bin/sh # # bb.sh 1.0 1999/07/17 # by (por): Carlos Mendoza, Julio 1985 # Copyright (c) 1999-2015 Sistemas INGENIX 21, C.A. # # INGENIX 21 grants you a royalty free license to use or modify this # software provided that this copyright notice appears on all copies. # This software is provided "AS IS,"without a warranty of any kind. # # INGENIX 21 le otorga una licencia gratuita para usar y/o modificar # este software siempre que mantenga este COPYRIGHT en todas las copias. # Este software es entregado "COMO ESTA ", sin ningun tipo de garantia. # echo "Content-type: text/html; charset=iso-8859-1 "; echo "Expires: 0 "; echo ""; echo '<!DOCTYPE html >' # Indicar los Directorios donde están instalados: # pro5, config.bbx y tus programas hechos en pro5 BB_DIR=/; export BB_DIR; # tus programas en pro5 BB_CMD=/basis/pro5; export BB_CMD; # directorio donde esta pro5 BB_CFG=$BB_CMD/config.bbx; export BB_CFG; # donde esta el config.bbx exec $BB_CMD/pro5 -w2048 -tIO -c$BB_CFG $BB_DIR/tutorial/init.tcp - $BB_DIR 2 >&1;
bb.sh: (versión para Windows)
#!/usr/bin/perl
#
# bb.sh 1.0 1999/07/17
# by (por): Carlos Mendoza, Julio 1985
# Copyright (c) 1999-2015 Sistemas INGENIX 21, C.A.
#
# INGENIX 21 grants you a royalty free license to use or modify this
# software provided that this copyright notice appears on all copies.
# This software is provided "AS IS,"without a warranty of any kind.
#
# INGENIX 21 le otorga una licencia gratuita para usar y/o modificar
# este software siempre que mantenga este COPYRIGHT en todas las copias.
# Este software es entregado "COMO ESTA ", sin ningun tipo de garantia.
#
use Time::Local;
use Socket;
print "Content-type: text/html; charset=iso-8859-1\n ";
print "Expires: 0\n ";
print "\n ";
print "<!DOCTYPE html >\n ";
#
# Sub Rutina para Seleccionar el archivo de Intercambio
sub SwapFile {
$connect = 1;
while (open (STATUS, "$tmp/$in$connect.txt ")) {
close (STATUS);
if ( $connect >8 ) {
for ( ; $connect >0; $connect--) {
$del1 = unlink "$tmp/$out$connect.txt ";
$del2 = unlink "$tmp/$out$connect\_ren.txt ";
if ( $del1 + $del2 == 0 ) {
unlink "$tmp/$in$connect.txt ";
}
}
}
$connect++;
}
open (STATUS_STDIN, ">$tmp/$in$connect.txt ");
return $connect;
}
#
# Sub Rutina para enviar los resultados al cliente WEB
sub SendData {
seek (STATUS, $pos, 0);
while (<STATUS >) { print STDOUT; }
seek (STATUS, 0, 1);
$pos = tell (STATUS);
}
#
# Rutina para Definir el Entorno de Trabajo
$BB_DIR = "\\"; # tus programas en pro5
$BB_CMD = "\\basis\\pro5 "; # directorio donde esta pro5
$BB_CFG = "$BB_CMD\\config.bbx "; # donde esta el config.bbx
$driver = "c ";
$dirtmp = "tmp ";
$tmp = "$driver:/$dirtmp ";
$in = "fl_in ";
$out = "fl_out ";
$connect = SwapFile();
$file_in = "$tmp/$in$connect.txt ";
$file_out = "$tmp/$out$connect.txt ";
$file_ren = "$tmp/$out$connect\_ren.txt ";
$pos = 0;
#
# Rutina para Ejecutar VPro5
binmode(STDIN,":raw ");
binmode(STATUS_STDIN,":raw ");
while (read (STDIN,$_,65535)) {
print STATUS_STDIN;
}
system ("START /B $BB_CMD\\vpro5 -w2048 -c$BB_CFG $BB_DIR\\tutorial\\init.tcp - $BB_DIR <$driver:\\$dirtmp\\$in$connect.txt >$driver:\\$dirtmp\\$out$connect.txt ");
#
# Rutina para enviar los resultados al cliente WEB
while (!(open (STATUS, $file_out))) {
}
while (open (STATUS, $file_out)) {
if ( $pos <( stat (STATUS) )[7] ) {
SendData ();
} else {
sleep (.5);
}
close (STATUS);
rename ($file_out,$file_ren);
}
if (open (STATUS, $file_ren)) {
SendData ();
close (STATUS);
}
close (STATUS_STDIN);
sleep (1);
#
# Rutina para Eliminar los Archivos de Intercambio (Temporales)
unlink $file_ren;
unlink $file_in;
NOTAS:
# chmod a+rx /var/www/bin/bb.sh
# a2enmod cgid # service apache2 reload
READ.ME:
# # Este directorio contiene los Script para acceder al Servidor WEB # a traves de fwBasic. # # linux - Continue los Script para Linux # windows - Continue los Script para Windows # # Contenido de cada Directorio bb.sh # Se utiliza por defecto para acceder al servidor (default) bb_ngz.sh # Desactiva la funcion gZip requerido por la Barra de Progreso # ver Ejemplo: cliente4.www, Herramienta: Reporte de Contacto. bb_json.sh # para solicitar datos en formato JSON # ver Ejemplos: cliente6.htm, cliente7, 8 y 9.
Antes de continuar debes verificar que todo esta bien, para ello entra a modo consola del lenguaje Business Basic y haz tu primer programa para la WEB! ;))
hello.bb:
0010 print "<H1>Hola Mundo!!<H1>" 0020 release >save "/tutorial/hello.bb"
y luego, en la barra de direcciones del explorador web colocas: http://localhost/cgi-bin/bb.sh?hello.bb, si todo va bien debe aparecer en el explorador web:
Ejemplo:
Esta sección tiene como objetivo dar a conocer cada uno de los pasos que se involucran al momento de desarrollar aplicaciones para la web, comenzando por la creación de la interfaz web escrita en código html, luego el código javascript que interactúa con dicha interfaz y por ultimo el desarrollo del programa en Business Basic que interactúa con el cliente desde el lado servidor.
<html> <head> <title>Registro de Cliente</title> </head> <body> <form name="cliente" action="/cgi-bin/bb.sh?cliente.www" method="POST"> <h1>Registro de Clientes</h1> <pre> Codigo : <input name="codigo"> Nombre : <input name="nombre"> Direccion : <input name="direccion"> Telefono : <input name="telefonos"> eMail : <input name="email"> </pre> <input type="submit" value="Envia"> </form> </body> </html>Guardamos la interfaz web con el nombre "cliente.htm" y lo colocamos en el directorios donde tenemos nuestros programas, en el ejemplo que damos en este tutorial utilizamos el directorio /tutorial/.
0010 rem 0010"cliente.www""Registro de Clientes (Nuevos)"
0020 begin ; seterr 9030
0030 open (1)"cliente.db"
0100 rem ^100
0110 rem "Verifica si la solicitud es GET / POST
0120 call "^GETENV.TCP","REQUEST_METHOD",REQUEST_METHOD$,ERROR$,"UNSPACE"
0130 if REQUEST_METHOD$<>"GET" then goto 5010
1000 rem 1000
1010 rem "Metodo: GET (Despliega la pagina HTML)
1020 let FUNCTION=1; goto 1050
1030 rem
1040 let FUNCTION=2
1050 call "^LHTML.TCP","cliente.htm",FUNCTION,REPLACE$,CONFIG_TCP$,ORG_REPLACE$
1060 if FUNCTION=0 then goto 9060
1070 goto 1040
5000 rem 5000
5010 rem "Metodo: POST (Lee la pagina WEB)
5020 rem
5030 rem "Lee los Datos del formulario "cliente.htm"
5040 call "^GETENV.TCP","codigo",CODIGO$,ERROR$,"UNSPACE"
5050 call "^GETENV.TCP","nombre",NOMBRE$,ERROR$,"UNSPACE"
5060 call "^GETENV.TCP","direccion",DIRECCION$,ERROR$,"UNSPACE"
5070 call "^GETENV.TCP","telefonos",TELEFONOS$,ERROR$,"UNSPACE"
5080 call "^GETENV.TCP","email",EMAIL$,ERROR$,"UNSPACE"
5100 rem ^100
5110 rem "Valida los Datos del Formulario
5120 if CODIGO$="" then let ERR$=ERR$+"Indique Codigo del Cliente\n"
5130 if NOMBRE$="" then let ERR$=ERR$+"Indique Nombre del Cliente\n"
5140 if DIRECCION$="" then let ERR$=ERR$+"Indique Direccion del Cliente\n"
5150 if TELEFONOS$="" then let ERR$=ERR$+"Indique Telefonos del Cliente\n"
5160 if EMAIL$="" then let ERR$=ERR$+"Indique eMail del Cliente\n"
5200 rem ^100
5210 if ERR$="" then goto 5310
5220 let MESG$="Error en el Formulario:\n\n"+ERR$+"\n\n"
5230 let MESG$=MESG$+"Por favor, corrija e intente nuevamente."
5240 let JAVASCRIPT$="history.back()"
5250 goto 5410
5300 rem ^100
5310 rem "Actualiza el Registro
5320 write (1,key=CODIGO$)NOMBRE$,DIRECCION$,TELEFONOS$,EMAIL$
5330 rem
5340 let MESG$="El Registro "+CODIGO$+" "+NOMBRE$+" fue Actualizado"
5350 let JAVASCRIPT$="window.location.href=""/cgi-bin/bb.sh?cliente.www"""
5360 goto 5410
5400 rem ^100
5410 rem "Interaccion con el Cliente WEB
5420 print "<script>"
5430 print " alert('"+MESG$+"');"
5440 print " "+JAVASCRIPT$+";"
5450 print "</script>"
5460 goto 9070
9000 rem 9000
9010 rem
9020 rem "Standard I/O Error
9030 print "Ocurrio un Error "+str(err)+" en la linea "+str(tcb(5))+"\n\n"
9040 print "Contacte al administrador del Sistema"
9050 rem
9060 rem "End of Program
9070 release
>save "/tutorial/cliente.www"
Guardamos el programa Business Basic con el nombre "cliente.www" y lo colocamos en el directorios donde tenemos nuestros programas, en el ejemplo que damos en este tutorial utilizamos el directorio /tutorial/.En el tutorial 1 desarrollamos la aplicación para Registrar Clientes pero dicha versión no permite Modificar y/o Eliminar Clientes, en esta parte del tutorial vamos a re-escribir la aplicación para que permita Modificar y/o Eliminar, con esto tendremos una Ficha de Clientes completa, que permite actualizar la base de datos incluyendo, modificando y eliminando registros.
<html>
<head>
<title>Ficha de Clientes</title>
<script>
function loadCliente(codigo) {
window.location.href="/cgi-bin/bb.sh?cliente2.www "+codigo;
}
</script>
</head>
<body>
<form name="cliente" action="/cgi-bin/bb.sh?cliente2.www" method="POST">
<h1>Ficha de Clientes</h1>
<pre>
Codigo : <input name="codigo" value="$codigo$">
Nombre : <input name="nombre" value="$nombre$">
Direccion : <input name="direccion" value="$direccion$">
Telefono : <input name="telefonos" value="$telefonos$">
eMail : <input name="email" value="$email$">
</pre>
<input name="button" type="submit" value="Graba">
<input name="button" type="submit" value="Elimina">
</form>
<hr>
<table border="0" width="100%">
<tr>
<th bgcolor="#000080"><font color="#FFFF00">codigo</font></th>
<th bgcolor="#000080"><font color="#FFFF00">nombre</font></th>
<th bgcolor="#000080"><font color="#FFFF00">direccion</font></th>
<th bgcolor="#000080"><font color="#FFFF00">telefonos</font></th>
<th bgcolor="#000080"><font color="#FFFF00">email</font></th>
<th bgcolor="#000080"><font color="#FFFF00">accion</font></th>
</tr><!--sii.FOR 1 -->$NEXT_RECORD$
<tr>
<td>$codigo$</td>
<td>$nombre$</td>
<td>$direccion$</td>
<td>$telefonos$</td>
<td>$email$</td>
<td><button onclick="loadCliente('$codigo$')">Editar</button></td>
</tr><!--sii.NEXT -->
</table>
</body>
</html>
Guardamos la interfaz web con el nombre "cliente2.htm" y lo colocamos en el directorios donde tenemos nuestros programas, en el ejemplo que damos en este tutorial utilizamos el directorio /tutorial/.
0010 rem 0010 "cliente2.www ""Ficha de Clientes "0020 begin ; seterr 9030
0030 open (1)"cliente.db "0040 iolist NOMBRE$,DIRECCION$,TELEFONOS$,EMAIL$
0100 rem ^100
0110 rem "Verifica si la solicitud es GET / POST
0120 call "^GETENV.TCP ","REQUEST_METHOD ",REQUEST_METHOD$,ERROR$,"UNSPACE "0130 if REQUEST_METHOD$<>"GET "then goto 5010
0140 rem
0150 rem "Verifica por la variable del Sistema QUERY_STRING
0160 call "^GETENV.TCP ","query_string ",QUERY_STRING$,SINFONIX_ERROR$
0170 let QUERY_STRING$=QUERY_STRING$+""0180 rem
0190 rem "cgi-bin
0200 let TEMP=pos(""=QUERY_STRING$); if TEMP=0 then goto 1000
0210 let CGI_BIN$=QUERY_STRING$(1,TEMP-1),QUERY_STRING$=QUERY_STRING$(TEMP+1)
0220 if CGI_BIN$<>pgm(-1) then goto 1000
0230 rem
0240 rem "Codigo del Registro a ACTUALIZAR
0250 let TEMP=pos(""=QUERY_STRING$); if TEMP=0 then goto 1000
0260 let CODIGO$=QUERY_STRING$(1,TEMP-1),QUERY_STRING$=QUERY_STRING$(TEMP+1)
0270 rem
0280 read (1,key=CODIGO$,dom=0290)iol=0040
0290 rem
1000 rem 1000
1010 rem "Metodo: GET (Despliega la pagina HTML)
1020 let FUNCTION=1; goto 1050
1030 rem
1040 let FUNCTION=2
1050 call "^LHTML.TCP ","cliente2.htm ",FUNCTION,REPLACE$,CONFIG_TCP$,ORG_REPLACE$
1060 if FUNCTION=0 then goto 9060
1070 if REPLACE$="$CODIGO$"then let REPLACE$=CODIGO$; goto 1040
1080 if REPLACE$="$NOMBRE$"then let REPLACE$=NOMBRE$; goto 1040
1090 if REPLACE$="$DIRECCION$"then let REPLACE$=DIRECCION$; goto 1040
1100 if REPLACE$="$TELEFONOS$"then let REPLACE$=TELEFONOS$; goto 1040
1110 if REPLACE$="$EMAIL$"then let REPLACE$=EMAIL$; goto 1040
1120 rem
1130 if REPLACE$<>"$NEXT_RECORD$"then goto 1250
1140 if RECORD=0 then let CODIGO$=""1150 read (1,key=CODIGO$,dom=1160)
1160 let CODIGO$=key(1,end=1230)
1170 read (1)iol=0040; let RECORD=RECORD+1
1180 rem
1190 rem "Incrementa el contador FOR/NEXT en la pagina HTML
1200 let CONFIG_TCP$(13,2)=bin(dec(CONFIG_TCP$(13,2))+1,2)
1210 let CONFIG_TCP$(15,2)=bin(dec(CONFIG_TCP$(15,2))+1,2)
1220 goto 1260
1230 let CODIGO$="",NOMBRE$="",DIRECCION$="",TELEFONOS$="",EMAIL$=""1240 goto 1260
1250 rem
1260 let REPLACE$=""; goto 1040
5000 rem 5000
5010 rem "Metodo: POST (Lee la pagina WEB)
5020 rem
5030 rem "Lee los Datos del formulario "cliente.htm "5040 call "^GETENV.TCP ","codigo ",CODIGO$,ERROR$,"UNSPACE "5050 call "^GETENV.TCP ","button ",BUTTON$,ERROR$
5060 if pos("Elimina "=BUTTON$) then goto 5510
5070 rem
5080 call "^GETENV.TCP ","nombre ",NOMBRE$,ERROR$,"UNSPACE "5090 call "^GETENV.TCP ","direccion ",DIRECCION$,ERROR$,"UNSPACE "5100 call "^GETENV.TCP ","telefonos ",TELEFONOS$,ERROR$,"UNSPACE "5110 call "^GETENV.TCP ","email ",EMAIL$,ERROR$,"UNSPACE "5200 rem ^100
5210 rem "Valida los Datos del Formulario
5220 if CODIGO$=""then let ERR$=ERR$+"Indique Codigo del Cliente\n "5230 if NOMBRE$=""then let ERR$=ERR$+"Indique Nombre del Cliente\n "5240 if DIRECCION$=""then let ERR$=ERR$+"Indique Direccion del Cliente\n "5250 if TELEFONOS$=""then let ERR$=ERR$+"Indique Telefonos del Cliente\n "5260 if EMAIL$=""then let ERR$=ERR$+"Indique eMail del Cliente\n "5300 rem ^100
5310 if ERR$=""then goto 5410
5320 let MESG$="Error en el Formulario:\n\n "+ERR$+"\n\n "5330 let MESG$=MESG$+"Por favor, corrija e intente nuevamente."5340 let JAVASCRIPT$="history.back()"5350 goto 5610
5400 rem ^100
5410 rem "Actualiza el Registro
5420 write (1,key=CODIGO$)iol=0040
5430 let MESG$="El Registro "+CODIGO$+""+NOMBRE$+"fue Actualizado "5440 goto 5550
5500 rem ^100
5510 rem "Elimina el Registro
5520 remove (1,key=CODIGO$,dom=5530)
5530 let MESG$="El Registro "+CODIGO$+""+NOMBRE$+"fue Eliminado "5540 goto 5550
5550 let JAVASCRIPT$="window.location.href=""/cgi-bin/bb.sh?cliente2.www """5560 goto 5610
5600 rem ^100
5610 rem "Interaccion con el Cliente WEB
5620 print "<script >"5630 print "alert('"+MESG$+"');"5640 print ""+JAVASCRIPT$+";"5650 print "</script >"5660 goto 9070
9000 rem 9000
9010 rem
9020 rem "Standard I/O Error
9030 print "Ocurrio un Error "+str(err)+"en la linea "+str(tcb(5))+"\n\n "9040 print "Contacte al administrador del Sistema "9050 rem
9060 rem "End of Program
9070 release
>save "/tutorial/cliente2.www"
Guardamos el programa Business Basic con el nombre "cliente2.www" y lo colocamos en el directorios donde tenemos nuestros programas, en el ejemplo que damos en este tutorial utilizamos el directorio /tutorial/.Esta sección tiene como objetivo darle a la aplicación creada anteriormente una diseño moderno, con una apariencia profesional, que se ajuste a los nuevos tiempos, para ello usaremos técnicas de ultima generación tales como: HTML5, CSS y JAVASCRIPT, en el mercado hay librerías creadas para tal fin, que ayudan a utilizar estos lenguajes haciendo del desarrollo de aplicaciones web tarea de niños, en este tutoríal vamos a utilizar jQuery y jQuery Mobile, jQuery es la librería para el desarrollo web mas utilizada a nivel mundial, luego le sigue Boostrap.
<!--sii.if $LIST_RECORD$ -->
<html>
<head>
<title>Ficha de Clientes</title>
<script>
function loadCliente(codigo) {
jQuery("body").pagecontainer("change", "/cgi-bin/bb.sh?cliente3.www "+codigo, { "reload":"true","transition":"pop" });
}
</script>
<!--sii.load jqm_header -->
<div data-role="page" id="cliente_list">
<div data-role="header" data-position="fixed" data-tap-toggle="false" data-theme="b">
<a href="#MenuPanel" data-icon="bars" data-iconpos="notext">Menú</a>
<h1>Lista de Clientes</h1>
<a href="#" data-icon="search" data-iconpos="notext" class="ui-btn-right" title="Busquedas de Clientes" onclick="jQuery('#search_contact_form').toggle();jQuery('#search_contact_input').focus();">Search</a>
<form id="search_contact_form" style="display:none">
<input id="search_contact_input" data-type="search" placeholder="Busqueda de Clientes..." data-theme="a">
</form>
</div><!-- /header -->
<div data-role="main" id="single-Main" class="ui-content">
<ul id="search_contact_id" data-role="listview" data-inset="true" data-theme="a" data-mini="true" data-sii-pgm="ED63A.sql 2 1 0000,editContact" data-filter="true" data-input="#search_contact_input">
<!--sii.for 1 -->$NEXT_RECORD$
<li><a href="#" onclick="loadCliente('$codigo$')">$nombre$</a>
</li>
<!--sii.next -->
</ul>
</div><!-- /main -->
<div id="MenuPanel" data-role="panel" data-position-fixed="true" data-display="reveal">
<ul data-role="listview" style="padding-right:10px">
<li data-icon="back" data-theme="b"><a href="#" data-rel="close">Menú</a></li>
<li><a href="/cgi-bin/bb.sh?cliente3.www NEW_RECORD" data-transition="flip">Nuevo Contacto</a></li>
<li><a href="#">Importar Contactos</a></li>
<li><a href="#">Exportar Contactos</a></li>
<li><a href="#">Configuracion</a></li>
</ul>
</div><!-- /panel -->
</div><!-- page cliente_list -->
<!--sii.load jqm_footer -->
</html>
<!--sii.else -->
<div data-role="page" id="cliente_edit">
<form name="cliente" action="/cgi-bin/bb.sh?cliente3.www" method="POST" enctype="multipart/form-data" target="connect9" data-ajax="false">
<div id="header" data-role="header" data-position="fixed" data-theme="b">
<a data-icon="back" data-iconpos="notext" class="ui-btn-left" title="Volver Atrás" data-rel="back">Back</a>
<h1>Ficha de Clientes</h1>
</div><!-- /header -->
<div data-role="main" id="cliente_edit-Main" class="ui-content">
<div class="ui-field-contain"><label>Codigo </label><input name="codigo" value="$codigo$"></div>
<div class="ui-field-contain"><label>Nombre </label><input name="nombre" value="$nombre$"></div>
<div class="ui-field-contain"><label>Direccion </label><input name="direccion" value="$direccion$"></div>
<div class="ui-field-contain"><label>Telefonos </label><input name="telefonos" value="$telefonos$"></div>
<div class="ui-field-contain"><label>eMail </label><input name="email" value="$email$"></div>
</div><!-- /main -->
<div id="footer" data-role="footer" data-position="fixed" data-theme="b">
<div data-role="navbar" data-iconpos="right">
<ul>
<li><input name="button" type="submit" data-icon="check" data-iconpos="right" value="Graba" ></li>
<li><input name="button" type="submit" data-icon="delete" data-iconpos="right" value="Elimina" onclick="return confirm('Atencion!!\n\nEsta a punto de Eliminar el Registro')"></li>
</ul>
</div><!-- /navbar -->
</div><!-- /footer -->
</form>
</div><!-- page cliente_edit -->
<!--sii.fi -->
Guardamos la interfaz web con el nombre "cliente3.htm" y lo colocamos en el directorios donde tenemos nuestros programas, en el ejemplo que damos en este tutorial utilizamos el directorio /tutorial/.
0010 rem 0010 "cliente3.www ""Ficha de Clientes "0020 begin ; seterr 9030
0030 open (1)"cliente.db "0040 iolist NOMBRE$,DIRECCION$,TELEFONOS$,EMAIL$
0100 rem ^100
0110 rem "Verifica si la solicitud es GET / POST
0120 call "^GETENV.TCP ","REQUEST_METHOD ",REQUEST_METHOD$,ERROR$,"UNSPACE "0130 if REQUEST_METHOD$<>"GET "then goto 5010
0140 rem
0150 rem "Verifica por la variable del Sistema QUERY_STRING
0160 call "^GETENV.TCP ","query_string ",QUERY_STRING$,SINFONIX_ERROR$
0170 let QUERY_STRING$=QUERY_STRING$+""0180 rem
0190 rem "cgi-bin
0200 let TEMP=pos(""=QUERY_STRING$); if TEMP=0 then goto 0300
0210 let CGI_BIN$=QUERY_STRING$(1,TEMP-1),QUERY_STRING$=QUERY_STRING$(TEMP+1)
0220 if CGI_BIN$<>pgm(-1) then goto 0300
0230 rem
0240 rem "Codigo del Registro a ACTUALIZAR
0250 let TEMP=pos(""=QUERY_STRING$); if TEMP=0 then goto 0300
0260 let CODIGO$=QUERY_STRING$(1,TEMP-1),QUERY_STRING$=QUERY_STRING$(TEMP+1)
0270 rem
0300 rem ^100
0310 let LIST_RECORD=(CODIGO$="")
0320 let TRASH$=stbl("$LIST_RECORD$",str(LIST_RECORD))
0330 if CODIGO$="NEW_RECORD "then let CODIGO$=""; goto 0360
0340 rem
0350 read (1,key=CODIGO$,dom=0360)iol=0040
0360 rem
1000 rem 1000
1010 rem "Metodo: GET (Despliega la pagina HTML)
1020 let FUNCTION=1; goto 1050
1030 rem
1040 let FUNCTION=2
1050 call "^LHTML.TCP ","cliente3.htm ",FUNCTION,REPLACE$,CONFIG_TCP$,ORG_REPLACE$
1060 if FUNCTION=0 then goto 9050
1070 if REPLACE$="$CODIGO$"then let REPLACE$=CODIGO$; goto 1040
1080 if REPLACE$="$NOMBRE$"then let REPLACE$=NOMBRE$; goto 1040
1090 if REPLACE$="$DIRECCION$"then let REPLACE$=DIRECCION$; goto 1040
1100 if REPLACE$="$TELEFONOS$"then let REPLACE$=TELEFONOS$; goto 1040
1110 if REPLACE$="$EMAIL$"then let REPLACE$=EMAIL$; goto 1040
1120 rem
1130 if REPLACE$<>"$NEXT_RECORD$"then goto 1270
1140 if LIST_RECORD=0 then goto 1270
1150 if RECORD=0 then let CODIGO$=""1160 read (1,key=CODIGO$,dom=1170)
1170 let CODIGO$=key(1,end=1250)
1180 read (1)iol=0040; let RECORD=RECORD+1
1190 rem
1200 rem "Incrementa el contador FOR/NEXT en la pagina HTML
1210 read (1,end=1280)
1220 let CONFIG_TCP$(13,2)=bin(dec(CONFIG_TCP$(13,2))+1,2)
1230 let CONFIG_TCP$(15,2)=bin(dec(CONFIG_TCP$(15,2))+1,2)
1240 goto 1280
1250 let CODIGO$="",NOMBRE$="",DIRECCION$="",TELEFONOS$="",EMAIL$=""1260 goto 1280
1270 rem
1280 let REPLACE$=""; goto 1040
5000 rem 5000
5010 rem "Metodo: POST (Lee la pagina WEB)
5020 rem
5030 rem "Lee los Datos del formulario "cliente.htm "5040 call "^GETENV.TCP ","codigo ",CODIGO$,ERROR$,"UNSPACE "5050 call "^GETENV.TCP ","button ",BUTTON$,ERROR$
5060 if pos("Elimina "=BUTTON$) then goto 5510
5070 rem
5080 call "^GETENV.TCP ","nombre ",NOMBRE$,ERROR$,"UNSPACE "5090 call "^GETENV.TCP ","direccion ",DIRECCION$,ERROR$,"UNSPACE "5100 call "^GETENV.TCP ","telefonos ",TELEFONOS$,ERROR$,"UNSPACE "5110 call "^GETENV.TCP ","email ",EMAIL$,ERROR$,"UNSPACE "5200 rem ^100
5210 rem "Valida los Datos del Formulario
5220 if CODIGO$=""then let ERROR$=ERROR$+"Indique Codigo del Cliente <BR >"5230 if NOMBRE$=""then let ERROR$=ERROR$+"Indique Nombre del Cliente <BR >"5240 if DIRECCION$=""then let ERROR$=ERROR$+"Indique Direccion del Cliente <BR >"5250 if TELEFONOS$=""then let ERROR$=ERROR$+"Indique Telefonos del Cliente <BR >"5260 if EMAIL$=""then let ERROR$=ERROR$+"Indique eMail del Cliente <BR >"5300 rem ^100
5310 if ERROR$>""then goto 5610
5400 rem ^100
5410 rem "Actualiza el Registro
5420 write (1,key=CODIGO$)iol=0040
5430 goto 5630
5500 rem ^100
5510 rem "Elimina el Registro
5520 remove (1,key=CODIGO$,dom=5530)
5530 goto 5630
5600 rem ^100
5610 rem "Interaccion con el Cliente WEB
5620 let MESSAGE$="Error en los datos del formulario:"5630 rem
5640 if ERROR$=""then let JAVASCRIPT$="<% NOT CONVERT %>goBack()"5650 run "^STDIO.TCP "5660 goto 9060
9000 rem 9000
9010 rem
9020 rem "Standard I/O Error
9030 call "^IOERR ",err,tcb(5),"cliente3.www "9040 rem
9050 rem "End of Program
9060 release
>save "/tutorial/cliente3.www"
Guardamos el programa Business Basic con el nombre "cliente3.www" y lo colocamos en el directorios donde tenemos nuestros programas, en el ejemplo que damos en este tutorial utilizamos el directorio /tutorial/.Esta sección tiene como objetivo mostrarles como trabaja {fwBasic} con los TAG html: <select>, <input type="checkbox">, <input type="radio"> & <input type="file">, para esto vamos a modificar el ejemplo del tutorial 3 y le añadiremos estos elementos que vienen a complementar los campos que puedes manejar en un formulario html.
Es importante hacer notar que con el ejemplo dado en esta sección del Tutorial introduzco una nueva técnica de como se puede desarrollar con {fwBasic}, esta nueva técnica tiene como objetivo principal la ejecución de los programas de forma mucho mas rápida, si comparan el programa cliente3.www con cliente4.www se darán cuenta que cliente3.www entra y sale de ^LHTML.TCP varias veces mientras que cliente4.www apenas entra y sale una sola vez! esto debido a que los datos de RELLENO DEL DOCUMENTO son cargados previamente antes de entrar a ^LHTML.TCP, esta demás decir que la técnica recomendada para trabajar con {fwBasic}, es la aplicada en cliente4.www.
<!--sii.if $LIST_RECORD$ -->
<html>
<head>
<title>Ficha de Clientes </title>
<script>
function loadCliente(codigo) {
jQuery("body").pagecontainer("change", "/cgi-bin/bb.sh?cliente4.www "+codigo, { "reload":"true","transition":"pop" });
}
</script>
<!--sii.load jqm_header -->
<div data-role="page" id="cliente_list">
<div data-role="header" data-position="fixed" data-tap-toggle="false" data-theme="b">
<a href="#MenuPanel" data-icon="bars" data-iconpos="notext">Menú</a>
<h1>Listado de Contactos </h1>
<a href="#" data-icon="search" data-iconpos="notext" class="ui-btn-right" title="Busquedas de Clientes" onclick="jQuery('#search_contact_form').toggle();jQuery('#search_contact_input').focus();">Search </a>
<form id="search_contact_form" style="display:none">
<input id="search_contact_input" data-type="search" placeholder="Busqueda de Clientes..." data-theme="a">
</form>
</div><!-- /header -->
<div data-role="main" id="single-Main" class="ui-content">
<ul id="search_contact_id" data-role="listview" data-inset="true" data-theme="a" data-mini="true" data-sii-pgm="ED63A.sql 2 1 0000,editContact" data-filter="true" data-input="#search_contact_input">
<!--sii.for 1 -->$NEXT_RECORD$
<li><a href="#" onclick="loadCliente('$codigo$')">$nombre$</a>
</li>
<!--sii.next -->
</ul>
</div><!-- /main -->
<div id="MenuPanel" data-role="panel" data-position-fixed="true" data-display="reveal">
<ul data-role="listview" style="padding-right:10px">
<li data-icon="back" data-theme="b"><a href="#" title="Volver Atrás" data-rel="back">Pagina Anterior </a>
<li><a href="#" onclick="loadCliente('NEW_RECORD')" data-transition="flip">Nuevo Contacto </a></li>
<li><a href="#" onclick="window.open('/cgi-bin/bb.sh?reporte.1', '', 'resizable, scrollbars, height=768')" data-transition="flip">Reporte de Contactos </a></li>
</ul>
</div><!-- /panel -->
</div><!-- page cliente_list -->
<!--sii.load jqm_footer -->
</html>
<!--sii.else -->
<div data-role="page" id="cliente_edit">
<form name="cliente" action="/cgi-bin/bb.sh?cliente4.www" method="POST" enctype="multipart/form-data" target="connect9" data-ajax="false">
<div id="header" data-role="header" data-position="fixed" data-theme="b">
<a data-icon="back" data-iconpos="notext" class="ui-btn-left" title="Volver Atrás" data-rel="back">Back </a>
<h1>Ficha de Contactos </h1>
</div><!-- /header -->
<div data-role="main" id="cliente_edit-Main" class="ui-content">
<div class="ui-grid-a">
<div class="ui-block-a" style="width:70%">
<div class="div-widget">
<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td width="5%" nowrap>
<img id="foto" class="image" src="..$image$" border="0" style="width:108 height:108" width="108" height="108" data-file="#file_image"> </td>
<div style="display:none;">
<input type="file" name="file_image" id="file_image" onchange="photoChange('#foto', event );">
<input type="text" name="file_image_delete" id="file_image_delete" onchange="photoChange('#foto','DELETE');">
</div>
<td width="95%">
<fieldset data-role="controlgroup" style="padding:10px;">
<legend><h3>Tipo de Entidad </h3></legend>
<select data-native-menu="false" name="Entidad">
<option value="">$Entidad$</option>
</select>
</fieldset>
</td>
</tr>
</table>
<fieldset data-role="controlgroup" style="padding:10px;">
<legend><h3>Datos Básicos del Contacto </h3></legend>
<div class="ui-field-contain"><label>Código </label><input name="codigo" value="$codigo$"></div>
<div class="ui-field-contain"><label>Nombre </label><input name="nombre" value="$nombre$"></div>
<div class="ui-field-contain"><label>Dirección </label><input name="direccion" value="$direccion$"></div>
<div class="ui-field-contain"><label>Teléfonos </label><input name="telefonos" value="$telefonos$"></div>
<div class="ui-field-contain"><label>eMail </label><input name="email" value="$email$"></div>
</fieldset>
</div>
</div>
<div class="ui-block-b" style="width:30%">
<div class="div-widget">
<fieldset data-role="controlgroup" class="ui-body-b" style="padding:10px;">
<legend><h3>Situación del Contacto </h3></legend>
<input type="radio" id="Status0" name="Status" value="$Status.CHECKED=0$">
<label for="Status0">Activo </label>
<input type="radio" id="Status1" name="Status" value="$Status.CHECKED=1$">
<label for="Status1">Prospecto </label>
<input type="radio" id="Status2" name="Status" value="$Status.CHECKED=2$">
<label for="Status2">Suspendido </label>
<input type="radio" id="Status9" name="Status" value="$Status.CHECKED=9$">
<label for="Status9">Inactivo </label>
</fieldset>
<fieldset data-role="controlgroup" class="ui-body-b" style="padding:10px;">
<legend><h3>Agrupación </h3></legend>
<input type="checkbox" id="Ag1" Name="Grupo" value="$Grupo.CHECKED=0$">
<label for="Ag1">Cliente de Contado </label>
<input type="checkbox" id="Ag2" Name="Grupo" value="$Grupo.CHECKED=1$">
<label for="Ag2">Cliente a Credito </label>
<input type="checkbox" id="Ag3" Name="Grupo" value="$Grupo.CHECKED=2$">
<label for="Ag3">Proveedores Nacionales </label>
<input type="checkbox" id="Ag4" Name="Grupo" value="$Grupo.CHECKED=3$">
<label for="Ag4">Proveedores Internacionales </label>
<input type="checkbox" id="Ag5" Name="Grupo" value="$Grupo.CHECKED=4$">
<label for="Ag5">Bancos Nacionales </label>
<input type="checkbox" id="Ag6" Name="Grupo" value="$Grupo.CHECKED=5$">
<label for="Ag6">Bancos Internacionales </label>
<input type="checkbox" id="Ag7" Name="Grupo" value="$Grupo.CHECKED=6$">
<label for="Ag7">Empleados Fijos </label>
<input type="checkbox" id="Ag8" Name="Grupo" value="$Grupo.CHECKED=7$">
<label for="Ag8">Empleados a Destajo </label>
<input type="checkbox" id="Ag9" Name="Grupo" value="$Grupo.CHECKED=8$">
<label for="Ag9">Persona de Contacto </label>
<input type="checkbox" id="Ag10" Name="Grupo" value="$Grupo.CHECKED=9$">
<label for="Ag10">Empresa Relacionada </label>
</fieldset>
</div>
</div>
</div>
</div><!-- /main -->
<div id="footer" data-role="footer" data-position="fixed" data-theme="b">
<div data-role="navbar" data-iconpos="right">
<ul>
<li><input name="button" type="submit" data-icon="check" data-iconpos="right" value="Graba" ></li>
<li><input name="button" type="submit" data-icon="delete" data-iconpos="right" value="Elimina" onclick="return confirm('Atencion!!\n\nEsta a punto de Eliminar el Registro')"></li>
</ul>
</div><!-- /navbar -->
</div><!-- /footer -->
</form>
</div><!-- page cliente_edit -->
<!--sii.fi -->
Guardamos la interfaz web con el nombre "cliente4.htm" y lo colocamos en el directorios donde tenemos nuestros programas, en el ejemplo que damosen este tutorial utilizamos el directorio /tutorial/
.
0010 rem 0010"cliente4.www""Ficha de Contactos"CEMS, 07/30/2017
0020 begin ; seterr 9320; open (1)"cliente.db"
0100 rem ^100
0110 rem "Verifica si la solicitud es GET / POST
0120 call "^GETENV.TCP","REQUEST_METHOD",REQUEST_METHOD$,ERROR$,"UNSPACE"
0130 if REQUEST_METHOD$<>"GET" then goto 5010
0140 rem
0150 rem "Verifica por la variable del Sistema QUERY_STRING
0160 call "^GETENV.TCP","query_string",QUERY_STRING$,SINFONIX_ERROR$
0170 let QUERY_STRING$=QUERY_STRING$+" "
0180 rem
0190 rem "cgi-bin
0200 let TEMP=pos(" "=QUERY_STRING$); if TEMP=0 then goto 0300
0210 let CGI_BIN$=QUERY_STRING$(1,TEMP-1),QUERY_STRING$=QUERY_STRING$(TEMP+1)
0220 if CGI_BIN$<>pgm(-1) then goto 0300
0230 rem
0240 rem "Codigo del Registro a ACTUALIZAR
0250 let TEMP=pos(" "<>QUERY_STRING$,-1); if TEMP=0 then goto 0300
0260 let CODIGO$=QUERY_STRING$(1,TEMP),QUERY_STRING$=QUERY_STRING$(TEMP+1)
0270 rem
0300 rem ^100
0310 let LIST_RECORD=(CODIGO$="")
0320 let TRASH$=stbl("$LIST_RECORD$",str(LIST_RECORD))
0330 rem
0340 if CODIGO$="NEW_RECORD" then let CODIGO$=""
0350 rem
0360 read (1,key=CODIGO$,dom=0380)iol=FICHA_DE_CONTACTO
0370 rem
0380 gosub 1510
0390 rem
1000 rem 1000
1010 rem "Metodo: GET (Despliega la pagina HTML)
1020 let FUNCTION=1; goto 1050
1030 rem
1040 let FUNCTION=2
1050 call "^LHTML.TCP","cliente4.htm",FUNCTION,REPLACE$,CONFIG_TCP$,ORG_REPLAC
1050:E$
1060 if FUNCTION=0 then goto 9910
1070 rem
1080 if REPLACE$<>"$NEXT_RECORD$" then goto 1400
1090 if LIST_RECORD=0 then goto 1400
1100 if RECORD=0 then let CODIGO$=""
1110 read (1,key=CODIGO$,dom=1120)
1120 let CODIGO$=key(1,end=1200)
1130 read (1)iol=FICHA_DE_CONTACTO; let RECORD=RECORD+1
1140 rem
1150 rem "Incrementa el contador FOR/NEXT en la pagina HTML
1160 read (1,end=1300)
1170 let CONFIG_TCP$(13,2)=bin(dec(CONFIG_TCP$(13,2))+1,2)
1180 let CONFIG_TCP$(15,2)=bin(dec(CONFIG_TCP$(15,2))+1,2)
1190 goto 1300
1200 rem ^100
1210 let CODIGO$="",NOMBRE$="",DIRECCION$="",TELEFONOS$="",EMAIL$=""
1220 let STATUS$="",ENTIDAD$="",GRUPO$=""
1300 rem ^100
1310 gosub 1510
1400 rem ^100
1410 let REPLACE$=""; goto 1040
1500 rem ^100
1510 rem "Carga los Datos en MEMORIA para el RELLENO DEL DOCUMENTO
1520 rem
1530 rem "Datos Basicos - <input type="text">
1540 let TRASH$=stbl("$CODIGO$",CODIGO$)
1550 let TRASH$=stbl("$NOMBRE$",NOMBRE$)
1560 let TRASH$=stbl("$DIRECCION$",DIRECCION$)
1570 let TRASH$=stbl("$TELEFONOS$",TELEFONOS$)
1580 let TRASH$=stbl("$EMAIL$",EMAIL$)
1590 rem
1600 rem "Situacion del Contacto - <input type="radio">
1610 let CHECKED$=STATUS$+$FFFF$
1620 restore STATUS
1630 dread KEY$,RECORD$,err=1660
1640 let REPLACE$="$STATUS.CHECKED="+KEY$+"$"; gosub 2010
1650 goto 1630
1660 rem
1670 rem "Agrupacion - <input type="checkbox">
1680 let CHECKED$=GRUPO$+$FFFF$
1690 restore GRUPOS
1700 dread KEY$,RECORD$,err=1730
1710 let REPLACE$="$GRUPO.CHECKED="+KEY$+"$"; gosub 2010
1720 goto 1700
1730 rem
1740 rem "Tipo de Entidad - <select><option>...</option></select>
1750 let SELECTED$=ENTIDAD$+$FFFF$,OPTIONS$=""
1760 restore ENTIDAD
1770 dread KEY$,RECORD$,err=1780; gosub 1910; goto 1770
1780 let TRASH$=stbl("$ENTIDAD$","<% NOT CONVERT %>"+OPTIONS$)
1790 rem
1800 rem "Foto de la Entidad <input type="file">
1810 call "^IMAGE.www",-2,hta(CODIGO$),FILE_IMAGE$
1820 let TRASH$=stbl("$IMAGE$",FILE_IMAGE$)
1830 rem
1840 return
1900 rem ^100
1910 rem "Manejo del <select><option>...</option></select>
1920 let OPTIONS$=OPTIONS$+"<option value="""+KEY$+""""
1930 if pos(KEY$+$FFFF$=SELECTED$) then let OPTIONS$=OPTIONS$+" selected"
1940 let OPTIONS$=OPTIONS$+">"+RECORD$+"</option>"
1950 return
2000 rem ^100
2010 rem "Manejo del <input type="CHECKBOX"> & <input type="RADIO">
2020 let TEMP$="",TEMP=pos(".CHECKED="=REPLACE$)+9; if TEMP=9 then goto 2050
2030 let TEMP$=REPLACE$(TEMP,pos("$"=REPLACE$(TEMP)+"$")-1)
2040 if pos(TEMP$+$FFFF$=CHECKED$) then let TEMP$=TEMP$+""" checked """
2050 let TRASH$=stbl(REPLACE$,"<% NOT CONVERT %>"+TEMP$)
2060 return
5000 rem 5000
5010 rem "Metodo: POST (Lee la pagina WEB)
5020 rem
5030 rem "Lee los Datos del formulario "cliente4.htm"
5040 call "^GETENV.TCP","codigo",CODIGO$,ERROR$,"UNSPACE"
5050 call "^GETENV.TCP","button",BUTTON$,ERROR$
5060 if pos("Elimina"=BUTTON$) then goto 5610
5070 rem
5080 call "^GETENV.TCP","nombre",NOMBRE$,ERROR$,"UNSPACE"
5090 call "^GETENV.TCP","direccion",DIRECCION$,ERROR$,"UNSPACE"
5100 call "^GETENV.TCP","telefonos",TELEFONOS$,ERROR$,"UNSPACE"
5110 call "^GETENV.TCP","email",EMAIL$,ERROR$,"UNSPACE"
5120 call "^GETENV.TCP","status",STATUS$,ERROR$,"UNSPACE"
5130 call "^GETENV.TCP","entidad",ENTIDAD$,ERROR$,"UNSPACE"
5140 call "^GETENV.TCP","grupo",GRUPO$,ERROR$,"UNSPACE"
5200 rem ^100
5210 rem "Valida los Datos del Formulario
5220 let ERROR$=""
5230 if CODIGO$="" then let ERROR$=ERROR$+"Indique Codigo del Cliente<BR>"
5240 if NOMBRE$="" then let ERROR$=ERROR$+"Indique Nombre del Cliente<BR>"
5250 if DIRECCION$="" then let ERROR$=ERROR$+"Indique Direccion del Cliente<BR
5250:>"
5260 if TELEFONOS$="" then let ERROR$=ERROR$+"Indique Telefonos del Cliente<BR
5260:>"
5270 if EMAIL$="" then let ERROR$=ERROR$+"Indique eMail del Cliente<BR>"
5280 if STATUS$="" then let ERROR$=ERROR$+"Indique Status del Cliente<BR>"
5290 if ENTIDAD$="" then let ERROR$=ERROR$+"Indique Entidad del Cliente<BR>"
5300 if GRUPO$="" then let ERROR$=ERROR$+"Indique Grupo del Cliente<BR>"
5310 rem
5320 rem "Valida la Foto del CONTACTO
5330 call "^IMAGE.www",0,hta(CODIGO$),"file_image",ERROR$
5340 rem
5350 if ERROR$>"" then goto 5710
5360 rem
5370 let Z$=ENTIDAD$; gosub 5830; let ENTIDAD$=Z$
5380 let Z$=GRUPO$; gosub 5830; let GRUPO$=Z$
5390 rem
5400 rem "Actualiza la Foto del CONTACTO
5410 call "^IMAGE.www",1,hta(CODIGO$),"file_image",ERROR$
5500 rem ^100
5510 rem "Actualiza el Registro
5520 write (1,key=CODIGO$)iol=FICHA_DE_CONTACTO
5530 goto 5730
5600 rem ^100
5610 rem "Elimina el Registro
5620 remove (1,key=CODIGO$,dom=5630)
5630 goto 5730
5700 rem ^100
5710 rem "Interaccion con el Cliente (WEB Browser)
5720 let MESSAGE$="Error en los datos del formulario:"
5730 rem
5740 if ERROR$="" then let JAVASCRIPT$="<% NOT CONVERT %>goBack()"
5750 run "^STDIO.TCP"
5760 goto 9930
5800 rem ^100
5810 rem "Remmplaza el separador de campos multiples $0D0A$ por $FFFF$
5820 rem "entra en conflicto con fin de campo en el comando: write(1,ke...)io.
5820:..
5830 let Z=pos($0D0A$=Z$); if Z then let Z$=Z$(1,Z-1)+$FFFF$+Z$(Z+2); goto 583
5830:0
5840 return
8000 rem 8000
8010 rem "DATA Definition
8100 rem ^100
8110 STATUS: rem "Tabla de Situacion del Contacto
8120 data "0","Activo"
8130 data "1","Prospecto"
8140 data "2","Suspendido"
8150 data "9","Inactivo"
8160 data END
8200 rem ^100
8210 GRUPOS: rem "Tabla de Agrupaciones
8220 data "0","Clientes de Contado"
8230 data "1","Clientes a Credito"
8240 data "2","Proveedores Nacionales"
8250 data "3","Proveedores Internacionales"
8260 data "4","Bancos Nacionales"
8270 data "5","Bancos Internacionales"
8280 data "6","Empleados Fijos"
8290 data "7","Empleados a Destajo"
8300 data "8","Persona de Contacto"
8310 data "9","Empresa Relacionada"
8320 data END
8400 rem ^100
8410 ENTIDAD: rem "Tabla de Tipo de Entidad
8420 data "0","Entidad Publica"
8430 data "1","Entidad Privada"
8440 data "2","Persona Natural"
8450 data "3","Persona Juridica"
8460 data END
8470 FICHA_DE_CONTACTO: iolist NOMBRE$,DIRECCION$,TELEFONOS$,EMAIL$,STATUS$,EN
8470:TIDAD$,GRUPO$
9000 rem 9000
9010 rem "Init Program
9020 return
9300 rem 9300
9310 rem "Standard I/O Error
9320 call "^IOERR",err,tcb(5),"cliente4.www"; retry
9900 rem 9900
9910 rem "End of Program
9920 seterr 9930; exit
9930 release
>save "/tutorial/cliente4.www"
Guardamos el programa Business Basic con el nombre "cliente4.www" y lo colocamos en el directorios donde tenemos nuestros programas, en el ejemplo que damos en este tutorial utilizamos el directorio /tutorial/.Esta sección tiene como objetivo mostrarles como trabaja {fwBasic} con la técnica de desarrollo WEB AJAX, para ello nos soportamos en la librería en javascript tabulator que esta en el puesto #10 en el ranking de jspreadsheets, portal dedicado a evaluar los mejores framework para el manejo de Data Grids & Spreadsheets basados en javascript.
Tabulator les permite crear Data Grids interactivas en segundos desde cualquier tabla HTML, matriz de JavaScript, fuente de datos AJAX o datos con formato JSON.
<html>
<head>
<title>Manejo de Grid con Ajax y Data en Formato JSON</title>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<link href="https://unpkg.com/tabulator-tables@4.6.1/dist/css/tabulator.min.css" rel="stylesheet">
<script src="https://unpkg.com/tabulator-tables@4.6.1/dist/js/tabulator.min.js"></script>
</head>
<body>
<h1>Data Grid (Cuadrículas o Grillas de Datos)</h1>
<p>
Desarrollada con la librería en javascript <a href="http://tabulator.info/">tabulator</a> que esta en el puesto #8 en el ranking de <a href="https://jspreadsheets.com/">jspreadsheets</a>, portal dedicado a evaluar los mejores framework para el manejo de Data Grids & Spreadsheets basados en javascript.
</p>
<div id="example-table"></div>
</body>
<script>
//Build Tabulator
var table = new Tabulator("#example-table", {
height:"511px",
layout:"fitColumns",
ajaxURL:"/cgi-bin/bb_json.sh?cliente6.json ",
ajaxProgressiveLoad:"scroll",
paginationSize:20,
placeholder:"No Data Set",
columns:[
{title:"codigo", field:"codigo", width:100},
{title:"nombre", field:"nombre", width:300},
{title:"direccion", field:"direccion", width:400},
{title:"telefonos", field:"telefonos", width:200},
{title:"email", field:"email", width:200},
{title:"status", field:"status", width:80},
{title:"entidad", field:"entidad", width:80},
{title:"grupo", field:"grupo", width:100},
],
});
</script>
</html>
Guardamos la interfaz web con el nombre "cliente6.htm" y lo colocamos en el directorios donde tenemos nuestros programas, en el ejemplo que damos en este tutorial utilizamos el directorio /tutorial/.
0010 rem 0010"cliente6.json""6.3A*6""Registro de Contactos"CEMS"06/05/1990
0020 rem "En formato JSON"
0030 begin ; seterr 9310; open (1)"cliente.db"
0040 gosub 9010
0100 rem ^100
0110 rem Inicializa el Objeto JSON
0120 print "{"
0130 print """last_page"":""END"","
0140 print """colHeader"":",
0150 print "["
0160 print """id"","
0170 print """codigo"","
0180 print """nombre"","
0190 print """direccion"","
0200 print """telefonos"","
0210 print """email"","
0220 print """status"","
0230 print """entidad"""
0240 print "],"
0250 print """data"":",
0260 print "[",
0300 rem ^100
0310 rem Lectura secuencia del Archivo de Clientes
0320 read (1,key="",dom=0330)
0330 let CODIGO$=key(1,end=0710),RECORD=RECORD+1
0340 read (1,end=9910)iol=FICHA_DE_CONTACTO
0400 rem ^100
0410 rem "Crear el Registro en Formato JSON
0420 let JSON$=""
0430 let ID$="id",VALUE$=str(RECORD); gosub 0620
0440 let ID$="codigo",VALUE$=CODIGO$; gosub 0620
0450 let ID$="nombre",VALUE$=NOMBRE$; gosub 0620
0460 let ID$="direccion",VALUE$=DIRECCION$; gosub 0620
0470 let ID$="telefonos",VALUE$=TELEFONOS$; gosub 0620
0480 let ID$="email",VALUE$=EMAIL$; gosub 0620
0490 let ID$="status",VALUE$=STATUS$; gosub 0620
0500 let ID$="entidad",VALUE$=ENTIDAD$; gosub 0620
0510 let ID$="grupo",VALUE$=GRUPO$; gosub 0620
0520 rem
0530 let JSON$="{"+JSON$(2)+"}"
0540 if RECORD>1 then let JSON$=","+JSON$
0550 print JSON$
0560 goto 0330
0600 rem ^100
0610 rem Codifica el VALOR
0620 let VALUE$="<% CONVERT TO HEX=FF %>"+VALUE$
0630 call "^LHTML.TCP","",3,VALUE$
0640 let JSON$=JSON$+","""+ID$+""":"""+VALUE$+""""
0650 return
0700 rem ^100
0710 rem Fin del Archivo - Finaliza el Programa
0720 print "]"
0730 print ",""draw"": 1"
0740 print ",""recordsTotal"": "+str(RECORD)
0750 print ",""recordsFiltered"": "+str(RECORD)
0760 print "}"
0770 goto 9910
8500 rem 8500
8510 rem "DATA Definition
8520 FICHA_DE_CONTACTO: iolist NOMBRE$,DIRECCION$,TELEFONOS$,EMAIL$,STATUS$,EN
8520:TIDAD$,GRUPO$
9000 rem 9000"DEFINITION SECTION
9010 return
9020 rem
9300 rem 9300"ERROR I/O FILE
9310 call "^IOERR",err,tcb(5),"cliente6.json"; retry
9320 rem
9900 rem 9900"END OF PROGRAM
9910 seterr 9920; exit
9920 release
>save "/tutorial/cliente6.json"
Guardamos el programa Business Basic con el nombre "cliente6.json" y lo colocamos en el directorios donde tenemos nuestros programas, en el ejemplo que damos en este tutorial utilizamos el directorio /tutorial/.Esta sección es otro ejemplo que tiene como objetivo mostrarles lo fácil de como trabaja {fwBasic} con la técnica de desarrollo WEB AJAX, para ello nos soportamos en otra librería en javascript handsontable que esta en el puesto #1 en el ranking de jspreadsheets, portal dedicado a evaluar los mejores framework para el manejo de Data Grids &Spreadsheets basados en javascript.
handsontable les permite crear Hojas de Cálculos interactivas en segundos desde cualquier tabla HTML, matriz de JavaScript, fuente de datos AJAX o datos con formato JSON.
Esta sección no requiere de un programa escrito en Basic para su funcionamiento pues usa el mismo programa del Tutorial 5, es por ello que el desarrollo WEB con {fwBasic} se hace tan fácil con esta técnica de desarrollo WEB AJAX,
<html>
<head>
<title>Manejo de Grid con Ajax y Data en Formato JSON</title>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<link href="https://cdn.jsdelivr.net/npm/handsontable@7.4.2/dist/handsontable.full.min.css" rel="stylesheet" media="screen">
<script src="https://cdn.jsdelivr.net/npm/handsontable@7.4.2/dist/handsontable.full.min.js"></script>
</head>
<body>
<h1>Spreadsheets (Hoja de Calculos o Grillas de Datos)</h1>
<p>
Desarrollada con la librería en javascript <a href="https://handsontable.com/">handsontable</a> que esta en el puesto #1 en el ranking de <a href="https://jspreadsheets.com/">jspreadsheets</a>, portal dedicado a evaluar los mejores framework para el manejo de Data Grids & Spreadsheets basados en javascript.
</p>
<div id="example"></div>
</body>
<script>
$.ajax({
url: "/cgi-bin/bb_json.sh?cliente6.json ",
dataType: "json"
}).done(function(json) {
upDateExample( json );
});
function upDateExample(json) {
var container = document.getElementById('example');
var hot = new Handsontable(container, {
data: json.data,
colWidths: 300,
width: '100%',
height:"511px",
rowHeights: 23,
rowHeaders: true,
colHeaders: json.colHeader,
hiddenColumns: { columns: [0]},
columns: [
{ data: 'id', type: 'text', width: 100 },
{ data: 'codigo', type: 'text', width: 100 },
{ data: 'nombre', type: 'text', width: 400 },
{ data: 'direccion', type: 'text', width: 1000 },
{ data: 'telefonos', type: 'text', width: 300 },
{ data: 'email', type: 'text', width: 400 },
{ data: 'status', type: 'text', width: 100 },
{ data: 'entidad', type: 'text', width: 100 },
],
licenseKey: 'non-commercial-and-evaluation'
});
}
</script>
</html>
Guardamos la interfaz web con el nombre "cliente7.htm" y lo colocamos en el directorios donde tenemos nuestros programas, en el ejemplo que damos en este tutorial utilizamos el directorio /tutorial/.Esta sección muestra otro ejemplo que tiene como objetivo mostrarles lo fácil de como trabaja {fwBasic} con la técnica de desarrollo WEB AJAX, para ello nos soportamos en otra librería en javascript DataTables que esta en el puesto #3 en el ranking de jspreadsheets, portal dedicado a evaluar los mejores framework para el manejo de Data Grids & Spreadsheets basados en javascript.
DataTables les permite crear Data Grids interactivas en segundos desde cualquier tabla HTML, matriz de JavaScript, fuente de datos AJAX o datos con formato JSON.
En esta sección se omiten los códigos fuentes pero los podrá encontrar en la sección de descarga, si desea puede hacer clic en el siguiente link para ver el ejemplo funcionando http://localhost/tutorial/cliente8.htm.
Ejemplo Desarrollado con la librería en javascript jExcel que esta en el puesto #7 en el ranking de jspreadsheets, portal dedicado a evaluar los mejores framework para el manejo de Data Grids & Spreadsheets basados en javascript.
jExcel les permite crear Spreadsheets interactivas en segundos desde cualquier tabla HTML, matriz de JavaScript, fuente de datos AJAX o datos con formato JSON.
Puede hacer clic en el siguiente link para ver el ejemplo funcionando http://localhost/tutorial/cliente9.htm.
fwMail es una app WEB diseñada para el manejo ligero del correo electrónico, actualmente soporta los protocolos POP3, SMTP e IMAP. fue creada para profundizar un poco mas en el lenguaje y con la intención de mostrar a los entusiasta de fwBasic como se puede interactuar con servidores de Correo desde Business Basic.
Además de los protocolos mencionados, también soporta la aplicación mailsend-go como alternativa al protocolo SMTP, es una herramienta de línea de comandos para Windows y Linux muy poderosa!, permite el envío de correo electrónico con soporte para texto enriquecido, imágenes, archivos adjuntos, Etc. y ademas soporta el protocolo SSL lo cual es un requisito indispensable para el acceso a los servidores de correo que existen actualmente (gmail, hotmail, yahoo, Etc.).
<html>
<head>
<title>Correo Electronico</title>
<!-- Fuerza el Juego de Caracteres UTF-8 en los eMails -->
<meta charset="UTF-8">
<!--sii.load jqm_header -->
<div data-role="page" id="EMAIL" data-dom-cache="true">
<div data-role="header" data-position="fixed" data-tap-toggle="false" data-theme="b">
<h1>fwMail</h1>
<a href="#Panel" data-icon="bars" data-iconpos="notext" title="Menú de Opciones" class="ui-btn-right">Menú</a>
</div><!-- /header -->
<div data-role="main" class="ui-content">
<ul id="eMails_account" data-role="listview" data-inset="true" data-theme="a" data-mini="true" data-filter="true" data-split-icon="edit" data-input="#search"></ul>
</div><!-- /main -->
<div id="Panel" data-role="panel" data-position-fixed="true" data-display="reveal" data-position="right">
<ul data-role="listview" style="padding-left:10px">
<li data-icon="back" data-theme="b" title="Cerrar Panel ( Esc )"
><a data-rel="close" name="Panel_option1" href="#"
>Menú</a></li>
<li title="Configurar nuevas Cuentas de Correo Electronico" data-icon="edit"
><a data-rel="close" name="Panel_option2" href="javascript:Load_eMails_Edit_Account('')"
>Agregar Cuenta</a></li>
<li title="Borra la Base de Datos de Cuentas de Correo" data-icon="recycle"
><a data-rel="close" name="Panel_option3" href="javascript:localStorage.removeItem('eMails');top.window.location.reload(true)"
>Inicializar DB</a></li>
<li title="Ayuda al Usuario" data-icon="info"
><a data-rel="close" name="Panel_Help" href="#EMAIL_hlp"
>Ayuda</a></li>
<li title="Cerrar Ventana ( Esc + Esc )" data-icon="delete"
><a data-rel="close" name="Panel_option9" href="javascript:KEYS_27(KEYS_27('close'));"
>Salir</a></li>
</ul>
</div><!-- /panel -->
</div><!-- /page EMAIL -->
<div data-role="page" id="EMAIL_Box" data-dom-cache="true">
<div data-role="header" data-position="fixed" data-tap-toggle="false" data-theme="b">
<a href="#" data-icon="back" data-iconpos="notext" title="Volver Atras" onclick="KEYS_27();">back</a>
<h1>Buzones & Carpetas</h1>
<a href="#Panel_Box" data-icon="bars" data-iconpos="notext" title="Menú de Opciones" class="ui-btn-right">Menú</a>
<input name="search_Box" id="search_Box" data-type="search" placeholder="Busqueda de Mensajes" data-theme="a" onfocus="jQuery(this).trigger('keypress');">
</div><!-- /header -->
<div data-role="main" id="" class="ui-content">
<div id="EMAIL_Box_content">
</div>
</div><!-- /main -->
<div id="Panel_Box" data-role="panel" data-position-fixed="true" data-display="reveal" data-position="right">
<ul data-role="listview" style="padding-left:10px">
<li data-icon="back" data-theme="b" title="Cerrar Panel ( Esc )"
><a data-rel="close" name="Panel_Box_option1" href="#"
>Menú</a></li>
<li title="Ordenar los Mensajes por Fecha." class="ui-nodisc-icon"
><a data-rel="close" name="Panel_Box_ByDate" href="javascript:Sort_eMails('Date');"
>Ordenar por Fecha</a></li>
<li title="Ordenar los Mensajes por Remitente." class="ui-nodisc-icon"
><a data-rel="close" name="Panel_Box_ByFrom" href="javascript:Sort_eMails('From');"
>Ordenar por Remitente</a></li>
<li title="Ordenar los Mensajes por Remitente." class="ui-nodisc-icon"
><a data-rel="close" name="Panel_Box_ByTo" href="javascript:Sort_eMails('To');"
>Ordenar por Destinatario</a></li>
<li title="Ordenar los Mensajes por Remitente." class="ui-nodisc-icon"
><a data-rel="close" name="Panel_Box_BySubject" href="javascript:Sort_eMails('Subject');"
>Ordenar por Asunto</a></li>
<li title="Ordenar los Mensajes por Remitente." class="ui-nodisc-icon"
><a data-rel="close" name="Panel_Box_ByContent" href="javascript:Sort_eMails('Content');"
>Ordenar por Contenido</a></li>
<li title="Alterna entre Orden Descendente y/o Ascendente."
><a data-rel="close" name="Panel_Box_reverse" href="javascript:toggleOrder();"
>Alternar Orden</a></li>
<li title="Revisar si hay nuevos Mensajes." data-icon="arrow-l"
><a data-rel="close" name="Panel_Box_NewMsg" href="javascript:review_eMails()"
>Nuevos Mensajes</a></li>
<li title="Actualizar los Mensajes Recibidos." data-icon="recycle"
><a data-rel="close" name="Panel_Box_NewMsg" href="javascript:reset_eMails()"
>Recargar Mensajes</a></li>
<li title="Ayuda al Usuario" data-icon="info"
><a data-rel="close" name="Panel_Box_Help" href="#EMAIL_Box_hlp"
>Ayuda</a></li>
</ul>
</div><!-- /panel -->
<div data-role="footer" data-position="fixed" data-tap-toggle="false" data-theme="b" class="mesgSelect">
<div data-role="navbar">
<ul class="Footer_Box_newMail">
<li><input type="button" name="Footer_Box_newMails" data-icon="mail" data-iconpos="right" onclick="Load_eMails_Edit_Mail('','')" value="Redactar Nuevo Correo"></li>
</ul>
<ul class="Footer_Box_checked" style="display:none">
<li><input type="button" name="Footer_Box_checkToggle" data-icon="recycle-yellow" data-iconpos="top" onclick="check_eMails('', 'toggle')" value="Invertir Seleccion"></li>
<li><input type="button" name="Footer_Box_checkAll" data-icon="check-green" data-iconpos="top" onclick="check_eMails('', 'all')" value="Seleccionar Todo"></li>
<li><input type="button" name="Footer_Box_delMails" data-icon="delete-red" data-iconpos="top" onclick="delete_eMails()" value="Eliminar Mensajes"></li>
</ul>
</div><!-- /navbar -->
</div><!-- /footer -->
</div><!-- /page EMAIL_Box -->
<div data-role="page" id="EMAIL_List" data-dom-cache="true">
<div data-role="header" data-position="fixed" data-tap-toggle="false" data-theme="b">
<a href="#" data-icon="back" data-iconpos="notext" title="Volver Atras" onclick="KEYS_27();">back</a>
<h1>Bandeja de Entrada</h1>
<a href="#Panel_List" data-icon="bars" data-iconpos="notext" title="Menú de Opciones" class="ui-btn-right">Menú</a>
<input name="search_List" id="search_List" data-type="search" placeholder="Busqueda de Mensajes" data-theme="a" onfocus="jQuery(this).trigger('keypress');">
</div><!-- /header -->
<div data-role="main" id="" class="ui-content">
<div id="EMAIL_List_content">
</div>
</div><!-- /main -->
<div id="Panel_List" data-role="panel" data-position-fixed="true" data-display="reveal" data-position="right">
<ul data-role="listview" style="padding-left:10px">
<li data-icon="back" data-theme="b" title="Cerrar Panel ( Esc )"
><a data-rel="close" name="Panel_List_option1" href="#"
>Menú</a></li>
<li title="Ordenar los Mensajes por Fecha." class="ui-nodisc-icon"
><a data-rel="close" name="Panel_List_ByDate" href="javascript:Sort_eMails('Date');"
>Ordenar por Fecha</a></li>
<li title="Ordenar los Mensajes por Remitente." class="ui-nodisc-icon"
><a data-rel="close" name="Panel_List_ByFrom" href="javascript:Sort_eMails('From');"
>Ordenar por Remitente</a></li>
<li title="Ordenar los Mensajes por Remitente." class="ui-nodisc-icon"
><a data-rel="close" name="Panel_List_ByTo" href="javascript:Sort_eMails('To');"
>Ordenar por Destinatario</a></li>
<li title="Ordenar los Mensajes por Remitente." class="ui-nodisc-icon"
><a data-rel="close" name="Panel_List_BySubject" href="javascript:Sort_eMails('Subject');"
>Ordenar por Asunto</a></li>
<li title="Ordenar los Mensajes por Remitente." class="ui-nodisc-icon"
><a data-rel="close" name="Panel_List_ByContent" href="javascript:Sort_eMails('Content');"
>Ordenar por Contenido</a></li>
<li title="Alterna entre Orden Descendente y/o Ascendente."
><a data-rel="close" name="Panel_List_reverse" href="javascript:toggleOrder();"
>Alternar Orden</a></li>
<li title="Revisar si hay nuevos Mensajes." data-icon="arrow-l"
><a data-rel="close" name="Panel_List_NewMsg" href="javascript:review_eMails()"
>Nuevos Mensajes</a></li>
<li title="Actualizar los Mensajes Recibidos." data-icon="recycle"
><a data-rel="close" name="Panel_List_NewMsg" href="javascript:reset_eMails()"
>Recargar Mensajes</a></li>
<li title="Ayuda al Usuario" data-icon="info"
><a data-rel="close" name="Panel_List_Help" href="#EMAIL_List_hlp"
>Ayuda</a></li>
</ul>
</div><!-- /panel -->
<div data-role="footer" data-position="fixed" data-tap-toggle="false" data-theme="b" class="mesgSelect">
<div data-role="navbar">
<ul class="Footer_List_newMail">
<li><input type="button" name="Footer_List_newMails" data-icon="mail" data-iconpos="right" onclick="Load_eMails_Edit_Mail('','')" value="Redactar Nuevo Correo"></li>
</ul>
<ul class="Footer_List_checked" style="display:none">
<li><input type="button" name="Footer_List_checkToggle" data-icon="recycle-yellow" data-iconpos="top" onclick="check_eMails('', 'toggle')" value="Invertir Seleccion"></li>
<li><input type="button" name="Footer_List_checkAll" data-icon="check-green" data-iconpos="top" onclick="check_eMails('', 'all')" value="Seleccionar Todo"></li>
<li><input type="button" name="Footer_List_delMails" data-icon="delete-red" data-iconpos="top" onclick="delete_eMails()" value="Eliminar Mensajes"></li>
</ul>
</div><!-- /navbar -->
</div><!-- /footer -->
</div><!-- /page EMAIL_List -->
<div data-role="page" id="EMAIL_View" data-dom-cache="true">
<div data-role="header" data-position="fixed" data-tap-toggle="false" data-theme="b">
<a href="#" data-icon="back" data-iconpos="notext" title="Volver Atras" onclick="KEYS_27();">back</a>
<h1>Mensajes</h1>
<a href="#Panel_View" data-icon="bars" data-iconpos="notext" title="Menú de Opciones" class="ui-btn-right">Menú</a>
</div><!-- /header -->
<div data-role="main" id="EMAIL_View_main" class="ui-content">
<div id="EMAIL_View_content" style="overflow-y: hidden; overflow-x: auto; display:block; border:0px groove;" class="printme">
</div>
</div><!-- /main -->
<div id="Panel_View" data-role="panel" data-position-fixed="true" data-display="reveal" data-position="right">
<ul data-role="listview" style="padding-left:10px">
<li data-icon="back" data-theme="b" title="Cerrar Panel ( Esc )"
><a data-rel="close" name="Panel_View_option1" href="#"
>Menú</a></li>
<li title="En conexiones lentas puede que no se cargen todas las imagenes." data-icon="camera"
><a data-rel="close" name="Panel_View_LoadIm" href="javascript:reLoadImages()"
>Cargar Imagenes</a></li>
<li title="Imprimir en formato de texto plano" data-icon="bullets"
><a data-rel="close" name="Panel_View_printText" href="#" onclick="print_eMails('text/plain')"
>Imprimir texto plano</a></li>
<li title="Imprimir en texto Simple para facilidad de lectura" data-icon="bullets"
><a data-rel="close" name="Panel_View_printCont" href="#" onclick="print_eMails('text/content')"
>Imprimir contenido</a></li>
<li title="Ayuda al Usuario" data-icon="info"
><a data-rel="close" name="Panel_View_Help" href="#EMAIL_View_hlp"
>Ayuda</a></li>
</ul>
</div><!-- /panel -->
<div data-role="footer" data-position="fixed" data-tap-toggle="false" data-theme="b">
<div data-role="navbar">
<ul>
<li><input type="button" name="prnMail" data-icon="grid" data-iconpos="top" onclick="print_eMails( 'text/html' )" value="Imprimir"></li>
<li><input type="button" name="fwdMail" data-icon="arrow-r" data-iconpos="top" onclick="Load_eMails_Edit_Mail( 'Fwd:', MID )" value="Reenviar"></li>
<li><input type="button" name="repMail" data-icon="arrow-l" data-iconpos="top" onclick="Load_eMails_Edit_Mail( 'Re:' , MID )" value="Responder"></li>
<li><input type="button" name="delMail" data-icon="delete" data-iconpos="top" onclick="delete_eMails( MID )" value="Eliminar"></li>
</ul>
</div><!-- /navbar -->
</div><!-- /footer -->
</div><!-- /page EMAIL_View -->
<div data-role="page" id="EMAIL_Edit_Mail" data-dom-cache="true">
<div data-role="header" data-position="fixed" data-tap-toggle="false" data-theme="b">
<a href="#" data-icon="back" data-iconpos="notext" title="Volver Atras" onclick="KEYS_27();">back</a>
<h1>Mensajes</h1>
<a href="#Panel_Edit_Mail" data-icon="bars" data-iconpos="notext" title="Menú de Opciones" class="ui-btn-right">Menú</a>
</div><!-- /header -->
<div data-role="main" id="EMAIL_Edit_Mail_main" class="ui-content">
<form name="edit_eMail_myForm" action="/cgi-bin/bb.sh?$sii.system$%20^EMAIL.wwm" method="POST" enctype="multipart/form-data" target="connect9" class="edit_eMails">
<fieldset data-role="controlgroup" data-mini="true">
<table style="width:100%" border="0" cellspacing="0" cellpadding="0">
<tr style="display:none">
<td style="width:5%">De</td>
<td><input name="edit_eMail_From" placeholder="From" readonly></td></tr>
<tr>
<td>Para</td>
<td><input name="edit_eMail_To" placeholder="Destinatarios"></td></tr>
<tr>
<tr style="display:none" class="edit_eMail_Cc">
<td>Cc</td>
<td><input name="edit_eMail_Cc" placeholder="Enviar Copia a"></td></tr>
<tr>
<tr style="display:none" class="edit_eMail_Bcc">
<td>Bcc</td>
<td><input name="edit_eMail_Bcc" placeholder="Enviar Copia (Oculta) a"></td></tr>
<tr>
<td>Asunto</td>
<td><input name="edit_eMail_Subject" placeholder="Subject" readonly></td></tr>
</table>
</fieldset>
<div style="background-color: #fff; border: 1px solid #f0f0f0;" class="ui-input-text ui-body-inherit ui-corner-all ui-shadow-inset">
<textarea name="edit_eMail_Message">
</textarea >
<div id="Attachments" style="display:none">
<br><b>Archivos Adjuntos</b><br>
<div id="inputFiles" style="display:none">
<input type="file" name="edit_eMail_Attach" id="Attach_0" multiple onchange="Set_Attachment(this);" onblur="Set_Attachment(this);" class="available">
</div>
</div>
</div>
<div style="display:none;">
<input type="hidden" name="button" value="">
<input type="hidden" name="config" value="$config$">
</div>
</form>
</div><!-- /main -->
<div id="Panel_Edit_Mail" data-role="panel" data-position-fixed="true" data-display="reveal" data-position="right">
<ul data-role="listview" style="padding-left:10px">
<li data-icon="back" data-theme="b" title="Cerrar Panel ( Esc )"
><a data-rel="close" name="Panel_Edit_Mail_option1" href="#"
>Menú</a></li>
<li title="Alterna entre Editor Simple y/o Avanzado." data-icon="edit"
><a data-rel="close" name="Panel_Edit_Mail_Editor" href="javascript:toggleEditor()"
>Alternar Editor</a></li>
<li title="Enviar copia o Comuniquese a (Cc:)." data-icon="user"
><a data-rel="close" name="Panel_Edit_Mail_Cc" href="javascript:var z=jQuery( '.edit_eMail_Cc' ); z.toggle(),z.val(''),z.prop('defaultValue','')"
>Comuniquese a (Cc:)</a></li>
<li title="Enviar copia (Oculta) a (Bcc:)." data-icon="user"
><a data-rel="close" name="Panel_Edit_Mail_Cc" href="javascript:var z=jQuery( '.edit_eMail_Bcc' ); z.toggle(),z.val(''),z.prop('defaultValue','')"
>Copia oculta a (Bcc:)</a></li>
<li title="Permite Editar el Asunto." data-icon="comment"
><a data-rel="close" name="Panel_Edit_Mail_Subject" href="javascript:jQuery( '[name=edit_eMail_Subject]' ).prop('readonly',false)"
>Editar Asunto</a></li>
<li title="Ayuda al Usuario" data-icon="info"
><a data-rel="close" name="Panel_Edit_Mail_Help" href="#EMAIL_Edit_Mail_hlp"
>Ayuda</a></li>
</ul>
</div><!-- /panel -->
<div data-role="footer" data-position="fixed" data-tap-toggle="false" data-theme="b">
<div data-role="navbar">
<ul>
<li><input type="button" name="attMail" data-icon="action" data-iconpos="top" onclick="Get_Attachment();" value="Adjuntar"></li>
<li><input type="button" name="sndMail" data-icon="check-green" data-iconpos="top" onclick="writeDocument('Acepta','OFF')" value="Enviar"></li>
<li><input type="button" name="canMail" data-icon="delete-red" data-iconpos="top" onclick="history.back();" value="Cancelar"></li>
</ul>
</div><!-- /navbar -->
</div><!-- /footer -->
</div><!-- /page EMAIL_Edit_Mail -->
<div data-role="page" id="EMAIL_Edit_Account" data-dom-cache="true">
<div data-role="header" data-position="fixed" data-tap-toggle="false" data-theme="b">
<a href="#" data-icon="back" data-iconpos="notext" title="Volver Atras" onclick="KEYS_27();">back</a>
<h1>Datos de la Cuenta</h1>
<a href="#Panel_Edit" data-icon="bars" data-iconpos="notext" title="Menú de Opciones" class="ui-btn-right">Menú</a>
</div><!-- /header -->
<div data-role="main" class="ui-content">
<form name="myForm" action="javascript:Edit_eMails_update();">
<!-- Campos de Usuario & Contraseña para ser rellenados automaticamente
por la opcion "autocomplete" del explorador WEB esta adaptacion se
utiliza en formularios donde tenga campos tipo " password " que no
requieran se rellenados automaticamente -->
<div style="display:none" id="autocomplete_none">
<input autocomplete="username">
<input autocomplete="current-password" type="password">
</div>
<!-- Fin de la Adaptacion -->
<b>Correo Electronico</b>
<input name="MAIL_Name" value="$MAIL_Name$" placeholder="Nombre Descriptivo de la Cuenta">
<input name="MAIL_User" value="$MAIL_User$" placeholder="Direccion de Correo" onchange="selectKnownServer()" autocomplete="email">
<input name="MAIL_Pswd" value="$MAIL_Pswd$" placeholder="Contraseña" type="password" onkeyup="Show()" autocomplete="new-password">
<input name="MAIL_Remind" id="MAIL_Remind" value="$MAIL_Remind.Checked=ON$" type="checkbox">
<label for="MAIL_Remind" title="Tildee esta casilla si quiere que el sistema recuerde su contraseña.">Recordar Contraseña</label>
<br>
<b>Configuración</b>
<div data-role="collapsibleset">
<div data-role="collapsible">
<h2 name="h2_2" id="h2_2" class="NoUpDate">Correo Entrante</h2>
<fieldset data-role="controlgroup" data-mini="true">
<input type="radio" name="IN_going" id="IMAP" value="$IN_going.Checked=IMAP$"
><label for="IMAP" title="Protocolo nativo para recibir correo electronico.">IMAP</label>
<input type="radio" name="IN_going" id="POP3" value="$IN_going.Checked=POP3$"
><label for="POP3" title="Protocolo nativo para recibir correo electronico.">POP3</label>
<table style="width:100%" cellspacing="0" cellpadding="0">
<tr>
<td style="width:20%">Servidor</td>
<td><input name="IN_Host" value="$IN_Host$" placeholder="Host Name"></td>
</tr>
<tr>
<td>Puerto</td>
<td><input name="IN_Port" value="$IN_Port$" placeholder="Port ( Default 110 )"></td>
</tr>
<tr>
<td>Cifrado</td>
<td><select size="1" name="IN_Encryp" onchange="Show();">
<option value="" selected>no requerido (Port 110)</option>
<option value="$IN_Encryp.Select=STARTTLS$">STARTTLS (Port 110 / 143)</option>
<option value="$IN_Encryp.Select=SSL$" >SSL/TLS (Port 993 / 995)</option>
</select></td>
</tr>
<tr>
<td>Autenticación </td>
<td><select size="1" name="IN_Auth" style="width: 300px" onchange="Show()">
<option value="" selected>no requerido</option>
<option value="$IN_Auth.Select=PLAIN$" >PLAIN </option>
<option value="$IN_Auth.Select=LOGIN$" >LOGIN </option>
<option value="$IN_Auth.Select=XOAUTH2$">XOAUTH2 </option>
<option value="$IN_Auth.Select=XOAUTH$" disabled>XOAUTH </option>
<option value="$IN_Auth.Select=CRAM$" disabled>CRAM-MD5 </option>
<option value="$IN_Auth.Select=DIGEST$" disabled>DIGEST-MD5 </option>
<option value="$IN_Auth.Select=CLIENTTOKEN$" disabled>PLAIN-CLIENTTOKEN</option>
<option value="$IN_Auth.Select=OAUTHBEARER$" disabled>OAUTHBEARER</option>
</select></td>
</tr>
<tr class="IN_USER" style="display:none">
<td>Usuario</td>
<td><input name="IN_User" value="$IN_User$" placeholder="Opcional" autocomplete="email"></td>
</tr>
<tr class="IN_USER_disabled" style="display:none">
<td>Contraseña</td>
<td><input name="IN_Pswd" value="$IN_Pswd$" placeholder="Opcional" autocomplete="current-password"></td>
</tr>
</table>
</fieldset>
</div>
<div data-role="collapsible">
<h2 name="h2_1" id="h2_1">Correo Saliente</h2>
<fieldset data-role="controlgroup" data-mini="true">
<input type="radio" name="OUT_going" id="SMTP" value="$OUT_going.Checked=SMTP$"
><label for="SMTP" title="Protocolo nativo para envio de correo electronico.">SMTP</label>
<input type="radio" name="OUT_going" id="SendMail" value="$OUT_going.Checked=SEND$"
><label for="SendMail" title="Aplicacion para envio de correo electronico.">mailsend-go</label>
<table style="width:100%" cellspacing="0" cellpadding="0" data-mini="true">
<tr>
<td style="width:20%">Servidor</td>
<td><input name="OUT_Host" value="$OUT_Host$" placeholder="Host Name"></td>
</tr>
<tr>
<td>Puerto</td>
<td><input name="OUT_Port" value="$OUT_Port$" placeholder="Port ( Default 25 )"></td>
</tr>
<tr>
<td>Cifrado</td>
<td><select size="1" name="OUT_Encryp" onchange="Show();">
<option value="" selected>no requerido (Port 25)</option>
<option value="$OUT_Encryp.Select=STARTTLS$">STARTTLS (Port 25 / 587)</option>
<option value="$OUT_Encryp.Select=SSL$" >SSL/TLS (Port 465)</option>
</select></td>
</tr>
<tr>
<td>Autenticación </td>
<td><select size="1" name="OUT_Auth" style="width: 300px" onchange="Show()">
<option value="" selected>no requerido</option>
<option value="$OUT_Auth.Select=PLAIN$" >PLAIN </option>
<option value="$OUT_Auth.Select=LOGIN$" >LOGIN </option>
<option value="$OUT_Auth.Select=XOAUTH2$">XOAUTH2 </option>
<option value="$OUT_Auth.Select=XOAUTH$" disabled>XOAUTH </option>
<option value="$OUT_Auth.Select=CRAM$" disabled>CRAM-MD5 </option>
<option value="$OUT_Auth.Select=DIGEST$" disabled>DIGEST-MD5 </option>
<option value="$OUT_Auth.Select=CLIENTTOKEN$" disabled>PLAIN-CLIENTTOKEN</option>
<option value="$OUT_Auth.Select=OAUTHBEARER$" disabled>OAUTHBEARER</option>
</select></td>
</tr>
<tr class="OUT_USER" style="display:none">
<td>Usuario</td>
<td><input name="OUT_User" value="$OUT_User$" placeholder="Opcional" autocomplete="email"></td>
</tr>
<tr class="OUT_USER_disabled" style="display:none">
<td>Contraseña</td>
<td><input name="OUT_Pswd" value="$OUT_Pswd$" placeholder="Opcional" autocomplete="current-password"></td>
</tr>
</table>
</fieldset>
</div>
<div data-role="collapsible">
<h2 name="h2_3" id="h2_3">Autenticación</h2>
<fieldset data-role="controlgroup" data-mini="true">
<table style="width:100%" cellspacing="0" cellpadding="0" data-mini="true">
<tr __DELETE_class="AUTH" __DELETE_style="display:none">
<td style="width:20%">Cifrado</td>
<td><select size="1" name="MAIL_Encryp_Scheme">
<option value="" selected>Seleccione</option>
<option value="$MAIL_Encryp_Scheme.Select=OPENSSL$">OPENSSL </option>
<option value="$MAIL_Encryp_Scheme.Select=GNUTLS$" >GNUTLS </option>
<option value="$MAIL_Encryp_Scheme.Select=SOCKET$" >BBSOCKET</option>
</select></td>
</tr>
<tr class="XOAUTH" style="display:none">
<td>xOauth2 </td>
<td><select size="1" name="MAIL_Auth_Scheme">
<option value="">Seleccione</option>
<option value="$MAIL_Auth_Scheme.Select=GOOGLE$">Google</option>
<option value="$MAIL_Auth_Scheme.Select=HOTMAIL$">MicroSoft</option>
<option value="$MAIL_Auth_Scheme.Select=YAHOO$">Yahoo</option>
<option value="$MAIL_Auth_Scheme.Select=FB$">FaceBook</option>
</select></td>
</tr>
<tr class="XOAUTH" style="display:none">
<td>Token</td>
<td><input name="MAIL_XOAUTH_Token" value="$MAIL_XOAUTH_Token$"></td>
</tr>
</table>
</fieldset>
</div>
<div data-role="collapsible">
<h2 name="h2_4" id="h2_4">Avanzado</h2>
<fieldset data-role="controlgroup" data-mini="true">
<table style="width:100%" cellspacing="0" cellpadding="0">
<tr>
<td style="width:65%"
><input type="checkbox" name="MAIL_Verbose" id="MAIL_Verbose" value="$MAIL_Verbose.Checked=ON$" onchange="showInput(this)"
><label for="MAIL_Verbose" title="Activa el modo detallado, se utiliza para Monitorear la Conexión con el Servidor.">Modo Verbose</label></td>
<td id="div_MAIL_Verbose_option" style="display:none"
><input type="number" name="MAIL_Level" value="$MAIL_Level$" title="Nivel de Detalle de 1 a 3." placeholder="Nivel" min="1" max="3" data-wrapper-class="controlgroup-textinput ui-btn"></td>
</tr>
</table>
<table style="width:100%" cellspacing="0" cellpadding="0">
<tr>
<td style="width:65%"
><input type="checkbox" name="MAIL_getMail" id="MAIL_getMail" value="$MAIL_getMail.Checked=ON$" onchange="showInput(this)"
><label for="MAIL_getMail" title="Tiempo para revisar si hay nuevos mensajes.">Revisar Mensajes</label></td>
<td id="div_MAIL_getMail_option" style="display:none"
><input type="number" name="MAIL_getMail_Time" value="$MAIL_getMail_Time$" title="Tiempo en Minutos." placeholder="Minutos" min="0" max="60" data-wrapper-class="controlgroup-textinput ui-btn"></td>
</tr>
</table>
<table style="width:100%" cellspacing="0" cellpadding="0">
<tr>
<td style="width:65%"
><input type="checkbox" name="MAIL_Keep" id="MAIL_Keep" value="$MAIL_Keep.Checked=ON$" onchange="showInput(this)"
><label for="MAIL_Keep" title="
Mantener copia de los correos en el Servidor
al utilizar el protocolo POP3.
(comando TOP en vez de RETR)">Mantener copia del correo (POP3)</label></td>
</tr>
</table>
<table style="width:100%" cellspacing="0" cellpadding="0">
<tr>
<td style="width:65%"
><input type="checkbox" name="MAIL_FQDN" id="MAIL_FQDN" value="$MAIL_FQDN.Checked=FQDN$" onchange="showInput(this)"
><label for="MAIL_FQDN" title="Nombre de Dominio Full Calificado (o dirección IP Publica) requerido por algunos servidores de correo.">Nombre de Dominio (FQDN)</label></td>
</tr>
<tr>
<td style="display:none"> </td>
</tr>
</table>
<table style="width:100%" cellspacing="0" cellpadding="0">
<tr id="div_MAIL_FQDN_option" style="display:none">
<td><input name="MAIL_FQDN_url" value="$MAIL_FQDN_url$" title="indique la pagina de donde obtener el Nombre de Dominio Full Calificado (o dirección IP Publica)." placeholder="ifconfig.me/all;remote_host: ;ip_addr: ;"></td>
</tr>
</table>
</fieldset>
</div>
</div>
<div style="display:none;">
<input type="hidden" name="MAIL_Account" value="$MAIL_Account$" class="NoUpDate">
<input type="hidden" name="button" value="" class="NoUpDate">
<input type="hidden" name="config" value="$config$" class="NoUpDate">
<input type="file" name="file_upLoad" onchange="printFile(this);" onblur="printFile(this);" class="NoUpDate">
</div>
</form>
</div><!-- /main -->
<div id="Panel_Edit" data-role="panel" data-position-fixed="true" data-display="reveal" data-position="right">
<ul data-role="listview" style="padding-left:10px">
<li title="Cerrar Panel ( Esc )" data-icon="back" data-theme="b"
><a data-rel="close" name="Panel_Edit_option1" href="#"
>Menú</a></li>
<li title="Ayuda al Usuario" data-icon="info"
><a data-rel="close" name="Panel_Edit_Help" href="#EMAIL_Edit_hlp"
>Ayuda</a></li>
</ul>
</div><!-- /panel -->
<div data-role="footer" data-position="fixed" data-tap-toggle="false" data-theme="b">
<div data-role="navbar">
<ul>
<li style="width:100%"><input type="button" name="check" data-icon="check-green" data-iconpos="right" onclick="submit_ext('Acepta')" value="Actualiza" title="Actualiza la Cuenta ( Ctrl + G )"></li>
<li style="display:none"><input type="button" name="delete" data-icon="delete-red" data-iconpos="right" onclick="submit_ext('Elimina')" value="Elimina" title="Elimina la Cuenta ( Ctrl + E )"></li>
</ul>
</div><!-- /navbar -->
</div><!-- /footer -->
<style>
.controlgroup-textinput {
padding-top:.09em;
padding-bottom:.10em;
}
</style>
</div><!-- /page EMAIL_Edit -->
<div data-role="page" id="EMAIL_hlp" data-dom-cache="true">
<div data-role="header" data-position="fixed" data-tap-toggle="false" data-theme="b">
<a href="#" data-icon="back" data-iconpos="notext" title="Volver Atras" onclick="KEYS_27();">back</a>
<h1>fwMail</h1>
<a href="#" data-icon="info" data-iconpos="notext" title="Ayuda al Usuario" onclick="KEYS_27();">back</a>
</div><!-- /header -->
<div data-role="main" class="ui-content">
<h1>fwMail</h1>
<p><b>fwMail</b> es una <b>app WEB</b> desarrollada con <i>
<font face="Times New Roman"> <b>fwBasic</b></font></i>, diseñada para el manejo ligero del
<b>correo electrónico</b>, actualmente soporta los protocolos <a href="https://es.wikipedia.org/wiki/Protocolo_de_oficina_de_correo" target="_blank">POP3</a>, <a href="https://es.wikipedia.org/wiki/Protocolo_para_transferencia_simple_de_correo" target="_blank">SMTP</a> y esta en desarrollo el soporte para el protocolo <a href="https://es.wikipedia.org/wiki/Protocolo_de_acceso_a_mensajes_de_Internet" target="_blank">IMAP</a>.</p>
<p>Además de los protocolos mencionados, también soporta la aplicación <a href="https://github.com/muquit/mailsend-go" target="_blank">mailsend-go</a>, una herramienta de linea de comandos para <b>Windows</b> y <b>Linux</b> muy poderosa! para el envio de correo electrónico con soporte para texto enriquecido, imágenes, archivos adjuntos, Etc. También soporta SSL lo cual es un requisito indispensable para el acceso a los servidores de correo que existen actualmente (gmail, hotmail, yahoo, Etc.).</p>
<p>Si deseas participar en el proyecto escríbenos a <a href="mailto://ingenix21@gmail.com" target="_blank">ingenix21@gmail.com</a>, una muy buena contribución al comienzo puede ser desarrollar parte de la ayuda de las diferentes secciones que componen la aplicación.</p>
<p>Recibirás una copia de la aplicación (ejecutables y programas fuentes) y una mención especial en la sección de Desarrolladores!.</p>
</div><!-- /main -->
</div><!-- /page EMAIL_hlp -->
<div data-role="page" id="EMAIL_Box_hlp" data-dom-cache="true">
<div data-role="header" data-position="fixed" data-tap-toggle="false" data-theme="b">
<a href="#" data-icon="back" data-iconpos="notext" title="Volver Atras" onclick="KEYS_27();">back</a>
<h1>Bandeja de Entrada</h1>
<a href="#" data-icon="info" data-iconpos="notext" title="Ayuda al Usuario" onclick="KEYS_27();">back</a>
</div><!-- /header -->
<div data-role="main" class="ui-content">
</div><!-- /main -->
</div><!-- /page EMAIL_Box_hlp -->
<div data-role="page" id="EMAIL_List_hlp" data-dom-cache="true">
<div data-role="header" data-position="fixed" data-tap-toggle="false" data-theme="b">
<a href="#" data-icon="back" data-iconpos="notext" title="Volver Atras" onclick="KEYS_27();">back</a>
<h1>Bandeja de Entrada</h1>
<a href="#" data-icon="info" data-iconpos="notext" title="Ayuda al Usuario" onclick="KEYS_27();">back</a>
</div><!-- /header -->
<div data-role="main" class="ui-content">
</div><!-- /main -->
</div><!-- /page EMAIL_List_hlp -->
<div data-role="page" id="EMAIL_View_hlp" data-dom-cache="true">
<div data-role="header" data-position="fixed" data-tap-toggle="false" data-theme="b">
<a href="#" data-icon="back" data-iconpos="notext" title="Volver Atras" onclick="KEYS_27();">back</a>
<h1>Mensajes</h1>
<a href="#" data-icon="info" data-iconpos="notext" title="Ayuda al Usuario" onclick="KEYS_27();">back</a>
</div><!-- /header -->
<div data-role="main" class="ui-content">
</div><!-- /main -->
</div><!-- /page EMAIL_View_hlp -->
<div data-role="page" id="EMAIL_Edit_hlp" data-dom-cache="true">
<div data-role="header" data-position="fixed" data-tap-toggle="false" data-theme="b">
<a href="#" data-icon="back" data-iconpos="notext" title="Volver Atras" onclick="KEYS_27();">back</a>
<h1>Datos de la Cuenta</h1>
<a href="#" data-icon="info" data-iconpos="notext" title="Ayuda al Usuario" onclick="KEYS_27();">back</a>
</div><!-- /header -->
<div data-role="main" class="ui-content">
</div><!-- /main -->
</div><!-- /page EMAIL_Edit_hlp -->
<!--sii.load jqm_footer -->
<!-- Fuerza el Juego de Caracteres UTF-8 en los eMails -->
<script>jQuery.ajaxSettings.mimeType="*/*; charset=UTF-8";</script>
<script src="../tutorial/eMailParser.js?version=1.60"></script>
</html>
Guardamos la interfaz web con el nombre "^EMAIL.htm" y lo colocamos en el directorios donde tenemos nuestros programas, en el ejemplo que damos en este tutorial utilizamos el directorio /tutorial/.
0010 rem 0010"^EMAIL.wwm ""BBx7.3""E-Mail client""CEMS, Apr, 26/2020
0020 rem "
0030 rem "by (por): Carlos E. Mendoza S., 01/28/2003
0040 rem "Copyright (c) 2003-&up INGENIX Consulting-VE. All rights reserved.
0050 rem "
0060 rem "INGENIX 21 grants you a royalty free license to use or modify this
0070 rem "software provided that this copyright notice appears on all copies.
0080 rem "This software is provided "AS IS," without a warranty of any kind.
0090 rem "
0100 rem "INGENIX 21 le otorga una licencia gratuita para usar y/o modificar
0110 rem "este software siempre que mantenga este COPYRIGHT en todas las copia
0110:s.
0120 rem "Este software es entregado "COMO ESTA", sin ningun tipo de garantia.
0130 rem
0140 begin ; setesc 9910; seterr 9330; call "^OFSET",1,"WF",C$,N$,"",0
0150 precision 4; gosub 9010
0200 rem ^100
0210 call "^GETENV.TCP","config",CONFIG$,SINFONIX_ERROR$
0220 if CONFIG$="" then goto 0310
0230 let CONFIG$=ath(CONFIG$)
0240 let TEMP=dec(CONFIG$(1,4)),CGI_BIN$=CONFIG$(5,TEMP),CONFIG$=CONFIG$(5+TEM
0240:P)
0250 goto 4110
0300 rem ^100
0310 call "^GETENV.TCP","query_string",QUERY_STRING$,SINFONIX_ERROR$
0320 let QUERY_STRING$=QUERY_STRING$+" "
0330 rem
0340 rem "cgi-bin
0350 let TEMP=pos(" "=QUERY_STRING$); if TEMP=0 then goto 9910
0360 let CGI_BIN$=QUERY_STRING$(1,TEMP-1),QUERY_STRING$=QUERY_STRING$(TEMP+1)
0370 if CGI_BIN$<>pgm(-1) then goto 9910
0380 rem
0390 rem "Request JSON Object
0400 call "^GETENV.TCP","request_uri",REQUEST$,SINFONIX_ERROR$
0410 if pos("_sql.pl?"=REQUEST$) then let ARRAY=1
0420 rem
0500 rem ^100,5"Get Cookie Config
0505 gosub 8400
0510 rem
0515 let STRING$=QUERY_STRING$
0520 rem
0525 let SEARCH$="MAIL_CMD="; gosub 8070; let MAIL_CMD$=VALUE$
0530 let SEARCH$="MAIL_ARGV="; gosub 8070; let MAIL_ARGV$=VALUE$
0535 let SEARCH$="MAIL_BOX="; gosub 8070; let MAIL_BOX$=VALUE$
0540 rem
0545 if ARRAY then goto 1960
0550 rem
0555 let HTML$="^EMAIL"
1000 rem 1000
1010 let FUNCTION=1; goto 1030
1020 let FUNCTION=2
1030 call "^LHTML.TCP",HTML$+".htm",FUNCTION,REPLACE$,CONFIG_TCP$,ORG_REPLACE$
1040 if FUNCTION=0 then goto 9910
1100 rem ^100
1110 rem "MAIL Name, User, Password & Remind Password
1120 if REPLACE$="$MAIL_ACCOUNT$" then let Z$=MAIL_ACCOUNT$; goto 1730
1130 if REPLACE$="$MAIL_NAME$" then let Z$=MAIL_NAME$; goto 1730
1140 if REPLACE$="$MAIL_USER$" then let Z$=MAIL_USER$; goto 1730
1150 if REPLACE$="$MAIL_PSWD$" then let Z$=MAIL_PSWD$; goto 1730
1160 if pos("$MAIL_REMIND."=REPLACE$) then let TEMP$=MAIL_REMIND$; goto 1810
1200 rem ^100
1210 rem "OUT Going Mail
1220 if pos("$OUT_GOING."=REPLACE$) then let TEMP$=OUT_GOING$; goto 1810
1230 if pos("$OUT_ENCRYP."=REPLACE$) then let TEMP$=OUT_ENCRYP$; goto 1860
1240 if pos("$OUT_AUTH."=REPLACE$) then let TEMP$=OUT_AUTH$; goto 1860
1250 rem
1260 if REPLACE$="$OUT_HOST$" then let Z$=OUT_HOST$; goto 1730
1270 if REPLACE$="$OUT_PORT$" then let Z$=OUT_PORT$; goto 1730
1280 if REPLACE$="$OUT_USER$" then let Z$=OUT_USER$; goto 1730
1290 if REPLACE$="$OUT_PSWD$" then let Z$=OUT_PSWD$; goto 1730
1300 rem ^100
1310 rem "IN Going Mail
1320 if pos("$IN_GOING."=REPLACE$) then let TEMP$=IN_GOING$; goto 1810
1330 if pos("$IN_ENCRYP."=REPLACE$) then let TEMP$=IN_ENCRYP$; goto 1860
1340 if pos("$IN_AUTH."=REPLACE$) then let TEMP$=IN_AUTH$; goto 1860
1350 rem
1360 if REPLACE$="$IN_HOST$" then let Z$=IN_HOST$; goto 1730
1370 if REPLACE$="$IN_PORT$" then let Z$=IN_PORT$; goto 1730
1380 if REPLACE$="$IN_USER$" then let Z$=IN_USER$; goto 1730
1390 if REPLACE$="$IN_PSWD$" then let Z$=IN_PSWD$; goto 1730
1400 rem ^100
1410 rem "Authenticacion Scheme
1420 if pos("$MAIL_ENCRYP_SCHEME."=REPLACE$) then let TEMP$=MAIL_ENCRYP_SCHEME
1420:$; goto 1860
1430 if pos("$MAIL_AUTH_SCHEME."=REPLACE$) then let TEMP$=MAIL_AUTH_SCHEME$; g
1430:oto 1860
1440 if REPLACE$="$MAIL_XOAUTH_TOKEN$" then let Z$=MAIL_XOAUTH_TOKEN$; goto 17
1440:30
1500 rem ^100
1510 rem "Verbose Mode
1520 if pos("$MAIL_GETMAIL."=REPLACE$) then let TEMP$=MAIL_GETMAIL$; goto 1810
1530 if pos("$MAIL_KEEP."=REPLACE$) then let TEMP$=MAIL_KEEP$; goto 1810
1540 if pos("$MAIL_VERBOSE."=REPLACE$) then let TEMP$=MAIL_VERBOSE$; goto 1810
1550 if pos("$MAIL_LEVEL."=REPLACE$) then let TEMP$=MAIL_LEVEL$; goto 1860
1560 if pos("$MAIL_FQDN."=REPLACE$) then let TEMP$=MAIL_FQDN$; goto 1810
1570 if REPLACE$="$MAIL_FQDN_URL$" then let Z$=MAIL_FQDN_URL$; goto 1730
1580 if REPLACE$="$MAIL_LEVEL$" then let Z$=MAIL_LEVEL$; goto 1730
1590 if REPLACE$="$MAIL_GETMAIL_TIME$" then let Z$=MAIL_GETMAIL_TIME$; goto 17
1590:30
1600 rem
1610 if REPLACE$="$CONFIG$" then gosub 1910; goto 1730
1700 rem ^100
1710 let Z$=""; goto 1730
1720 let Z$="<% NOT CONVERT %>"+Z$; goto 1730
1730 let REPLACE$=Z$
1740 goto 1020
1800 rem ^100
1810 let TEMP=pos(".CHECKED="=REPLACE$)+9; if TEMP=9 then goto 1710
1820 let Z$=ORG_REPLACE$(TEMP,pos("$"=ORG_REPLACE$(TEMP)+"$")-1)
1830 if TEMP$=Z$ then let Z$=Z$+""" checked """
1840 goto 1720
1850 rem
1860 let TEMP=pos(".SELECT="=REPLACE$)+8; if TEMP=8 then goto 1710
1870 let Z$=ORG_REPLACE$(TEMP,pos("$"=ORG_REPLACE$(TEMP)+"$")-1)
1880 if TEMP$=Z$ then let Z$=Z$+""" selected """
1890 goto 1720
1900 rem ^100
1910 let Z$=""
1920 let TEMP=len(CGI_BIN$),Z$=Z$+bin(TEMP,4)+CGI_BIN$
1930 let Z$=hta(Z$)
1940 return
1950 rem "3000
1960 rem "Response JSON Object
1970 print "{",
1980 print """command"":"""+MAIL_CMD$+""",",
1990 print """argv"":"""+MAIL_ARGV$+""",",
2000 print """data"":",
2010 rem
2020 if IN_GOING$="POP3" then goto 2060
2030 if IN_GOING$="IMAP" then goto 2600
2040 gosub 7910; gosub 3810
2050 goto 3905
2060 rem "^1000,5
2070 rem "POP3 Command Protocol
2080 let CMD$=" 1.RETR 2.TOP 3.DELE 4.LIST 5.NOOP 6.RSET 7.STAT "
2090 let CMD=num(CMD$(pos("."+cvs(MAIL_CMD$,7)+" "=CMD$)-2,2))
2100 rem
2110 let REQUEST$="STAT"; gosub POP3
2120 gosub 8135; let TRASH$=Z$; rem "+OK
2130 gosub 8135; let MSGS=num(Z$,err=2140)
2140 gosub 8135; let MB=num(Z$,err=2150)
2150 rem
2160 on CMD gosub ERROR,POP3_RETR,POP3_TOP,POP3_DELE,POP3_LIST,ERROR
2170 goto 9910
2200 rem ^100,5
2205 POP3_RETR: rem "RETR[ieve] MAIL (Recupera el Correo y lo Elimina)
2210 let TEMP$=MAIL_ARGV$
2215 rem
2220 let MESG=num(TEMP$,err=2235); if MESG>1 or MESG>MSGS then goto 2235
2225 let REQUEST$="RETR "+str(MESG); gosub POP3
2230 gosub 3810; let RECORD=RECORD+1; goto 3905
2235 gosub 7915; goto 2230
2300 rem ^100,5
2305 POP3_TOP: rem "TOP MAIL (Recupera Parte del Correo y lo Mantiene)
2310 let TEMP$=MAIL_ARGV$; gosub 8135; let LINES$=TEMP$,TEMP$=Z$
2315 rem
2320 let MESG=num(TEMP$,err=2335); if MESG<1 or MESG>MSGS then goto 2335
2325 let REQUEST$="TOP "+str(MESG)+" "+cvs(LINES$,3); gosub POP3
2330 gosub 3810; let RECORD=RECORD+1; goto 3905
2335 gosub 7915; goto 2330
2400 rem ^100,5
2405 POP3_DELE: rem "DELE[te] MAIL (Elimina el Correo)
2410 let MESG$=cvs(MAIL_ARGV$,35)+" "
2415 print "[",
2420 let TMP=pos(" "=MESG$); if TMP=0 then goto 2590
2425 let TEMP$=MESG$(1,TMP-1),MESG$=MESG$(TMP+1)
2430 rem
2435 print "{",
2440 print """mesg"":"+TEMP$+",",
2445 print """data"":",
2450 let MESG=num(TEMP$,err=2480); if MESG<1 or MESG>MSGS then goto 2480
2455 rem RESPONSE$="+OK "; goto 3370; rem "Eliminar solo para prueba!!
2460 let REQUEST$="DELE "+str(MESG); gosub POP3
2465 gosub 3810; print "}",; let RECORD=RECORD+1
2470 if pos(" "=MESG$) then print ",",; goto 2420
2475 goto 2590
2480 gosub 7915; let RECORD=RECORD-1; goto 2465
2500 rem ^100,5
2505 POP3_LIST: rem "LIST (INBOX) MESSAGE (Listar Correos (por Recuperar))
2510 let TMP=pos(" "=MAIL_ARGV$+" ")
2515 let MESG=num(MAIL_ARGV$(1,TMP-1),err=3905); if MESG<1 then let MESG=MSGS
2520 let LAST_MESG=num(MAIL_ARGV$(TMP),err=3905)
2525 let TIME_LAPSE=.005; rem "duracion de la conexion en: (HH.MMSS)
2530 let TIME_REACHED=TIME+TIME_LAPSE/.6
2535 print "[",
2540 if MESG<=LAST_MESG then goto 2590
2545 print "{",
2550 print """mesg"":"+str(MESG)+",",
2555 print """data"":",
2560 let REQUEST$="TOP "+str(MESG)+" 50"; gosub POP3
2565 gosub 3810; print "}",; let RECORD=RECORD+1
2570 let MESG=MESG-1; if MESG<=LAST_MESG then goto 2590
2575 if tim>TIME_REACHED and RECORD>10 then goto 2590
2580 if tim>TIME_REACHED+TIME_LAPSE then goto 2590
2585 if MESG then print ",",; goto 2540
2590 print "]",
2595 goto 3905
2600 rem "^1000,5
2605 rem "IMAP Command Protocol
2610 let CMD$=""
2615 rem
2620 rem "Basic Command
2625 let CMD$=CMD$+" 1.LIST 2.STATUS 3.SELECT 4.SEARCH 5.FETCH "
2630 let CMD$=CMD$+" 6.STORE 7.EXPUNGE "
2635 rem
2640 rem "Extended Command
2645 let CMD$=CMD$+" 8.LIST-MBOX 9.LIST-MAIL 10.DELE "
2650 rem
2655 let CMD=num(CMD$(pos("."+cvs(MAIL_CMD$,7)+" "=CMD$)-2,2))
2660 rem
2665 on CMD gosub ERROR,IMAP_LIST,IMAP_STATUS,IMAP_SELECT,IMAP_SEARCH,IMAP_FET
2665:CH,IMAP_STORE,IMAP_EXPURGE,IMAP_LIST_MBOX,IMAP_LIST_MAIL,IMAP_DELE,ERROR
2670 gosub 3905
2675 goto 9910
2700 rem ^100,5
2705 IMAP_LIST: rem "LIST (FOLDER/MAILBOX) TREE (Listar Carpetas y Buzones)
2710 let TEMP$=MAIL_ARGV$
2715 gosub 8135; let MAILBOX$=Z$,WILDCARD$=TEMP$
2720 if WILDCARD$="" then let WILDCARD$="*"
2725 let REQUEST$="LIST """+MAILBOX$+""" """+WILDCARD$+""""
2730 goto 3730; rem ********** eliminar ***********
2735 if CMD=9 then goto 3730
2740 goto 3705
2800 rem ^100,5
2805 IMAP_STATUS: rem "STATUS OF MAILBOX (Situacion del Buzon de Correo)
2810 let TEMP$=MAIL_ARGV$
2815 gosub 8135; let MAILBOX$=Z$,STATUS$=TEMP$
2820 let REQUEST$="STATUS "+MAILBOX$+" ("+STATUS$+")"
2825 goto 3705
2900 rem ^100,5
2905 IMAP_SELECT: rem "SELECT MAILBOX WORK (Selecciona Carpeta o buzon)
2910 let MAILBOX$=MAIL_ARGV$
2915 let REQUEST$="SELECT "+MAILBOX$
2920 goto 3705
3000 rem ^100,5
3005 IMAP_SEARCH: rem "SEARCH MAILBOX (Busquedas en los Correos Electronicos)
3010 let REQUEST$="",WILDCARD$=MAIL_ARGV$
3015 let REQUEST$=REQUEST$+"SELECT "+MAIL_BOX$+$0A$
3020 let REQUEST$=REQUEST$+"SEARCH "+WILDCARD$
3025 goto 3705
3100 rem ^100,5
3105 IMAP_FETCH: rem "FETCH EMAILS (Buscar Correo Electronico)
3110 let REQUEST$="",EMAIL$=MAIL_ARGV$
3115 let REQUEST$=REQUEST$+"SELECT "+MAIL_BOX$+$0A$
3120 let REQUEST$=REQUEST$+"FETCH "+EMAIL$
3125 goto 3705
3200 rem ^100,5
3205 IMAP_STORE: rem "STORE (SET FLAG MASSIVELY) (Marca S/Situacion Masivament
3205:e)
3210 let TEMP$=MAIL_ARGV$
3215 gosub 8135; let WILDCARD$=Z$,FLAG$=TEMP$
3220 let REQUEST$=""
3225 let REQUEST$=REQUEST$+"SELECT "+MAIL_BOX$+$0A$
3230 let REQUEST$=REQUEST$+"STORE "+WILDCARD$+" "+FLAG$
3235 goto 3705
3300 rem ^100,5
3305 IMAP_EXPURGE: rem "EXPURGE EMAIL DELETE (Borra correos marados como Elim)
3310 let REQUEST$="EXPURGE"
3315 goto 3705
3400 rem ^100,5
3405 IMAP_LIST_MBOX: rem "EXTENDED LIST & STATUS (FOLDER/MAILBOX) TREE
3410 gosub 2705; rem "LIST Command
3415 let XRESPONSE$=STORE_RESPONSE$,REQUEST$=""
3420 rem
3425 let Z=pos($0A$=XRESPONSE$); if Z=0 then goto 3470
3430 let TEMP$=XRESPONSE$(1,Z-1),XRESPONSE$=XRESPONSE$(Z+1)
3435 if pos("LIST"=TEMP$)<>3 then goto 3425
3440 rem
3445 let Z=pos(")"=TEMP$,-1),TEMP$=cvs(TEMP$(Z+1),3)
3450 gosub 8125; gosub 8125; let MAILBOX$=Z$
3455 let Z$="STATUS "+MAILBOX$+" (MESSAGES UNSEEN RECENT UIDNEXT UIDVALIDITY)"
3460 let REQUEST$=REQUEST$+$0A$+Z$
3465 goto 3425
3470 if REQUEST$>"" then let REQUEST$=REQUEST$(2); print ",""status"":",
3475 goto 3705
3480 gosub 7915; goto 3740
3500 rem ^100,5
3505 IMAP_LIST_MAIL: rem "EXTENDED FETCH Command for List MAIL_BOX
3510 let TEMP$=MAIL_ARGV$
3515 gosub 8125; let FIRST_MAIL=num(Z$,err=3575)
3520 gosub 8125; let LAST_MAIL=max(1,num(Z$,err=3575))
3525 if FIRST_MAIL<1 then let FIRST_MAIL=max(1,LAST_MAIL-40)
3530 let RANGE$=str(FIRST_MAIL+1)+":"+str(LAST_MAIL)
3535 let REQUEST$=""
3540 let REQUEST$=REQUEST$+"SELECT "+MAIL_BOX$+$0A$
3545 let REQUEST$=REQUEST$+"FETCH "+RANGE$+" ("
3550 let REQUEST$=REQUEST$+"FLAGS BODY[HEADER.FIELDS ("
3555 let REQUEST$=REQUEST$+"Date From To Subject "
3560 let REQUEST$=REQUEST$+"Message-ID Content-Type"
3565 let REQUEST$=REQUEST$+")])"
3570 goto 3705
3575 gosub 7915; goto 3740
3600 rem ^100,5
3605 IMAP_DELE: rem "EXTENDED STORE Command for Delete MAIL
3610 let TEMP$=cvs(MAIL_ARGV$,35)
3615 let Z=pos(" "=TEMP$); if Z then let TEMP$(Z,1)=","; goto 3615
3620 let REQUEST$=""
3625 let REQUEST$=REQUEST$+"SELECT "+MAIL_BOX$+$0A$
3630 let REQUEST$=REQUEST$+"STORE "+TEMP$+" +FLAGS \Deleted"+$0A$
3635 goto 3705
3700 rem ^100,5
3705 rem "CLOSE Connection...
3710 if REQUEST$>"" then let REQUEST$=REQUEST$+$0A$
3715 let REQUEST$=REQUEST$+"LOGOUT"
3720 rem
3725 rem "OR KeepAlives...
3730 gosub IMAP
3735 rem
3740 rem "OR Error...
3745 if REQUEST$<>"LOGOUT" then gosub 3810; let RECORD=RECORD+1
3750 return
3800 rem ^100,5
3805 rem "set data JSON
3810 let STORE_RESPONSE$=RESPONSE$,CACHE=dec(RESPONSE$,err=3820)
3815 read record(CACHE,ind=0,siz=1024,err=3820)RESPONSE$
3820 rem
3825 print """",
3830 let RESPONSE$="<% CONVERT TO HEX=FF %>"+RESPONSE$
38