Archív

Archív pro ‘javascript’ Kategorie

Zend Framework 1.6 a ajax pomocí jQuery

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.

Categories: jquery, zend framework Tags:

Zend Framework 1.6 a moje zkušenosti s Dojo TabContainer

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?

Categories: javascript, jquery, zend framework Tags:

on Air Tour v Praze

10.06.2008 Bez komentářů

air_appicon Adobe nás přivítala ve velkém stylu, tak dobře organizačně připravenou akci jsem dlouho nezažil. Na začátku jsem dostal materiály, vizitku, k dispozici je internet, občerstvení po celou dobu akce a každý byl osobně uveden jejich pracovníkem a obsluha se o vás stará.  Balíček co jsem dostal obsahoval: Adobe AIR for Javascript Developers, ActionScript Reference, Flex Early Evalutation: Assessing Flex Your Project Needs. Nejsou to jen propagační materiály, ale příručka co se může opravdu hodit a reference ActionScriptu, která je sice k dispozici online, ale někdy se to hodí i vytištěné. Do místnosti kde se ve Staropramen pivovaru přednášelo, byly přidány prodlužováky se zásuvkami pro každého a jediný dojem z celé akce trochu ničil hluk z ulice hned za okny.

Program akce byl velmi dobře sestaven a zaměřen převážně na začínající vývojáře na platformě Adobe Air, která tu je od února a teď v červnu bude k dispozici verze 1.1.

Na úvod jedna poznámka pro ty co se s Air ještě nesetkali. Adobe Air je runtime prostředí pro běh aplikací napsaných v JS, HTML, Flash (Flex). Není to jen Flash, aplikace může být jen např. HTML a JS. Během vývoje mělo Adobe Air vývojový název Apollo, pod kterým občas něco najdete. Adobe Air je k dispozici pro Windows, Mac a Linux (alpha).

Program

Nebudu detailně probírat každou přednášku, ale jen to lehce shrnu a uvedu nejzajímavější odkazy. V Keynote Ryan Stewart řekl co to Adobe Air je, kam se bude ubírat Flash Player 10 a kam další verze Adobe Air, které na nás brzo čeká.

V další sérii přednášek byli ukázky jak vybudovat Adobe Air aplikaci pomocí Adobe Flex 3 builderu, Adobe Flex SDK a notepadu nebo pomocí Aptana IDE, které je zdarma.

Kromě vývojových nástrojů byla také představeny různé aplikace, které v Adobe Air jsou již vyrobeny. Pokud budete dělat vlastní aplikace je potřeba je digitálně podepsat, aby při instalaci jste byli důvěryhodní chce to také důvěryhodný certifikát a ne self signed. Certifikáty vydává pro Firefox např. Thawte ($299 za rok).

V rámci přednášek také byli přestaveny projekty www.flash.cz a www.flexgarden.net, které nám problematiku vývoje ve Flexu přinášjí v české a slovenském jazyce.

Přenášeli většinou američané a bylo to poznat např. na tom jak intenzivně používají sociální sítě jak Twitter, Brightkite, Tabrio, Facebook a další. O tomto fenoménu, který u nás ještě není tak rozvinutý přinesu další článek někdy později.

Další materiály jsou k dispozci také na stránkých akce, kde najdete např. i videoblog.

Keynote – Ryan Stewart

Building your first Adobe AIR application with Adobe Flex – Mike Chambers

Jak udělat jednoduchou aplikaci a další témata, které byli probírány na přednáškách? Stačí si pročíst knížku Adobe Air for Javascript Developers. Tam najdere všechny důležité informace o Adobe Air.

Building your first AIR application with HTML and JavaScript – Kevin Hoyt

Leveraging HTML and JavaScript within Adobe AIR – Kevin Hoyt

Deploying and Updating AIR Applications – Serge Jespers

Adobe AIR API Overview – Daniel Dura

Google App Engine and RIAs – Dion Almaer

Google App engine má jako runtime Python a využívá část framewroku Django.

Data Intensive Enterprise AIR Applications – Enrique Duvos

Using JavaScript Frameworks in AIR Applications – Andre Charland

AIR Conditioning – Lee Brimelow

Adobe Air Aplikace

Fotografie

http://www.flickr.com/photos/tags/onair2008prague/

Categories: adobe, adobe air, akce, flex, javascript Tags:

Input checkbox v Firefoxu, Opeře a v IE

Nedávno jsem řešil celkem jednoduchou věc, ve formuláři byl checkbox, který při změně měl část formuláře schovat.

...
<input type="checkbox" onChange="zmen()" />
...

Celkem triviální s tím rozdílem, že to nefunguje v Internet Exploreru (zkoušel jsem IE7). Prostudoval jsem na MSDN dokumentaci a tam jsem se dočel, že metodu onChange sice IE podporuje, ale jen pro type=’text’.

...
<input type="checkbox" onClick="zmen()" />
...

Tak jsem si řekl, že metodu onChange nahradím onClick a mám vyhráno, ale ouvej, to zase nefungovalo ve Firefoxu a Opeře. Proto detekuji IE a podle toho Smarty rozhodí možnost na onChange nebo onClick. Osobně si myslím, že onChange je logická, netuším proč v IE podpora chybí.

// Detekce IE
$ie = strpos($_SERVER["HTTP_USER_AGENT"], 'MSIE') ? true : false;
$ie = strpos($_SERVER["HTTP_USER_AGENT"], 'Opera') ? false : $ie;

if($ie)
{
$smarty->assign('ie', true);
}
else
{
$smarty->assign('ie', false);
}
Categories: javascript Tags: , , , ,

Switch to our mobile site