\_o< ~ Mirmo Dynamics

Rien de grand ne se fit jamais sans enthousiasme.

To content | To menu | To search

Keyword - css

Entries feed - Comments feed

Wednesday 15 October 2008

A specific stylesheet for each module

So this is the first post of the newly opened symfony category of this blog, and I want to make things clear right now: you (most likely) won't find (yet) any protip or high level symfony tutorials here, as I'm still in the process of learning symfony. The good news though is that I'm currently assigned an 1.2-DEV project, so you may get some insight at what's up in the dev branch of the framework (especially regarding sfForm) :-)

If your are looking for more complete material on the subject, please redirect yourself to the official website (where you can find the documentation and a very interesting blog) or Fabien's blog.

That said, I think it could be interesting to post all the little things I learn everyday that make development with symfony easier for the everyday php developper that you might be if you made it this far into this post ;-)

Soooo, let's begin the show, with some yaml magic. Yaml I said ? Yaml I said. For those not knowing yet, yaml is the format of choice for symfony's configurations file. So what's the point between configuration files and stylesheets ? Let's say you've got a symfony application (say, frontend), and you'd like a particular module (say, news) in this application to have its own stylesheet in addition of the defaults stylesheets you defined already. Very simple, you start by creating the adequate configuration file:

cd apps/frontend/modules/news/
mkdir config
vi config/view.yml

All you have to do know is declare the stylesheet:

all:
  stylesheets: [news]

And that's all, no helper call in the layout, your news.css will automagically be appended to the <head> of your generated html. You can also declare multiples css, or control which actions get a particular css, and even specify to which media they apply:

all:
  stylesheets: [news, news_print: { media: print }]
list:
  stylesheets: [list]

Handy, heh.

But that's not all ! If you're not that much into yaml, you can use a view helper, directly into your template:

<?php use_stylesheet('news'); ?>

Or even add it from the controller:

<?php $this->getResponse()->addStylesheet('news'); ?>

Tuesday 3 October 2006

Submit par défaut dans un formulaire HTML

Qu'on se le dise, dans un formulaire comprenant plusieurs input de type submit, il n'est pas possible de spécifier le bouton à actionner quand on appuie sur la touche entrée. Si l'on considère que les HIG de Gnome imposent d'avoir un bouton ok à droite du bouton annuler, on se retrouve avec une incompatibilité fondamentale, puisque l'action par défaut est rarement celle d'annuler la saisie que l'on vient de faire. Plusieurs solutions s'offrent dès lors à nous:

  1. Ignorer les HIG, solution non acceptable dans mon cas (sous peine de lynchage généralisé)
  2. Supprimer purement et simplement les boutons annuler, ce qui représente une perte de fonctionnalitées trop importante dans certains cas
  3. Utiliser du JS, solution non acceptable vis à vis de mon challenge personnel (ne pas utiliser de JS avant que l'appli ne soit complètement fonctionnelle)
  4. Tricher.

J'ai donc opté pour la 4ème solution, j'ai triché. J'ai placé mes input comme le souhaitait le navigateur (ok, puis cancel), et utilisé la directive CSS direction pour réorienter le tout, ce qui donne, pour le HTML:

<fieldset class="submit">
	<input type="submit" name="submit" id="ok" value="Ok" />
	<input type="submit" name="submit" id="cancel" value="Cancel" />
</fieldset>

Et pour la CSS:

fieldset.submit {
	direction: rtl;
}

Et le rendu final.

Problèmes connus:

  • Impossible d'utiliser de ponctuation dans les boutons (un point d'exclamation à la fin d'un bouton par exemple se retrouvera au début) Un fieldset.submit input { direction: ltr; } est nécessaire pour bénéficier des ponctuations au bon endroit (merci Matt.Rixx)
  • Surement d'autres conséquences facheuses qui ne me sont pas encore tombées dessus :-)

Mais bon pour l'instant ça marche.