Adaptation des formulaires du Bootstrap Twitter vers Cakephp

peut-être le plus simple est de construire le formulaire "semi-automatiquement" via les différents types :

$this->Form->label...
$this->Form->text...
$this->Form->password...
etc ...

Qu'en pensez vous ?

Perso, j'utilise les même version que toi et je fais comme ça pour créer un formulaire correctement.

<?php 
            echo $this->Form->create('Post', array('class' => 'form-horizontal')); 
            ?>
            <fieldset>

                <legend><?php echo __('Modifier la page'); ?></legend>
                                <div class="control-group">
                                    <label for="title" class="control-label">Titre</label>
                                    <?php echo $this->Form->input('title', array('label' => false,'div' => 'controls')); ?>
                                </div>
                                <div class="control-group">
                                    <label for="slug" class="control-label">Alias</label>
                                    <?php echo $this->Form->input('slug', array('label' => false,'div' => 'controls')); ?>
                                </div>
            </fieldset>
            <?php 
                $options = array(
                'class' => 'btn btn-primary btn-large',
                'label' => 'Enregistrer',
                'value' => 'Update!',
                'div' => array(
                    'class' => 'form-actions',
                )
                );

                echo $this->Form->end($options);
            ?>

Ca me permet de garder la même structure que celle de Bootstrap ;)

Ok je vois, et comment tu fais pour les messages d'erreurs ?
Car si j'ai bien tout suivi, il faut ajouter la classe error dans le 2eme div parent à l'input :

<div class="control-group error">
            <label class="control-label" for="inputError">Input with error</label>
            <div class="controls">
              <input type="text" id="inputError">
              <span class="help-inline">Please correct the error</span>
            </div>
          </div>

Salut Ilan, merci pour tes réponses. Je vais essayer de faire quelque chose en ce sens. Mais je pense qu'il est soit impossible ou très difficile de coler au bootstrap de twitter dans modifier ou ajouter un bout de css a nous.
Si je ne me trompe pas, avec ce que tu proposes, le message d'erreur n’apparaîtra pas en rouge car il faut ajouter la classe "error" la div class="control-group".

Encore merci :)

Alors voila ce que j'ai fait au final, je ne sais pas ce que ca va donner a long terme mais je trouve l'idée plutôt pas mal.

Dans le bootstrap.php

Configure::write('forms.formHorizontal', array(
    'class' => 'form-horizontal',
    'inputDefaults' => array(
        'div' => 'controls',
        'label' => false,
        'error'=>array(
            'attributes'=>array(
                'wrap'=>'span',
                'class'=>'help-inline'
            )
        )
    )
));

le formulaire :

<?php echo $this->Form->create('User', Configure::read('forms.formHorizontal'));?>
    <fieldset>
        <legend><?php echo __('Add User'); ?></legend>
    <?php
        echo '<div class="control-group">'.
                $this->Form->label('username', null).
                $this->Form->input('username').
        '</div>';
        echo '<div class="control-group">'.
                $this->Form->label('password', null).
                $this->Form->input('password').
        '</div>';       
        echo '<div class="control-group">'.
                $this->Form->label('group_id', null).
                $this->Form->input('group_id').
        '</div>';
    ?>
    </fieldset>
<?php echo $this->Form->end(array(
    'label'=>__('Submit'),
    'class'=>'btn btn-primary',
    'div'=>'form-actions',
    'after'=>' <button class="btn">Cancel</button>'));
?>

Et dans mon main.js

jQuery(function($){
    // Mise en forme des formulaires
    $('div.control-group').find('label').addClass('control-label');
    $('div.controls.error').parent().addClass('error');
});

Hello,

La bonne façon de faire c'est de créer un helper, dérivant du ou des helpers concernés pour encapsuler le markup spécifique.

Via Google, on trouve en autres que LoadSys s'y est essayé.
https://github.com/loadsys/twitter-bootstrap-helper (mais CakePHP 2.0 et Bootstrap 2.0 seulement a priori)

Ah oui effectivement, la création d'un helper est sans doute le plus propre !
Merci

salut j'ai trouver quelque chose mais je suis débutant et je ne sais pas trop comment l'utiliser quelqu'un pourrait m'aider sil vous plait. [url=https://github.com/slywalker/TwitterBootstrap][/url] [url=https://github.com/slywalker/TwitterBootstrap]https://github.com/slywalker/TwitterBootstrap[/url]

@john_k1ry : Merci pour le lien, j'utilisais celui ci moi : https://github.com/loadsys/twitter-bootstrap-helper

Celui que tu propose gère la pagination :). Pour l'installer tout est indiqué ici : https://github.com/slywalker/TwitterBootstrap/blob/master/README.md

Tu fou le dossier TwitterBootstrap dans app/Plugin et ensuite dans ton AppController tu définit le helper sans oublier de charger le plugin dans le bootstrap, au final je ne fais que réécrire ce qui est déjà marqué sur la doc ;)

Bonsoir à tous excuser de ré-ouvrir le sujet, je n'arrive pas à installer "https://github.com/slywalker/TwitterBootstrap"
@Rtransat: j'ai suivi les instructions, je n'y arrive pas désolé.
"...charger le plugin dans le bootstrap" Comment fais tu stp.
Merci bcp d'avance.

Sans toucher a bootstrap 2.3.2 j'ai un excellent résultat avec ça :

<div class="page-header text-center">
    <h1>
        Zone d'édition
    </h1>
</div>
<?php echo $this->Form->create('Post',array('class'=>'form-horizontal')); ?>
<div class="control-group">
    <?php echo $this->Form->label('name', $text = 'Titre', $options = array('class' => 'control-label')); ?>
    <?php echo $this->Form->input('name',array('label'=>false,'div'=>'controls')) ;?>
</div>
<div class="control-group">
    <?php echo $this->Form->label('slug', $text = 'Slug', $options = array('class' => 'control-label')); ?>
    <?php echo $this->Form->input('slug',array('label'=>false,'div'=>'controls')) ;?>
</div>
<div class="control-group">
    <?php echo $this->Form->label('content', $text = 'Contenu', $options = array('class' => 'control-label')); ?>
    <?php echo $this->Form->input('content',array('label'=>false,'div'=>'controls')) ;?>
</div>

<?php echo $this->Form->end(array('label'=>'Valider','div'=>array('class'=>'controls'), 'class'=>'btn btn-primary')
); ?>