Creating mobile course formats: Difference between revisions
Mark Johnson (talk | contribs) (Initial example of a course format plugin.) |
Mark Johnson (talk | contribs) mNo edit summary |
||
Line 50: | Line 50: | ||
]; | ]; | ||
} | } | ||
} | |||
</code> | </code> | ||
Then your templates/mobile_course.mustache file will contain the angular template to display your page | Then your templates/mobile_course.mustache file will contain the angular template to display your page |
Revision as of 10:55, 16 April 2019
Course format plugins can be supported in the app using the CoureCourseFormatDelegate.
To begin, add a handler for this delegate to your course format's db/mobile.php file:
$addons = [
'format_myformat' => [
'handlers' => [ // Different places where the plugin will display content.
'myformat' => [ // Handler unique name (alphanumeric).
'delegate' => 'CoreCourseFormatDelegate', // Delegate (where to display the link to the plugin)
'method' => 'mobile_course_view', // Main function in \format_myformat\output\mobile.
'styles' => [
'url' => $CFG->wwwroot . '/course/format/myformat/mobile.css',
'version' => 2019041000
],
'displaysectionselector' => true, // Set to false to disable the default section selector.
'displayenabledownload' => true, // Set to false to hide the "Enable download" option in the course context menu.
'init' => 'myformat_init'
]
]
];
As with other plugins, you then use a function in your plugin's classes/output/mobile.php to return a template:
class mobile {
/**
* Main course page.
*
* @param array $args Standard mobile web service arguments
* @return array
*/
public static function mobile_course_view($args) {
global $OUTPUT, $CFG;
$course = get_course($args['courseid']);
require_login($course);
$html = $OUTPUT->render_from_template('format_oustudyplan/mobile_course');
return [
'templates' => [
[
'id' => 'main',
'html' => $html
]
],
'otherdata' => [
...
]
];
}
}
Then your templates/mobile_course.mustache file will contain the angular template to display your page
{{=<% %>=}}
<core-dynamic-component [component]="allSectionsComponent" [data]="data" class="format-myformat">
<ng-container *ngFor="let section of sections">
<ion-item-divider color="light">
<core-format-text [text]="section.name"></core-format-text>
</ion-item-divider>
<ion-item text-wrap *ngIf="section.summary">
<core-format-text [text]="section.summary"></core-format-text>
</ion-item>
<ng-container *ngFor="let module of section.modules">
<ng-container *ngIf="module.visibleoncoursepage !== 0">
<core-course-module text-wrap [module]="module" [courseId]="course.id" [downloadEnabled]="downloadEnabled" (completionChanged)="onCompletionChange($event)">
</core-course-module>
</ng-container>
</ng-container>
</core-dynamic-component>
You don't have to use a mustache template, you can just use a static angular template.
This will get you to a stage where you have something similar to the core format plugin - a list of sections with headers, each containing its list of course modules. From here, you can make customisations to support your course format's features.