掲示板

RE: How to Use Liferay Javascript Methods?

thumbnail
11年前 に Prakash Khanchandani によって更新されました。

RE: How to Use Liferay Javascript Methods?

Expert 投稿: 329 参加年月日: 11/02/10 最新の投稿
There are many ways to do this.

For toggling between show and hide you can check this example on the alloyUI site, here is the code:

// Toggle button hides and displays boxes
    Y.one('#toggle').on(
      'click',
      function() {
        var boxes = Y.all('.mini');
        boxes.toggle();
      }
    );


Also there are methods show() and hide() in Alloy UI Node. If you have anytime used jQuery then this page would help you a lot & you can find the show() & hide() equivalent of jQuery here.

Liferay.Util is a custom module created on top of Alloy UI, you can look at the javascript file: portal-web/docroot/html/js/liferay/util.js for the methods you can call on Liferay.Util.

Here is the Liferay Alloy UI page.
The Alloy UI API documentation.

Hope this helps.
11年前 に David Ilechukwu によって更新されました。

RE: How to Use Liferay Javascript Methods?

Regular Member 投稿: 154 参加年月日: 10/06/07 最新の投稿
Prakash Khanchandani:
There are many ways to do this.

For toggling between show and hide you can check this example on the alloyUI site, here is the code:

// Toggle button hides and displays boxes
    Y.one('#toggle').on(
      'click',
      function() {
        var boxes = Y.all('.mini');
        boxes.toggle();
      }
    );


Also there are methods show() and hide() in Alloy UI Node. If you have anytime used jQuery then this page would help you a lot & you can find the show() & hide() equivalent of jQuery here.

Liferay.Util is a custom module created on top of Alloy UI, you can look at the javascript file: portal-web/docroot/html/js/liferay/util.js for the methods you can call on Liferay.Util.

Here is the Liferay Alloy UI page.
The Alloy UI API documentation.

Hope this helps.


