(Select template) |
|||
(4 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
== | ==Edit form template== | ||
{| class="nicetable" | {| class="nicetable" | ||
|+ Form template | |+ Form template | ||
Line 57: | Line 31: | ||
</code> | </code> | ||
|} | |} | ||
==Form data compilation for displaying== | |||
{| class="nicetable" | |||
|+ Form data compilation for display | |||
|- | |||
!width="50%"|Type A | |||
!width="50%"|Type B | |||
|- | |||
| <code javascript> | |||
var frm = new form(); | |||
frm.addFieldset('general', 'General'); | |||
textfield = new text(); | |||
textfield.set_name('title'); | |||
textfield.set_id('mod_lesson_title_' + pageid); | |||
textfield.set_label('Page Title'); | |||
textfield.set_required(); | |||
textfield.set_text(lesson.pages[pageid].title); | |||
frm.addElement(textfield); | |||
selectfield = new selectElement(); | |||
selectfield.set_name('Jump_1'); | |||
selectfield.set_label('Jumps'); | |||
selectfield.set_id("mod_lesson_jump_1_" + pageid); | |||
selectfield.set_options(joptions); | |||
frm.addElement(selectfield); | |||
$.when(frm.printForm()).then(function(tempformstuff) { | |||
$('.mod_lesson_pages').append(tempformstuff); | |||
$('#mod_lesson_editor_save_btn').click(function() { | |||
// Could do client side validation here. | |||
if ($("#mod_lesson_title_" + pageid).val() == "") { | |||
var textelement = $("#fitem_mod_lesson_title_" + pageid); | |||
frm.handleError('title', textelement, 'text', 'Title should not be empty'); | |||
} else { | |||
lesson.pages[pageid].save_edit_form(frm); | |||
} | |||
}); | |||
$('#mod_lesson_editor_cancel_btn').click(function() { | |||
$('.mod_lesson_page_editor').remove(); | |||
}); | |||
}); | |||
</code> | |||
| <code javascript> | |||
var formdata = { | |||
lessonpagetype: lesson.pages[pageid].qtypestring, | |||
pageid: pageid, | |||
title: { | |||
id: "mod_lesson_title_" + pageid, | |||
label: "Page Title", | |||
name: "title", | |||
text: lesson.pages[pageid].title, | |||
required: 1 | |||
}, | |||
contents: lesson.pages[pageid].contents, | |||
select: { | |||
id: pageid, | |||
label: "Jumps", | |||
name: "Jump_1", | |||
options: formfactory.formatOptions(joptions), | |||
helpButton: "<button type=\"button\">Help is here</button>" | |||
} | |||
}; | |||
$.when(templates.render('mod_lesson/page_editor', formdata)).done(function(pageeditor) { | |||
$('.mod_lesson_pages').append(pageeditor); | |||
$('#mod_lesson_editor_save_btn').click(function() { | |||
// Do client side validation. | |||
var titleelement = $("#mod_lesson_title_" + pageid); | |||
if (titleelement.val() == "") { | |||
var errors = { | |||
errors: { | |||
name: "title", | |||
message: "The lesson page title should not be empty" | |||
} | |||
}; | |||
formfactory.handleErrors(errors, formdata); | |||
} else { | |||
lesson.pages[pageid].save_edit_form(formdata); | |||
} | |||
}); | |||
$('#mod_lesson_editor_cancel_btn').click(function() { | |||
$('.mod_lesson_page_editor').remove(); | |||
}); | |||
}); | |||
</code> | |||
|} | |||
==Saving a form== | |||
{| class="nicetable" | |||
|+ Form saving | |||
|- | |||
!width="50%"|Type A | |||
!width="50%"|Type B | |||
|- | |||
| <code javascript> | |||
save_edit_form: function(formobject) { | |||
// Perhaps this could all be included in a save method for the form. | |||
var formdata = formfactory.getFormData(); | |||
formdata["lessonid"] = lesson.id; | |||
formdata["pageid"] = this.id; | |||
delete formdata["Jump_1"]; | |||
var promises = ajax.call([{ | |||
methodname: 'mod_lesson_add_page', | |||
args: formdata | |||
}]); | |||
$.when.apply($.when, promises).then(function(response) { | |||
if (response.warnings.length != "0") { | |||
formobject.handleErrors(response.warnings); | |||
} | |||
}); | |||
</code> | |||
| <code javascript> | |||
save_edit_form: function(formobject) { | |||
// Perhaps this could all be included in a save method for the form. | |||
var formdata = formfactory.getFormData(); | |||
formdata["lessonid"] = lesson.id; | |||
formdata["pageid"] = this.id; | |||
delete formdata["Jump_1"]; | |||
var promises = ajax.call([{ | |||
methodname: 'mod_lesson_add_page', | |||
args: formdata | |||
}]); | |||
$.when.apply($.when, promises).then(function(response) { | |||
if (response.warnings.length != "0") { | |||
formfactory.handleErrors(response.warnings, formobject); | |||
} | |||
}); | |||
</code> | |||
|} | |||
==New form elements== | |||
{| class="nicetable" | |||
|+ New form elements | |||
|- | |||
!width="50%"|Type A | |||
!width="50%"|Type B | |||
|- | |||
| <code javascript> | |||
define(['jquery', 'core/form-element'], function($, formElement) { | |||
var Select = function() { | |||
formElement.call(this); | |||
this.type = 'select'; | |||
this.options = ''; | |||
this.template = "core/form-element-select"; | |||
}; | |||
/** | |||
* Format a normal array into an object for a select form element. | |||
* | |||
* @param {array} options An array of options. | |||
* @param {string} selected The selected option. Needs to match the array index. | |||
* @return {object} An options object that can be used with a select form element. | |||
*/ | |||
this.formatOptions = function(options, selected) { | |||
var returnoptions = []; | |||
var select = 0; | |||
if (selected !== 'undefined') { | |||
select = selected | |||
} | |||
for (index in options) { | |||
if (index == selected) { | |||
returnoptions.push({ | |||
value: index, | |||
text: options[index], | |||
selected: select | |||
}); | |||
} else { | |||
returnoptions.push({ | |||
value: index, | |||
text: options[index], | |||
}); | |||
} | |||
} | |||
return returnoptions; | |||
} | |||
Select.prototype.set_name = function(name) { | |||
formElement.prototype.set_name.call(this, name); | |||
}; | |||
Select.prototype.set_id = function(id) { | |||
formElement.prototype.set_id.call(this, id); | |||
}; | |||
Select.prototype.set_label = function(label) { | |||
formElement.prototype.set_label.call(this, label); | |||
}; | |||
Select.prototype.set_error = function(error) { | |||
formElement.prototype.set_error.call(this, error); | |||
}; | |||
Select.prototype.set_required = function() { | |||
formElement.prototype.set_required.call(this); | |||
}; | |||
Select.prototype.set_options = function(options, selected) { | |||
this.options = formatOptions(options, selected); | |||
}; | |||
Select.prototype.get_name = function() { | |||
return formElement.prototype.get_name.call(this); | |||
}; | |||
Select.prototype.show = function() { | |||
return formElement.prototype.show.call(this); | |||
}; | |||
return Select; | |||
}); | |||
</code> | |||
| | |||
|} | |||
==Template for a select element== | |||
Same for both. | |||
<code xml> | |||
<div id="fitem_{{id}}" class="fitem fitem_select {{#required}}required{{/required}} {{#advanced}}advanced{{/advanced}}" data-field-type="select"> | |||
<div class="fitemtitle"> | |||
<label {{#hiddenLabel}}class="accesshide"{{/hiddenLabel}} for="{{id}}"> | |||
{{label}} | |||
{{#required}}{{>core/form-required}}{{/required}} | |||
{{#advanced}}{{>core/form-advanced}}{{/advanced}} | |||
</label> | |||
{{{helpButton}}} | |||
</div> | |||
<div class="felement fselect {{#error}}error{{/error}}"> | |||
{{#error}} | |||
<span class="error" tabindex="0">{{{error}}}</span> | |||
<br/> | |||
{{/error}} | |||
<select name="{{name}}" id="{{id}}" {{#required}}required{{/required}} {{#size}}size="{{size}}"{{/size}}> | |||
{{#options}} | |||
<option value="{{value}}" {{#selected}}selected{{/selected}}>{{text}}</option> | |||
{{/options}} | |||
</select> | |||
</div> | |||
</div> | |||
</code> | |||
==Form library and helper functions== | |||
{| class="nicetable" | {| class="nicetable" | ||
Line 232: | Line 455: | ||
</code> | </code> | ||
|} | |} | ||
==Simple web service== | |||
<code php> | |||
class mod_lesson_external extends external_api { | |||
public static function add_page_parameters() { | |||
return new external_function_parameters( | |||
array( | |||
'lessonid' => new external_value(PARAM_INT, 'lesson module ID'), | |||
'pageid' => new external_value(PARAM_INT, 'lesson page ID'), | |||
'title' => new external_value(PARAM_TEXT, 'lesson page title', VALUE_OPTIONAL) | |||
) | |||
); | |||
} | |||
public static function add_page($lessonid, $pageid, $title) { | |||
$params = self::validate_parameters(self::add_page_parameters(), | |||
array($lessonid, $pageid, $title)); | |||
$errors = array(); | |||
if (empty($title)) { | |||
$errors["code"] = "formvalidationfailed"; | |||
$errors["message"] = "Validation Failed"; | |||
$errors["errors"] = array('code' => 'notitlefound', 'name' => 'title', 'message' => 'Title must not be empty'); | |||
return array('status' => false, 'warnings' => $errors); | |||
} | |||
return array('status' => true, 'warnings' => $errors); | |||
} | |||
public static function add_page_returns() { | |||
return new external_single_structure( | |||
array( | |||
'status' => new external_value(PARAM_BOOL, 'status: true if success'), | |||
'warnings' => new external_warnings() | |||
) | |||
); | |||
} | |||
} | |||
</code> |
Latest revision as of 02:40, 26 November 2015
Edit form template
Type A | Type B |
---|---|
|
Form data compilation for displaying
Type A | Type B |
---|---|
|
|
Saving a form
Type A | Type B |
---|---|
|
|
New form elements
Type A | Type B |
---|---|
|
Template for a select element
Same for both.
<label {{#hiddenLabel}}class="accesshide"Adrian Greeve/form comparison/hiddenLabel for="Template:id">
Template:label
{{#required}}{{>core/form-required}}Adrian Greeve/form comparison/required
{{#advanced}}{{>core/form-advanced}}Adrian Greeve/form comparison/advanced
</label>
{{{helpButton}}}
{{#error}}
{{{error}}}
Adrian Greeve/form comparison/error
<select name="Template:name" id="Template:id" {{#required}}requiredAdrian Greeve/form comparison/required {{#size}}size="Template:size"Adrian Greeve/form comparison/size>
{{#options}}
<option value="Template:value" {{#selected}}selectedAdrian Greeve/form comparison/selected>Template:text</option>
Adrian Greeve/form comparison/options
</select>
Form library and helper functions
Type A | Type B |
---|---|
|
|
Simple web service
class mod_lesson_external extends external_api {
public static function add_page_parameters() {
return new external_function_parameters(
array(
'lessonid' => new external_value(PARAM_INT, 'lesson module ID'),
'pageid' => new external_value(PARAM_INT, 'lesson page ID'),
'title' => new external_value(PARAM_TEXT, 'lesson page title', VALUE_OPTIONAL)
)
);
}
public static function add_page($lessonid, $pageid, $title) {
$params = self::validate_parameters(self::add_page_parameters(),
array($lessonid, $pageid, $title));
$errors = array();
if (empty($title)) {
$errors["code"] = "formvalidationfailed";
$errors["message"] = "Validation Failed";
$errors["errors"] = array('code' => 'notitlefound', 'name' => 'title', 'message' => 'Title must not be empty');
return array('status' => false, 'warnings' => $errors);
}
return array('status' => true, 'warnings' => $errors);
}
public static function add_page_returns() {
return new external_single_structure(
array(
'status' => new external_value(PARAM_BOOL, 'status: true if success'),
'warnings' => new external_warnings()
)
);
}
}