169 lines
7.6 KiB
Markdown
169 lines
7.6 KiB
Markdown
|
```wmd-options
|
||
|
|
language = es
|
||
|
|
title_i18n = Kanvas_title_integration
|
||
|
|
title_text = Integración - Kanvas
|
||
|
|
```
|
||
|
|
|
||
|
|
<!-- [[wmd]] -->
|
||
|
|
|
||
|
|
## Integración
|
||
|
|
|
||
|
|
Para poder integrar este proyecto a otro simplemente hemos de implementarlo junto a AnP. Para ello tendríamso dos formas de implementarlo.
|
||
|
|
|
||
|
|
### Integración directa
|
||
|
|
|
||
|
|
La integración directa es la que nosotros creamos manualmente las etiquetas Scripts que nos permiten cargar las librerías necesarias para nuestro fin.
|
||
|
|
|
||
|
|
```html
|
||
|
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<title>PROYECTO</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" />
|
||
|
|
|
||
|
|
<script data-type="text/javascript;charset=utf-8" data-language="ECMAScript 2015" src="https://errorsmanager.k3y.pw/ecma/ErrorsManager.ecma.js" data-crossorigin="anonymous" charset="utf-8"></script>
|
||
|
|
<script data-type="text/javascript;charset=utf-8" data-language="ECMAScript 2015" src="https://anp.k3y.pw/ecma/Application/AnP.ecma.js" data-crossorigin="anonymous" charset="utf-8"></script>
|
||
|
|
<script data-type="text/javascript;charset=utf-8" data-language="ECMAScript 2015" src="https://anp.k3y.pw/ecma/Managers/Settings.ecma.js" data-crossorigin="anonymous" charset="utf-8"></script>
|
||
|
|
<script data-type="text/javascript;charset=utf-8" data-language="ECMAScript 2015" src="https://anp.k3y.pw/ecma/Application/Ajax.ecma.js" data-crossorigin="anonymous" charset="utf-8"></script>
|
||
|
|
<script data-type="text/javascript;charset=utf-8" data-language="ECMAScript 2015" src="https://anp.k3y.pw/ecma/Managers/Globals.ecma.js" data-crossorigin="anonymous" charset="utf-8"></script>
|
||
|
|
<script data-type="text/javascript;charset=utf-8" data-language="ECMAScript 2015" src="https://anp.k3y.pw/ecma/Managers/I18N.ecma.js" data-crossorigin="anonymous" charset="utf-8"></script>
|
||
|
|
<script data-type="text/javascript;charset=utf-8" data-language="ECMAScript 2015" src="https://anp.k3y.pw/ecma/Managers/PrintTypes.ecma.js" data-crossorigin="anonymous" charset="utf-8"></script>
|
||
|
|
<script data-type="text/javascript;charset=utf-8" data-language="ECMAScript 2015" src="https://anp.k3y.pw/ecma/Managers/Threads.ecma.js" data-crossorigin="anonymous" charset="utf-8"></script>
|
||
|
|
<script data-type="text/javascript;charset=utf-8" data-language="ECMAScript 2015" src="https://anp.k3y.pw/ecma/Managers/Events.ecma.js" data-crossorigin="anonymous" charset="utf-8"></script>
|
||
|
|
<script data-type="text/javascript;charset=utf-8" data-language="ECMAScript 2015" src="https://anp.k3y.pw/ecma/Application/Attributes.ecma.js" data-crossorigin="anonymous" charset="utf-8"></script>
|
||
|
|
<script data-type="text/javascript;charset=utf-8" data-language="ECMAScript 2015" src="https://anp.k3y.pw/ecma/Application/HTMLPreload.ecma.js" data-crossorigin="anonymous" charset="utf-8"></script>
|
||
|
|
<script data-type="text/javascript;charset=utf-8" data-language="ECMAScript 2015" src="https://anp.k3y.pw/ecma/Application/Binary.ecma.js" data-crossorigin="anonymous" charset="utf-8"></script>
|
||
|
|
<script data-type="text/javascript;charset=utf-8" data-language="ECMAScript 2015" src="/ecma/Kanvas.AnP.ecma.js" data-crossorigin="anonymous" charset="utf-8"></script>
|
||
|
|
|
||
|
|
<script data-type="text/javascript;charset=utf-8" data-language="ECMAScript 2015" charset="utf-8">
|
||
|
|
|
||
|
|
/** @type {AnP} */
|
||
|
|
const anp = new AnP({
|
||
|
|
globals : {
|
||
|
|
anp_root : "https://anp.k3y.pw"
|
||
|
|
},
|
||
|
|
callback : () => {
|
||
|
|
|
||
|
|
/** @type {Kanvas} */
|
||
|
|
const kanvas = new Kanvas(anp);
|
||
|
|
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
</script>
|
||
|
|
|
||
|
|
</head>
|
||
|
|
<body></body>
|
||
|
|
</html>
|
||
|
|
```
|
||
|
|
|
||
|
|
### Integración mediante AnPScriptsLoader
|
||
|
|
|
||
|
|
La integración mediante AnPScriptsLoader viene siendo la carga de todas las librerías mediante esta librería de carga de Scripts y estilos de manera asíncrona y precargada del propio proyecto AnP.
|
||
|
|
|
||
|
|
```html
|
||
|
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<title>PROYECTO</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" />
|
||
|
|
|
||
|
|
<script data-type="text/javascript;charset=utf-8" data-language="ECMAScript 2015" src="https://anp.k3y.pw/ecma/AnPScriptsLoader.ecma.js" data-crossorigin="anonymous" charset="utf-8"></script>
|
||
|
|
|
||
|
|
<script data-type="text/javascript;charset=utf-8" data-language="ECMAScript 2015" charset="utf-8">
|
||
|
|
|
||
|
|
new AnPScriptsLoader({
|
||
|
|
scripts : [[
|
||
|
|
"https://errorsmanager.k3y.pw/ecma/ErrorsManager.ecma.js"
|
||
|
|
], [
|
||
|
|
"https://anp.k3y.pw/ecma/Application/AnP.ecma.js"
|
||
|
|
], [
|
||
|
|
"https://anp.k3y.pw/ecma/Managers/Settings.ecma.js",
|
||
|
|
"https://anp.k3y.pw/ecma/Application/Ajax.ecma.js",
|
||
|
|
"https://anp.k3y.pw/ecma/Managers/Globals.ecma.js",
|
||
|
|
"https://anp.k3y.pw/ecma/Managers/I18N.ecma.js",
|
||
|
|
"https://anp.k3y.pw/ecma/Managers/PrintTypes.ecma.js",
|
||
|
|
"https://anp.k3y.pw/ecma/Managers/Threads.ecma.js",
|
||
|
|
"https://anp.k3y.pw/ecma/Managers/Events.ecma.js",
|
||
|
|
"https://anp.k3y.pw/ecma/Application/Attributes.ecma.js",
|
||
|
|
"https://anp.k3y.pw/ecma/Application/HTMLPreload.ecma.js",
|
||
|
|
"https://anp.k3y.pw/ecma/Application/Binary.ecma.js"
|
||
|
|
], [
|
||
|
|
"https://kanvas.k3y.pw/ecma/Kanvas.AnP.ecma.js"
|
||
|
|
]]
|
||
|
|
}, () => {
|
||
|
|
|
||
|
|
/** @type {AnP} */
|
||
|
|
const anp = new AnP({
|
||
|
|
globals : {
|
||
|
|
anp_root : "https://anp.k3y.pw"
|
||
|
|
},
|
||
|
|
callback : () => {
|
||
|
|
|
||
|
|
/** @type {Kanvas} */
|
||
|
|
const kanvas = new Kanvas(anp);
|
||
|
|
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
});
|
||
|
|
|
||
|
|
</script>
|
||
|
|
|
||
|
|
</head>
|
||
|
|
<body></body>
|
||
|
|
</html>
|
||
|
|
```
|
||
|
|
|
||
|
|
### Sincronía
|
||
|
|
|
||
|
|
La sincronía de la librería Kanvas contra AnP puede ser síncrona si la configuración que se le dé es la que tiene por defecto o bien, es una configuración dada mediante en *input* de entrada, o por el contrario, puede ser asíncrona como se mostró en los ejemplos anteriores. Presuponiendo que se tienen las librerías pertinentes precargadas, los métodos de creación de un objeto Kanvas pueden ser los siguientes:
|
||
|
|
|
||
|
|
```js
|
||
|
|
"use strict";
|
||
|
|
|
||
|
|
// Método de creación síncrono.
|
||
|
|
/** @type {Kanvas} */
|
||
|
|
const kanvas_sincrono = new Kanvas(new AnP({
|
||
|
|
globals : {
|
||
|
|
anp_root : "httsp://anp.k3y.pw"
|
||
|
|
}
|
||
|
|
}));
|
||
|
|
|
||
|
|
// Método de creación síncrono con parámetros.
|
||
|
|
/** @type {Kanvas} */
|
||
|
|
const kanvas_sincrono_con_parametros = new Kanvas(new AnP({
|
||
|
|
globals : {
|
||
|
|
anp_root : "httsp://anp.k3y.pw"
|
||
|
|
}
|
||
|
|
}), {
|
||
|
|
parametro_1 : 1,
|
||
|
|
parametro_2 : 2,
|
||
|
|
parametro_3 : 3,
|
||
|
|
parametro_n : "N"
|
||
|
|
});
|
||
|
|
|
||
|
|
// Método de creación asíncrona.
|
||
|
|
/** @type {AnP} */
|
||
|
|
const anp = new AnP({
|
||
|
|
globals : {
|
||
|
|
anp_root : "https://anp.k3y.pw"
|
||
|
|
},
|
||
|
|
callback : () => {
|
||
|
|
|
||
|
|
// En este método también puede tener entrada de parámetros como en el ejemplo síncrono.
|
||
|
|
/** @type {Kanvas} */
|
||
|
|
const kanvas_asincrono = new Kanvas(anp);
|
||
|
|
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
```
|
||
|
|
|
||
|
|
> [!!] La carga asíncrona se usaría para tener acceso a toda la funcionalidad completa de AnP desde el principio, cosa que se aconseja encarecidamente para evitar problemas de funcionamientos inesperados.
|
||
|
|
|
||
|
|
<!-- [[wmd]] -->
|