Flask-Mobility

Summary

A Flask extension to simplify building mobile-friendly sites.

This extension detects whether a mobile site is requested and it modifies the request object accordingly.

Decorators are provided to make mobilizing views easier.

https://api.travis-ci.org/rehandalal/flask-mobility.png

Install

To install:

$ pip install Flask-Mobility

You can also install the development version https://github.com/rehandalal/flask-mobility/tarball/master#egg=Flask-Mobility-dev:

$ pip install Flask-Mobility==dev

or:

$ git clone git://github.com/rehandalal/flask-mobility.git
$ mkvirtualenv flaskmobility
$ python setup.py develop
$ pip install -r requirements.txt

Test

To run tests from a tarball or git clone:

$ python setup.py test

Configuration

There are two settings that you can change in the config for your application:

MOBILE_USER_AGENTS

A regex for detecting mobile user agents.

Defaults to: 'android|fennec|iemobile|iphone|opera (?:mini|mobi)'

MOBILE_COOKIE

The name of the cookie to set if the user prefers the mobile site.

Defaults to: 'mobile'

Changes to the request Object

If the current request is for the mobile site, request.MOBILE = True. At all other times request.MOBILE = False.

How is the value of request.MOBILE determined?

request.MOBILE will be set to True if one of the following cases are satisfied:

  1. The user agent string in the request headers matches MOBILE_USER_AGENTS and the MOBILE_COOKIE is not set to off.
  2. MOBILE_COOKIE is set to on

Decorators

mobile_template

This decorator is used to pass an alternate template name to a view function for mobile requests:

from flask.ext.mobility.decorators import mobile_template

@mobile_template('dir/{mobile/}template.html')
def view(template):
    ...

This will pass through 'dir/mobile/template.html' as template where request.MOBILE is set to True. When request.MOBILE is False it will pass through 'dir/template.html' as template.

mobilized

This decorator is used to specify an alternate mobilized view function for a view:

from flask.ext.mobility.decorators import mobilized

def view():
    ...

@mobilized(view)
def view():
    ...

In the example above the first view function is used for the normal site and the second function is used to show the mobile site.

Example

example.py

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
#!/usr/bin/env python
from flask import Flask, render_template
from flask.ext.mobility import Mobility
from flask.ext.mobility.decorators import mobile_template


app = Flask(__name__)
Mobility(app)

@app.route('/')
@mobile_template('{mobile/}index.html')
def index(template):
    return render_template(template)

if __name__ == '__main__':
    app.run(host='0.0.0.0', debug=True)

templates/base.html

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<!doctype html>
<html>
<head>
  <title>Flask-Mobility example</title>
</head>
<body>
  {% block content %}
  {% endblock %}
</body>
</html>

templates/index.html

1
2
3
4
5
6
7
8
9
{% extends 'base.html' %}

{% block content %}
  <p>Template: <strong>index.html</strong></p>
  <p>
    request.MOBILE:
    <strong>{% if request.MOBILE %}True{% else %}False{% endif %}</strong>
  </p>
{% endblock %}

templates/mobile/index.html

1
2
3
4
5
6
7
8
9
{% extends 'base.html' %}

{% block content %}
  <p>Template: <strong>mobile/index.html</strong></p>
  <p>
    request.MOBILE:
    <strong>{% if request.MOBILE %}True{% else %}False{% endif %}</strong>
  </p>
{% endblock %}

What’s new in Flask-Mobility

Version 0.1:

  • first release

Version 0.1.1:

  • Minor fixes
  • Add Firefox OS detection

Contributors

  • Rehan Dalal (rdalal/rehandalal)
  • Will Kahn-Greene (willkg)
  • Mike Cooper (mythmon)
  • Carlos Eduardo Strand Leal (carlosstrand)
  • Tobias Bieniek (Turbo87)
  • Joe Cabrera (greedo)