tag we added news.xml. This is the layout file in our adminhtml layouts. So create the file news.xml in the location app/design/adminhtml/default/default/layout.
1
js_css
prototype/windows/themes/default.css
js_css
prototype/windows/themes/magento.css
lib/prototype/windows/themes/magento.css
In the next step we will create the controller file. So create 'Adminhtml' folder in the controllers folder of our module. And create the file NewsController.php in it.
class Threemauto_News_Adminhtml_NewsController extends Mage_Adminhtml_Controller_action {
public function indexAction() {
$this->loadLayout();
$this->renderLayout();
}
public function newAction(){
$this->loadLayout();
$this->_addContent($this->getLayout()->createBlock('news/adminhtml_news_edit'))
->_addLeft($this->getLayout()->createBlock('news/adminhtml_news_edit_tabs'));
$this->renderLayout();
}
public function deleteAction() {
if ($this->getRequest()->getParam('id') > 0) {
try {
$model = Mage::getModel('news/news');
$model->setId($this->getRequest()->getParam('id'))
->delete();
Mage::getSingleton('adminhtml/session')->addSuccess(Mage::helper('adminhtml')->__('Item was successfully deleted'));
$this->_redirect('*/*/');
} catch (Exception $e) {
Mage::getSingleton('adminhtml/session')->addError($e->getMessage());
$this->_redirect('*/*/edit', array('id' => $this->getRequest()->getParam('id')));
}
}
$this->_redirect('*/*/');
}
public function saveAction() {
if ($data = $this->getRequest()->getPost())
{
$model = Mage::getModel('news/news');
$id = $this->getRequest()->getParam('id');
foreach ($data as $key => $value)
{
if (is_array($value))
{
$data[$key] = implode(',',$this->getRequest()->getParam($key));
}
}
if ($id) {
$model->load($id);
}
$model->setData($data);
Mage::getSingleton('adminhtml/session')->setFormData($data);
try {
if ($id) {
$model->setId($id);
}
$model->save();
if (!$model->getId()) {
Mage::throwException(Mage::helper('news')->__('Error saving news details'));
}
Mage::getSingleton('adminhtml/session')->addSuccess(Mage::helper('news')->__('Details was successfully saved.'));
Mage::getSingleton('adminhtml/session')->setFormData(false);
// The following line decides if it is a "save" or "save and continue"
if ($this->getRequest()->getParam('back')) {
$this->_redirect('*/*/edit', array('id' => $model->getId()));
} else {
$this->_redirect('*/*/');
}
} catch (Exception $e) {
Mage::getSingleton('adminhtml/session')->addError($e->getMessage());
if ($model && $model->getId()) {
$this->_redirect('*/*/edit', array('id' => $model->getId()));
} else {
$this->_redirect('*/*/');
}
}
return;
}
Mage::getSingleton('adminhtml/session')->addError(Mage::helper('news')->__('No data found to save'));
$this->_redirect('*/*/');
}
public function editAction() {
$id = $this->getRequest()->getParam('id', null);
$model = Mage::getModel('news/news');
if ($id) {
$model->load((int) $id);
if ($model->getId()) {
$data = Mage::getSingleton('adminhtml/session')->getFormData(true);
if ($data) {
$model->setData($data)->setId($id);
}
} else {
Mage::getSingleton('adminhtml/session')->addError(Mage::helper('news')->__('news does not exist'));
$this->_redirect('*/*/');
}
}
Mage::register('news_data', $model);
$this->_title($this->__('News'))->_title($this->__('Edit news'));
$this->loadLayout();
$this->getLayout()->getBlock('head')->setCanLoadExtJs(true);
$this->_addContent($this->getLayout()->createBlock('news/adminhtml_news_edit'))
->_addLeft($this->getLayout()->createBlock('news/adminhtml_news_edit_tabs'));
$this->renderLayout();
}
}
Note the function newAction() : This function is responsible for displaying the form in our controller. Here we addeded two blocks. One is for the 'Tabs' in the left side and other is the 'content' in the right side. Pease note the attached screen shot. There are so many methods are there. They are responsible for save the news, delete the news and edit the news. In the next step we will develop the form container. For that we will create the file Edit.php in the location Threemauto/News/Block/Adminhtml/News.
class Threemauto_News_Block_Adminhtml_News_Edit extends Mage_Adminhtml_Block_Widget_Form_Container {
public function __construct() {
parent::__construct();
$this->_objectId = 'id';
$this->_blockGroup = 'news';
$this->_controller = 'adminhtml_news';
$this->_mode = 'edit';
$this->_updateButton('save', 'label', Mage::helper('news')->__('Save News'));
$this->_updateButton('delete', 'label', Mage::helper('news')->__('Delete'));
$this->_addButton('saveandcontinue', array(
'label' => Mage::helper('news')->__('Save And Continue Edit'),
'onclick' => 'saveAndContinueEdit()',
'class' => 'save',
), -100);
$this->_formScripts[] = "
function toggleEditor() {
if (tinyMCE.getInstanceById('form_content') == null) {
tinyMCE.execCommand('mceAddControl', false, 'edit_form');
} else {
tinyMCE.execCommand('mceRemoveControl', false, 'edit_form');
}
}
function saveAndContinueEdit(){
editForm.submit($('edit_form').action+'back/edit/');
}
";
}
/*
* This function is responsible for Including TincyMCE in Head.
*/
protected function _prepareLayout() {
parent::_prepareLayout();
if (Mage::getSingleton('cms/wysiwyg_config')->isEnabled()) {
$this->getLayout()->getBlock('head')->setCanLoadTinyMce(true);
$this->getLayout()->getBlock('head')->setCanLoadExtJs(true);
}
}
public function getHeaderText() {
if (Mage::registry('news_data') && Mage::registry('news_data')->getId()) {
return Mage::helper('news')->__('Edit News "%s"', $this->htmlEscape(Mage::registry('news_data')->getTitle()));
} else {
return Mage::helper('news')->__('New News');
}
}
}
Next we will create the form tag. So create the file Form.php in the location Threemauto_News_Block_Adminhtml_News_Edit
class Threemauto_News_Block_Adminhtml_News_Edit_Form extends Mage_Adminhtml_Block_Widget_Form {
protected function _prepareForm() {
if (Mage::registry('news_data')) {
$data = Mage::registry('news_data')->getData();
} else {
$data = array();
}
$form = new Varien_Data_Form(array(
'id' => 'edit_form',
'action' => $this->getUrl('*/*/save', array('id' => $this->getRequest()->getParam('id'))),
'method' => 'post',
'enctype' => 'multipart/form-data'
)
);
$form->setUseContainer(true);
$this->setForm($form);
$form->setValues($data);
return parent::_prepareForm();
}
}
Next we want to develop the form tabs. There are two tabs in our form. You
class Threemauto_News_Block_Adminhtml_News_Edit_Tabs extends Mage_Adminhtml_Block_Widget_Tabs {
public function __construct() {
parent::__construct();
$this->setId('news_tabs');
$this->setDestElementId('edit_form'); // this should be same as the form id define above
$this->setTitle(Mage::helper('news')->__('News Information'));
}
protected function _beforeToHtml() {
$this->addTab('form_section', array(
'label' => Mage::helper('news')->__('News Information'),
'title' => Mage::helper('news')->__('News Information'),
'content' => $this->getLayout()->createBlock('news/adminhtml_news_edit_tab_form')->toHtml(),
));
$this->addTab('form_section1', array(
'label' => Mage::helper('news')->__('Content'),
'title' => Mage::helper('news')->__('Content'),
'content' => $this->getLayout()->createBlock('news/adminhtml_news_edit_tab_content')->toHtml(),
));
return parent::_beforeToHtml();
}
}
Note that there are two tabs are there . One is 'News Information' and the other is 'Content' . So in the _beforeToHtml() function we specified the actual form field's location. ie for the first tab, we want to create the file Form.php in the location Threemauto/News/Block/Adminhtml/News/Edit/Tab and for the second tab we want to create Content.php in the location Threemauto/News/Block/Adminhtml/News/Edit/Tab. The code in the two files follows
class Threemauto_News_Block_Adminhtml_News_Edit_Tab_Form extends Mage_Adminhtml_Block_Widget_Form {
protected function _prepareForm() {
if (Mage::registry('news_data')) {
$data = Mage::registry('news_data')->getData();
} else {
$data = array();
}
$form = new Varien_Data_Form();
$this->setForm($form);
$fieldset = $form->addFieldset('news_news', array('legend' => Mage::helper('news')->__('news information')));
$fieldset->addField('title', 'text', array(
'label' => Mage::helper('news')->__('News Title'),
'class' => 'required-entry',
'required' => true,
'name' => 'title',
));
$fieldset->addField('tag', 'text', array(
'label' => Mage::helper('news')->__('Tag'),
'class' => 'required-entry',
'required' => true,
'name' => 'tag',
));
$form->setValues($data);
return parent::_prepareForm();
}
}
class Threemauto_News_Block_Adminhtml_News_Edit_Tab_Content extends Mage_Adminhtml_Block_Widget_Form {
protected function _prepareForm() {
if (Mage::registry('news_data')) {
$data = Mage::registry('news_data')->getData();
} else {
$data = array();
}
$form = new Varien_Data_Form();
$this->setForm($form);
$fieldset = $form->addFieldset('news_news', array('legend' => Mage::helper('news')->__('More information')));
/*
* Editing the form field in wysiwyg editor.
*/
$wysiwygConfig = Mage::getSingleton('cms/wysiwyg_config')->getConfig();
$wysiwygConfig->addData(array('add_variables' => false,
'add_widgets' => true,
'add_images' => true,
'directives_url' => Mage::getSingleton('adminhtml/url')->getUrl('adminhtml/cms_wysiwyg/directive'),
'directives_url_quoted' => preg_quote(Mage::getSingleton('adminhtml/url')->getUrl('adminhtml/cms_wysiwyg/directive')),
'widget_window_url' => Mage::getSingleton('adminhtml/url')->getUrl('adminhtml/widget/index'),
'files_browser_window_url' => Mage::getSingleton('adminhtml/url')->getUrl('adminhtml/cms_wysiwyg_images/index'),
'files_browser_window_width' => (int) Mage::getConfig()->getNode('adminhtml/cms/browser/window_width'),
'files_browser_window_height' => (int) Mage::getConfig()->getNode('adminhtml/cms/browser/window_height')
));
$fieldset->addField('description', 'editor', array(
'name' => 'description',
'label' => Mage::helper('news')->__('Description'),
'title' => Mage::helper('news')->__('Description'),
'style' => 'width:800px; height:500px;',
'config' => $wysiwygConfig,
'required' => false,
'wysiwyg' => true
));
$form->setValues($data);
}
}
Thats it.... Finally we developed our module with Grid in admin page. Here i have added the WYSIWYG editor too. There is only 3 steps for implementing this editor in our module. These steps are already covered in this tutorial, but here is a breaf information about implementing wysiwyg editor
Step 1 : Including WYSIWYG editor in head.
Please note in the file app/code/local/Threemauto/News/Block/Adminhtml/News/Edit.php i have added the following code
protected function _prepareLayout() {
parent::_prepareLayout();
if (Mage::getSingleton('cms/wysiwyg_config')->isEnabled()) {
$this->getLayout()->getBlock('head')->setCanLoadTinyMce(true);
$this->getLayout()->getBlock('head')->setCanLoadExtJs(true);
}
}
this is enough.
Step 2 : Add the content filed in the Adminhtml form class
Please go to app/code/local/Threemauto/News/Block/Adminhtml/News/Edit/Tab/Content.php
there i have added
$wysiwygConfig = Mage::getSingleton('cms/wysiwyg_config')->getConfig();
$wysiwygConfig->addData(array('add_variables' => false,
'add_widgets' => true,
'add_images' => true,
'directives_url' => Mage::getSingleton('adminhtml/url')->getUrl('adminhtml/cms_wysiwyg/directive'),
'directives_url_quoted' => preg_quote(Mage::getSingleton('adminhtml/url')->getUrl('adminhtml/cms_wysiwyg/directive')),
'widget_window_url' => Mage::getSingleton('adminhtml/url')->getUrl('adminhtml/widget/index'),
'files_browser_window_url' => Mage::getSingleton('adminhtml/url')->getUrl('adminhtml/cms_wysiwyg_images/index'),
'files_browser_window_width' => (int) Mage::getConfig()->getNode('adminhtml/cms/browser/window_width'),
'files_browser_window_height' => (int) Mage::getConfig()->getNode('adminhtml/cms/browser/window_height')
));
$fieldset->addField('description', 'editor', array(
'name' => 'description',
'label' => Mage::helper('news')->__('Description'),
'title' => Mage::helper('news')->__('Description'),
'style' => 'width:800px; height:500px;',
'config' => $wysiwygConfig,
'required' => false,
'wysiwyg' => true
));
Step 3 : Add the JS files in the location app/design/adminhtml/default/default/layout/news.xml. (Check in this file)
Thats all.... Hope that this blog will help you
Thanks and Regards
Post Comments