[Catalyst] HTML Widgets!

Sebastian Riedel sri at oook.de
Fri Dec 2 18:21:31 CET 2005


Some more HTML::Widget goodness, fresh from trunk... :)

     http://dev.catalyst.perl.org/repos/Catalyst/trunk/HTML-Widget



     use HTML::Widget;

     # You can naturally use the validator without form generation!
     my $w1 = HTML::Widget->new;
     $w1->constraint( 'Integer', 'age' );
     $w1->constraint( 'Alternative', 'age', 'name' );
     my $form = $w1->process($query);
     my @errors = $form->errors;


     # Or only generate forms
     my $w2 = HTML::Widget->new( { name => 'w2', action => '/foo' } );
     $w2->element( 'Textfield', 'age' )->label('Age')->size(3);
     $w2->element( 'Textfield', 'name' )->label('Name')->size(60);
     my $form = $w2->process;
     print "$form";


     # Why not merge our widgets for both?
     $w1->merge($w2);


     # Now this is really cool, multiple embedded widgets (using  
<fieldset>)
     my $w3 = HTML::Widget->new( { name   => 'w3' } );
     $w3->element( 'Textarea', 'story' )->label('Story');
     $w3->constraint( 'ASCII', 'story' );
     my $container = HTML::Widget->new( { action => '/baz' } );
     $w1->name('w1');
     $container->embed( $w1, $w3 );
     $form = $container->process($query);


The generated XML will look like this example: (easy to style with css)

     <form action="/baz" id="widget" method="post">
         <fieldset id="widget_w1">
             <label for="widget_w1_age" id="widget_w1_age_label">Age</ 
label>
             <input id="widget_widget_age" name="age" size="3"  
type="textfield" />
             <label for="widget_widget_name"  
id="widget_widget_name_label">Name</label>
             <input id="widget_widget_name" name="name" size="60"  
type="textfield" />
         </fieldset>
         <fieldset id="widget_w3"><label for="widget_w3_story"  
id="widget_w3_story_label">Story</label>
             <textarea id="widget_w3_story" name="story"></textarea>
             <span class="errors" id="widget_story_errors">
                 <span class="ASCII_errors"  
id="widget_story_error_ASCII">Some useful Error message.</span>
             </span>
         </fieldset>
     </form>


These are just very basic examples, you could also create element  
classes with built-in constraints, js-validators or ajax... :)


--
sebastian




More information about the Catalyst mailing list