Adtopy – Ejemplos de uso

Siviglia: Eventos # Ejemplo Siviglia-js

Mon, 01 Jan 0001 00:00:00 +0000

El siguiente código veremos los eventos:

Funciones predefinidas.
Llamar a métodos dentro de una clase.
addListener()
fireEvent()
destruct()

<html>
<head>
    <script src="/node_modules/jquery/dist/jquery.js"></script>
    <script src="../../../Siviglia.js"></script>
    <script src="../../../SivigliaStore.js"></script>
    <script src="../../../Model.js"></script>
    <script src="../../../SivigliaTypes.js"></script>
<script>
        Siviglia.Utils.buildClass({
            context: "Test",
            classes:{
                "Test":{
                    // Funciones predefinidas: constructor, destructor y metodos
                    construct:function(){ console.log("construct Test")},
                    destruct:function(){console.log("destruct Test")},
                    methods:{
                        metodo1:function(){console.log("metodo1 Test")},
                        metodo2:function(){console.log("metodo2 Test")},
                    }
                },
                "Test2":{
                    inherits:"Test",  // Test2 hereda todo lo de la clase "Test"
                    // Si no se pone punto, significa que está en el mismo contexto
                    // Test.Test  es = a poner solo Test1
                    //inherits: "Clase1, clase2, etc" por comas se pueden heredar más clases
                    construct:function(){
                        console.log("construct Test2");
                        this.Test();
                    },
                    destruct:function(){console.log("destruct Test2")},
                    methods:{
                        metodo1:function(){
                            this.Test$metodo1();
                            console.log("metodo1 Test2");
                        },
                        metodo3:function(){console.log("metodo3 Test2")}
                    }
                },
            }
        });

        // instancia de Test
        var s=new Test.Test();  
        s.metodo1();
        s.destruct();

        //instancia de textos
        var s2=new Test.Test2();
        // desde s2, queremos llamar al constructor del padre con this.Test();

        // llamar a un metodo NO sobreescrito
        s2.metodo3();
        //llamar a un metodo SI sobrerescrito this.Test$metodo1();
        s2.metodo1();

        // destructor al s2
        s2.destruct();  // los destructores llaman a todos los padres y siempre llaman en cascada

        var evento=new Siviglia.Dom.EventManger();

        evento.addListener("CHANGE",null,function(evName,params){
            console.log(evName);
            console.log(params);
        },"ESTE SE VA A QUEDAR COLGADO");

        evento.fireEvent("CHANGE",{p:12});
        evento.destruct();
        // importante, si se lanza un fireEvent, siempre hay que destruirlo
        // llamada global Siviglia.Dom.existingListeners
</script>
</head>
<body>

<script>
    //NO es necesario, ya que no se está parseando HTML para encontrar Expandos, etc... 
    //Solo se está usando Siviglia para crear clases.

    /*
    var obj1={"uno": 1};
    var parser=new Siviglia.UI.HTMLParser();
    parser.addContext("/",obj1);
    parser.parse($(document.body));
    */
</script>
</body>
</html>

Siviglia: Path v.1 # Ejemplo Siviglia-js

Mon, 01 Jan 0001 00:00:00 +0000

El siguiente código veremos los path:

Paths.
1 Contexto de path.
PathResolver (resolvedor de path).

<html>
<head>
    <script src="/node_modules/jquery/dist/jquery.js"></script>
    <script src="../../../Siviglia.js"></script>
    <script src="../../../SivigliaStore.js"></script>
    <script src="../../../Model.js"></script>
    <script src="../../../SivigliaTypes.js"></script>
<script>
        var contextStack = new Siviglia.Path.ContextStack();
        var obj = {
            a:{b:1,c:2}
        };
        // Contexto del path (ejemplo path valido -> #a)
        var plainCtx = new Siviglia.Path.BaseObjectContext(obj, "#", contextStack);

        // Una vez construido lo anterior, ya podemos preguntar por paths
        // BaseCursos -> un "iterador" de directorios, para saber como moverse entre directorios.
        // PathResolver, resuelve el path según un contexto.

        var pathResolver = new Siviglia.Path.PathResolver(contextStack,"#a/d"); //pathrresolver hereda de eventManager

        pathResolver.addListener("CHANGE",null,function(evName,params){
            console.dir(params);
        });
        pathResolver.getPath();

        // path NO es algo que exista, si no que pueda llegar a existir
        setTimeout(function(){
            obj.a.d=14;
        },3000);

        setTimeout(function(){
            //obj.a.d=27;
            delete obj.a.d;
        },4000);
