Zoo - Creating an address field element

Here's a short tutorial on creating a zoo element that has multiple sub-fields. A good example for the same, which we've also used as a sample is an address field. An adress field will typically have different parts such as city, zip, state etc. I assume you have already gone through the zoo documentation on creating a new custom element - http://www.yootheme.com/zoo/documentation/developers/create-a-custom-element

Step 1: The xml file
create the media/zoo/applications/<YOUR APPLICATION>/elements/address/address.xml file.

<?xml version="1.0" encoding="utf-8"?>
<element type="address" group="mylist">
    <name>Address</name>
    <author>Tekdi</author>
    <creationDate>Feb 2013</creationDate>
    <copyright>Copyright (C) tekdi</copyright>
    <authorEmail></authorEmail>
    <authorUrl>http://www.tekdi.net</authorUrl>
    <version>1.0.0</version>
    <description>Repeateble city,country and state fields</description>
</element>

Step 2: The php file
create this file: media/zoo/applications/<YOUR APPLICATION>/elements/address/address.php

<?php
// no direct access
defined('_JEXEC') or die('Restricted access');
// register ElementRepeatable class
App::getInstance('zoo')->loader->register('ElementRepeatable', 'elements:repeatable/repeatable.php');
class ElementAddress extends ElementRepeatable implements iRepeatSubmittable {
    
    protected function _hasValue($params = array()) {
        $value = $this->get('value');
        return $this->_containsEmail($value);
    }
    public function getText() {
        $text = $this->get('value', '');
        return empty($text) ? $this->get('value', '') : $text;
    }
    
    protected function _edit(){
        return $this->_editForm();
    }
    public function _renderSubmission($params = array()) {
        return $this->_editForm($params->get('trusted_mode'));
    }
    protected function _editForm($trusted_mode = true) {
        if ($layout = $this->getLayout('edit.php')) {
            return $this->renderLayout($layout,
                array('trusted_mode' => $trusted_mode
                )
            );
        }
    }
    public function _validateSubmission($value, $params) {
        $values    = $value;
        $validator = $this->app->validator->create('string', array('required' => false));
        $value      = $validator->clean($values->get('value'));
        $country   = $validator->clean($values->get('country'));
        $state      = $validator->clean($values->get('state'));
        return compact( 'value', 'country', 'state');
    }
}

Step 3: Another php file
create this file: media/zoo/applications/<YOUR APPLICATION>/elements/address/tmpl/edit.php

<?php
// no direct access
defined('_JEXEC') or die('Restricted access');
?>
<div>
    <?php echo $this->app->html->_('control.text', $this->getControlName('value'), $this->get('value'), 'size="60" title="'.JText::_('value').'" placeholder="'.JText::_('value').'"'); ?>        
            
    <?php echo $this->app->html->_('control.text', $this->getControlName('country'), $this->get('country'), 'size="60" title="'.JText::_('country').'" placeholder="'.JText::_('country').'"'); ?>
            
    <?php echo $this->app->html->_('control.text', $this->getControlName('state'), $this->get('state'), 'size="60" title="'.JText::_('state').'" placeholder="'.JText::_('state').'"'); ?>
        
</div>