Primefaces Widget ResourceDependency is loaded multiple times

UI Components for JSF
Post Reply
mpiolot
Posts: 7
Joined: 13 Jun 2017, 09:05

11 Feb 2022, 10:16

I have implemented a PrimeFaces Widget to use ACE Editor in JSF. The Java class looks like this:

Code: Select all

/**
 * Primefaces widget: ACE Editor.
 */
@ResourceDependencies({//
  @ResourceDependency(library = "app", name = "ace/ace.js"),//
  @ResourceDependency(library = "app", name = "ace/ext-searchbox.js"),//
  @ResourceDependency(library = "app", name = "ace/worker-json.js"),//
  @ResourceDependency(library = "app", name = "ace/worker-xml.js"),//
  @ResourceDependency(library = "app", name = "ace/mode-text.js"),//
  @ResourceDependency(library = "app", name = "ace/mode-yaml.js"),//
  @ResourceDependency(library = "app", name = "ace/mode-json.js"),//
  @ResourceDependency(library = "app", name = "ace/mode-xml.js"),//
  @ResourceDependency(library = "app", name = "ace/mode-sql.js"),//
  @ResourceDependency(library = "app", name = "ace/ext-language_tools.js"),//
  @ResourceDependency(library = "primefaces", name = "jquery/jquery.js"),//
  @ResourceDependency(library = "primefaces", name = "core.js"),//
  @ResourceDependency(library = "primefaces", name = "components.js"),//
  @ResourceDependency(library = "app", name = "codecompletion/codecompletion.js"),//
  @ResourceDependency(library = "app", name = "primefaces/widget/aceeditor.js"),//
  @ResourceDependency(library = "app", name = "codecompletion/codecompletion.css")//
})
@FacesComponent(createTag = true, tagName = "aceEditor", namespace = "http://myapp.com/app", value = "com.myapp.aceeditor.AceEditor")
public class AceEditor extends UIInput implements Widget, ClientBehaviorHolder {
  private static final Logger log = Slf4jLoggerFactory.getLogger(AceEditor.class);
  [...]
}
The strange thing is that the resources are added to the <head> element each time the component is updated by Java code.

Code: Select all

  /**
   * Update a component with AJAX.
   * 
   * @param clientId Client side identifier of the component.
   */
  public static void update(String clientId) {
    if(PrimeFaces.current().isAjaxRequest() && clientId != null)
      PrimeFaces.current().ajax().update(clientId);
  }
Is there any way to avoid this behaviour? Because even if the browser loads the JavaScript and CSS files from cache this takes time and all JavaScript files must be prepared to be executed multiple times. Additionally the <head> element grows over the time.

I've seen the very same behaviour also for some PrimeFaces components (maybe not all PrimeFaces components use a resource dependency).

My current guess it that this behaviour has something to do with the Dynamic Resource Loading implementation of PrimeFaces.

I use PrimeFaces 10.0.7 within a JBoss 7.4.0 running Mojarra 2.3.14.SP04-redhat-00001.

Melloware
Posts: 3717
Joined: 22 Apr 2013, 15:48

17 Feb 2022, 03:50

Hmmm they should not be re-added each time. Something is wrong. I don't know what but definitely what you are seeing is not expected.
PrimeFaces Developer | PrimeFaces Extensions Developer
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 13.0.0 / PF Extensions 13.0.0
PrimeReact 9.6.1

mpiolot
Posts: 7
Joined: 13 Jun 2017, 09:05

21 Feb 2022, 13:23

I'm pretty sure that we do not do more than the code shows. I think this is what dynamic resource loading does. I will try to find the PrimeFaces component that had the same effect.

Melloware
Posts: 3717
Joined: 22 Apr 2013, 15:48

21 Feb 2022, 15:09

Yep let me know i would be interested to see it because we have been using Jboss since 2011 and I had not noticed this before but it could be an issue.
PrimeFaces Developer | PrimeFaces Extensions Developer
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 13.0.0 / PF Extensions 13.0.0
PrimeReact 9.6.1

mpiolot
Posts: 7
Joined: 13 Jun 2017, 09:05

05 May 2022, 15:40

After some clicking in the application I can see the following elements within the <head> element:

Code: Select all

