MOJOLICIOUS + TWITTER BOOTSTRAP

Estos días he estado jugando con mojolicious ya que se usa un lenguaje que me gusta y que me ha sacado de varios problemas: Perl, ya antes he hecho cosas en mis ratos libres con este lenguaje, por ejemplo un cliente para twitter, que ya no he continuado desarrollando :down:

Si de desarrollo web se trata me gusta usar twitter bootstrap por lo fácil de usar, un proyecto en mojolicious usa la siguiente estructura de directorios ( para más detalle ver la documentación oficial):

myapp                        # Application directory
  |- script/                 # Script directory
  |  +- myapp                # Application script
  |- lib/                    # Library directory
  |- t/                      # Test directory
  |- log/                    # Log directory
  |- public/                 # Static file directory
  +- templates/              # Template directory


Para añadir los archivos que se emplean para bootstrap lo único que hay que hacer es colocarlos en el directorio 'public' y con eso los templates que se empleen para la vista (y que se encuentran en templates) podrán acceder a ellos, por ejemplo para añadir el css o el js se hace así:

<link href="css/bootstrap-responsive.css" rel="stylesheet" type="text/css">
<script src="js/bootstrap.js" type="text/javascript"></script>


Si bien los ejemplos son claros, hasta ahora no han mencionado mucho sobre "la vista" de la aplicación, y la generación de formularios es de manera diferente a PHP, por ejemplo, en mojolicious se una un Perl embebido en el HTML, por ejemplo para indicar que se inicia un formulario se emplea el siguiente código:

%=  form_for index => begin
.
%= password_field 'pass' 
.
% end


Que generaría la siguiente salida:

<form action="/app">
.
<input name="pass" type="password" />
.
</form>


Al ver la forma en la que se generan los formularios me pregunte como es que añadiría las etiquetas para poder usar bootstrap y realmente no es nada complicando con solo añadir lo siguiente:

%= form_for index => (class => 'form-signin') => (id => 'login') => begin
.
%= password_field 'pass', class => 'input-block-level', placeholder => 'Password', id => 'Password'
.
%= end


Generará:

<form action="/app" class="form-signin" id="login">
.
<input class="input-block-level" id="Password" name="pass" placeholder="Password" type="password" />
.
</form>


Y finalmente en el navegador lucirá así:

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s