โดย zend_framework » 17/04/2011 5:29 pm
การใช้งาน Zend Framework ร่วมกับ Dojo
ติดตั้ง dojo
ก๊อบปี้ /ZendFramework-1.7.3/externals/dojo /htdocs/js/
ตัวอย่างการใช้งานร่วมกับ Zend Framework
1. เพิ่มไฟล์ bootstrap
โค้ด: เลือกทั้งหมด
define('ROOT_DIR', dirname(dirname(__FILE__)));
//Dojo
$layout = Zend_Layout::startMvc(array('layoutPath' => ROOT_DIR.'/application/views/layouts'));
// Tell the view where it finds Zend_Dojo ViewHelper
$layout->getView()->addHelperPath('Zend/Dojo/View/Helper/', 'Zend_Dojo_View_Helper');
2. แก้ไข IndexController.php
โค้ด: เลือกทั้งหมด
public function indexAction()
{
$this->_helper->layout->setLayout('dojolayout');
if ($this->_request->isPost()) {
$date1 = Zend_Filter::get($this->getRequest()->getPost('date1'), 'StripTags');
$this->view->assign('DATE1', $date1) ;
}
$form1 = new MyForm();
$form1->setMethod('post')->setAction("/");
$this->view->form1 = $form1;
}//index
3. สร้าง models/MyForm.php
โค้ด: เลือกทั้งหมด
<?php
class MyForm extends Zend_Dojo_Form
{
public function __construct($options = null)
{
parent::__construct($options);
$this->addElement('DateTextBox', 'date1', array(
'label' => 'เลือกวันที่:',
'datePattern' => 'yyyy-MM-dd',
'validators' => array('Date'),
'required' => true
))
->addElement('TimeTextBox', 'time1', array(
'label' => 'เลือกเวลา:',
'timePattern' => 'HH:mm:ss',
'required' => true
))
->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!'
));
}
}//main
?>
4. สร้าง /views/layouts/dojolayout.php
โค้ด: เลือกทั้งหมด
<html>
<head>
<title>Phayoune.org Dojo Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=tis-620">
<?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/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" -->
<body class="tundra" >
<?php echo $this->layout()->content ?>
</body>
</html>
5. สร้าง index.phtml
โค้ด: เลือกทั้งหมด
<?php
$this->dojo()->enable();
// Container with tabs
$this->tabContainer()->captureStart('tab1', array(), array('style' =>
'width:800px;height:500px;'));
// First tab "Dates"
$this->contentPane()->captureStart('pane1', array(), array('title'
=> 'ข้อมูลนักเรียน'));
echo $this->form1;
echo $this->contentPane()->captureEnd('pane1');
// Second tab "FAQ"
$this->contentPane()->captureStart('pane2', array(), array('title'
=> 'ผู้ปกครอง'));
echo '<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>
';
echo $this->contentPane()->captureEnd('pane2');
// Third tab "Closable"
$this->contentPane()->captureStart('pane3', array(), array('title'
=> 'ความผิด', 'closable' => true));
echo 'You can close me!';
echo $this->contentPane()->captureEnd('pane3');
// Fourth tab "Splitted"
$this->contentPane()->captureStart('pane4', array(), array('title'
=> 'ความดี'));
$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');
echo $this->tabContainer()->captureEnd('tab1');
if ( !empty($this->DATE1) ) { echo "วันที่ : ".$this->DATE1 ; }
?>
แหล่งข้อมูล :
http://th.wikipedia.org/wiki/Dojo_Toolkit ,
http://www.dojotoolkit.org/
การใช้งาน Zend Framework ร่วมกับ Dojo
ติดตั้ง dojo
ก๊อบปี้ /ZendFramework-1.7.3/externals/dojo /htdocs/js/
ตัวอย่างการใช้งานร่วมกับ Zend Framework
1. เพิ่มไฟล์ bootstrap
[code]
define('ROOT_DIR', dirname(dirname(__FILE__)));
//Dojo
$layout = Zend_Layout::startMvc(array('layoutPath' => ROOT_DIR.'/application/views/layouts'));
// Tell the view where it finds Zend_Dojo ViewHelper
$layout->getView()->addHelperPath('Zend/Dojo/View/Helper/', 'Zend_Dojo_View_Helper');
[/code]
2. แก้ไข IndexController.php
[code=php]
public function indexAction()
{
$this->_helper->layout->setLayout('dojolayout');
if ($this->_request->isPost()) {
$date1 = Zend_Filter::get($this->getRequest()->getPost('date1'), 'StripTags');
$this->view->assign('DATE1', $date1) ;
}
$form1 = new MyForm();
$form1->setMethod('post')->setAction("/");
$this->view->form1 = $form1;
}//index
[/code]
3. สร้าง models/MyForm.php
[code=php]
<?php
class MyForm extends Zend_Dojo_Form
{
public function __construct($options = null)
{
parent::__construct($options);
$this->addElement('DateTextBox', 'date1', array(
'label' => 'เลือกวันที่:',
'datePattern' => 'yyyy-MM-dd',
'validators' => array('Date'),
'required' => true
))
->addElement('TimeTextBox', 'time1', array(
'label' => 'เลือกเวลา:',
'timePattern' => 'HH:mm:ss',
'required' => true
))
->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!'
));
}
}//main
?>
[/code]
4. สร้าง /views/layouts/dojolayout.php
[code=php]
<html>
<head>
<title>Phayoune.org Dojo Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=tis-620">
<?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/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" -->
<body class="tundra" >
<?php echo $this->layout()->content ?>
</body>
</html>
[/code]
5. สร้าง index.phtml
[code=php]
<?php
$this->dojo()->enable();
// Container with tabs
$this->tabContainer()->captureStart('tab1', array(), array('style' =>
'width:800px;height:500px;'));
// First tab "Dates"
$this->contentPane()->captureStart('pane1', array(), array('title'
=> 'ข้อมูลนักเรียน'));
echo $this->form1;
echo $this->contentPane()->captureEnd('pane1');
// Second tab "FAQ"
$this->contentPane()->captureStart('pane2', array(), array('title'
=> 'ผู้ปกครอง'));
echo '<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>
';
echo $this->contentPane()->captureEnd('pane2');
// Third tab "Closable"
$this->contentPane()->captureStart('pane3', array(), array('title'
=> 'ความผิด', 'closable' => true));
echo 'You can close me!';
echo $this->contentPane()->captureEnd('pane3');
// Fourth tab "Splitted"
$this->contentPane()->captureStart('pane4', array(), array('title'
=> 'ความดี'));
$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');
echo $this->tabContainer()->captureEnd('tab1');
if ( !empty($this->DATE1) ) { echo "วันที่ : ".$this->DATE1 ; }
?>
[/code]
แหล่งข้อมูล :
http://th.wikipedia.org/wiki/Dojo_Toolkit , http://www.dojotoolkit.org/