Geekly Articles each Day
📜 ⬆️ ⬇️

Zend_Dojo: First Steps

Zend_Dojo

Zend_Dojo is a tool imposed by the authors of the framework. So let's try, if they really ask for it ...


I'll start with the mean-spirited - tease the result of the work done:
')
Zend_Dojo_Form

Looks attractive. It will not be so difficult to reproduce this creation, even if your knowledge of Dojo / Dijit leaves much to be desired - you will understand without much difficulty (although it is better to look towards the manuals - " Dojo for beginners ";)).

To begin with - initialization - I’ll give you a piece of the Bootstrap.php file in which we will include the Dojo helpers:

<? php
class Bootstrap extends Zend_Application_Bootstrap_Bootstrap
{
protected function _initView ( )
{
$ view = new Zend_View ( ) ;
$ view -> addHelperPath ( 'Zend / Dojo / View / Helper /' , 'Zend_Dojo_View_Helper' ) ;
// or
Zend_Dojo :: enableView ( $ view ) ;
return $ view ;
}
}


Step two is to connect the Dojo library. This happiness should be included in the <head> tag of your HTML document. To do this, it will be enough to slightly modify “layout.phtml” (or “index.phtml” if you are not using layouts):
<? php echo $ this -> doctype ( ) ?>
<html>
<head>
<title> Dojo Demo </ title>
<meta http-equiv = "Content-Type" content = "text / html; charset = utf-8">
<? php
// My own stylesheet
echo $ this -> headLink ( ) -> setStylesheet ( '/css/my.css' ) ;
// Check if dojo library is needed
if ( $ this -> dojo ( ) -> isEnabled ( ) ) :
// Include dojo library
$ this -> dojo ( ) -> setLocalPath ( '/js/dojo/dojo.js' )
// Use dojo theme tundra
-> addStyleSheetModule ( 'dijit.themes.tundra' ) ;
// Echo out the dojo <script> tags
echo $ this -> dojo ( ) ;
endif ; ?>
</ head>
<! - Set body class to "tundra" (requeried) ->
<body class = "tundra">
<? php echo $ this -> layout ( ) -> content ?>
</ body>
</ html>


Now our application is ready to use Dojo. Let's move on to the view scripts — the first line in the “index.phtml” file is the inclusion of Dojo:
$ this -> dojo ( ) -> enable ( ) ;


If this is not done, Dojo will not be included in the layout.phtml file.

Everything is ready, you can start - create a TabContainer - for this we will use the appropriate ViewHelper:

echo $ this -> tabContainer ( $ id , $ content , $ params , $ attribs ) ;


It seems to be a normal helper, but we still need to call the captureStart () and captureEnd () methods to enter the data:

<? php
$ this -> dojo ( ) -> enable ( ) ;
// Container with tabs
$ this -> tabContainer ( ) -> captureStart ( 'tab1' , array ( ) , array ( 'style' => 'width: 800px; height: 500px;' ) ) ;
// Our content
echo $ this -> tabContainer ( ) -> captureEnd ( 'tab1' ) ;


So we add content to the container. In a similar way we add bookmarks to our container:

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

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

// Tab "Dates"
$ this -> contentPane ( ) -> captureStart ( 'pane1' , array ( ) , array ( 'title' => 'Dates' ) ) ;
echo $ this -> form1 ;
echo $ this -> contentPane ( ) -> captureEnd ( 'pane1' ) ;

// Tab "FAQ"
$ this -> contentPane ( ) -> captureStart ( 'pane2' , array ( ) , array ( 'title' => 'FAQ' ) ) ;
?>
<h1> FAQ </ h1>
<dl> <dt> Question 1? </ dt> <dd> This is my answer 1! </ dd> </ dl>
<dl> <dt> Question 2? </ dt> <dd> Good question, next one. </ dd> </ dl>
<dl> <dt> Question 3? </ dt> <dd> Ok, that's enough! </ dd> </ dl>
<? php
echo $ this -> contentPane ( ) -> captureEnd ( 'pane2' ) ;

