Adapt Learning Community: using custom component

I'm pretty new to adapt and the languages it uses.

I'm trying to create a custom component by following the plugin development instructions on the GIT wiki I have put the folder for my component (adapt-mediasync) in src/components and have put it on the github referenced in my bower.json but i cant get the component to display.

My component is called adapt-mediasync and i have tried putting in a component with "_component":"mediasync" or "_component":"adapt-mediasync" both of these result in the page coming out blank.

Am i missing something?

it seems that to use other components you install them with adapt install 'plugin name' but this seems to only work for registered plugins. Is there a way to get it to work locally before I register it as I don't want to register an unfinished plugin.

should be "_component": "mediasync"

and perhaps package.json?

Show parent | Reply

You have to make sure in your component you have called Adapt.register('mediasync', ... )

And then you can reference it in the course JSON using the same name.

You don't strictly need to register the component on git to do this you just need it in your components directory.

Show parent | Reply

Thanks to everyone who responded, much appreciated.

I was missing the Adapt.register call. Should this be added to the developing plugins page on the wiki?

And am I right to assume you can make plugins that are not components and in those cases you don't need to call Adapt.register , but can just put a return at the end of the plugin as on the wiki?

Show parent | Reply

Adapt.register(...) is only applicable for components.

I think that there should be a guide to building UI components that covers topics as Handlebars, extending ComponentView/QuestionView and loading configuration.

Show parent | Reply

I would find such a guide very useful. I've been trying to develop components to meet requirements of our courses but have been finding it very difficult to tell what the required pattern to make a working component is. I'm reading up on AMD so hopefully that will clarify things for me too.

Show parent | Reply

I agree with Chris that there should be a guide on building UI components explaining topics on Handlebars, views, completion etc.

Show parent | Reply

Hey,

We realise this is something we're missing and are trying to back fill the documentation. At the moment it's best to pick an existing component/extension that is similar and work from that. It's something we know we are behind on. Every month or so we'll be releasing a video tutorial similar to the one on . These will cover such topics as developing components, extensions and menus.

Thanks,

Daryl

Show parent | Reply

Hey,

I also just found a document we shared a while back that outlines all the architecture in Adapt and why we use certain libraries. It needs updating quite a bit but it's on my job list for this week. I'm also writing up a document that explains how and what you should develop in Adapt. Hopefully this will cover most questions about developing with Adapt.

Please feel free to post questions up here if you want something answered/put in the documentation.

Thanks,

Daryl

Show parent | Reply

Hi Gavin,

You are right to say that adapt install 'plugin name' only works with registered plugins. However, as long as you've got the folder in your src/components folder as you say, that should be enough to test it locally. Make sure you run

$ Grunt build

So that you can see it in your course. (or even better, $ Grunt dev, which provides you with a source-mapped version for debugging).

Make sure that process works as you're expecting. You need to ensure that all the peripheral files all have the right naming convention and point to the right things, particularly bower.json.

If there are no errors thrown up at that stage, then you'll have to check if any errors are cropping up in the console in your browser (my preference is to use Chrome for all my debugging – I find the 'pause on uncaught exceptions' option pretty helpful for inspecting the state of things at the time it's breaking).

I hope that helps,

Kev

Show parent | Reply

@gavin -

Check if you have added the following code in your component -

In the start -

define(function(require) {
var ComponentView = require('coreViews/componentView');
var Adapt = require('coreJS/adapt');

var Mediasync= ComponentView.extend({

});

In the end

Adapt.register('mediasync', Mediasync);

return Mediasync;

Then make an entry in the component.json as follows -

"_component":"mediasync"

and then "$grunt build"

Show parent | Reply