Admin tab content renders on the left

Question

I'm learning Magento Admin - the final frontier. I want to add tabs on the left which display their content on the right. So far I have 2 tabs - the first renders the content in the tabs and the second doesn't work.

I suppose I have to add some empty form container on the right and somehow link the tab contents to that container. But I don't know how exactly to do that. Below is a screenshot of what I have so far:

And here's the file structure:

CODE:

config.xml:

<?xml version="1.0" encoding="UTF-8" ?>
<config>
<modules>
    <Swiner_Hog>
        <version>0.1.0</version>
    </Swiner_Hog>
</modules>
<global>
    <models>
        <swiner_hog>
            <class>Swiner_Hog_Model</class>
            <resourceModel>swiner_hog_resource</resourceModel>
        </swiner_hog>
        <swiner_hog_resource>
            <class>Swiner_Hog_Model_Resource</class>
            <entities>
                <garbage>
                    <table>swine_table</table>
                </garbage>
            </entities>
        </swiner_hog_resource>
    </models>
    <blocks>
        <swiner_hog>
            <class>Swiner_Hog_Block</class>
        </swiner_hog>
    </blocks>
    <helpers>
        <swiner_hog>
            <class>Swiner_Hog_Helper</class>
        </swiner_hog>
    </helpers>
    <resources>
        <swiner_hog_setup>
            <setup>
                <module>Swiner_Hog</module>
            </setup>
        </swiner_hog_setup>
    </resources>
</global>
<admin>
    <routers>
            <adminhtml>
                <args>
                    <modules>
                        <swiner_hog after="Mage_Adminhtml">Swiner_Hog_Adminhtml</swiner_hog>
                    </modules>
                </args>
            </adminhtml>
    </routers>
</admin>
<adminhtml>
    <layout>
        <updates>
            <swiner_hog>
                <file>swiner/hog.xml</file>
            </swiner_hog>
        </updates>
    </layout>
</adminhtml>

SwineController.php:

<?php
class Swiner_Hog_Adminhtml_SwineController extends Mage_Adminhtml_Controller_Action
{
    public function tabsIndexAction()
{
    $tabs = $this->getLayout()->createBlock('swiner_hog/adminhtml_tabs');
    $this->loadLayout()->_addLeft($tabs);

// Not sure what type of block to create here ???
//        $block = $this->getLayout()->createBlock('swiner_hog/adminhtml_???');
//        $this->_addContent($block);

    $this->renderLayout();
}

public function saveAction() 
{
.... code ....
}
}

Tabs.php:

<?php
class Swiner_Hog_Block_Adminhtml_Tabs extends Mage_Adminhtml_Block_Widget_Tabs
{
public function __construct()
{
    parent::__construct();
    $this->setId('tabs_block');
    $this->setDestElementId('content_form');
    $this->setTitle($this->__('Tabs Information'));
}

protected function _beforeToHtml()
{
    //This will get all existing tabs which is Default in Magento
    $this->parent = parent::_prepareLayout();
    $this->addTab('first', array(
        'label'     => $this->__('Change details'),
        'content'   => $this->getLayout()->createBlock('swiner_hog/adminhtml_tabs_first')->toHtml(),
        'active'    => true,
    ));

    $this->parent = parent::_prepareLayout();
    $this->addTab('second', array(
        'label'     => $this->__('Change something'),
        'content'   => $this->getLayout()->createBlock('swiner_hog/adminhtml_tabs_second')->toHtml(),
        'active'    => false,
    ));

    return parent::_beforeToHtml();
}
}

First.php:

<?php
class Swiner_Hog_Block_Adminhtml_Tabs_First extends Mage_Adminhtml_Block_Widget_Form
{
protected function _prepareForm()
{
    if (Mage::registry('current_swine'))
    {
        $data = Mage::registry('current_swine')->getData();
    } else {
        $data = array();
    }
    // SET POST
    $form = new Varien_Data_Form(array(
            'id' => 'content_form',
            'action' => $this->getUrl('*/*/save', array('id' => $this->getRequest()->getParam('id'))),
            'method' => 'post',
            'enctype' => 'multipart/form-data'
        )
    );

    $this->setForm($form);

    $fieldset = $form->addFieldset('general_form', array(
        'legend' => $this->__('First Form')
    ));

    $fieldset->addField('name', 'text', array(
        'label' => $this->__('Name'),
        'class' => 'required entry',
        'required' => true,
        'name' => 'name',
    ));

    $fieldset->addField('description', 'text', array(
        'label' => $this->__('Description'),
        'class' => 'required entry',
        'required' => true,
        'name' => 'description',
    ));

    $form->setUseContainer(true);

    $form->setValues($data);

    return parent::_prepareForm();
}
}

Second.php:

