viewhelpers.uimock — Create UI mocks

The uimock module is tailored for creating mock views. It is not ment as a full blown prototyping solution, just as an easy way to create interactive mockups.

Getting started

Using uimock is farily easy. You can add it to an existing app, but we recommend you create a separate django app for mocks. With a separate django app, the steps are:

  1. Create a new Django app — a new python module in your project with empty __init__.py and models.py.

  2. Add the app to the INSTALLED_APPS setting.

  3. Add urls.py to your new app with the following content:

    # Replace ``myproject_mymockapp`` with your django app name, and
# you can use another name than ``myfirstmock``, just make sure
# you adjust the template directory in the next step.
from django.conf.urls import url

from django_cradmin import viewhelpers

urlpatterns = [
    url(r'^myfirstmock/(?P<mockname>.+)?$',
        viewhelpers.uimock.UiMock.as_view(template_directory='myproject_mymockapp/myfirstmock/'),
        name='myproject_mymockapp_mocks'),
]

  4. Create the template directory you specified as argument to UiMock.as_view in the previous step, and add an index.django.html template with something like this:

    {% extends "django_cradmin/viewhelpers/uimock/base.django.html" %}

{% block content %}
    <div class="adminui-page-section">
        <div class="container container--tight">
            <p>Hello uimock world</p>
        </div>
    </div>
{% endblock content %}


{% block notes %}
    <p>Some notes here!</p>
{% endblock notes %}

  5. Add the urls to your mock app to your project urls:

    urlpatterns = [
   # ...
   url(r'^mock/', include('myproject.myproject_mymockapp.urls')),
]

Now you should be able to browse your mock at /mock/myfirstmock/.

Adding more mock templates

To add more mocks, you just add more templates to the same directory where you added index.django.html. Their URL will be the same as the index template, with the name of the template without .django.html. Make sure your mock templates extend django_cradmin/viewhelpers/uimock/base.django.html.

Template tags

cradmin_uimock_url(context, mockname=None, viewname=None)

Reverse the URL of a django_cradmin.viewhelpers.uimock.UiMock view.

Parameters:
  • mockname (str) – Name of the mock to link to (the name of the template without .django.html). If this is not specified, we link to index.django.html.
  • viewname – The name of the mock view (the name specified for the view in urls.py). You do not need to specify this to link to mocks within the same view.

Mock view API

class UiMock(**kwargs)

Bases: django_cradmin.viewhelpers.generic.StandaloneBaseTemplateView

View for UI mocks.

See viewhelpers.uimock — Create UI mocks for details.

template_directory = None

Template directory (prefix for the templates of all the mocks).

Must end with /. The directory must contain an index.django.html template.

You typically send this as an argument to UiMock.as_view() (I.E.: you normally do not need to subclass UiMock).

See get_template_names() for details on how this is used.

dispatch(request, mockname=None, **kwargs)
Parameters:
  • request – The HttpRequest.
  • mockname – The name of the requested mock. We expect that a template named <mockname>.django.html is available in template_directory.
  • **kwargs – Other view kwargs (future proofing).

Returns:

get_template_names()

Looks up a template in the template_directory by the following rules:

  • If we DO NOT have a mockname in view kwargs (see dispatch()), we return <template_directory>/index.django.html.
  • If we have a mockname in view kwargs (see dispatch()), we return <template_directory>/<mockname>.django.html.
post(request, *args, **kwargs)

Sets request.POST data as a session variable, cradmin_uimock_postdata, and redirects to the current full URL. In dispatch(), we pop this from session and adds it as the postdata template context data.

This facilitates mocking simple form flows.