Fauzism

To Shalu

Tue, 14 Feb 2012 18:19:00 +0530

Shivling : Avoiding boilerplate in views in Django

Tue, 26 Jul 2011 01:33:00 +0530

I have been unable to find time to continue my Shiv series, however, a chat with a friend(@arihersh) who has just started learning django reminded me of a small piece of code I had written sometime back. The chat went something like this

Ari Hershowitz:

I’d like to have html “widgets” that have certain actions, without having to create an artificial url + view to control the widget.

Maybe that’s what your framework does?

Yousuf Fauzan:

gimme an example

Ari Hershowitz:

Ok…

I’ll try to describe…

I want to create a search bar that goes on any page.

To do this in Django, I think I need to: (1) create a search form, (2) put it into a template, (3) include the template into any other template.

I also need to create a view for the search bar, with its own url, right?

Yousuf Fauzan:

you need a search result view

Ari Hershowitz:

So if I have the search bar on page x, I’ll have to call the search bar’s url from page x.

Yousuf Fauzan:

i.e. the url that the searcdh form will post to

Ari Hershowitz:

Yes, actually that’s the issue:

I found that on each page I include the search form, I’m writing a lot of boilerplate code into *each* view of the pages that use the search form.

What I’d like is to write the template and view for a unit once (e.g. a search form). Then only have to include it in the other page’s template, without making any changes to the views in order to pass variables around

At first I suggested Shiv to make the views more modular, but it was kinda overkill for the particular project. Then I remembered a piece of code that I had written well after Shiv which can be viewed as a motivation for Shiv (though it was written after Shiv).

It basically consists of 2 files

1. element_registry.py

This is for ajax views. Its almost identical to the one in Shiv. You will need to create a url entry in urls.py and follow some sort of url pattern so that the registered name can be passed.

Every ajax view contains a key member (func.key) which can be used to generate the desired url. You can look at the ajax_view function below to understand how the required view is called.

from django.http import HttpResponse, HttpResponseRedirect, HttpResponseNotFound

class AjaxRegistry(object):
    _instance = None
    _registry = {}
    _index = 0
    
    def __new__(cls, *args, **kwargs):
        if cls != type(cls._instance):
            cls._instance = object.__new__(cls, *args, **kwargs)
        return cls._instance
    
    def register(self, func):
        key = str(self._index)+func.func_name
        def wrap(*args, **kwargs):
            return func(*args, **kwargs)
            
        self._registry[key] = wrap
        self._index+=1
        wrap.key=key
        wrap.name = func.func_name
        return wrap
        
def ajax_view(request, view_name):
    if request.is_ajax():
        return_type = "template"
        
        if request.GET:
            if "return_type" in request.GET:
                return_type = request.GET['return_type']
                
        ar = AjaxRegistry()
        func = ar._registry[view_name]
        ret = func(request)
        ret['key'] = view_name
        
        if return_type == "template":
            return HttpResponse(get_template(ret['template']).render(RequestContext(request, ret)))
        else:
            json = simplejson.dumps(ret)
            return HttpResponse(json, mimetype='application/javascript')
    else:
        return HttpResponseNotFound()

2. element.py

This is where the main action happens. There are two kind of functions here. The ones which are called by urls.py directly and the other which are used by the first one to create the response.

from django.contrib.auth.decorators import login_required
from django.shortcuts import render_to_response
 
from django.template import RequestContext
from django.template.loader import get_template
from django.http import HttpResponse
from element_registry import AjaxRegistry

ar = AjaxRegistry()

def fragment(template):
    template = get_template(template)
    def wrapper(func):
        def inner(request, *args, **kwargs):
            di = func(request, *args, **kwargs)
            di['key'] = func.key
            if di.has_key('extra_key'): 
                di['key'] =  di['key'] + '+' + str(di['extra_key'])
            if request.is_ajax() and ajax_is_json:
                return di
            c = RequestContext(request, di)
            return template.render(c)
        inner.name = getattr(func, 'name', func.func_name)
        return inner
    return wrapper
    
