Your suspicion about speed and network performance are correct. What you're seeing is the list of elements before the CSS is applied to them.
Would it be an option for you to move your plugin assets to the file system (the webserver)?
What you do is download all the assets that the plugin uses (CSS, js, png, ...). Place them in your webserver. Don't place them in the /i/ directory, use a custom one like /c/navbar/ (but use whatever you like)
Then go to the plugin and change the "File Prefix" from #PLUGIN_PREFIX# to "/c/navbar/" so that the plugin uses the files form the file system.
This helps because then the plugin doesn't need to fetch those resources from the database every time it renders.
That's great Nick!
FYI, in some cases I've taken this a step further and compiled the Plugin PL/SQL Code in the database so that the code is not compiled every time it's used.
For example, you create a package enavbar with the enkitec_navbar_render function in it.
Then where the plugin says "Render Function name" I would change it from enkitec_navbar_render to enavbar.enkitec_navbar_render. This way the plugin will use the pre-compiled package code which could also bring some more speed enhancements.
Oddly enough, the substitution string for CSS generated by plug-ins (#GENERATED_CSS#) is in the footer section of page templates in APEX. I'm not sure why it was put there but it's the cause of the problem.
the reason why the #GENERATED_CSS# placeholder has to be in the footer is because it will contain CSS markup generated by components of the page. At the time when the HTML header is rendered, that CSS markup is not yet available, because the processes, regions, plug-ins of the page have not yet been executed which tell APEX which additional files to load.
I know from a CSS performance perspective this is not optimal, but currently that's the only way plug-ins can include there own CSS/JS without modifying any page template.
If a developer wants to optimize the rendering, he can add the plug-in CSS file into his page template (property "Cascading Style Sheet - File URLs") or at page level (property "CSS - File URLs") to always load it at the beginning of the page. If the plug-in tries to loads the same CSS file (note, it has to be the same URL) it will not be included a second time.
Member of the APEX development team
My Blog: http://www.inside-oracle-apex.com
APEX Plug-Ins: http://apex.oracle.com/plugins
Message was edited by: PatrickWolf
Quick bonus question if I may,
Could this also be the reason why the buttons on the Modal LOV plugin take a while to render (for us)? If so, is there a way of downloading all the files associated with that plugin in one step rather than having to do them one at a time, so I can place these on the webserver too?
I'll answer my own question, in case anyone else has the same issue.
Yes you can change the Modal LOV as well, with a small amount of extra work. The following css files also refer to #PLUGIN_PREFIX#, and must be amended before being copied to the web server.
If you place all the files in the same place on the webserver, you can replace references in the css files to #PLUGIN_PREFIX# with ./ (dot forward slash) which will tell it to look in the same directory.
If I've made any blunders feel free to point them out, but it seems to be working for us, and the modal lov items now render without any delay.
Basically your webserver can be mapped to "serve" files in your filesystem. The /i/ path is not really /i/ or C:\i in your webserver, is most likely something pretty long (like for example: (/app/oracle/product/HTTP10gR2/apex/images )
So, what /c/ can be is /app/oracle/product/HTTP10gR2/apex/custom
and /c/navbar would be /app/oracle/product/HTTP10gR2/apex/custom/navbar
So it doesn't matter if it's windows or linux, because the webserver would still map /c/ to whatever local filesystem destination you decide.
As to how to do this exactly... the syntax depends on if you're using Apache, IIS, APEX Listener, etc...
If you have followup questions about this mapping it's best to start a new thread or see the APEX Installation Guide
Hope this helps.
The only "blunder" I see is that you did a bit more work than needed. I include a "server" directory (actually many plug-in developers do) that allows you to move the files without making any changes. Just upload and change the File Prefix in the plug-in to point to the correct location on the web server.
I too experienced the latency issue and i coped the files to ../apex/pluigins/nav directory in my linux where apex is installed. The i modified the #PLUGIN_PREFIX# with the /pluigins/nav.
When i run the app, i get an "Authentication Required" popup appears.
Any idea why could be wrong with my setting?