|
Want your component's interface to blend effortlessly with the rest of Joomla? The core developers have made it quite easy. With a few short lines of code, your component can utilize editors and the built-in calendar. When you do call these elements, they match the preferences already set by the administrator, which reduces the learning curve for users.
To use these features in Daily Message, we need edit only one function in the admin.dailymessage.html.php file:
function edit( $option, &$row ) {
mosCommonHTML::loadCalendar();
This line loads essential Javascript code used by the pop-up calendar. We reference the calendar later at the place we actually want it to appear. (The original calendar code can be found at http://www.dynarch.com/projects/calendar/)
?> <script language="javascript" type="text/javascript">
function submitbutton(pressbutton) { <?php getEditorContents( 'editor', 'message' ); ?> submitform( pressbutton ); } </script>
Next, we begin to deal with the editor. This piece of Javascript intercepts Mambo's submitbutton() function when the form is submitted. The getEditorContents() function retrieves the contents of the editor specified in the first parameter (in this case 'editor') and copies it into the hidden form variable in the second ('message'). This code is in place for certain editors that do not continually update the hidden variable during editing (TinyMCE, for example).
<form action="index2.php" method="post" name="adminForm" id="adminForm" class="adminForm"> <table border="0" cellpadding="3" cellspacing="0"> <tr>
<td>Message: </td> <td> <? editorArea( 'editor', $row->message , 'message', '100%;', '150', '3', '30' ) ;
This function is placed where we want to have the editor drawn. The first parameter gives the editor itself a name. If you are planning on using multiple HTML editors within one page, you will need to give each a unique name. The editor is initially filled with the contents of the second parameter. Next, we provide the name of a hidden variable to hold the final contents of the editor upon submission. The fourth, fifth, sixth, and seventh parameters define the width, height, number of rows, and number of columns to draw, respectively. If a percent value is chosen for width or height, the value must end with a semicolon. Otherwise, this value will be interpreted as a length in pixels.
If the administrator has chosen not to use an HTML editor, the editorArea() function will draw a <textarea> element named with the value of the third parameter.
?></td>
</tr> <tr>
<td>Date: </td> <td><input size="30" name="date" id="date" value="<? echo $row->date; ?>"><input name="reset" type="reset" class="button" onClick="return showCalendar('date', 'y-mm-dd');" value="..."> The calendar is loaded here. We start with a standard form field, giving it the name we want and setting the id property as well for Javascript interaction. Next, we draw a reset button, which is used to launch the calendar. We set the onClick property of the button to call the showCalendar() Javascript function (we implicitly loaded this with the mosCommonHTML::loadCalendar(); function call earlier). The first parameter tells the Javascript which form element to modify (defined with the 'id' property). Do remember that 'name' and 'id' serve different functions, even though we gave them the same value here. Always set 'name' to the value you want to process as a form variable and 'id' for Javascript references.
The second parameter is used to dictate the date format. MySQL stores dates in year-month-day format, so we have formatted likewise to make saving easier later. If you want it to display differently, make sure that you code something to change it to the database's format when saving from the form.
Finally, we set the value parameter of the button to '...'. This could be set to 'Lazy People Click Here' or 'Gimmie a Calendar', but '...' is used throughout the core Mambo components, so we set it this way for consistency. And consistency is often a good thing.
</td>
</tr> <tr>
<td>Published: </td> <td><? echo mosHTML::yesnoSelectList( "published", "", $row->published ); ?></td> </tr> </table>
<input type="hidden" name="id" value="<?php echo $row->id; ?>" /> <input type="hidden" name="option" value="<?php echo $option; ?>" /> <input type="hidden" name="task" value="" /> </form> <? } You saw all of this code in the original Daily Message tutorial. (Right?)
As usual, here is a downloadable component based on the tutorial. You can safely install it alongside the original Daily Message component with no conflicts, should you care to do comparisons. |