<?php
class Swiner_Hog_Block_Adminhtml_Tabs_Second extends Mage_Adminhtml_Block_Widget_Form
{
protected function _prepareForm()
{
    $form = new Varien_Data_Form(array(
            'id' => 'content_form',
            'enctype' => 'multipart/form-data'
        )
    );

    $fieldset = $form->addFieldset('general_form', array(
        'legend' => $this->__('Second Form')
    ));

    return parent::_prepareForm();
}
}

I don't have anything in the layout file(hog.xml). I'm sure that using xml for adding tabs is easier but I want to do this the other way.

Answer 1

I got it! After reading this tutorial for the 10th time maybe.

I made 2 major mistakes. My approach was wrong right from the beginning. I had to start from form container, then form and THEN tabs. Not the other way around. And I had an error in the controller.

Anyway, here's the working solution along with a screenshot:

CODE:

SwineController.php:

class Swiner_Hog_Adminhtml_SwineController extends Mage_Adminhtml_Controller_Action
{
public function tabsIndexAction()
{
    $this->loadLayout();

    $block = $this->getLayout()->createBlock('swiner_hog/adminhtml_tabs_container');
    $this->_addContent($block);

    $tabs = $this->getLayout()->createBlock('swiner_hog/adminhtml_tabs_container_tabs');
    $this->_addLeft($tabs);

    $this->renderLayout();
}
  .............

}

Container.php:

<?php

class Swiner_Hog_Block_Adminhtml_Tabs_Container extends Mage_Adminhtml_Block_Widget_Form_Container
{
public function __construct()
{
    parent::__construct();

    $this->_objectId = 'id';
    $this->_blockGroup = 'swiner_hog';
    $this->_controller = 'adminhtml_tabs';
    $this->_mode = 'container';
}

public function getHeaderText()
{
    return $this->__('Swine Container');
}
}

Form.php:

<?php

class Swiner_Hog_Block_Adminhtml_Tabs_Container_Form extends Mage_Adminhtml_Block_Widget_Form
{
protected function _prepareForm()
{
    $form = new Varien_Data_Form(array(
            'id' => 'content_form',
            'enctype' => 'multipart/form-data'
        )
    );

    // Without these 2 settings, the form will render on the left. So we're setting this to use the container.
    $form->setUseContainer(true);
    $this->setForm($form);

    return parent::_prepareForm();
}
}

Tabs.php:

<?php

class Swiner_Hog_Block_Adminhtml_Tabs_Container_Tabs extends Mage_Adminhtml_Block_Widget_Tabs
{
public function __construct()
{
    parent::__construct();
    $this->setId('form_tabs');
    $this->setDestElementId('content_form');
    $this->setTitle($this->__('Tabs Information'));
}

protected function _beforeToHtml()
{
    //This will get all existing tabs which is Default in Magento
    $this->parent = parent::_prepareLayout();
    $this->addTab('first', array(
        'label'     => $this->__('Change details'),
        'content'   => $this->getLayout()->createBlock('swiner_hog/adminhtml_tabs_container_tab_first')->toHtml(),
        'active'    => true,
    ));

    $this->parent = parent::_prepareLayout();
    $this->addTab('second', array(
        'label'     => $this->__('Something else'),
        'content'   => $this->getLayout()->createBlock('swiner_hog/adminhtml_tabs_container_tab_second')->toHtml(),
        'active'    => false,
    ));

    return parent::_beforeToHtml();
}
}

First.php:

<?php

class Swiner_Hog_Block_Adminhtml_Tabs_Container_Tab_First extends Mage_Adminhtml_Block_Widget_Form
{
protected function _prepareForm()
{
    if (Mage::registry('current_swine'))
    {
        $data = Mage::registry('current_swine')->getData();
    } else {
        $data = array();
    }
    // SET POST
    $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'
        )
    );

    $this->setForm($form);

    $fieldset = $form->addFieldset('general_form', array(
        'legend' => $this->__('General Setup')
    ));

    $fieldset->addField('name', 'text', array(
        'label' => $this->__('Name'),
        'class' => 'required entry',
        'required' => true,
        'name' => 'name',
    ));

    $fieldset->addField('description', 'text', array(
        'label' => $this->__('Description'),
        'class' => 'required entry',
        'required' => true,
        'name' => 'description',
    ));

    $form->setUseContainer(true);

    $form->setValues($data);

    return parent::_prepareForm();
}
}

Second.php:

<?php

class Swiner_Hog_Block_Adminhtml_Tabs_Container_Tab_Second extends Mage_Adminhtml_Block_Widget_Form
{
protected function _prepareForm()
{
    $form = new Varien_Data_Form(array(
            'id' => 'edit_form',
            'method' => 'post',
            'enctype' => 'multipart/form-data'
        )
    );

    $this->setForm($form);

    $fieldset = $form->addFieldset('general_form', array(
        'legend' => $this->__('Second Tab')
    ));

    $fieldset->addField('name', 'text', array(
        'label' => $this->__('Name'),
        'class' => 'required entry',
        'required' => true,
        'name' => 'name',
    ));


    $form->setUseContainer(true);

    return parent::_prepareForm();
}
}