Manuales de TuGa Página Principal
TuGa.
Manual principal y CMS
Uno de
los problemas que tenemos los desarrolladores de software hoy en día, es el
tener que hacer múltiples aplicaciones (en la mayoría de los casos diferentes)
y dar un soporte a todas. Entre más aplicaciones más soportes diferentes. Lo
mejor sería tener una sola aplicación donde usted por medio de reglas defina un
comportamiento y a la hora de dar soporte, solo hacerlo sobre las reglas que ya
había escrito ….. Es por eso que nace TuGa
TuGa
es un aplicativo 100% web con el cual usted podrá:
·
Crear web sites por medio de un CMS muy sencillo.
·
Crear aplicaciones web que permitan la captura y
procesamiento de datos. Estos datos pueden almacenarse en una base de datos,
usarse para enviar un correo, ejecutar una aplicación o ser enviados a un formulario
JSP externo para su procesamiento.
Cuál
es la idea de TuGa? Que configurando esta aplicación usted pueda crear otras
aplicaciones sin necesidad de compilar ni escribir código, lo único que usted
necesita es conocimientos en SQL un poco de Javascript y un poco de CSS, claro
que sí maneja Java mucho mejor pero igualmente no es necesario.
Bajo
este esquema, puede hacer cambios en el comportamiento de las aplicaciones en
caliente y de una forma sencilla.
Características
generales:
·
CMS (Content Management System)
integrado tipo drag and drop.
·
Creación de formularios (pantallas) y reportes que
interactúen con diferentes motores de bases de datos.
·
Autenticación de usuarios en base de datos local (TuGa),
LDAP o personalizada usando una librería de Java
Nota.
En las instrucciones de instalación se asume que el sistema operativo es
Windows XP, Windows 2003 o Windows Vista
Requerimientos.
·
Sistema Operativo Windows XP, Windows 2003, Windows Vista o
Linux
·
1GB en RAM
·
PostgreSQL 8.2
·
Java 1.6
·
Jakarta Tomcat ver 5.22 o superior
·
Internet Explorer 7 o Firefox versión 2.
Instalación.
Instale
Java 1.6, PostgreSQL y Jakarta-Tomcat. Para ello remítase a los manuales
correspondientes de estas aplicaciones.
Cree
los directorios c:\tugalogs y c:\tugafiles. Estos directorios serán utilizado
para los logs de tuga y los archivos protegidos por TuGa respectivamente. Si
desea una ubicación diferente puede cambiar la ubicación por medio de las
opciones de configuración del sistema.
Copie
el archivo Tuga.war en el directorio de aplicaciones web de Tomcat (webapps),
reinicie tomcat.
Entre
a un browser y digite la siguiente dirección (de acuerdo al puerto donde tomcat
estará escuchando peticiones, por defecto es el puerto 8080)
http://localhost:8080/Tuga
Siga
las instrucciones. Debe digitar los datos de una cuenta tipo DBA de postgresql
para construir los objetos de Tuga y la base de datos DEMO (Esta operación
puede durar varios minutos).
Instalación
Manual de las bases de datos de TuGa.
Una
vez descomprimido el archivo TuGa.war en el directorio /Tuga/sql hay dos
scripts (tuga.sql y demo.sql) Los cuales corresponden a los objetos de la base
de datos Tuga y Demo respectivamente. Para instalarlos debe crear en PostgreSQL
el usuario tugauser con password 1a2b3c4d y privilegios para crear objetos.
Tenga en cuenta que PostgreSQL debe tener instalado el lenguaje pl/pgsql y el
usuario tugauser debe tener privilegios para invocarlo (o crearlo si es el
caso). Usando el usuario tugauser cree la base de datos tuga y la base de datos
demo con codificación UTF-8. Una vez creada dichas instancias, contectese a
ellas con el usuario tugauser y ejecute el script correspondiente a cada
instancia.
Una
vez creado los objetos en la base de datos cree un archivo de texto llamado
/Tuga/instok (sin extensión y sin contenido). La existencia de este archivo
deshabilita las pantallas de instalación de la aplicación y habilita la
pantalla de ingreso a la misma. Ingrese a la dirección http://localhost:8080/Tuga
Ingreso
a la aplicación.
Entre
a un browser y digite la siguiente dirección (de acuerdo al puerto donde tomcat
estará escuchando peticiones, por defecto es el puerto 8080)
http://localhost:8080/Tuga
El
usuario administrador de la aplicación es admin y su contraseña es admin123
Barra
de Menú.
La
barra de menú está ubicada en la parte superior de TuGa y cuenta con las
siguientes opciones:
|
|
Ir
una opción atrás (igual que el botón atrás del navegador) |
|
|
Ir
una opción adelante (igual que el botón adelante del navegador) |
|
|
Muestra
la ventana de depuración |
|
|
Limpia
la ventana de depuración |
|
|
Esconde
/ Muestra el Árbol de aplicaciones |
|
|
Salir
de la aplicación |
Árbol
de Aplicaciones
Muestra
las diferentes opciones que tiene TuGa. Puede cambiar la estructura del árbol
arrastrando las diferentes opciones del árbol. Si desea cambiar el orden
entonces debe hacer el arrastre manteniendo presionada la tecla SHIFT.
Se
pueden agregar aplicaciones haciendo clic con el botón derecho del ratón y
escogiendo la opción “Agregar Aplicación” con lo cual obtendrá la siguiente
ventana
Escoja
un nombre para la opción y presione el botón GO para seleccionar archivos,
páginas, pantallas o reportes (Debe presionar el botón GO una vez más para
hacer la selección).
Seleccione
la imagen que desea como icono para la opción (los iconos se encuentran en
/Tuga/imágenes/img).
Seleccione
la ventana (Destino) donde será ejecutada la opción:
Panel. La
opción será lanzada en la pantalla central de TuGa
Pagina
Nueva.
La opción será lanzada en una nueva página del navegador o en otra pestaña
según la configuración de su navegador.
Configuración
(Menú Principal -> TUGA -> Configuración)
Método
de autenticación. Escoja como debe ser la autenticación de los usuarios de
TuGa. La autenticación LOCAL permite que los usuarios se definan en la base de
datos de TuGa y por lo tanto se permite pleno control sobre ellos (actualizar
datos, cambiar contraseña). La autenticación tipo LDAP permite usar un
directorio externo para la definición de los usuarios. Es importante aclarar
que aunque la autenticación sea tipo LDAP, los usuarios deben crearse también
en TuGa y el login usado debe coincidir
con el login en el repositorio LDAP, la contraseña para la autenticación será
la que se usa en el repositorio LDAP y por lo tanto la opción de cambio de
contraseña de la aplicación no tendré ningún efecto en este caso. Los roles
definidos en TuGa no tienen ninguna relación con los grupos o unidades
organizacionales del repositorio LDAP y es por ello que aunque la autenticación
sea de este tipo, a cada usuario hay que definirle a que rol (o roles)
pertenece.
Remitente
de correos. Dirección de correo que se usará como remitente cuando de programen
acciones que permiten enviar correos o cuando se envíe un correo masivo a los
usuarios de la aplicación.
Servidor
SMTP.
Servidor de correo saliente (nombre o dirección IP) que se usará para el envío
de correos de la aplicación.
Usuario
SMTP.
Si el servidor de correo saliente requiere autenticación, entonces se debe
escribir el login del usuario que se usará para la autenticación, de lo
contrario este espacio debe estar vacio.
Password
SMTP.
Contraseña del usuario descrito en el punto anterior.
Usa
replicación de datos. Cuando se programan acciones en pantallas que interactúen
con una base de datos, existe la opción que dichos datos interactúen de la
misma forma con otra conexión JDBC. Esta opción se usa para replicar datos pero
tiene la restricción que en el momento solo se permite una conexión hacia otro
motor PostgreSQL.
Galería
de imágenes. Carpeta dentro de la aplicación web de Tuga donde se
almacenarán las imágenes. Su valor por defecto es /gallery-img que corresponde
a Tuga/gallery-img
Archivos
protegidos. Carpeta dentro del sistema operativo que se usa para alojar
los archivos almacenados en TuGa (documentos protegidos). Su valor por defecto es:
c:\tugaFiles
Límite
para subir archivos. Tamaño máximo en Mega Bytes que se usará para subir archivos
a la aplicación (por medio del administrador de archivos de TuGa). Su valor por
defecto es 10MB lo que quiere decir que archivos mayores a 10MB no podrán ser
subidos. Cuando se suben varios archivos al tiempo, la sumatoria de la longitud total de los archivos no puede
sobrepasar esta capacidad.
Página
principal del panel. Página que se usará como página principal cuando los
usuarios se hallan logueado a la aplicación (Ver CMS si quiere saber cómo crear
páginas).
Página
error de autenticación. Página que se usará como página de error cuando existe
algún problema en la autenticación, por ejemplo, login o password incorrecto
(Ver CMS si quiere saber cómo crear páginas).
Depuración
de la Maquina. Habilita o no la opción de depuración de TuGa
Directorio
de logs. Directorio
dentro del sistema operativo donde serán almacenados los logs correspondientes
a los mensajes de depuración de TuGa. Su valor por defecto es c:\tugaFiles.
Administrador
de Archivos (Menú principal -> TUGA -> Administrador de Archivos)
Permite
subir archivos al servidor de TuGa, estos archivos quedarán alojados en la
carpeta definida en Configuración en la opción “Archivos protegidos”. TuGa cuenta con un mecanismo donde no se
permite tener acceso a estos archivos al menos que el administrador haya
otorgado permisos para ello.
Con el
Administrador de Archivos se pueden subir archivos, crear carpetas, mover
archivos a carpetas, eliminarlos, etc.
Utilice
el icono 
para
eliminar archivos o carpetas (y su contenido). Utilice el icono 
para
establecer los permisos de acceso del archivo o habilitar las estadísticas de descarga
del mismo (Para consultar las estadísticas ingrese a Menú Principal ->
Estadísticas).
CMS
(Menú principal -> Castor CMS)
Por
medio de esta opción usted podrá crear páginas de una forma muy sencilla.
Árbol
de Paginas. Muestra de una forma estructural todas las páginas que
componen el web site. Puede usar el botón derecho del ratón haciendo clic sobre
cada página para editar los permisos de cada una de ellas, agregar una nueva
página o editar su configuración (Cambiar su nombre, establecerla como
principal, etc.).
El
orden como aparecen todas las páginas dentro de este árbol, es el mismo orden
que aparecerá en el menú de navegación del web site. Puede cambiar dicho orden
arrastrando las páginas para poner unas como subpáginas de otras o cambiar el
orden. Para cambiar el orden debe arrastrar mientras mantiene presionada la
tecla SHIFT.
Crear
una nueva página. Para ello haga clic con el botón derecho del ratón sobre la
opción WebSite y escoja la opción “Nueva Página”.
Identificador
de la página. Cadena que identificará la pagina dentro del CMS, esta
cadena no puede contener espacios.
Nombre
de la página. Nombre que se le quiere asignar a la página.
Plantilla. La
plantilla que será utilizada para dar el aspecto a la página (Ver plantillas).
Usar
como página principal. Si esta página será o no la pagina principal del website.
Vincular
esta página al menú. Si se desea que aparezca o no en el menú del website.
Cada
vez que se crea una página, se le dará automáticamente permisos para que
cualquier usuario pueda visitarla. Si desea cambiar esto, estando en el árbol
de páginas haga clic con el botón derecho del ratón sobre la página y escoja la
opción “Permisos de acceso”, luego haga los ajustes a su gusto.
Cuando
se crea una página, el nombre de ella será igual al identificador de la pagina
+ el código que el sistema estableció para ella con la extensión .web.
Por ejemplo:
Pg-22_30.web seria la pagina que TuGa ha creado para el ejemplo ilustrado en
los gráficos anteriores y la forma de llamar dicha página directamente desde un
navegador seria: http://localhost:8080/Tuga/Pg-22_30.web
(Tenga en cuenta cambiar localhost por la dirección IP del servidor donde TuGa
está instalado y 8080 por el puerto correspondiente a la instalación de
Tomcat).
Para
editar el contenido de una página simplemente haga clic sobre ella con el botón
izquierdo del ratón.
Utilice
la barra de menú para agregar contenido a la página, para ello existen varias
opciones en la opción “Insertar” sin embargo solo se detallan a continuación
las más importantes:
Texto: Por
medio de esta opción usted puede agregar contenido tipo HTML a las paginas
(texto, imágenes, hipervínculos, referencias, etc.). TuGa utiliza como control
de contenido HTML el editor FCK (http://www.fckeditor.net/)
refiérase al manual de usuario de esta herramienta para mayor detalle. A
continuación solo de explicarán los controles más importantes de esta
herramienta.
|
|
Fuente
HTML. Muestra o edita el código fuente del documento |
|
|
Convierte
o remueve el texto en hipervínculos. También puede ser utilizado para subir
archivos y hacer enlaces con archivos, paginas, pantallas o reportes
existentes en el servidor por medio del Botón “ver servidor”. (Ver
administrador de archivos). |
|
|
Agrega
imágenes al documento. También puede utilizarse para subir imágenes al
servidor (Botón “ver servidor”). |
|
|
Maximiza
el editor. |
Escriba
un titulo para el contenido HTML que desea agregar a la página. Con la opción
“Muestra el título” se escoge si dicho título debe aparecer o no en la parte
superior del contenido.
Pantalla
o Reporte: Utilice el Botón 
para seleccionar la pantalla o reporte a
incluir dentro de la página (para crear una pantalla o reporte refiérase a las
instrucciones dedicadas para ello). Internamente, TuGa creará un elemento tipo
<iframe> donde se desplegará este tipo de contenido, es por ello que se
debe especificar el alto en pixeles. Si el alto no es lo suficientemente amplio
para mostrar el contenido, entonces automáticamente aparecerán barras de
desplazamiento que facilitarán la navegación. Presione el botón “Guardar” para
conservar los cambios.
Una
vez halla agregado el contenido necesario, si desea editarlo o eliminarlo pueda
hacerlo haciendo clic en la opción “Editar” que aparece en la parte superior
derecha sobre cada contenido.
Nota:
tenga
en cuenta que ni el nombre de la pagina ni el identificador puede contener la
palabra “tuga”.
Plantillas. Las
plantillas son la estructura básica que le da forma a una página. La plantilla
incluye contenido y estilos que no cambian desde TuGa sino que deben
modificarse externamente utilizando algún editor de texto o alguna herramienta
para creación de páginas HTML.
Hacer
una plantilla web para TuGa es muy sencillo, solo hay que hacer una página HTML
de la forma que usted quiera y definir unos TAGS especiales donde la aplicación
interpretará que en ese lugar habrá contenido dinámico (por ejemplo, Texto,
Pantallas, Reporte, etc.)
Las
plantillas deben alojarse en la carpeta webtpl dentro de la aplicación web Tuga
(/Tuga/webtpl). El nombre de la plantilla será el nombre del directorio que la
contenga.
Por
ejemplo, por defecto Tuga incluye 2 plantillas, una llamada prueba
(/Tuga/webtpl/prueba) y otra llamada tuga (/Tuga/webtpl/tuga). Dentro de cada
uno de dichas carpetas están los archivos correspondientes a las plantillas.
El
archivo que da vida a la plantilla se llama index.htm (tenga en cuenta el
archivo debe estar totalmente en minúsculas). Podemos observar que tanto la
plantilla prueba como la plantilla tuga incluyen este archivo. Los otros
directorios que se encuentran en cada plantilla dependen del contenido que
tenga el archivo index.htm.
Dentro
de index.htm usted puede incluir el contenido que quiera. Para crear las áreas
donde va a poner contenido de forma dinámica (texto, reportes, pantallas, etc.)
lo único que tiene que hacer es definir tags de la siguiente forma:
{container
id=x}
Donde
x es un número que se utiliza como identificador del contenedor. Por ejemplo {container
id=1} define
el contenedor con el identificador 1. Puede definir tantos contenedores como
desee, recuerde que el identificador debe ser único en la plantilla. Le recomendamos
ver el código fuente de index.htm de la plantilla prueba que viene con TuGa.
Tenga en cuenta que si {container id=x} esta declarado como contenido de un bloque (div), debe haber
retorno de línea entre la declaración de inicio y final del bloque de la
siguiente forma:
<div
id=”prueba”>
{container
id=x}
</div>
Si la
declaración la hace en una sola línea <div id=”prueba> {container
id=x} </div> TuGa tendrá problemas al tratar de interpretar el bloque y
no funcionará.
Los
cuadros de texto (contenido tipo HTML) pueden incluir un titulo que será
visible o no de acuerdo a lo que escoja el usuario. Para cambiar el aspecto de
dicho título debe incluir el siguiente código en el archivo de estilos de la plantilla:
.castor_titulo{
font-family:Arial,sans-serif;
font-size:12px;
color:white;
background-color:#132B47;
}
El
anterior código establece que las letras son blancas y la barra del título
tiene un color de fondo azul oscuro.
Cuando
configure los estilos (CSS) tenga en cuenta no tener la siguiente línea la cual
impide el correcto funcionamiento de la barra de menú :
span {
display:
none;
}
Nota: la plantilla tuga es utilizada por el sistema para la
edición de artículos, por favor no la
borre.
Menús
en las plantillas. TuGa cuenta con una opción que permite incluir menús
horizontales en las páginas con las opciones de navegabilidad de todas las
páginas creadas. Para que una página aparezca en dicho menú debe tener
habilitada la opción “Vincular está pagina al menú” en su configuración. El orden
en el que las páginas aparecen en el menú depende del orden de las páginas en
el Árbol de páginas.
Para
habilitar el menú dentro de la plantilla, edite el archivo index.htm y agregue
las siguientes líneas:
<div
id="menucont"></div>
<script>
NlsMenuUtil.loadFromXMLFile("../../menuXML",
"menucont" );
</script>
El
menú se desplegara en el área marcada por el div menucont. Puede cambiar el
nombre del div pero tenga en cuenta reemplazarlo también en las líneas marcadas
por <script>
Utilice
estilos (CSS) para dar la apariencia que necesite. TuGa utiliza como control de
menús una versión comercial de NLSMenu (disponible en www.addobject.com). Para mayor información de cómo parametrizar este control,
por favor refiérase a la documentación disponible en el website, a continuación
nombraremos solamente algunos estilos básicos del control.
En el
archivo index.htm de la plantilla prueba, pueden observar dos líneas que marcan
la definición de estilos del menú :
<link rel="stylesheet" href="horz-nlsmenu.css"
type="text/css" media="screen" />
<link rel="stylesheet" href="nlsmenu.css"
type="text/css" />
El
primer archivo hace referencia al estilo aplicado para la barra de menú, el
segundo hace referencia a los estilos aplicados en las opciones que se
despliegan cuando se hace clic sobre cada opción.
En el
primer archivo encontramos el siguiente contenido el cual establece la forma
que se dará a la barra de menú en cuanto a dimensión y color.
#menucont{
width:
780px;
background: url('images/menu_background.gif');
float: left;
height:22px;
}
Observe
los comentarios encima de cada bloque para tener una idea de que estilo aplica
para cada parte del menú.
/* Área de cada opción del menú */
.horz_nlsitemcontainer
{
height: 22px;
padding:0px;
border: 0px;
width: 129px;
text-align: center;
}
/* Área de cada opción del menú cuando el
ratón esta encima de la opción*/
.horz_nlsitemcontainerover
{
height:22px;
padding:0px;
border: 0px;
width: 129px;
text-align: center;
}
/* Formato del contenido de cada opción en
el menú */
.horz_nlsitem {
font-family: geneva,'Trebuchet MS',sans-serif;
font-size: 8pt;
color:#f2f2f2;
font-weight: bold;
text-align: center;
}
/* Formato del contenido de cada opción en
el menú cuando el ratón esta encima de la opción*/
.horz_nlsitemover {
font-family: geneva,'Trebuchet
MS',sans-serif;
font-size:8pt;
color:#ffffff;
font-weight: bold;
text-align: center;
}
Para
cambiar la apariencia de una opción del menú cuando el ratón se encuentre
encima de dicha opción, debe hacerlo modificando el estilo
.horz_nlsitemover {
font-family: geneva,'Trebuchet
MS',sans-serif;
font-size:8pt;
color:#ffffff;
font-weight: bold;
text-align: center;
}
Si
desea que aparezca una imagen en esta acción, agregue la siguiente línea en la
sección:
background-image:url(../img/nav-selected.png);
Existe
otra opción de menú con el cual obtenemos un texto con los nombres y enlaces a
cada página, pero solo las páginas principales (no los submenúes). Para acceder
a esta función simplemente agregue el siguiente tag (sin espacios) en el lugar
que desee aparezca este menú
{menu}
Por
cada opción del menú, se generara un div con el siguiente formato:
<div id=’miX’ class='tugamntext'>OpcionMenú</div>
Donde
X va desde 1 hasta el número de elementos del menú.
RSS.
Tuga
genera automáticamente RSS solo con los artículos de la página principal. Para
acceder a esta fuente simplemente ingrese a la dirección:
http://localhost:8080/Tuga/rss.xml
Nota: le recomendamos Firefox como navegador con los complementos
webdeveloper y firebug como una buena herramienta en el apoyo de crear estilos
y código javascript para las plantillas.