<head id="j_idt2">
   <link type="text/css" rel="stylesheet" href="/rsa-demo/javax.faces.resource/primeicons/primeicons.css.xhtml?ln=primefaces&amp;v=10.0.7&amp;e=10.0.7">

   <script type="text/javascript" src="/rsa-demo/javax.faces.resource/jquery/jquery.js.xhtml?ln=primefaces&amp;v=10.0.7&amp;e=10.0.7"></script>
   <script type="text/javascript" src="/rsa-demo/javax.faces.resource/jquery/jquery-plugins.js.xhtml?ln=primefaces&amp;v=10.0.7&amp;e=10.0.7">
   </script><script type="text/javascript" src="/rsa-demo/javax.faces.resource/core.js.xhtml?ln=primefaces&amp;v=10.0.7&amp;e=10.0.7"></script>
   <link type="text/css" rel="stylesheet" href="/rsa-demo/javax.faces.resource/components.css.xhtml?ln=primefaces&amp;v=10.0.7&amp;e=10.0.7">
   <script type="text/javascript" src="/rsa-demo/javax.faces.resource/components.js.xhtml?ln=primefaces&amp;v=10.0.7&amp;e=10.0.7"></script>
   <script type="text/javascript" src="/rsa-demo/javax.faces.resource/primefaces-extensions.js.xhtml?ln=primefaces-extensions&amp;v=10.0.7&amp;e=10.0.7"></script>

   <script type="text/javascript" src="/rsa-demo/javax.faces.resource/touch/touchswipe.js.xhtml?ln=primefaces&amp;v=10.0.7&amp;e=10.0.7"></script>
   <script type="text/javascript" src="/rsa-demo/javax.faces.resource/watermark/watermark.js.xhtml?ln=primefaces&amp;v=10.0.7&amp;e=10.0.7"></script>
   <script type="text/javascript" src="/rsa-demo/javax.faces.resource/filedownload/filedownload.js.xhtml?ln=primefaces&amp;v=10.0.7&amp;e=10.0.7"></script>
   <link type="text/css" rel="stylesheet" href="/rsa-demo/javax.faces.resource/blockui/blockui.css.xhtml?ln=primefaces-extensions&amp;v=10.0.7&amp;e=10.0.7">
   <script type="text/javascript" src="/rsa-demo/javax.faces.resource/blockui/blockui.js.xhtml?ln=primefaces-extensions&amp;v=10.0.7&amp;e=10.0.7"></script>

   <script src="/rsa-demo/javax.faces.resource/validation/validation.js.xhtml?ln=primefaces&amp;v=10.0.7&amp;e=10.0.7"></script>
   <script src="/rsa-demo/javax.faces.resource/validation/validation.bv.js.xhtml?ln=primefaces&amp;v=10.0.7&amp;e=10.0.7"></script>

   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="format-detection" content="telephone=no">

   <link type="text/css" rel="stylesheet" href="/rsa-demo/javax.faces.resource/fileupload/fileupload.css.xhtml?ln=primefaces&amp;v=10.0.7&amp;e=10.0.7">
   <script type="text/javascript" src="/rsa-demo/javax.faces.resource/fileupload/fileupload.js.xhtml?ln=primefaces&amp;v=10.0.7&amp;e=10.0.7"></script>

   <link type="text/css" rel="stylesheet" href="/rsa-demo/javax.faces.resource/tooltip/tooltip.css.xhtml?ln=primefaces-extensions&amp;v=10.0.7&amp;e=10.0.7">
   <script type="text/javascript" src="/rsa-demo/javax.faces.resource/tooltip/tooltip.js.xhtml?ln=primefaces-extensions&amp;v=10.0.7&amp;e=10.0.7"></script>
   <script type="text/javascript" src="/rsa-demo/javax.faces.resource/ckeditor/ckeditor-widget.js.xhtml?ln=primefaces-extensions&amp;v=10.0.7&amp;e=10.0.7"></script>

   <script type="text/javascript" src="/rsa-demo/javax.faces.resource/inputmask/inputmask.js.xhtml?ln=primefaces&amp;v=10.0.7&amp;e=10.0.7"></script>

   <script type="text/javascript" src="/rsa-demo/javax.faces.resource/moment/moment.js.xhtml?ln=primefaces&amp;v=10.0.7&amp;e=10.0.7"></script>
   <script type="text/javascript" src="/rsa-demo/javax.faces.resource/chartjs/chartjs.js.xhtml?ln=primefaces&amp;v=10.0.7&amp;e=10.0.7"></script>

   <script type="text/javascript" src="/rsa-demo/javax.faces.resource/moment/moment.js.xhtml?ln=primefaces&amp;v=10.0.7&amp;e=10.0.7"></script>
   <script type="text/javascript" src="/rsa-demo/javax.faces.resource/chartjs/chartjs.js.xhtml?ln=primefaces&amp;v=10.0.7&amp;e=10.0.7"></script>
   <link type="text/css" rel="stylesheet" href="/rsa-demo/javax.faces.resource/primefaces-extensions.css.xhtml?ln=primefaces-extensions&amp;v=10.0.7&amp;e=10.0.7">
   <script type="text/javascript" src="/rsa-demo/javax.faces.resource/inputmask/inputmask.js.xhtml?ln=primefaces&amp;v=10.0.7&amp;e=10.0.7"></script>
   <link type="text/css" rel="stylesheet" href="/rsa-demo/javax.faces.resource/toggleswitch/toggleswitch.css.xhtml?ln=primefaces&amp;v=10.0.7&amp;e=10.0.7">
   <script type="text/javascript" src="/rsa-demo/javax.faces.resource/toggleswitch/toggleswitch.js.xhtml?ln=primefaces&amp;v=10.0.7&amp;e=10.0.7"></script>
   <link type="text/css" rel="stylesheet" href="/rsa-demo/javax.faces.resource/primefaces-extensions.css.xhtml?ln=primefaces-extensions&amp;v=10.0.7&amp;e=10.0.7">
   <script type="text/javascript" src="/rsa-demo/javax.faces.resource/inputmask/inputmask.js.xhtml?ln=primefaces&amp;v=10.0.7&amp;e=10.0.7"></script>
   <link type="text/css" rel="stylesheet" href="/rsa-demo/javax.faces.resource/toggleswitch/toggleswitch.css.xhtml?ln=primefaces&amp;v=10.0.7&amp;e=10.0.7">
   <script type="text/javascript" src="/rsa-demo/javax.faces.resource/toggleswitch/toggleswitch.js.xhtml?ln=primefaces&amp;v=10.0.7&amp;e=10.0.7"></script>
   <link type="text/css" rel="stylesheet" href="/rsa-demo/javax.faces.resource/fileupload/fileupload.css.xhtml?ln=primefaces&amp;v=10.0.7&amp;e=10.0.7">
   <script type="text/javascript" src="/rsa-demo/javax.faces.resource/fileupload/fileupload.js.xhtml?ln=primefaces&amp;v=10.0.7&amp;e=10.0.7"></script>
   <link type="text/css" rel="stylesheet" href="/rsa-demo/javax.faces.resource/react/react.css.xhtml?ln=app&amp;v=1.66a">

   <link type="text/css" rel="stylesheet" href="/rsa-demo/javax.faces.resource/tooltip/tooltip.css.xhtml?ln=primefaces-extensions&amp;v=10.0.7&amp;e=10.0.7">
   <script type="text/javascript" src="/rsa-demo/javax.faces.resource/tooltip/tooltip.js.xhtml?ln=primefaces-extensions&amp;v=10.0.7&amp;e=10.0.7"></script>
   <script type="text/javascript" src="/rsa-demo/javax.faces.resource/ckeditor/ckeditor-widget.js.xhtml?ln=primefaces-extensions&amp;v=10.0.7&amp;e=10.0.7"></script>

   <link type="text/css" rel="stylesheet" href="/rsa-demo/javax.faces.resource/primefaces-extensions.css.xhtml?ln=primefaces-extensions&amp;v=10.0.7&amp;e=10.0.7">
   <script type="text/javascript" src="/rsa-demo/javax.faces.resource/inputmask/inputmask.js.xhtml?ln=primefaces&amp;v=10.0.7&amp;e=10.0.7"></script>
   <link type="text/css" rel="stylesheet" href="/rsa-demo/javax.faces.resource/toggleswitch/toggleswitch.css.xhtml?ln=primefaces&amp;v=10.0.7&amp;e=10.0.7">
   <script type="text/javascript" src="/rsa-demo/javax.faces.resource/toggleswitch/toggleswitch.js.xhtml?ln=primefaces&amp;v=10.0.7&amp;e=10.0.7"></script>
</head>
I've removed some elements that had nothing to do with Primefaces.
You can see that there are a lot duplicates.

Melloware
Posts: 3717
Joined: 22 Apr 2013, 15:48

05 May 2022, 15:50

yeah that is really weird are you using a Custom HeadRenderer or anything special?
PrimeFaces Developer | PrimeFaces Extensions Developer
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 13.0.0 / PF Extensions 13.0.0
PrimeReact 9.6.1

mpiolot
Posts: 7
Joined: 13 Jun 2017, 09:05

18 Aug 2022, 18:14

No, nothing special, only the code you can see in the first post.

Melloware
Posts: 3717
Joined: 22 Apr 2013, 15:48

03 Apr 2024, 22:39

Got to the bottom of it and fixed it: https://github.com/primefaces/primefaces/issues/11714
PrimeFaces Developer | PrimeFaces Extensions Developer
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 13.0.0 / PF Extensions 13.0.0
PrimeReact 9.6.1

Post Reply

Return to “PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: Google [Bot] and 43 guests