Prskavčí blog

Jak jsem psal v Zend Framework 1.6 a moje zkušenosti s Dojo TabContainer, nakonec jsem použil jQuery. Ve formuláři se dají měnit některá data, které jsou závislá na dalších, které automaticky předvyplňuji a na to jsem použil při změnách ajax. Docela mě potěšilo jak jednoduše a pěkně se to dá udělat pomocí jQuery.

<script>
$(document).ready(function(){
     $("#example > ul").tabs();
     $('#page1-deadline_vyzva').datepicker();
     $('#page3-datum_zahajeni').datepicker();
     $('#page3-datum_ukonceni').datepicker();

      $('#page1-editor').change(function(){
             $.ajax({
                        type: "POST",
                        url: "<?php echo $this->baseUrl();?>/user/info/idcvut/" + $(this).val(),
                        success: function(xml){
					if ($.browser.msie)
					{
						xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
						xmlDoc.async="false";
						xmlDoc.loadXML(xml);
						$("#page1-navrhovatel_jmeno")[0].value = xmlDoc.getElementsByTagName("name")[0].childNodes[0].nodeValue;
						$("#page1-navrhovatel_email")[0].value = xmlDoc.getElementsByTagName("email")[0].childNodes[0].nodeValue;
						$("#page1-navrhovatel_telefon")[0].value = xmlDoc.getElementsByTagName("phone")[0].childNodes[0].nodeValue;
						$("#page1-navrhovatel_pracoviste")[0].value = xmlDoc.getElementsByTagName("dept")[0].childNodes[0].nodeValue;
					}
					else
					{
					$("#page1-navrhovatel_jmeno")[0].value = $("name", xml).text();
					$("#page1-navrhovatel_email")[0].value = $("email", xml).text();
					$("#page1-navrhovatel_telefon")[0].value = $("phone", xml).text();
					$("#page1-navrhovatel_pracoviste")[0].value = $("dept", xml).text();
					}
                        }
             }); // end ajax
      }); // end change function
}); // end document ready
</script>
...

Původní skript jsem rošířil o několik dalších funkcí, přidal jsem datapickery pro datumy a potom ten ajax. Nejprve pomocí vybere prvek a přidáme mu attribut onChange.

$('#page1-editor').change(function(){ … });

Do této funkce jsem vložil volání ajaxu. Je to jednoduché a dobře pochopitelné. Type je typ GET nebo POST, v url je URL Controlleru, který vrací XML s potřebnými daty. Pomocí $(this.val) si šáhnu na vyplněnou hodnotu v políčku na které jsem aplikoval onChange(). Success vrací data, které si jednoduše parsuji přes $(„name“, xml).text(), kde name je <name></name> z xml dat, které posílá php.

Je to jednoduché a moc pěkný kód, který najde uplatnění. Dobré je, že není potřeba do formuláře přidávat do atributů funkci onchange, jak jsem to musel dělat, když jsem nepoužívat jQuery.

Ještě přidám část kódu z controlleru:

…
function infoAction()
{
$this->_helper->layout->disableLayout();
$this->_helper->getHelper('ViewRenderer')->setNoRender();
$idcvut = (int)$this->_request->getParam('idcvut');
//echo $idcvut;
$ssu = new Usermap($this->config);
// make xml
//Zend_Debug($i);
$i=$ssu->getUsermapInfoByID($idcvut);
$xml = '<user><name>'.$i[‘cn’].'</name><email>'.$i['email'].'</email><phone>'.$i[‘phone’].'</phone><dept>'.$i[‘department’].'</dept></user>';
echo $xml;
}
…

Snad to někomu pomůže, moc příkladů na Zend a jQuery ajax jsem nikde nenašel.

Zrovna dělám na jednom malém projektu, který jsem hned začal psát zrovna jak vyšel ZF 1.6, celkem standardní věci až na to, že jsem potřeboval rozdělit formulář na více stránek a udělat záložky.