def make_and_render(template=None, mimetype="text/html", auto_render_sidebar=False):
    def wrapper(func):
        template = get_template(template)
        def inner(request, *args, **kwargs):
            ret = func(request, *args, **kwargs)
            args = len(ret) > 2 and ret[2] or args
            kwargs = len(ret) > 3 and ret[3] or kwargs
            
            centre = dict([(e.name, e(request, *args, **kwargs)) for e in ret[0]])
            sidebar = dict([(e.name, e(request, *args, **kwargs)) for e in ret[1]])
            
            context_vars = {'centre': centre, 'sidebar': sidebar, 'auto_render_sidebar': auto_render_sidebar}
            for k in kwargs:
                context_vars[k] = kwargs[k]
            c = RequestContext(request, context_vars)
            return template.render(c)
        return inner
    return wrapper
        

###
### Example Usage
###

# This is the main view. It will include several fragments. Fragments can be divided in a datastructure based upon the need. 
# In the example below we are using 2 lists as needed by make_and_render wrapper. If you need a different datastructure, 
# make changes to make_and_render wrapper first
@make_and_render(template='home.html')
def home(request):
    centre = [frag1]
    sidebar = [frag2]
    return centre, sidebar

# Below are 2 fragments
@fragment(template='elem1.html')
def frag1(request, *args, **kwargs):
    context = {}
    return context

@fragment(template='elem2.html')
@ar.register
def frag2(request, *args, **kwargs):
    context = {}
    return {}

For example, suppose I have got a sidebar containing my Menu and the centre portion containing a header, search bar, and either some static text or search result. In this case I will make two main views corresponding to two main pages (The one with static content in the centre and the other one with search result) and 5 fragments. The entire key mechanism of the ajax functions is a bit involved andneeds to be understood and its interfacing with the urls.py and how it is passed to the html and from there to javascript. I am no expert of JS but I will try to outline the basics of it. I don’t think I have done a good job of explaining it here and I am sorry for that. Ping me if you would like to know more.

# This returns a list of links and their title, along with a boolean indicating if its the current page
# Determination of current page can also be done in template, and perhaps thats a better place.
@render(template='menu.html')
def menu(request, *args, **kwargs):
    items = [('Home', '/', request.path == '/'), ('Search', '/', request.path == '/search')]
    return {'items': items}

# Again, user authentication test might be done in template. 
# However, there could be other info that could be sent to header from here
@render(template='header.html')
def header(request, *args, **kwargs):
    return {'logged_in': request.user.is_authenticated()}

@render(template = 'search_bar.html')
def search_bar(request, *args, **kwargs):
    return {'q': request.GET.get('q', '')}

@render(template = 'static_box.html')
def static_box(request, *args, **kwargs):
    return {}

# Dummy search view. As an example we are using a model called MyModel with a text field called body.
# For rendering, we will require the number of results found and the page number along with the results.
# This fragment can also be called via ajax.
@render(template = 'search_result.html')
@ar.register
def search_result(request, *args, **kwargs):
    result = MyModel.objects.filter(body__contains=request.GET.get('q'))
    count = result.count()
    page = request.GET.get('page', 0)
    return {'items': result[page:page+10], 'count': count, 'page': page}

@make_and_render(template='home.html')
def home(request, *args, **kwargs):
    centre = [header, search_bar, static_box]
    sidebar = [menu]
    return centre, sidebar


@make_and_render(template='search.html')
def search(request, *args, **kwargs):
    centre = [header, search_bar, search_result]
    sidebar = [menu]
    return centre, sidebar, [], {'search_ajax_key': search_result.key}

# We have passed search_result.key to this view's template. This can now be used to make ajax calls
# We can put the key in some hidden element inside the html and then use it to construct our ajax-url
# Our urls.py will have something like
urlpatterns = patterns('',
	url('ajax-view/(?P[\w-]+)/', 'ajax_view', {}, name="ajax_view"),
    ...
)

