regarding images are loading every time while loading the editor

[shikhar_472]

Hi Team,

For oxygen web author when we are loading the editor images of icon and right pane are getting loaded everytime when we refresh the page is there any way to make a cache of this once so it will increase the performance of editor and will take very less time to load.

Thanks,
Shikhar.

[mihaela]

Hello,

We need more details in order to better understand your use case. What is the impact of the images loading performance problem? Is there any delay in loading the editor or when the user tries to edit the document?
Also, please give us more details about the images that you are referring to ("the editor images of icon and right pane"). Some screenshots would be very useful.

Here is something that you can check: see if the "Disable cache" checkbox is selected in your browser developer tools (make sure it is unchecked when you test). This can have an influence on the images loading time.

Best Regards,
Mihaela

[shikhar_472]

Hi Mihaela,

I have added our customs actions and images for them and i am adding small icon of 16*16 and large icon of 24*24 also,
So when i am loading the editor images are not being cached so these images are taking some time to load.
And also we are testing this without opening the developer toolbar.

Adding the image for reference.

newqueryimage.PNG

Thanks.

[mihai_coanda]

Hello,
Images loading has different loading mechanisms.
To better understand your exact use case we need to understand how those actions are defined and where they are presented, whether in the toolbar, editor as form controls, side-view buttons, etc. Screen shots with all of their location would greatly help with this.
Best Regards,
Michael

[ganem2]

Hello,
These actions are defined in custom plugin and are registered on 'EDITOR_LOADED' event. these custom actions are added to top toolbar as well to right panes.
each of our custom actions extends sync.actions.AbstractAction and overrides renderLargeIcon and renderSmallIcon methods to provide icons.
below is code snippet of these methods.

Code: Select all

class EdithColumnWidth extends sync.actions.AbstractAction {
    constructor() {
        super();
    }
    renderLargeIcon() {
        var largeIcon = "../plugin-resources/content-plugin/images/edit_column_width.png";
        return sync.util.renderLargeIcon(largeIcon);
    }
    renderSmallIcon() {
        var smallIcon = "../plugin-resources/content-plugin/images/edit_column_width.png";
        return sync.util.renderSmallIcon(smallIcon);
    }
    getDisplayName() {
        return 'Edit Column Width';
    }
    getDescription() {
        return "Edit Column Width";
    }
    actionPerformed(callback) {
    //Custom busniess logic
    callback && callback();
    }
}

[Bogdan Dumitru]

Hi,

There is no way to cache images using the WebappStaticResourcesFolder plugin extension. We've deduced that you're using this extension because of the paths containing "plugin-resources".

One solution to cache images client-side would be to retrieve images using a WebappServlet plugin extension that allows returning images using a bare-bone javax.servlet.http.HttpServletResponse which allows setting HTTP caching headers.
Read about WebappServlet and WebappStaticResourcesFolder plugin extensions in the Supported Extension Types section.

Furthermore, notice that browsers limit the number of concurrent requests, for eg. Chrome allows max 6 concurrent requests accordingly to this thread. Taking this into account and depending on the number of requests you may even consider building an Image Sprite with all of your images, see this topic.

[shikhar_472]

Hi Team,

Could you please provide some example of how to achieve this i have a folder of images in plugin-resources and i want cache them to show for toolbar icons.

Thanks,
Shikhar.

[Bogdan Dumitru]

Hi Shikhar,

Unfortunately, we don't have an example for this but please ask if you have any specific questions regarding the previous message.

https://developer.mozilla.org/en-US/doc ... he-Control

[shikhar_472]

Hey Team,

How to use WebappServlet plugin extension that allows returning images using a bare-bone javax.servlet.http.HttpServletResponse which allows setting HTTP caching headers.

Could you please help me with this.

Thanks.

[Bogdan Dumitru]

Hello,

So you need to do the following things:
1. implement an Oxygen WebappServletPluginExtension extension (WebappServlet in plugin.xml)
2. use the javax.servlet.http.HttpServletResponse from the servlet and return the image
3. set the caching headers

For 1 you may find it helpful to take a look at one of our plugins that defines a WebappServletPluginExtension. Take a look in plugin.xml and in the actual Java class. Please note that this plugin adds a servlet for a different use-case but anyway I hope it helps.
For 2 you have to use the standard Java class javax.servlet.http.HttpServletResponse to return an image.
For 3 you can set cache-related headers somewhat like this:

Code: Select all

 long expiry = new Date().getTime() + cacheAge * 1000;
 HttpServletResponse httpResponse = (HttpServletResponse)response;
 httpResponse.setDateHeader("Expires", expiry);
 httpResponse.setHeader("Cache-Control", "max-age="+ cacheAge);

The above is just an example, we don't expect to match exactly your need. For the actual cache-related headers please consult
https://developer.mozilla.org/en-US/doc ... he-Control

[shikhar_472]

Hi Team,

How to read the images from the plugin folder

ServletContext cntx = req.getServletContext();
// Get the absolute path of the image
String filename = cntx.getRealPath("plugin-resources/content-plugin/images/title_case_24.png");
// retrieve mimeType dynamically
String mime = cntx.getMimeType(filename);

log.info("filename path is " + filename);
log.info("mimename path is " + mime);

if (mime == null) {
log.info("mime is null");
resp.setContentType("text/plain");
}

Could you please help right now if i am trying to read the image it automatically redirecting to

C:\DevTools\oxygen-xml-web-author\tomcat\webapps\oxygen-xml-web-author\plugin-resources\content-plugin\images\title_case_24.png

but image is not present there and i want to read it from the user plugin
Thanks,
Shikhar.

[cristi_talau]

Hello,

You can take a look at this plugin to see how it finds the location of the plugin directory: https://github.com/oxygenxml/web-author ... n.java#L17 .

Then it uses it in another plugin class:
https://github.com/oxygenxml/web-author ... e.java#L72
Best,
Cristian

[shikhar_472]

Hi Team,

I am able to get the basedir and absolute path which is working fine in my local machine but when i am trying to hit this in server it is always taking the wrong version of plugin which does not exist could you please help

java.io.FileNotFoundException: /appserver/tomcat/oxygen-xml-web-author/tomcat/work/Catalina/localhost/oxygen-xml-web-author/user-plugins/content-plugin-0.0.0.151/web/static/images/strikethrough_24.png (No such file or directory)

java.io.FileNotFoundException: /appserver/tomcat/oxygen-xml-web-author/tomcat/work/Catalina/localhost/oxygen-xml-web-author/user-plugins/content-plugin-0.0.0.139/web/static/images/strikethrough_24.png (No such file or directory)

content-plugin-0.0.0.212 is present in the server

everytime its taking the different version and giving this error

[cristi_talau]

Hello,

Please make sure to restart the server after modifying the plugins.

Best,
Cristian

[shikhar_472]

Hi I have tried restarting the server still its not working

[mihaela]

Hello,

You should check the user-plugins folder to see if there are multiple versions of the content-plugin remained there.

Best regards,
Mihaela

[shikhar_472]

folder.PNG (6.82 KiB) Viewed 3979 times

hey mihela,

i have checked that nothing is present here apart from latest version.

attached the directory screenshot as well

Also in logs i have checked it taking some random version numbers of plugin as i have mentioned above.

[mihaela]

Hi,

You can also check the "plugins" folder if there are some plugins manually added there.
Also, you can try a fresh installation of Web Author, add your plugin and check again to see if this happens also in this case.

Best Regards,
Mihaela

[shikhar_472]

thanks for the help mihela.