Postupoval jsem podle manulálu, vyvořil jsem si formulář se subformy a celkem to dobře funguje. Potom když jsem potřeboval rozbrazit záložky narazil jsem na několik problémů se kterými jsem si různě poradil.

Takto vypadají záložky pomocí Dojo frameworku.

Nejdříve byl problém přidat záložku kde byl jen text. Tak jsem vytvořil vlastní element a ten potom vracel jen co jsem do něj napsal za text. Dalším problémem byl konec fomuláře jak je vidět na obrázku tak špatně uzavíral a číst ho mizela.

To jsem opravil tak, že jsem celou strukturu záložek přesunul do View.

<?php echo $this->form; ?>

jsem musel udělat

<?php
$this->dojo()->enable();

echo "<form method='".$this->form->getMethod()."' enctype='application/x-www-form-urlencoded' >";

// Container with tabs
$this->tabContainer()->captureStart('tab1', array(), array('style' => 'width:950px;height:800px;'));

    // First tab "Dates"
    $this->contentPane()->captureStart('pane1', array(), array('title' => 'Vstupní evidence'));
        echo $this->form->getSubform('page1');
    echo $this->contentPane()->captureEnd('pane1');

    // Second tab "FAQ"
    $this->contentPane()->captureStart('pane2', array(), array('title' => 'Příprava rozpočtu'));
      echo $this->form->getSubform('page4');     
    echo $this->contentPane()->captureEnd('pane2');

    // Third tab "Closable"
    $this->contentPane()->captureStart('pane3', array(), array('title' => 'Podání projektu'));
        echo $this->form->getSubform('page2');
    echo $this->contentPane()->captureEnd('pane3');

    // Fourth tab "Splitted"
    $this->contentPane()->captureStart('pane4', array(), array('title' => 'Realizace projektu'));
      echo $this->form->getSubform('page3');
    echo $this->contentPane()->captureEnd('pane4');

echo $this->tabContainer()->captureEnd('tab1');

echo $this->form->submit;

echo "</form>"
?>

Je to složitější ale všechno vypadalo jak mělo, jen byl problém s poslední stranou formuláře. Je tam málo položek a tabContainer se neumí přizpůsobit výšce vloženého obsahu. To se mi nepodařilo vyřešit jinak než nahradit Dojo jQuery UI, který jsem byl zvyklý používat doteď.

  <script>
  $(document).ready(function(){
    $("#example > ul").tabs();
  });
  </script>
<?php
foreach ($this->notice as $n) {
    echo '<div class="error">'.$n . '</div>';
}
echo "<form method='".$this->form->getMethod()."' enctype='application/x-www-form-urlencoded' >";

// Container with tabs
?>
  <div id="example" class="flora">
            <ul>
                <li><a href="#page-1"><span>Vstupní evidence</span></a></li>
                <li><a href="#page-2"><span>Příprava rozpočtu</span></a></li>
                <li><a href="#page-3"><span>Podání projektu</span></a></li>
                <li><a href="#page-4"><span>Realizace projektu</span></a></li>
            </ul>
            <div id="page-1">
            <?php echo $this->form->getSubform('page1'); ?>
            </div>
            <div id="page-2">
            <?php
                  echo "<div style='padding:1em;'>";
                  include("../application/views/scripts/index/rozpocet.phtml");
                  echo "</div>";
            ?>
            </div>
            <div id="page-3">
            <?php echo $this->form->getSubform('page2'); ?>
            </div>
            <div id="page-4">
            <?php echo $this->form->getSubform('page3'); ?>
            </div>
        </div>
<?php
echo $this->form->submit;
echo "</form>";

?>

Po úpravě stylu to vypadá jinak, ale je to funkční jak chci a přesně kopíruje rozměry formuláře. 

Přijde mi, že v Dojo je spousta jednoduchých věcí jako jsou třeba ty taby zatím celkem nedotažené. Co si myslíte o té integraci ZF s Dojo?