</script>
</head>
<body>

<script>
    var parser=new Siviglia.UI.HTMLParser();
    parser.parse($(document.body));
</script>
</body>
</html>

En resumen, lo más importante de este ejemplo es quedarnos con la idea de:

Dado un contexto de javascript, resolverlo como un sistema de directorio

*{z:{q:“c”}} a/b/{%z/q%} –> a/b/c

Para ello, Siviglia.Path es capaz de resolverlo, dado un contexto y objeto.

Siviglia: Path v.2 # Ejemplo Siviglia-js

Mon, 01 Jan 0001 00:00:00 +0000

El siguiente código veremos los path:

Paths.
2 Contextos de paths.
PathResolver (resolvedor de path).

<html>
<head>
    <script src="/node_modules/jquery/dist/jquery.js"></script>
    <script src="../../../Siviglia.js"></script>
    <script src="../../../SivigliaStore.js"></script>
    <script src="../../../Model.js"></script>
    <script src="../../../SivigliaTypes.js"></script>
<script>
        var contextStack = new Siviglia.Path.ContextStack();
        var obj = {
            paises: {"espana": ["Madrid","Sevilla","Barcelona"],
                    "francia": ["Paris","asdas","asdasdas"]
            }
        };
        var obj2 = {
            h:"espana"
        };

        // 2 variables de contexto, asociado # al obj1, y ! al obj2
        var plainCtx = new Siviglia.Path.BaseObjectContext(obj, "#", contextStack);
        var plainCtx2 = new Siviglia.Path.BaseObjectContext(obj2, "!", contextStack);


        // Una vez construido lo anterior, ya podemos preguntar por paths
        // BaseCursos -> un "iterador" de directorios, para saber como moverse entre directorios.
        // PathResolver, resuelve el path según dos contextos

        var pathResolver = new Siviglia.Path.PathResolver(contextStack,"#paises/{%!h%}");
        pathResolver.addListener("CHANGE",null,function(evName,params){
            console.dir(params);
        });
        pathResolver.getPath();

        // path NO es algo que exista, si no que pueda llegar a existir
        setTimeout(function(){
            obj.a.d=14;
        },3000);

        setTimeout(function(){
            //obj.a.d=27;
            delete obj.a.d;
        },4000);
</script>
</head>
<body>

<script>
    var parser=new Siviglia.UI.HTMLParser();
    parser.parse($(document.body));
</script>
</body>
</html>

En resumen, lo más importante de este ejemplo es quedarnos con la idea de:

pathResolver puede resolver un path que está construido con Parametrized String.

Siviglia: Parametrized string # Ejemplo Siviglia-js

Mon, 01 Jan 0001 00:00:00 +0000

El siguiente código veremos los path:

Paths.
Contextos de los paths.
PathResolver (resolvedor de path).
HTMLParse + contexto.

<html>
<head>
    <script src="/node_modules/jquery/dist/jquery.js"></script>
    <script src="../../../Siviglia.js"></script>
    <script src="../../../SivigliaStore.js"></script>
    <script src="../../../Model.js"></script>
    <script src="../../../SivigliaTypes.js"></script>
