Quantcast
Channel: openSUSE Planet - Global
Viewing all articles
Browse latest Browse all 23310

Héctor Reyes Armenta: MOJOLICIOUS + TWITTER BOOTSTRAP

$
0
0
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í:

Viewing all articles
Browse latest Browse all 23310


<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>