26 abr. 2015

Darle estilo material design a Django (parte 1, el admin)

Continuando con los artículos sobr Django.

En este caso se tocará el tema de usar en el admin y formularios un estilo llamado Material Design (desarrollado por Google para Android), la idea es que nuestro backend tenga ese estilo. Para ello se tiene una aplicación de Django llamada Django-material .

La documentación de django-material la pueden ver en el siguiente enlace.

Instalación:
Para instalar django-material se ejecuta el comando pip:
pip install django-material

Se crea el proyecto prueba:
django-admin startproject prueba

Se tiene los siguientes directorios y archivos:


prueba
├── manage.py
└── prueba
    ├── __init__.py
    ├── settings.py
    ├── urls.py
    └── wsgi.py




En settings.py se agrega las aplicaciones :
  • material
  • material.admin

Al final se tiene lo siguiente en la sección de aplicaciones:


# Application definition

INSTALLED_APPS = (
    'material',
    'material.admin',
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
)

Nota: material.admin debe estar antes que admin.

Se ejecuta manage.py migrate:
ecrespo@grievous:~/django/prueba$ ./manage.py migrate Operations to perform: Synchronize unmigrated apps: staticfiles, material, messages, material_admin Apply all migrations: admin, contenttypes, auth, sessions Synchronizing apps without migrations: Creating tables... Running deferred SQL... Installing custom SQL... Running migrations: Rendering model states... DONE Applying contenttypes.0001_initial... OK Applying auth.0001_initial... OK Applying admin.0001_initial... OK Applying contenttypes.0002_remove_content_type_name... OK Applying auth.0002_alter_permission_name_max_length... OK Applying auth.0003_alter_user_email_max_length... OK Applying auth.0004_alter_user_username_opts... OK Applying auth.0005_alter_user_last_login_null... OK Applying auth.0006_require_contenttypes_0002... OK Applying sessions.0001_initial... OK

Se crea el usuario administrador del proyecto:
./manage.py createsuperuser Username (leave blank to use 'ecrespo'): ernesto Email address: ecrespo@ Password: Password (again): Superuser created successfully.

Se ejecuta el servidor web de django:

ecrespo@grievous:~/django/prueba$ ./manage.py runserver 
Performing system checks...

System check identified no issues (0 silenced).
April 26, 2015 - 16:22:53
Django version 1.8, using settings 'prueba.settings'
Starting development server at http://127.0.0.1:8000/
Quit the server with CONTROL-C.

Se muestra la imagen del inicio de sesión del admin de Django:



Se muestra la imagen del admin luego de iniciar sesión:

La siguiente imagen muestra la sección de usuarios del admin de Django:



En siguiente artículo se explicará como darle el estilo material design a los formularios de una aplicación. 


Publicar un comentario en la entrada

AddThis