Kanał ATOM
Autor wpisu: batman, dodany: 08.10.2010 08:00, tagi: jquery, zend_framework
Czym jest serwis internetowy? Jest to zbiór formularzy oraz danych dodanych przy pomocy tych formularzy. Gdyby nie formularze, Internet taki jakim go znamy. Wyobrażacie sobie w jaki sposób dodawalibyście cokolwiek na ścianę facebooka bez formularzy?
W przypadku formularzy najczęstszym schematem jest ścieżka:
- strona początkowa (informacje na temat formularza lub dane zebrane przy jego pomocy)
- formularz (obsługa błędów, operacje na wprowadzonych danych)
- strona końcowa (podziękowania za wysłanie formularza lub powrót do strony początkowej).
Prawda, że nudne? Okazuje się, że wyrwanie się z tego schematu wcale nie jest takie trudne. Wystarczy formularz wyświetlić na warstwie, a dane zapisać AJAXem w tle. Oczywiście nie można zapomnieć o sytuacji kryzysowej, w której z jakiegoś powodu (np. błąd w skrypcie) zostaliśmy pozbawieni możliwości korzystania z Javascript.
Wszystko to, co przed chwilą opisałem można zrealizować niewielkim nakładem prac przy pomocy komponentu Zend_Form, biblioteki jQuery oraz pluginu FancyBox. Najciekawsze w tym wszystkim jest to, iż nie musimy wcale pisać dodatkowego kodu. Wszystkim zajmą się mechanizmy wbudowane w Zend Frameworka oraz konwencja, której trzeba się trzymać podczas stosowania tego sposobu.
Zacznijmy od formularza. Będzie to prosty formularz zbierający dane o użytkownikach (w przykładzie wykorzystałem klasę Batman_Form opisaną we wpisie Uniwersalne dekorowanie Zend_Form).
class Application_Form_FancyboxExample extends Batman_Form
{
protected function _renderForm()
{
$this->setName('form_fancybox_example');
$this->setAction('/index/fancyboxform');
$firstname = new Zend_Form_Element_Text('firstname');
$firstname->setLabel('Imie')
->setRequired(true)
->addValidator(new Zend_Validate_NotEmpty(), true);
$lastname = new Zend_Form_Element_Text('lastname');
$lastname->setLabel('Nazwisko')
->setRequired(true)
->addValidator(new Zend_Validate_NotEmpty(), true);
$submit = new Zend_Form_Element_Submit('btn_save');
$submit->setLabel('Zapisz')
->setIgnore(true);
$this->addElement($firstname);
$this->addElement($lastname);
$this->addElement($submit);
}
}
Kluczowym tutaj elementem jest zastosowanie akcji, która jednoznacznie wskazuje na akcję, odpowiedzialną za przetworzenie formularza. Ten prosty zabieg umożliwi nam obsłużenie formularza w przypadku braku Javascript.
Następnie musimy stworzyć widok, który będzie zawierał link do formularza.
<a href="/index/fancyboxform" id="link">dodaj uzytkownika</a>
Na koniec pozostaje stworzenie akcji
public function fancyboxformAction()
{
$form = new Application_Form_FancyboxExample();
if($this->_request->isPost()) {
$postData = $this->_request->getPost();
if($form->isValid($postData)) {
// zrob cos z danymi
$this->_redirect('/index/fancyboxexample');
}
}
$this->view->form = $form;
}
i widoku z formularzem.
<h1>Formularz</h1> <?php echo $this->form; ?>
Jak dotąd nie zrobiliśmy nic ponad stworzenie standardowego, nudnego formularza wraz z jego obsługą. Pora na magię.
Cel wybiera się w taki sam sposób jak źródło. Po określeniu celu, należy wybrać rodzaj animacji oraz ustalić jej parametry. Np dla animacji przeźroczystości należy wybrać wartość początkową oraz końcową. Oprócz samej animacji mamy możliwość ustalenia dodatkowych parametrów, takich jak czas trwania oraz efekt przejścia. Co więcej, można wskazać animację jaka ma się wykonać po zakończeniu bieżącej.