<script>
        var contextStack = new Siviglia.Path.ContextStack();
        var obj = {
            paises: {"espana": ["Madrid","Sevilla","Barcelona"],
                    "francia": ["Paris","asdas","asdasdas"]
            }
        };
        var obj2 = {
            h:"espana"
        };

        // 2 variables de contexto, asociado # al obj1, y ! al obj2
        var plainCtx = new Siviglia.Path.BaseObjectContext(obj, "#", contextStack);
        var plainCtx2 = new Siviglia.Path.BaseObjectContext(obj2, "!", contextStack);

        // Una vez construido lo anterior, ya podemos preguntar por paths
        // BaseCursos -> un "iterador" de directorios, para saber como moverse entre directorios.
        // Como resuelve parametrized string el contexto [%nombre_objeto%]
        var ps = new Siviglia.Path.ParametrizableString("Una ciudad de [%!h%] es [%#paises/{%!h%}/2%]",contextStack);
        ps.addListener("CHANGE",null,function(evName,params){
            console.dir(params);
        });
        ps.parse();

        // A los 3 segundos, el contexto de h es francia, por lo que cambia parametrized string dinámicamente.
        setTimeout(function(){
            obj2.h="francia";
        },3000);
</script>
</head>
<body>

<script>
    var parser=new Siviglia.UI.HTMLParser();
    parser.parse($(document.body));
</script>
</body>
</html>

En resumen, lo más importante de este ejemplo es quedarnos con la idea de:

pathResolver puede resolver parametrized string del contexto [%nombre_objeto%]

Siviglia: Expandos # Ejemplo Siviglia-js

Mon, 01 Jan 0001 00:00:00 +0000

El siguiente código veremos los expandos:

Expandos.
No hay contexto en el <script>
HTMLParser, es el que busca expandos.

Los expandos sirven para expandir un contexto y aplicarlo a una entidad <html>.

<html>
<head>
    <script src="/node_modules/jquery/dist/jquery.js"></script>
    <script src="../../../Siviglia.js"></script>
    <script src="../../../SivigliaStore.js"></script>
    <script src="../../../Model.js"></script>
    <script src="../../../SivigliaTypes.js"></script>
<script>
        var contextStack = new Siviglia.Path.ContextStack();
        var obj = {
            paises: {"espana": ["Madrid","Sevilla","Barcelona"],
                    "francia": ["Paris","asdas","asdasdas"]
            }
        };
        var obj2 = {
            h:"espana"
        };

        // NO hay variables de contexto
        // var plainCtx = new Siviglia.Path.BaseObjectContext(obj, "#", contextStack);
        // var plainCtx2 = new Siviglia.Path.BaseObjectContext(obj2, "!", contextStack);

        setTimeout(function(){
            obj2.h="francia";
        },3000);

        setTimeout(function(){
            obj.clname="dos";
        },3000);

        setTimeout(function(){
            obj.myId=24;
        },3000);
