ZendX jQuery Proposal - Form Demo

This demo shows how the form integration of the jQuery component might work. See the general demo page to see all proposed jQuery View helpers in action.

 

POST-Feedback:

Array ( )

Code: formdemo.php

<?php

$paths = array(
    "/usr/share/pear/",
    dirname(__FILE__)."/library/",
    '.',
);
set_include_path(implode(":", $paths));

require_once "Zend/Loader.php";
Zend_Loader::registerAutoload();

$view = new Zend_View();
$view->addHelperPath("ZendX/JQuery/View/Helper", "ZendX_JQuery_View_Helper");

$view->jQuery()->addStylesheet('jquery.ui-1.6b/themes/flora/flora.all.css');

// Create new jQuery Form
$form = new ZendX_JQuery_Form();
$form->setAction('formdemo.php');
$form->setAttrib('id', 'mainForm');

// Use a TabContainer for your form:
$form->setDecorators(array(
    'FormElements',
    array('TabContainer', array(
        'id'          => 'tabContainer',
        'style'       => 'width: 600px;',
        'jQueryParams' => array(
            'tabPosition' => 'top'
        ),
    )),
    'Form',
));

$subForm1 = new ZendX_JQuery_Form('subform1');

// Add Element Date Picker
$elem = new ZendX_JQuery_Form_Element_DatePicker("datePicker1", array("label" => "Date Picker:"));
$elem->setJQueryParam('dateFormat', 'dd.mm.yy');

$subForm1->addElement($elem);

// Add Element Spinner
$elem = new ZendX_JQuery_Form_Element_Spinner("spinner1", array('label' => 'Spinner:', 'attribs' => array('class' => 'flora')));
$elem->setJQueryParams(array('min' => 0, 'max' => 1000, 'start' => 100));

$subForm1->addElement($elem);

$subForm2 = new ZendX_JQuery_Form('subform2');

// Add Slider Element
$elem = new ZendX_JQuery_Form_Element_Slider("slider1", array('label' => 'Slider:'));
$elem->setJQueryParams(array('defaultValue' => '75'));

$subForm2->addElement($elem);

// Add Autocomplete Element
$elem = new ZendX_JQuery_Form_Element_AutoComplete("ac1", array('label' => 'Autocomplete:'));
$elem->setJQueryParams(array('data' => array('New York', 'Berlin', 'Bern', 'Boston')));

$subForm2->addElement($elem);

// Submit Button
$elem = new Zend_Form_Element_Submit("btn1", array('value' => 'Submit'));
$subForm1->addElement($elem);

// Use a ContentPane in your sub form (which can be used with all but
// AccordionContainer):
$subForm1->setDecorators(array(
    'FormElements',
    array('HtmlTag', array('tag' => 'dl')),
    array('TabPane', array('jQueryParams' => array('containerId' => 'mainForm', 'title' => 'DatePicker & Slider'))),
));

// Use a ContentPane in your sub form (which can be used with all but
// AccordionContainer):
$subForm2->setDecorators(array(
    'FormElements',
    array('HtmlTag', array('tag' => 'dl')),
    array('TabPane', array('jQueryParams' => array('containerId' => 'mainForm', 'title' => 'Spinner & AutoComplete'))),
));

$form->addSubForm($subForm1, 'subform1');
$form->addSubForm($subForm2, 'subform2');

$formString = $form->render($view);

echo <<<EOT
<html>
    <head>
        <title>ZendX jQuery Proposal - Form Demo</title>

        <style type="text/css">
        <!--
            .ui-spinner-up { background-image: url(jquery.ui-1.6b/themes/flora/i/slider-handle.gif); }
            .ui-spinner-down { background-image: url(jquery.ui-1.6b/themes/flora/i/slider-handle.gif); }
        --></style>
EOT;
echo $view->jQuery()->setUiLocalPath("jquery.ui-1.6b/ui/packed/jquery.ui.all.packed.js");
echo "</head>".PHP_EOL;
echo "<body>".PHP_EOL;
echo "<h2>ZendX jQuery Proposal - Form Demo</h2>";
echo "<p>This demo shows how the form integration of the jQuery component might work. ";
echo "See the <a href='index.php'>general demo page</a> to see all proposed jQuery View helpers in action.</p>";

echo $formString;

echo "<h3>POST-Feedback:</h3>";

echo htmlentities(strip_tags(print_r($_POST, true)));
?>

<h2>Code: formdemo.php</h2>
<blockquote style="border: 1px solid #000; margin-top: 20px; padding: 10px; background-color: #f4f4f4; overflow:scroll;"><code style="font-size: 10pt;">
<? show_source(__FILE__); ?>
</code></blockquote>

</body>
</html>