Arisman Webs - Diseño Web

Estamos cargando la página
sólo será un monento.

8 Feb 2019

Recursos WebPolymer 3

Mixin Extern Functions - Polymer 3

Las aw-extern-functions no es un componente en sí, más bien es un mixin que permite aplicar funciones externas a los Arisman Webs Components. De modo que de un modo muy sencillo podemos invocar funciones en ciertos componentes.

Este mixin no funciona por saparado si no es un complemento a múltiples componentes de Arisman Webs para Polymer y se instalará automáticamente cuando un componente dependa de él.

Su funcionamiento es muy simple, tan solo tenemos que añadir los atríbutos válidos a los componentes que permiten aw-extern-functions, como por ejemplo un aw-button.

<aw-button clickfunc="myFunc"></aw-button>
<script>
function myFunc() {
console.log( "Se ha hecho click sobre el aw-button" );
}
</script>

Del mismo modo podemos llamar a métodos que estén dentro de una clase, ya sean estáticos o no:

<aw-button connectedfunc="$OBJ_MYCLASS.function1" clickfunc="MyClass.function2"></aw-button>

<script>
class MyClass {
function1( button ) {
console.log( "Se ha conectado el aw-button" );
console.log( button );
}

static function2( button ) {
console.log( "Se ha hecho click sobre el aw-button" );
console.log( button );
}
}

const $OBJ_MYCLASS = new MyClass();
</script>


Lo que devuelvan las extern-functions dependerá de como se haya configurado la llamada dentro del propio componente que hace uso del mixin.

- `connectedfunc`: Se ejecutará cuando el componente se conecte.
- `responsefunc`: Se ejecutará cuando el componente se conecte.
- `changefunc`: Cuando se produzca algún cambio.
- `keyupfunc`: Cuando se levante la tecla.
- `keypressfunc`: Cuando se presione una tecla.
- `clickfunc`: Cuando se haga click.
- `focusinfunc`: Cuando se ponga el focus.
- `focusoutfunc`: Cuando se quite el focus.
- `submitfunc`: Cuando se envíe un formulario.
- `preloadfunc`: Cuando un elmento carga.

Configurar extern-functions en los componentes

Dentro del componente tenemos varias formas de configurar una función externa:

my-component.js
import { AwExternsFunctionsMixin } from '/node_modules/aw_extern_functions/aw-extern-functions-mixin.js';

class MyComponent extends AwExternsFunctionsMixin ( Polymer.Element ) {
    static get is() { return "my-component" }

    static get properties() {
        return {

        }
    }

    _onclick( ev ) {
        // Comprobamos que la propiedad this.clickfunc sea una función y la lanzamos

        var parametro = {
            uno: 1,
            dos: 2
        };


        if ( typeof this.clickfunc === "function" ) {
            this.clickfunc( parametro, ev );
        }
    }

    _onchange( ev ) {
        // Lanzamos la función a través del mixin directamente y le pasamos el parámetro objeto

        var objeto = {
            evento: ev,
            nombre: "cambio"
        };

        this.__fireExternFunction( this.changefunc, objeto );
    }
}

window.customElements.define( MyComponent.is, MyComponent );

Como podemos observar en el componente del ejemplo, hacemos uso del mixin de dos formas diferentes, una invocando la función directamente y otra haciendo uso del método `__fireExternFunction()`

Para el pimero caso usado en el método `_onclick` del componente, lo que hacemos si el parámetro `this.clickfunc` es efectivamente un función definida y de ser así lo lanzamos con los parámetros deseados.

Para el segundo caso, usado en el método `_onchange` del componente hacemos uso del método `__fireExternFunction()` de modo que no tenemos que comprobar si `this.changefunc` es efectivamente una función definida ya que lo comprobará el mixin. A este método le tenemos que pasar primero la función que queremos ejecutar y adicionalmente le podemos pasar hasta cinco parámetros extras:

this.__fireExternFunction( funcion, param1, param2, param3, param4, param5 );