And the html can create a hidden element like

1
2
3

$('#next').live('click', function(){
    $.get($('#ajax-url').html(), somefunction);
    });

While the Javascript will override the Next link

1	id="ajax-url" style="display:none">/ajax-view/{{search_ajax_key}}

Next, I will get back to talking more about Shiv. I hope the above helps in explaining the reason I started writing Shiv.

Shiv The Third - Return of Tutorial

Wed, 06 Jul 2011 17:16:00 +0530

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

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

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

.....

    ....
    .... Other css declarations
    {% for c in css %}
     rel="stylesheet" type="text/css" href="{{c}}" />
    {% endfor %}
    {% block page_css%}
    {%endblock %}
    ....
    ....


...
...

...
... Other js declarations
{% for j in js %}
    
{% endfor %}
{% block page_js %}
{% endblock %}

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

Shiv - Part Deux

Sun, 03 Jul 2011 12:29:00 +0530

After debating whether to release early or release well, I have settled for the former. I hope that once the code is out in the open and I get ridiculed for the lousy code quality, it will motivate me to find time more aggressively to correct and refine the framework.

I will try to find some time to continue my little tutorial of Shiv with sample applications in the next installment. In the meantime, here is the link to the git repository. Have a look and feel free to ask me any question that you might have.

https://github.com/lzdev/Shiv

Part 1 | Part 3

Shiv - A wrapper over Django

Sun, 19 Jun 2011 15:12:00 +0530

I joined LazyZach as the first hire back in 2009. I was already in love with Python by then and when it came to deciding which technology to use, the answer was quite obviously, Django.

While Django does speed up development, I wanted something a bit more streamlined to my thought process. Having my “views” all over the place was definitely not the way I wanted to go. Plus, there was a need for a more clear separation of back end and front end tasks (I was, and still am, a bit weary of all the html and css stuff that goes around). All this and some more made me develop Shiv, a thin wrapper over Django.

For all those Django noobs out there, one thing I wish to say is that “Django is Python”. Realize this, and life will be so much simpler for you. And yes, do not go about learning Django, learn Python and you will know Django inside out.

In this post, I will discuss the basic idea behind Shiv. Other key features and benefits like AJAX handling, Widgets, auto JS/CSS minimization, will be discussed in later posts.

Coming from a non-web dev background, the way I saw a web site was that it has a bunch of pages. Each page contains a bunch of boxes. Each box in-turn will consist of other boxes.

Its sort of container containing container model with each container having an associated view.

The idea of Shiv is to take this abstract container, and add specific behavior to it.

While the higher level containers will mostly have other lower level containers, a low level container will have some specific data.

Based on the needs of LazyZach, I came up with the following containers:

1. Page

This is the parent level item. A URL will call the show() method of this container. It consists of a bunch of boxes and template to show them, along with other media requirements. While rendering, it calls the show method of each box.

2. Box

There are 3 kinds of boxes.

Vanilla Box - Consists of many types of Tab Boxes
Tab Box - Consists of a single type of Element. Its basically a list of that type of Element
Widget Box - Same as Vanilla Box except that instead of a Page including it as a property, it itself defines the Pages it wants to be a part of

3. Element

This is the lowest level container. Most of the action happens here. An Element’s direct parent box will have only one type of Element in it.

Each container listed above has a corresponding Media class. A media class will define the template that the container needs plus any other JS/CSS/Images that it may require. All Media classes are defined separately. So if you have separate people writing your back end and front end code, the front end guy will be responsible for handling the Media file.

I will show some sample code for creating the various containers and some more internals of Shiv in the next installment. The project will be open sourced as soon as I am able to remove some of the coupling that it has with LazyZach’s codebase.

After LazyZach, I used Shiv for my side project too (CinEight, I have not worked on it for quite a while now).

Note: I am not too good at writing posts, so if this post is confusing or if you have any questions, feel free to leave a comment below or contact me. My HN ID is yousuffauzan.

Part 2 | Part 3