</script>
</head>
<body>
<!-- expandiendo el ::class|[%#clname%] -->
<a data-sivValue="Una ciudad de [%!h%] es [%#paises/{%!h%}/2%]::class|[%#clname%]::href|http://www.pepito.com/user?usreId=[%#myId%]"></a>

<script>
    var parser=new Siviglia.UI.HTMLParser();
    parser.addContext("#",obj);
    parser.addContext("!",obj2);
    parser.parse($(document.body));
</script>
</body>
</html>

En resumen, lo más importante de este ejemplo es quedarnos con la idea de:

Siviglia.UI.HTMLParser, es el que busca expandos y puede resolver contextos asociados a objetos.

Siviglia: Expandos Loop # Ejemplo Siviglia-js

Mon, 01 Jan 0001 00:00:00 +0000

El siguiente código veremos los Loop Expandos:

Loop con Expandos.

Los expandos sirven para expandir un contexto y aplicarlo a una entidad <html>.

<html>
<head>
    <script src="/node_modules/jquery/dist/jquery.js"></script>
    <script src="../../../Siviglia.js"></script>
    <script src="../../../SivigliaStore.js"></script>
    <script src="../../../Model.js"></script>
    <script src="../../../SivigliaTypes.js"></script>
<script>
        var contextStack = new Siviglia.Path.ContextStack();
        var obj = {
            paises: {"espana": ["Madrid","Sevilla","Barcelona"],
                    "francia": ["Paris","asdas","asdasdas"]
            }
        };
        var obj2 = {
            h:"espana"
        };

        function callMe(node,params){
            console.dir(node);
            console.dir(params);
        }

        Siviglia.Utils.buildClass({
            "context": "Test",
            "classes":{
                "Test1":{
                    "inherits": "Siviglia.UI.Expando.View",
                    methods:{
                        preInitialize:function(params){
                            this.pepito2=params.uno;
                            this.pepito="HOLA";
                        },
                        initialize:function(params){},
                        initNode:function(node,params){
                            var name_widget = "Test.Test2";
                            if (params.curPais =="francia"){
                                name_widget = "Test.Test3";
                            }
                            var widget= new Test.Test2( // contiene 5 parámetros
                                name_widget,                // 1. nombre del widget
                                {country: params.curPais},  // 2. parametros
                                {},                         // 3. unsued
                                $('<div></div>'),           // 4. nodo
                                this.__context              // 5. contexto
                            );
                            widget.__build();               // Construcción del widget
                            node.append(widget.rootNode);   // append de ese nodo al rootnode
                        }
                    }
                },
                "Test2":{
                    "inherits": "Siviglia.UI.Expando.View",
                    methods:{
                        preInitialize:function(params){
                            this.country=params.country;
                        },
                        initialize:function(params){},
                    }
                }
            }
        })
</script>
</head>
<body>
<div style="display:none">
    <div data-sivWidget="Test.Test1" data-widgetCode="Test.Test1">
        <div data-sivValue="[%*pepito%]"></div> <!-- referencia  -->
        <div data-sivValue="[%*pepito2%]"></div> <!-- referencia  -->

        <div data-sivLoop="#paises" data-contextIndex="current">
            <a data-sivValue="Una ciudad de [%@current-index%] es [%#paises/{%@current-index%}/2%]::class|[%#clname%]::href|http://www.pepito.com/user?usreId=[%#myId%]"></a>
            <div data-sivEvent="click" data-sivCallback="callMe" data-sivParams='{"current":"@current-index"}'>click</div>
            <div data-sivCall="initNode" data-sivParams='{"curPais": "@current-index"}'></div>
        </div>
    </div>

    <div data-sivWidget="Test.Test2" data-widgetCode="Test.Test2">
        <div style="background-color: yellow" data-sivValue="/*country"></div>
    </div>

    <div data-sivWidget="Test.Test3" data-widgetCode="Test.Test2">
        <div style="background-color: blue" data-sivValue="/*country"></div>
    </div>
</div>


<div data-sivView="Test.Test1" data-sivParams='{"uno":1}'></div>
<div data-sivView="Test.Test1" data-sivParams='{"uno":2}'></div>
<div data-sivView="Test.Test1" data-sivParams='{"uno":3}'></div>
<div data-sivView="Test.Test1" data-sivParams='{"uno":4}'></div>


<script>
    var parser=new Siviglia.UI.HTMLParser();
    parser.addContext("#",obj);
    parser.addContext("!",obj2);
    parser.parse($(document.body));
</script>
</body>
</html>

En resumen, lo más importante de este ejemplo es quedarnos con la idea de que se pueden hacer loop usando expandos:

data-sivLoop
data-contextIndex
data-sivCall
data-sivParams

Siviglia: Widget Noticias # Ejemplo Siviglia-js

Mon, 01 Jan 0001 00:00:00 +0000

El siguiente código veremos un ejemplo donde usaremos:

Loop con Expandos.
3 widgets separados
Controlador, widget y vista
2 punteros data-contextIndex

<html>
<head>
    <title>news siviglia</title>
    <script src="/node_modules/jquery/dist/jquery.js"></script>
    <script src="../../../Siviglia.js"></script>
    <script src="../../../SivigliaStore.js"></script>
    <script src="../../../Model.js"></script>
    <script src="../../../SivigliaTypes.js"></script>
    <style type="text/css">
        .contenedor1 {background-color: grey;}
        .titulo {background-color: green;}
        .titulo2 {color: red}
        .noticia {border: 1px solid #000;}
    </style>
    <script>

        Siviglia.Utils.buildClass({
            "context": "Widget",
            "classes":{
                "Card":{
                    "inherits": "Siviglia.UI.Expando.View",
                    methods:{

                        preInitialize:function(params){

                            this.controller=params.controller;
                            this.title=params.title;
                            this.controllerParam=params.controllerParam;
                        },
                        initialize:function(params){},

                        getTitle:function(){},
                        getContent:function(node){
                            var widget=this.controller.getContent(this.controllerParam);
                            node.append(widget.rootNode)
                        }

                    }
                },
                "Controller":{
                    "inherits": "Siviglia.UI.Expando.View",
                    methods: {

                        preInitialize: function (params) {
                            this.self = this;
                            this.contenedor_noticias = {
                                // widget contenedor de noticias
                                pais:
                                    {
                                        "espana": [
                                            {
                                                "Titulo": "el iphone vale más de 5000€",
                                                "Contenido": "Contenido 1. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book."
                                            },
                                            {
                                                "Titulo": "VR es la nueva forma de viajar",
                                                "Contenido": "Contenido 2. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book."
                                            },
                                            {
                                                "Titulo": "El cod vid 19 afecta a la comunidad de madrid",
                                                "Contenido": "Contenido 3. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book."
                                            },
                                            {
                                                "Titulo": "Cierran durante 15 dias los colegios",
                                                "Contenido": "Contenido 4. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book."
                                            },
                                        ],
                                        "internacional": [
                                            {
                                                "Titulo": "Title international 1",
                                                "Contenido": "Contenido 5. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book."
                                            },
                                            {
                                                "Titulo": "Title international 2",
                                                "Contenido": "Contenido 6. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book."
                                            },
                                            {
                                                "Titulo": "Title international 3",
                                                "Contenido": "Contenido 7. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book."
                                            },
                                            {
                                                "Titulo": "Title international 4",
                                                "Contenido": "Contenido 8. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book."
                                            },
                                        ]
                                    },
                                clname: "contenedor1",
                                class_title: "titulo",
                                class_noticia: "noticia"
                            };


                        },
                        initialize: function (params) {
                        },
                        getTitle: function () {
                            return this.title;
                        },
                        getContent: function (section) {

                            var widget = new Widget.Content(
                                "Widget.Content",
                                {section: section},
                                {},
                                $('<div></div>'),
                                this.__context
                            );
                            widget.__build();
                            return widget;
                        }
                    }
                },

                "Content":{
                    "inherits": "Siviglia.UI.Expando.View",
                    methods:{
                        preInitialize:function(params)
                        {
                            this.section=params.section;
                        },
                        initialize:function(params)
                        {}
                    },
                }

            }
        })

        setTimeout(function(){
            contenedor_noticias.clname="titulo2";
        },5000);
</script>
</head>
<body>
<div style="display:none">


    <!-- Card pinta la tarjeta, llamando a getTitle y getContent cuando lo necesite -->
    <div data-sivWidget="Widget.Card" data-widgetCode="Widget.Card" style="border:2px solid green">
        <h1 data-sivValue="/*title"></h1>
        <div data-sivCall="getContent"></div>
    </div>

    <div data-sivWidget="Widget.Controller" data-widgetCode="Widget.Controller" style="border:2px solid yellow">
        <div data-sivLoop="/*contenedor_noticias/pais" data-contextIndex="currentSection">
            <div data-sivView="Widget.Card" data-sivParams='{"controller":"*self","title":"@currentSection-index","controllerParam":"@currentSection"}'>
            </div>
        </div>
    </div>

        <div data-sivWidget="Widget.Content" data-widgetCode="Widget.Content" style="border:2px solid red">
            <div data-sivLoop="*section" data-contextIndex="currentNews">
                <div style="border:2px solid blue">
                <h3 data-sivValue="/@currentNews/Titulo"></h3>
                <p data-sivValue="/@currentNews/Contenido"></p>
                </div>
            </div>
        </div>
</div>

    <!--La plantilla de Controller solo tiene una llamada a la data-sivView de Card,
    pasando self como parametro  -->
    <div data-sivView="Widget.Controller"></div>

    <script>
        var parser=new Siviglia.UI.HTMLParser();
        parser.parse($(document.body));
    </script>
</body>
</html>