Rather than taking an approach of JQuery implementation or that I've decided to use a Features approach to implement.
Below is the resizable implementation class using JQuery UI (been chucked because of the theming but it's a nice example) :
/
* @author Marc Magon
/
public class JWResizableFeature extends Feature implements IFeature
{
/
* Sets the minimum width of the component
/
private MeasurementCSS minimumWidth;
/
* Sets the maximum width of the component
*/
private MeasurementCSS maximumWidth;
/
* Sets the minimum height of the component
/
private MeasurementCSS minimumHeight;
/*
* sets the maximum height of the component
/
private MeasurementCSS maximumHeight;
/** * Sets the resize to always preserve aspect ratio */ private boolean preserveAspectRatio; /** * Sets the resizing to snap to the grid */ private boolean snapToGrid; /** * Sets the height and width in pixels for the gridSize */ private int gridSize; /** * Instead of showing the actual element during resize, shows a semi-transparent part of the element. */ private boolean visualFeedback; public JWResizableFeature() { super("resizable"); getJavascriptReferences().add("/javascripts/jquery.ui.core.js"); getJavascriptReferences().add("/javascripts/jquery.ui.widget.js"); getJavascriptReferences().add("/javascripts/jquery.ui.mouse.js"); getJavascriptReferences().add("/javascripts/jquery.ui.resizable.js"); setRenderOnLoad(true); setIncludeComponentIdentify(true); } @Override public ArrayList<String> assignFunctionsToComponent() { ArrayList<String> arr = new ArrayList<>(); //Do all the logic of the settings above as per the API and build up the JQuery arr.add("resizable();\n"); return arr; }
}
Implementing this onto any component (as it can go on any component):
component.getFeatures().add(new JWResizableFeature());
Will be adding a convenience method and removing the general access to the features array list. But you get the drift of how it works... And yes we do hate the .js nesting tree of jquery ui. completely.