// Tab "Closable" (in the settings we set closable = true)
$ this -> contentPane ( ) -> captureStart ( 'pane3' , array ( ) , array ( 'title' => 'Closable' , 'closable' => true ) ) ;
echo 'You can close me!' ;
echo $ this -> contentPane ( ) -> captureEnd ( 'pane3' ) ;

// Tab "Splitted" with a separator
$ this -> contentPane ( ) -> captureStart ( 'pane4' , array ( ) , array ( 'title' => 'Splitted' ) ) ;
$ this -> splitContainer ( ) -> captureStart ( 'split1' , array ( ) , array ( 'style' => 'width: 250px; height: 250px;' ) ) ;
$ this -> contentPane ( ) -> captureStart ( 'splitpane1' , array ( ) , array ( ) ) ;
echo 'Hey, I am on the left side!' ;
echo $ this -> contentPane ( ) -> captureEnd ( 'splitpane1' ) ;
$ this -> contentPane ( ) -> captureStart ( 'splitpane2' , array ( ) , array ( ) ) ;
echo 'Cool!' ;
echo $ this -> contentPane ( ) -> captureEnd ( 'splitpane2' ) ;
echo $ this -> splitContainer ( ) -> captureEnd ( 'split1' ) ;
echo $ this -> contentPane ( ) -> captureEnd ( 'pane4' ) ;

// Tab "Editor" with WYSIWYG editor
$ this -> contentPane ( ) -> captureStart ( 'pane5' , array ( ) , array ( 'title' => 'Editor' ) ) ;
echo $ this -> editor ( 'foo' ) ;
echo $ this -> contentPane ( ) -> captureEnd ( 'pane5' ) ;
echo $ this -> tabContainer ( ) -> captureEnd ( 'tab1' ) ;


As you can see, each tab in our container is a new ContentPane . ContentPane can be used in any container (except AccordionContainer ). For more information, see the ZF documentation .

In the first tab, we display the form, which is an object of type Zend_Dojo_Form (see the listing of IndexController / IndexAction):

public function indexAction ( )
{
$ form1 = new Zend_Dojo_Form ( ) ;
$ form1 -> setMethod ( 'post' ) -> setAction ( "/" ) ;
$ form1 -> addElement ( 'DateTextBox' , 'date1' , array (
'label' => 'Choose a date:' ,
'datePattern' => 'yyyy-MM-dd' ,
'validators' => array ( 'Date' ) ,
'required' => true
) )
-> addElement ( 'TimeTextBox' , 'time1' , array (
'label' => 'Choose a time:' ,
'timePattern' => 'HH: mm: ss' ,
) )
-> addElement ( 'NumberSpinner' , 'number1' , array (
'label' => 'Choose a number:' ,
'value' => 0 ,
'smallDelta' => 1 ,
'min' => 0 ,
'max' => 30 ,
'defaultTimeout' => 100 ,
'timeoutChangeRate' => 100 ,
) )
-> addElement ( 'HorizontalSlider' , 'slide1' , array (
'label' => 'Let \' s slide: ' ,
'minimum' => 0 ,
'maximum' => 25 ,
'discreteValues' => 10 ,
'style' => 'width: 450px;' ,
'topDecorationDijit' => 'HorizontalRuleLabels' ,
'topDecorationLabels' => array ( ' 0% ' , '50%' , '100%' ) ,
'topDecorationParams' => array ( 'style' => 'padding-bottom: 20px;' ) ,
) )
-> addElement ( 'SubmitButton' , 'submit' , array (
'label' => 'Submit!'
) )

$ this -> view -> form1 = $ form1 ;
}


It’s so easy using the Dojo widgets (Dijits) to create forms. The process is almost identical to working with Zend_Form, you can see only a slight difference in the naming of elements (for example, “SubmitButton” and “submit”), and the parameters for setting up a little more.

This is only the first step in exploring Zend_Dojo , if you want to learn more - stay tuned ;)

This article is only a free translation of " My Very First Steps with Zend_Dojo "

Source: https://habr.com/ru/post/60472/

More articles:


All Articles