Como bien se dijo al principio, este proyecto es un proyecto orientado a ayudar a desarrollar otros
proyectos, usándolo de librerías, conjunto de librerías o incluso como Framework de trabajo. Para
llegar a dicho fin, este proyecto se divide entre los distintos lenguajes que se trabajan por el
equipo de desarrollo. Cada lenguaje tendrá su página la cual no se pondrá en esta página guía cara
un cliente, sino que se independizan para cada uno de los desarrolladores que puedan hacer uso de
este proyecto.
Arrancar cliente
El entorno cliente del AnP se basa en JavaScript, JSON y CSS. Dentro de estos elementos podremos
seleccionar el nivel de profundidad que queremos gestionar para nuestra aplicación distinguiendo en
este caso 2 modos principales:
- Librerías: Modo en el que solo carcamos librerías de interés de uso general.
- Framework: Modo completo de la aplicación con carga sobre un entorno servidor.
Para cualquiera de los modos anteriores, nos hace falta crear un fichero HTML donde cargar dichos
elementos, donde tendremos una parte que serán los propios estilos, si éstos queremos importarlos,
que sería las etiquetas LINK; y los elementos JS en las etiquetas SCRIPT. Un ejemplo estructural
podría ser el siguiente:
-
Language
html
-
Lines
75
-
Characters
6752
<!DOCTYPE html>
<html lang="es" dir="ltr">
<head>
<title>Example</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="icon" href="/images/logo-32.png" sizes="32x32" />
<link rel="icon" href="/images/logo-192.png" sizes="192x192" />
<link rel="icon" href="/images/logo-512.png" sizes="512x512" />
<link rel="apple-touch-icon-precomposed" href="/images/logo-180.png" />
<meta name="msapplication-TileImage" content="/images/logo-270.png" />
<meta name="licence:text" content="© 2020-2021 CopyLeft. GPLv3" />
<meta name="licence:link" content="https://www.gnu.org/licenses/gpl-3.0.txt" />
<meta name="licence:icon" content="https://www.gnu.org/graphics/gplv3-88x31.png" />
<meta name="xdoc:link" content="https://example.k3y.pw/" />
<meta name="xdoc:author" content="KyMAN" />
<meta name="xdoc:since" content="20210826" />
<meta name="xdoc:version" content="20210826" />
<meta name="xdoc:access" content="public" />
<link type="text/css" rel="stylesheet" data-language="CSS3" href="https://cdn.k3y.pw/css/fonts/local/Roboto.css" data-crossorigin="anonymous" charset="utf-8" />
<link type="text/css" rel="stylesheet" data-language="CSS3" href="https://cdn.k3y.pw/css/fonts/local/RobotoMono.css" data-crossorigin="anonymous" charset="utf-8" />
<link type="text/css" rel="stylesheet" data-language="CSS3" href="https://cdn.k3y.pw/css/fonts/local/FontAwesome5Free.css" data-crossorigin="anonymous" charset="utf-8" />
<link type="text/css" rel="stylesheet" data-language="SASS/CSS3" href="/scss/AnPRM.css" data-css-map="/scss/AnPRM.css.map" data-scss="/scss/AnPRM.scss" data-crossorigin="anonymous" charset="utf-8" />
<link type="text/css" rel="stylesheet" data-language="CSS3" href="/anp/css/AnP.icons.css" data-crossorigin="anonymous" charset="utf-8" />
<link type="text/css" rel="stylesheet" data-language="CSS3" href="/css/AnPRM.icons.css" data-crossorigin="anonymous" charset="utf-8" />
<style data-type="text/css" data-rel="stylesheet" data-language="CSS3" charset="utf-8">
html,body{
height : 100%;
margin : 0px;
overflow : hidden;
}
</style>
<script data-type="text/javascript" data-language="ECMAScript 2015" src="/anp/ecma/AnP.ecma.js" data-crossorigin="anonymous" charset="utf-8"></script>
<script data-type="text/javascript" data-language="ECMAScript 2015" src="/anp/ecma/AnP.Ajax.ecma.js" data-crossorigin="anonymous" charset="utf-8"></script>
<script data-type="text/javascript" data-language="ECMAScript 2015" src="/anp/ecma/AnP.Settings.ecma.js" data-crossorigin="anonymous" charset="utf-8"></script>
<script data-type="text/javascript" data-language="ECMAScript 2015" src="/anp/ecma/AnP.I18N.ecma.js" data-crossorigin="anonymous" charset="utf-8"></script>
<script data-type="text/javascript" data-language="ECMAScript 2015" src="/anp/ecma/AnP.Threads.ecma.js" data-crossorigin="anonymous" charset="utf-8"></script>
<script data-type="text/javascript" data-language="ECMAScript 2015" src="/anp/ecma/AnP.Preload.ecma.js" data-crossorigin="anonymous" charset="utf-8"></script>
<script data-type="text/javascript" data-language="ECMAScript 2015" src="/anp/ecma/AnP.Attributes.ecma.js" data-crossorigin="anonymous" charset="utf-8"></script>
<script data-type="text/javascript" data-language="ECMAScript 2015" src="/anp/ecma/AnP.Components.ecma.js" data-crossorigin="anonymous" charset="utf-8"></script>
<script data-type="text/javascript" data-language="ECMAScript 2015" src="/anp/ecma/comp/AnP.Components.Images.ecma.js" data-crossorigin="anonymous" charset="utf-8"></script>
<script data-type="text/javascript" data-language="ECMAScript 2015" src="/anp/ecma/comp/AnP.Components.Files.ecma.js" data-crossorigin="anonymous" charset="utf-8"></script>
<script data-type="text/javascript" data-language="ECMAScript 2015" src="/anp/ecma/comp/AnP.Components.Selectors.ecma.js" data-crossorigin="anonymous" charset="utf-8"></script>
<script data-type="text/javascript" data-language="ECMAScript 2015" src="/anp/ecma/comp/AnP.Components.Forms.ecma.js" data-crossorigin="anonymous" charset="utf-8"></script>
<script data-type="text/javascript" data-language="ECMAScript 2015" src="/anp/ecma/comp/AnP.Components.Tables.ecma.js" data-crossorigin="anonymous" charset="utf-8"></script>
<script data-type="text/javascript" data-language="ECMAScript 2015" src="/anp/ecma/comp/AnP.Components.Calendars.ecma.js" data-crossorigin="anonymous" charset="utf-8"></script>
<script data-type="text/javascript" data-language="ECMAScript 2015" src="/anp/ecma/AnP.Sessions.ecma.js" data-crossorigin="anonymous" charset="utf-8"></script>
<script data-type="text/javascript" data-language="ECMAScript 2015" src="/anp/ecma/AnP.Base.ecma.js" data-crossorigin="anonymous" charset="utf-8"></script>
<script data-type="text/javascript" data-language="ECMAScript 2015" src="/anp/ecma/AnP.Errors.ecma.js" data-crossorigin="anonymous" charset="utf-8"></script>
<script data-type="text/javascript" data-language="ECMAScript 2015" src="/anp/ecma/AnP.Views.ecma.js" data-crossorigin="anonymous" charset="utf-8"></script>
<script data-type="text/javascript" data-language="ECMAScript 2015" src="/anp/ecma/AnP.Routes.ecma.js" data-crossorigin="anonymous" charset="utf-8"></script>
<script data-type="text/javascript" data-language="ECMAScript 2015" src="/ecma/Example.ecma.js" data-crossorigin="anonymous" charset="utf-8"></script>
<script data-type="text/javascript" data-language="ECMAScript 2015" charset="utf-8">
example = new AnP({
object_name : "example",
default_settings_files : ["/anp/json/AnP.settings.json", "/json/Example.settings.json"]
}, Example);
</script>
</head>
<body></body>
</html>
En este ejemplo cargamos todas las librerías al completo y las usamos totalmente cara el cliente.
Modo librerías
Este modo nos permite hacer cargas individuales de componentes concretos del Framework, por ejemplo,
si queremos simplemente usar el sistema de hilos simplemente habríamos de cargar el AnP,
AnP.Settings y el AnP.Threads puesto que Threads usa los Settings y ambos pertenecen al AnP.
NOTA: Es importante destacar que las librerías básicas de funcionamiento son
AnP.ecma.js, AnP.Ajax.ecma.js, AnP.Settings.ecma.js y AnP.I18N.ecma.js.
Modo Frameowrk
El modo Framework usa la gran mayoría de las librerías para ofrecer una serie de servicios en
conjunto para la creación de una aplicación diferenciada por niveles de la comunicación con VVC cara
el cliente; VPC contra el el servidor; y luego un sistema completo y autónomo cara los datos.
Para poder iniciar el modo Framework es necesario crear, en el directorio público del servidor, un
directorio para los ficheros JSON (Internacionalización, configuración, rutas y vistas mayormente);
otro para los Scripts (ECMA y JS); otro para los estilos (SASS para estilos generales y CSS para
iconografía); y otro para las imágenes (El logo, entre otras). A mayores también nos harán falta un
fichero HTML donde cargar la aplicación; un "wmd.php" para actualizar el WMarkDown de la misma; y el
"git_update.php" para actualizar desde el servidor sin necesidad de acceder directamente al mismo.
Para empezar, los ficheros JSON que nos hacen falta serían el de la I18N con los idiomas concretos
que queramos montar con una estructura de doble diccionario anidado donde la clave del primer nivel
del diccionario representa la llave interna del idioma; y el segundo nivel serían como llave la
llave propia de la frase o texto a internacionalizar, y el valor como texto en el idioma en el que
nos encontremos. Un ejemplo puede ser el siguiente:
-
Language
json
-
Lines
17
-
Characters
526
{
"english" : {
"example_1" : "This is the first example of the I18N text.",
"name" : "Name",
"name_description" : "The name of the field."
},
"espanol" : {
"example_1" : "Este es el primer ejemplo del texto I18N.",
"name" : "Nombre",
"name_description" : "El nombre del campo."
},
"galego" : {
"example_1" : "Iste é o primeiro exemplo do texto I18N.",
"name" : "Nome",
"name_description" : "O nome do campo."
}
}
Los ficheros se pueden dividir en más de uno, no solo por idiomas, sino que de un mismo o más
idiomas pueden existir varios ficheros los cuales pueden ser cargados.
NOTA: El orden en que se pongan los ficheros de la I18N será crucial a la hora de
posibles sobreescrituras.
A continuación tendríamos el archivo de configuración, el cual contendrá todos los parámetros de
configuración del AnP que se quieran customizar o asegurar con un valor concreto sobre nuestra
aplicación. Un ejemplo de ello puede ser el siguiente:
-
Language
json
-
Lines
23
-
Characters
859
{
"i18n_files" : [
"/anp/json/AnP.i18n.english.json",
"/anp/json/AnP.i18n.espanol.json",
"/anp/json/AnP.i18n.galego.json",
"/anp/json/AnP.i18n.nihongo.json",
"/anp/json/AnP.i18n.russkie.json",
"/json/Example.i18n.json"
],
"class" : "example",
"application_name" : "Example",
"application_url" : "https://example.k3y.pw",
"application_git" : "https://git.k3y.pw/AnP/Example",
"application_logo" : "/images/logo.png",
"main_menu_items" : [
{"i18n" : "home", "icon" : "home", "url" : "#/", "target" : "_self", "permissions" : ["registered"]}
],
"default_views_files" : [
"/anp/json/Example.views.json"
],
"default_routes_files" : ["/anp/json/AnP.routes.json", "/json/Example.routes.json"],
"ajax_variable_name" : "example"
}
En este caso se establece en el servidor, por extensión de la URL (Cabecera URI que se explica en
Python o PHP, dependiendo del servidor que se esté usando) "/anp" el servidor de elementos públicos
del propio AnP, quedando libre la raiz para los elementos propios de nuestra aplicación, por eso, la
I18N origen del AnP sale sobre "/anp".
Otro elemento importante es la clase para diferenciar este programa puesto que el AnP permite
múltiples aplicaciones en un mismo marco HTML.
A continuación, se ponen los atributos propios de programa (Nombre, URL y Git).
NOTA: Cuidado con la URL, que será usada en el logo de la aplicación. En ciertas
ocasiones compensa tener la URL "#" por el hecho de ser el propio elemento raíz de la aplicación, y
así no afectar a la misma.
Luego se configuran los elementos del menú principal (Menú que se encuentra, si no se cambia la
estética del AnP, en la parte superior del programa, entre el logo y el panel del usuario).
Luego tendríamos los archivos de las vistas y las rutas que las gestionan, con el nombre de la
variable HTTP usado para enviar la información al servidor.
NOTA: Es importante destacar que se han de sobreescribir las rutas públicas del AnP y
sus posibles extensiones si las hubiere, para dejar el raiz libre para nuestra aplicación, cambiando
los parámetros "default" de los archivos a cargar que dependan de las URL.
El siguiente archivo sería el de las rutas, el cual no ha de tocarse nada por defecto, sólo añadir
las rutas que queramos añadir a nuestra aplicación siguiendo la estructura de un Array de Strings
JSON donde cada String tendría una ruta URI que será la interpretada por la parte Hash de la URL; y
separado por un espacio, la vista a la que atacar. Un ejmplo de ello puede ser:
-
Language
json
-
Lines
3
-
Characters
32
[
"/test/view test_view"
]
Cambiando a los ficheros ECMA o JS, requerimos de crear un fichero JS que cree la clase maestra de
nuestro proyecto, el resto de ficheros JS, o son ficheros de operaciones comunes o específicas o
serán los ViewController de las vistas que operan directamente entre las vistas y el servidor a
partir del propio AnP. Por ejemplo:
| JavaScript 1.8 |
ECMAScript 2015 |
-
Language
js
-
Lines
10
-
Characters
115
Example = function(input){
var selt = this;
var construct = function(){};
construct();
};
|
-
Language
js
-
Lines
10
-
Characters
118
Example = function(input){
const selt = this;
const construct = () => {};
construct();
};
|
Para iniciar la aplicación sobre el AnP, se usa un pequeño Script incrustado en el HTML, el cual ya
fue mostrado en el apartado del archivo HTML necesario para arrancar el sistema, el cual podría ser
como el siguiente:
-
Language
js
-
Lines
4
-
Characters
156
example = new AnP({
object_name : "example",
default_settings_files : ["/anp/json/AnP.settings.json", "/json/Example.settings.json"]
}, Example);
Customizar estilos
Para customizar los estilos hemos de incluir los SASS originales en un nuevo fichero SASS a
excepción del de configuración ("AnP.Settings.scss"), y crear en su lugar, un nuevo archivo de
configuración con los mismos parámetros, pero alterando los que nos interesen. A mayores, hemos de
usar el orden de prioridad de CSS para sobreescribir los estilos o no incluir los ficheros que
queramos crear de 0 nosotros mismos.
AnP