Sekizai

Sekizai
Información sobre la plantilla
LicenciaMIT License
Sitio web
https://github.com/ojii/django-sekizai‎

Sekizai es una aplicación para del framework Django que provee una funcionalidad adicional para el sistema de plantillas del framework. El diseño de la aplicación permite establecer reglas mas definidas para la interacción entre los programadores y diseñadores en un mismo proyecto, a travéz de de un sistema de aislamiento modular de los templates y codigos fuente del proyecto o aplicación final. La palabra Sekizai significa en japonés bloque y eso es lo que esta aplicación provee al desarrollador y diseñador.

Origen y aspectos conceptuales

Origen

Sekizai fue creado para suplir la necesidad de un sistema dinamico para el manejo de los archivos de media en las aplicaciones de Django y Django-cms. Dado que Django se basa en un modelo MVC Modelo Vista Controlador el nivel de interacción entre las plantillas html y módulos en Python estara aislado de forma que los diseñadores podrán mantener sus desarrollos separados de los programadores.

Aspectos conceptuales

Sekizai provee una serie de bloques que permiten definir marcadores de posición en los bloques de contenidos definidos y adicionar en ciertos momentos información a estos. Esta función es especialmente útil para el uso de archivos css y javascript. Una de las características más importantes es que sekizai es capaz de ignorar contenidos duplicados en mismo bloque.

Forma de Uso

Asumamos que usted ha definido una plantilla base para su sitio llamada base.html, con la estructura básica de su documento HTML. Su código base.html debería ser:


{% load sekizai_tags %}{% load static from staticfiles %} <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">
<html xmls="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es" dir="ltr">
<head>
<link rel="stylesheet" type="text/css" href="{% static "css/base.css} %}" media="all"/>
{% render_block "css"%}
</head>
<body>
{% block "content" %}
{% endblock %}
<script type="text/javascript" src="{% static "jss/libs/jquery-1.4.2.min.js"% }"></script>
{% render_block "js" %}
</body>
</html>


En este ejemplo se puede notar que se especifica usa las template_tags de sekizai cargandolas al inicio de la pagina {% load sekizai_tags %}'. También se definieron dos espacio de nombre de sekizai: "css" y "js". "css" esta despues de la inclusion del archivo css y "js" al final despues de la inclusion del archivo javascript. Se define un archivo inc.html que será capaz de imprimir la información relacionada con una lista numerica de usuarios almacenada en la variable de contexto userid.


{% load sekizai_tags %}




    {% addtoblock "js" %}
    <script type="text/javascript" src="{% static "js/libs/lib.js" %}"></scritp>
    {% endaddtoblock %}
    {% addtoblock "js" %}
    <script type="text/javascript">
    $(document).ready(function(){
    $('#dynamic-content-Plantilla:Userid').do_something();
    });
    </script>

    {% endaddtoblock %}


    Para imprimir la tercera plantilla que sería la pagina final a presentar al usuario, se definio que 'my_userids estaria compuesto por [1, 2, 3], la plantilla luciría así:

    {% extend "base.html" %}
    {% block content %}
    {% for userid in my_userids %} {% include "inc.html" %}
    {% endfor %}
    {% endblock %}

    El resultado mostrado al usuario final sería:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">
    <html xmlns="http://www.w3.org" xml:lang="es" lang="es" dir="ltr">
    <head>
    <link rel="stylesheet" type="text/css" href="/media/css/base.css" media="all"/>
    </head>
    <body>


    </
    div>





    <script type="text/javsacript" src="/media/js/libs/jquery-1.4.2.min.js"></script>
    <script type="text/javsacript" src="/media/js/libs/lib.js"></script>
    <script type="text/javascript">

       $(document).ready(function(){
    $('#dynamic-content-1').do_something();
    }

    </script>
    <script type="text/javascript">

       $(document).ready(function(){
    $('#dynamic-conent-2').do_something();
    }

    </script>
    <script type="text/javascript">

       $(document).ready(function(){
    $('#dynamic-conent-3').do_something();
    }

    </script>
    </body>

    </html>


    Fuentes