Desarrollando un componente MVC : Añadiendo verificaciones
[extoc]
Verificando el formulario (parte cliente)
La verificación del formulario (parte cliente) se hace mediante javascript mientras el usuario rellena los campos del formulario. Utiliza las clases de HTML required y validate-[xxx] (siend [xxx] una regla de joomla o a medida; ej. validate-numeric)
Forms can be verified on the client side using javascript code.
In the admin/views/helloworld/tmpl/edit.php file, put these lines
admin/views/helloworld/tmpl/edit.php
You may have noted that the html form contained in the admin/views/helloworld/tmpl/edit.php file now has the form-validate css class. And that we added a JHTML::_(‘behavior.formvalidation’); call to tell Joomla to use its javascript form validation.
Modify the admin/models/forms/helloworld.xml file to indicate that the greeting field has to be verified:
Note for the moment that the css class is now «inputbox validate-greeting» and that the attribute required is set to true. It means that this field is required and has to be verified by a handler of the form validator framework of Joomla
With your favorite file manager and editor put a file admin/models/forms/helloworld.js containing
admin/models/forms/helloworld.js
window.addEvent('domready', function() {
document.formvalidator.setHandler('greeting',
function (value) {
regex=/^[^0-9]+$/;
return regex.test(value);
});
});
It adds a handler to the form validator of Joomla for fields having the «validate-greeting» css class. Each time the greeting field is modified, the handler will be executed to verify its validity (no digits).
The final step is to verify the form when the save button is clicked.
With your favorite file manager and editor put a file admin/views/helloworld/submitbutton.js containing
admin/views/helloworld/submitbutton.js
Joomla.submitbutton = function(task)
{
if (task == '')
{
return false;
}
else
{
var isValid=true;
var action = task.split('.');
if (action[1] != 'cancel' && action[1] != 'close')
{
var forms = $$('form.form-validate');
for (var i=0;i
This function will verify that all forms which have the "form-validate" css class are valid. Note that it will display an alert message translated by the Joomla framework.
The HelloWorldViewHelloWorld view class has to be modified to use these javascript files:
admin/views/helloworld/view.html.php
get('Form');
$item = $this->get('Item');
$script = $this->get('Script');
// Check for errors.
if (count($errors = $this->get('Errors')))
{
JError::raiseError(500, implode('
', $errors));
return false;
}
// Assign the Data
$this->form = $form;
$this->item = $item;
$this->script = $script;
// Set the toolbar
$this->addToolBar();
// Display the template
parent::display($tpl);
// Set the document
$this->setDocument();
}
/**
* Setting the toolbar
*/
protected function addToolBar()
{
$input = JFactory::getApplication()->input;
$input->set('hidemainmenu', true);
$isNew = ($this->item->id == 0);
JToolBarHelper::title($isNew ? JText::_('COM_HELLOWORLD_MANAGER_HELLOWORLD_NEW')
: JText::_('COM_HELLOWORLD_MANAGER_HELLOWORLD_EDIT'), 'helloworld');
JToolBarHelper::save('helloworld.save');
JToolBarHelper::cancel('helloworld.cancel', $isNew ? 'JTOOLBAR_CANCEL' : 'JTOOLBAR_CLOSE');
}
/**
* Method to set up the document properties
*
* @return void
*/
protected function setDocument()
{
$isNew = ($this->item->id < 1);
$document = JFactory::getDocument();
$document->setTitle($isNew ? JText::_('COM_HELLOWORLD_HELLOWORLD_CREATING')
: JText::_('COM_HELLOWORLD_HELLOWORLD_EDITING'));
$document->addScript(JURI::root() . $this->script);
$document->addScript(JURI::root() . "/administrator/components/com_helloworld"
. "/views/helloworld/submitbutton.js");
JText::script('COM_HELLOWORLD_HELLOWORLD_ERROR_UNACCEPTABLE');
}
}
This view now
- verifies if the model has no error;
- adds two javascript files;
- injects javascript translation using the Joomla JText::script function.
The final step is to implement a getScript function in the HelloWorldModelHelloWorld model:
admin/models/helloworld.php
loadForm('com_helloworld.helloworld', 'helloworld',
array('control' => 'jform', 'load_data' => $loadData));
if (empty($form))
{
return false;
}
return $form;
}
/**
* Method to get the script that have to be included on the form
*
* @return string Script files
*/
public function getScript()
{
return 'administrator/components/com_helloworld/models/forms/helloworld.js';
}
/**
* Method to get the data that should be injected in the form.
*
* @return mixed The data for the form.
* @since 2.5
*/
protected function loadFormData()
{
// Check the session for previously entered form data.
$data = JFactory::getApplication()->getUserState('com_helloworld.edit.helloworld.data', array());
if (empty($data))
{
$data = $this->getItem();
}
return $data;
}
}
Verifying the form (server side)
Verifying the form on the server side is done by inheritance of JControllerForm class. We have specified in the admin/models/forms/helloworld.xml file that the validate server function will use a greeting.php file.
With your favorite file manager and editor, put a admin/models/rules/greeting.php file containing:
admin/models/rules/greeting.php
Note there is no function here - this is inherited from JFormRule (located in: libraries/joomla/form /rule.php). All that is needed is the regex string to test against.
Packaging the component
Content of your code directory
- helloworld.xml
- site/index.html
- site/helloworld.php
- site/controller.php
- site/views/index.html
- site/views/helloworld/index.html
- site/views/helloworld/view.html.php
- site/views/helloworld/tmpl/index.html
- site/views/helloworld/tmpl/default.xml
- site/views/helloworld/tmpl/default.php
- site/models/index.html
- site/models/helloworld.php
- site/language/index.html
- site/language/en-GB/index.html
- site/language/en-GB/en-GB.com_helloworld.ini
- admin/index.html
- admin/helloworld.php
- admin/controller.php
- admin/sql/index.html
- admin/sql/install.mysql.utf8.sql
- admin/sql/uninstall.mysql.utf8.sql
- admin/sql/updates/index.html
- admin/sql/updates/mysql/index.html
- admin/sql/updates/mysql/0.0.1.sql
- admin/sql/updates/mysql/0.0.6.sql
- admin/models/index.html
- admin/models/fields/index.html
- admin/models/fields/helloworld.php
- admin/models/forms/index.html
- admin/models/forms/helloworld.xml
- admin/models/forms/helloworld.js
- admin/models/rules/index.html
- admin/models/rules/greeting.php
- admin/models/helloworld.php
- admin/models/helloworlds.php
- admin/views/index.html
- admin/views/helloworlds/index.html
- admin/views/helloworlds/view.html.php
- admin/views/helloworlds/tmpl/index.html
- admin/views/helloworlds/tmpl/default.php
- admin/views/helloworlds/tmpl/default_head.php
- admin/views/helloworlds/tmpl/default_body.php
- admin/views/helloworlds/tmpl/default_foot.php
- admin/views/helloworld/index.html
- admin/views/helloworld/view.html.php
- admin/views/helloworld/submitbutton.js
- admin/views/helloworld/tmpl/index.html
- admin/views/helloworld/tmpl/edit.php
- admin/tables/index.html
- admin/tables/helloworld.php
- admin/language/en-GB/en-GB.com_helloworld.ini
- admin/language/en-GB/en-GB.com_helloworld.sys.ini
- admin/controllers/index.html
- admin/controllers/helloworld.php
- admin/controllers/helloworlds.php
- language/en-GB/en-GB.ini
- media/index.html
- media/images/index.html
- media/images/tux-16x16.png
- media/images/tux-48x48.png
Create a compressed file of this directory or directly download the archive and install it using the extension manager of Joomla. You can add a menu item of this component using the menu manager in the backend.
helloworld.xml
COM_HELLOWORLD
November 2009
John Doe
john.doe@example.org
http://www.example.org
Copyright Info
License Info
0.0.11
COM_HELLOWORLD_DESCRIPTION
sql/install.mysql.utf8.sql
sql/uninstall.mysql.utf8.sql
sql/updates/mysql
index.html
helloworld.php
controller.php
views
models
language
index.html
images
index.html
helloworld.php
controller.php
sql
tables
models
views
controllers
language/en-GB/en-GB.com_helloworld.ini
language/en-GB/en-GB.com_helloworld.sys.ini