Joomla! (DAY 10) - Joomsport (DAY 8): Create my own JElement

This is a trial on how to create a new JElement for menu type parameter: 'mon'.

Before the view can receive the parameter, we need a interface for user to set the parameter; before that, there should be a list for user to pick up value for that parameter, means parameter values should be formed first of all.

Step 1: Add one function to file '/administrator/components/com_joomsport/admin.joomsport.html.php', let's name it 'bl_VintestMenu', and it is responsible to output the HTML of the value list:

function bl_VintestMenu( $rows, $option ){$jsf = JRequest::getVar('function', 'jSelectArticle', '', 'string');JHTML::_('behavior.tooltip');?><table class="adminlist"><thead><tr><th width="2%" align="left"><?php echo JText::_( 'Num' ); ?></th><th class="title"><?php echo JText::_( 'Name' ); ?></th></tr></thead><tbody><?php$k = 0;if( count( $rows ) ){for ($i=0, $n=count( $rows ); $i < $n; $i++){$row = $rows[$i];JFilterOutput::objectHtmlSafe($row);?><tr class="<?php echo "row$k"; ?>"><td><?php echo  $i+1; ?></td><td><a href="javascript:window.parent.<?php echo $jsf;?>('<?php echo $row->num?>', '<?php echo htmlspecialchars($row->name, ENT_QUOTES, 'UTF-8')?>', 'mon');"><?php echo $row->name; ?></a></td></tr><?php}}?></tbody></table><?php}

This function receive an array, within which each element should have two field: 'num', and 'name'. So next up is to generate these data. One point: the javascript function 'jSelectArticle' will use its 3rd parameter 'mon' as the parameter's name.

Step 2: Add one function to generate (parameter) value list to file '/administrator/components/com_joomsport/admin.joomsport.php':

 

function BL_Vintest_Menu($option){$monChar = "月";$monNum = array(9, 10, 11, 12, 1, 2, 3, 4, 5, 6, 7);$length = count($monNum);$row = array();for ($i=0; $i<$length; $i++){$month = new stdClass;$month->num = $monNum[$i];$month->name = $monNum[$i] . $monChar;$row[] = $month;}joomsport_html::bl_VintestMenu($row, $option);}

This function generate an array (called '$row') of object '$month', which is 'stdClass' type, this is for simulating the data queried from database. And stdClass is a trick to get C style struct in PHP, or call it associative array. And array '$row' will be passed to 'joomsport_html::bl_VintestMenu'.

Step 3: Add a task for mapping 'BL_Vintest_Menu', the task is called 'vintest_menu':

switch (JRequest::getCmd('task')){...// test by Vincentcase 'vintest_menu': BL_Vintest_Menu($option); break;...}

At this point, we can take a test, this list will be popped up by clicking parameter element's button:

Step 4: create file '/administrator/components/com_joomsport/elements/vintest.php', since the file name is 'vintest', the class it holds should be 'JElementVintest'. 

<?phpdefined('_JEXEC') or die( 'Restricted access' );class JElementVintest extends JElement{var $_name = 'vin-test';function fetchElement($name, $value, &$node, $control_name){global $mainframe;$db=& JFactory::getDBO();$doc =& JFactory::getDocument();$template = $mainframe->getTemplate();$fieldName= $control_name.'['.$name.']';$article->title = '';$monChar = "月";if($name == 'mon'){if ($value){$article->title = $value . $monChar;}else{$article->title = JText::_('Select Month');}$task = 'vintest_menu';}$js = "function jSelectArticle(id, title, object) " ."{document.getElementById(object + '_id').value = id;document.getElementById(object + '_name').value = title;document.getElementById('sbox-window').close();}";$doc->addScriptDeclaration($js);$link = 'index.php?option=com_joomsport&task='.$task.'&tmpl=component&object='.$name;JHTML::_('behavior.modal', 'a.modal');$html = "\n".'<div style="float: left;"><input style="background: #ffffff;" type="text" id="'.$name.'_name" value="'.htmlspecialchars($article->title, ENT_QUOTES, 'UTF-8').'" disabled="disabled" /></div>';$html .= '<div class="button2-left"><div class="blank"><a class="modal" title="'.$article->title.'"  href="'.$link.'" rel="{handler: \'iframe\', size: {x: 650, y: 375}}">'.JText::_('Select').'</a></div></div>'."\n";$html .= "\n".'<input type="hidden" id="'.$name.'_id" name="'.$fieldName.'" value="'.(int)$value.'" />';return $html;}}

There is some points:

the '$task' is 'vintest_menu', match the task we just added;

the '$name' is expected to be 'mon', which is our parameter name;

Step 5: Create a view that utilizes this parameter, I will reuse my previous created view, it is called 'test'.

To make use of the 'mon' parameter, we need to modify '/components/com_joomsport/views/test/tmpl/default.xml':

<?xml version="1.0" encoding="utf-8"?><metadata><layout title="Test Layout"><message><![CDATA[Test Layout]]></message></layout><state><name>Test Layout</name><description>Test Layout</description><url addpath="/administrator/components/com_joomsport/elements"><param name="mon" type="vintest" default="0" label="Select Vintest" description="VinTest" /></url><params></params></state></metadata>

Then, we can take a loot at the parameter in action:

Step 6: receive the parameter 'mon' in the view 'test'

<?phpdefined( '_JEXEC' ) or die( 'Restricted access' );jimport( 'joomla.application.component.view');class bleagueViewtest extends JView{function display($tpl = null){$mon = JRequest::getVar( 'mon', 0, '', 'int' );$s = "This is a test string";$this->assignRef('testStr',$s);$this->assignRef('mon', $mon);parent::display($tpl);}}

Step 7: show the data in template.

<?php // no direct accessdefined('_JEXEC') or die('Restricted access'); ?>  <table border="1px">    <tr>      <th>header0</th><th>header1</th><th>header2</th>    </tr>    <tr>      <td><?php echo $this->testStr ?></td><td></td><td></td>    </tr>    <tr>      <td></td><td></td><td></td>    </tr>    <tr>      <td></td><td><?php echo $this->mon ?></td><td></td>    </tr>  </table>

REFS:

http://www.webmaster-source.com/2009/08/20/php-stdclass-storing-data-object-instead-array/