Fauzism

Shiv The Third - Return of Tutorial

Continuing from my previous posts on Shiv, Shiv - A wrapper over Django and Shiv - Part Deux, I will now try to explain about various components involved in Shiv. In this post we will talk about Media and Element. In later parts, we will explore Tabs, Boxes, Widgets, Pages, and Caching.

An app using Shiv should have the following files

1. page.py: This will contain the definition for all Page container classes

2. box.py: This will contain the definition for all Box container classes

3. widget.py: This will contain the definition for all Widget container classes

4. tab.py: This will contain the definition for all Tab container classes

5. element.py: This will contain the definition for all Element container classes

6. media.py: This will contain the definition for all Media classes

Media

Media classes define the various media used by all the containers of the Project. Shiv uses a naming convention for media classes. The media class of a container class named “ABC” should be “ABCMedia” and it must be derived from shiv.media.Media.

Media class has following class variables

a. template: This is the path of the template file.

b. css: A list of css file paths which this container requires

c. js: A list of css file paths which this container requires

d. css_prefix: A prefix which will be added to all css file in the css variables, except those which are sourced from a web url, i.e.start with ‘http’. Defaults to ‘/static/css/’

e. js_prefix: Similar to css_prefix. Defaults to ‘/static/js/’

f. images: A datastructure of image file paths which this container requires

Example:

media.py

from shiv.media import Media

class FeedbackBoxMedia(Media):
    template = 'master/BFeedback.html'
    css = ['master/BFeedback.css', 'common/ElementDefault.css']
    js = ['master/BFeedback.js', 'common/FormsCommon.js', 'jquery.form.js']
    images = {'title':'/static/images/prelogin/feedback-v3.png'}

The above Media class is for the container class FeedbackBox

Element

Element is the lowest level container in Shiv. It gets instantiated by a Tab.

Below are the members of Element

a. __init__(self, client, request)

client: Any variable that the element needs to render itself. This could be a database row object, or a string, or a complex data structure.

request: The HttpRequest object

b. _prepare(self)

This function will be used to prepare context dictionary which will be passed to the template. This is the function that you must override.

c. show(self, template = None, context = None, is_json = False)

Normally you wouldn’t need to override this method. Element knows its template and the context dictionary is created in the _prepare method.

d. self.client

This is the client object that was passed to the constructor

e. self.request

This is the HttpRequest object passed to the constructor

f. self.user

This is the user object of the current user

g. self.context

This is created in _prepare method. If this is not created, then an empty dictionary is passed to template unless one overrides the show method

Example:

element.py

from shiv.callback import Callback
from shiv.ajax import allowAnonymous
from shiv.element import Element
from shiv.json_utils import JsonResponse
import json
cb = Callback()
class MyFirstElement(Element):
    def _prepare(self):
        self.context = {
            'message': 'Hello',
            'ajax_key': self.ajax_message.key
        }
    @staticmethod
    @allowAnonymous
    @cb.register
    def ajax_message(request):
        return JsonResponse(json.dumps({'message': 'Hello from Ajax'})

In the code above allowAnonymous ensures that Anonymous users can call this callback and cb.register registers this function as an Ajax Callback function and provides it a key. The ajax_message method can be called using a url with its key as one of the parameters. Look at the template and js below to understand how.

media.py

from shiv.media import Media
class MyFirstElementMedia(Media):
    template = 'element.html'
    js = ['jquery.js', 'message.js']

element.html

<div class="myelem" data-id="{{ajax_key}}">
    {{message}}
</div>

Once you click on this div element, an alert box with message “Hello from Ajax will be displayed.

message.js

$('.myelem').live('click', function(){
    var data_id = $(this).attr("data-id");
    $.get(AJAX_URL, {
        'data_id': data_id
      }, function(response) {
        alert(response.message);
      });
});

Your base.html should have the following structure.

base.html

.....
<head>
    ....
    .... Other css declarations
    {% for c in css %}
    <link rel="stylesheet" type="text/css" href="{{c}}" />
    {% endfor %}
    {% block page_css%}
    {%endblock %}
    ....
    ....
</head>
<body>
...
...
</body>
...
... Other js declarations
{% for j in js %}
    <script type="text/javascript" src="{{j}}"></script>
{% endfor %}
{% block page_js %}
{% endblock %}
<script type="text/javascript">
    AJAX_URL = "{% url ajax_url %}"
</script>
</html>

urls.py

...
urlpatterns = patterns('',
                ...,
                ...,
                (r'^async/', include('shiv.urls')),
                ...,
                ...)

We will look into Tab next. And hopefully if I find enough time, we will discuss about Box and Widgets too.

Part 1 | Part 2

3 Notes/ Hide

shibats reblogged this from fauzism
fauzism posted this

Shiv The Third - Return of Tutorial

3 Notes/ Hide

Recent comments

About

Twitter