Thank you very much for the quick reply, Prakash.
But unfortunately, this post fails completely so solve my problem.
The example code you posted wouldn't work if pasted inside a portlet, or would it?
What I need is a concrete code snippet for showing/hiding a div, particularly using Liferay javascript modules (I am building a Liferay portlet and wound want to use Liferay's jaavscript methods, instead of using Alloy UI directly).
I had read all the links you posted above - believe me there is NO EXISTING INFORMATION directly related on how to achieve my task.

Please is it possible to post a direct answer to this question, showing how I can achieve inside a Liferay portletusing Liferay.Util or any other Liferay javascript method?
I have looked at the methods inside liferay-util.js, I can't see any method for doing this. Sorry for sounding a little bit stern - but I've read hundreds of answers, with NONE giving a direct answer to this problem, just giving lots of theoretical explanations on Alloy UI and references to links that provide generic information.

Hope you understand my plight.
Thanks
thumbnail
11年前 に Prakash Khanchandani によって更新されました。

RE: How to Use Liferay Javascript Methods?

Expert 投稿: 329 参加年月日: 11/02/10 最新の投稿
David Ilechukwu:
I am building a Liferay portlet and wound want to use Liferay's jaavscript methods, instead of using Alloy UI directly


Can you state why you don't want to use Alloy UI directly? What is the harm?

Liferay's javascript (read custom modules) is completely dependent on Alloy-UI, since it uses alloy-ui for building its custom module, so IMHO it is very much safe to directly use Alloy-UI. You will be surprised to know that Liferay also uses Alloy-UI directly in its portlet's javascript emoticon

Liferay has built upon Alloy-UI for complex client-side operations, but this is just a regular function you need so I don't think liferay would have a wrapper for this kind of stuff.

David Ilechukwu:

I have looked at the methods inside liferay-util.js, I can't see any method for doing this. Sorry for sounding a little bit stern - but I've read hundreds of answers, with NONE giving a direct answer to this problem, just giving lots of theoretical explanations on Alloy UI and references to links that are neither here nor there.


Sorry for being a little direct, but what you want is known as "Spoon Feeding" emoticon [this should stop by the time you can tie your shoe-laces emoticon ]
If you would have just searched the string ".show()" or ".hide()"in liferay's source code javascript or JSP files, and also on rosetta stone page which I gave, you would have easily figured out the answer yourself.

Anyways, still I won't disappoint you (& others like you) by giving a quick & simple javascript which you can write in your JSP & enjoy!:
I hope you know what is a "Node" in Alloy-UI, if you don't then read some basic tutorial [links are provided] or else read-on.

<!--
this tag requires you to declare the aui taglib
<%@ taglib uri="http://alloy.liferay.com/tld/aui" prefix="aui" %>
-->

<aui:script>
// either you can write a function using Liferay.provide
Liferay.provide(
        window,
        '<portlet:namespace />showDiv',
        function(divID) {
            var A = AUI();

            var divElement = A.one('#' + divID);
            divElement.show();
        },
        ['aui-base']
    );

// or simply as a normal javascript function
function <portlet:namespace />hideDiv(divID) {

    AUI().use(
        'aui-node',
        function(A) {
            var divElement = A.one('#' + divID);
            divElement.hide();
        }
    );
}
/* both the above methods are functionally similar and calling them from your code is same. */

// now a single method to show-hide :-)
// if it is hidden it will be shown or vice-versa
Liferay.provide(
        window,
        '<portlet:namespace />toggleDiv',
        function(divID) {
            var A = AUI();

            var divElement = A.one('#' + divID);
            divElement.toggle();
        },
        ['aui-base']
    );
</aui:script>

Calling the javascript methods to show or hide the div:

<div id="hidingDivID">
    This will show or hide depending upon the method used
</div>

<portlet:namespace />hideDiv('hidingDivID');
<portlet:namespace />showDiv('hidingDivID');

// you can try calling the toggle function as a home-work :-)


David Ilechukwu:
Hope you understand my plight.

Hope you understand the plight of community members who try to help by giving the most valuable commodity available - TIME emoticon
11年前 に David Ilechukwu によって更新されました。

RE: How to Use Liferay Javascript Methods?

Regular Member 投稿: 154 参加年月日: 10/06/07 最新の投稿
Prakash, thanks for the code snippets. I had the code below before making this post (and it was working) :

<aui:script>
    function <portlet:namespace />showKeyGen(){
        var A = AUI();
        A.one('#<portlet:namespace />keyGenPane').show();
    }
    function <portlet:namespace />hideKeyGen(){
        var A = AUI();
        alert("Im here");
        A.one('#<portlet:namespace />keyGenPane').hide();
    }
</aui:script>
.

Just wanted to see how to do this using the Liferay javascript functions (and my reasons are valid) - which you have now provided.

This link Adding Liferay.provide for synchronized function creation might be helpful to you in understanding why someone might want to use the Liferay javascript functions (for both sync and async ops) rather than AUI().use directly - namely for certain performance and consistency reasons (amongst others).

Prakash Khanchandani:

Can you state why you don't want to use Alloy UI directly? What is the harm?

Liferay's javascript (read custom modules) is completely dependent on Alloy-UI, since it uses alloy-ui for building its custom module, so IMHO it is very much safe to directly use Alloy-UI. You will be surprised to know that Liferay also uses Alloy-UI directly in its portlet's javascript emoticon

Liferay has built upon Alloy-UI for complex client-side operations, but this is just a regular function you need so I don't think liferay would have a wrapper for this kind of stuff.


Using Liferay Portal doesnt necessarily mean subscribing to their architectural design principles as "best practices". Take for instance - the continued use of Struts2 - which may not necessarily be the best way to handle the frontend programming. Do you, as a Liferay programmer - do you use Struts2 in your portlets - just because Liferay uses them in their own portlets?

And if you go a little bit further, you might discover that it's actually bad programming to use AUI().use DIRECTLY in certain scenarios. Take a look at this link Why Liferay.provide?. But I guess - it all depends on your architectural design standards and coding quality. For some of us - logic is not all that's important. How well your code performs in production might also matter. So you see - things that you may think unimportant - might actually turn out to be industry standards and "all-important". But again - like I said, depends on what coding standards you choose to use.

Anyways, I still thank you for your valuable input and time. Your javascript snippets (and explanations) were quite useful.
Regards, David
thumbnail
11年前 に Prakash Khanchandani によって更新されました。

RE: How to Use Liferay Javascript Methods?

Expert 投稿: 329 参加年月日: 11/02/10 最新の投稿
David Ilechukwu:

This link Adding Liferay.provide for synchronized function creation might be helpful to you in understanding why someone might want to use the Liferay javascript functions (for both sync and async ops) rather than AUI().use directly - namely for certain performance and consistency reasons (amongst others).


My examples which I gave all take care of these issues though I didn't mention that it did emoticon
Also the issue link you gave does not discourage use of directly using Alloy UI as you suggest it does (or may be I am missing something).

David Ilechukwu:
And if you go a little bit further, you might discover that it's actually bad programming to use AUI().use DIRECTLY in certain scenarios. Take a look at this link Why Liferay.provide?.


I am sorry but I still didn't understand how is it bad-programming by the link you provided, can you explain a bit more?
I didn't understand since below is what is said in the issue you gave LPS-9371:

Description snippet from the LPS-9371:

A few important things to note:

1. Liferay.provide is still an asynchronous function, so data cannot be returned from the functions it creates. It guarantees sequential ordering, not synchronicity.
2. The way in which functions are used are the exact same with both methods listed above.
In either case above you would still call the function like so:
incrementNumber();
The only thing that differs between the methods are how functions are created.


David Ilechukwu:
Do you, as a Liferay programmer - do you use Struts2 in your portlets - just because Liferay uses them in their own portlets?


Well, liferay uses Struts-1 and not Struts-2 for their portlets emoticon. Struts-2 is one of the recommended technology.
By the way in the pre-Liferay v6.0 days people used struts-1 for their portlets and there was also a project struts-bridge portlet to use Struts-1 in our custom portlets. Now it is not possible to use Struts-1 starting from Liferay v6.1 GA1, so its plain clear that let liferay use but we should not emoticon

Also since Alloy UI is a full-fleged javascript framework and there are ways to use it incorrectly & then there are ways to use it incorrectly, that IMHO does not in anyway mean that it is bad-practice to use Alloy UI directly in our code.

Hope this meets you in a healthy programming atmosphere.

Thanks for the wonderful points you brought forward,
Regards,
Prakash