掲示板

BEst way to create and add a Custom AUI Module

thumbnail
9年前 に Corné Aussems によって更新されました。

BEst way to create and add a Custom AUI Module

Liferay Legend 投稿: 1313 参加年月日: 06/10/03 最新の投稿
Hi AUI warriors,

I would like to know what would be the best way to add a Custom module.

I tried to find some answers on Liferay.com to no avail:
https://www.liferay.com/documentation/liferay-portal/6.2/development/-/ai/working-with-the-alloyui-project-liferay-portal-6-2-dev-guide-en

AUI/YUI Module
I do not want to build a new version of AUI but just add a module of my own.
I found something on stackoverflow "How can I add a custom module to be loaded globally in AlloyUI?"
and some additional resources but not a full solution a js noob understands;
http://yuilibrary.com/yui/docs/api/classes/YUI.html#method_applyConfig
https://yuilibrary.com/yui/docs/yui/create.html

Liferay Module
Or is it easier/better to add a Liferay Module, I see how these modules are added here /html/js/liferay/modules.js .
but how to add my own in a Plugin?

How would i package and deliver such a module best (In a theme/hook/portlet), when the module is used in multiple plugins or a only i a single Portlet?

If any of you could put me on the right path, share some good/bad experiences that would be great.

Best regards,
Corné
thumbnail
9年前 に Gerhard Horatschek によって更新されました。

RE: BEst way to create and add a Custom AUI Module

Junior Member 投稿: 86 参加年月日: 09/03/20 最新の投稿
Hi all,

I am also interested regarding this issue, especially the integration of custom alloy js files in hooks!

Are there any experiences/best practices?
Thank you!
Best regards
Gerhard
thumbnail
9年前 に Iliyan Peychev によって更新されました。

RE: BEst way to create and add a Custom AUI Module

New Member 投稿: 19 参加年月日: 10/11/17 最新の投稿
1. Everything you have to do in order to load a YUI/AlloyUI module is to wrap your code in something like:

AUI.add('mymodule', function (A) {
   // the code of your module goes here
},'', {
    requires: ['node-base']
});

In "requires" you have to specify the modules, which your module require. I specified "node-base" above, which should be enough for most DOM operations.

2. As soon as you have your module, you will have to load it to the page. And here there are a few methods to do it. The simplest is just to add it via script element, like:
<script src="mymodule.js"></script>
and that is it.

3. Then you just require this module from another piece of code, like:

AUI().use('mymodule', function(A) {
});

However, there are many more better ways to register one or more modules. The answer, showed in StackOverflow shows how to create more complex configuration. Here you specify more than one module.
Even more complex configuration could be to create your own group of modules, and reuse our combo loader, or even to use your own combo loader. AlloyUI and YUI are very powerful and flexible in this sense.

However, it might make more sense if you just create your modules and join them in a single file during the build process then add this file to the page and reuse the modules where needed. In this case you will have only one request to the server. There are many details and other drawbacks here, but let's ignore them for now. It depends on how much time you have and how many modules.

In general, the best practice is:
1. Create good architecture and split your code in modules.
2. Describe their configuration and provide this info to Alloy.
3. Load these modules on demand.

The combo loader in master is now able to load JS files outside html/js, but this functionality hasn't been backported to 6.2.x AFAIK. But you may easily create your own or just to pack your modules in single JS file.

Hope that helps.
thumbnail
9年前 に Yogesh Agrawal によって更新されました。

RE: BEst way to create and add a Custom AUI Module

Junior Member 投稿: 34 参加年月日: 10/05/17 最新の投稿
Other way to load the custom AUI module, by providing module configuration when using AUI like

AUI({
	modules: {
		'mymodule': {			
			fullpath:'/my-theme/js/mymodule.js', //can be from theme or portlet
			requires: [ 'aui-base']
		}
	}
}).use('mymodule',function(A){
	//mymodule is available here
});


Using this, the mymodule.js will load only once on page.