RemoteObject-based Custom widget development [message #1828186] |
Wed, 03 June 2020 12:32 |
Gunnar Adams Messages: 49 Registered: May 2016 |
Member |
|
|
Hi,
in our project I need to implement a special kind of button-widget.
The button may contain a complex layout (containing background-images, icons, text) with different visual appearance for the button's state such as "hover", "focused", "active" ... . This layout is being computed by Java code and was until now rendered as one large composite bitmap containing all 5 states. This bitmap would be used as a background-image of a Button or Composite control and the portion to be shown would be determined by CSS (pseudo-)classes set using custom scripting.
The problem is: the huge amount of bitmaps that need to be downloaded to the browser has a negative impact on the application's performance.
Thus, I am trying to implement a RemoteObject-based custom widget, which can do the same, but renders the actual appearance of the button on the browser-side.
The custom widget creates a <div> as a child (sized to 100%) of the custom-widget's proxy object.
Within that div I create 5 different layers as children with 100% size:
disableddiv
normaldiv
hoverdiv
activediv
focuseddiv
The contents of each of those divs is set from a json object using style.cssText (for the layer itself) and innerHTML (for the HTML-code below the div). This is prepared on the Java-side and it works quite well.
The idea is, that only one of those divs is visible at any time. hover works using :hover and corresponding css classes on the parent div.
I had hoped, that I could handle all of the states (with exception of disabled, maybe) with the respective CSS pseudo-styles of the parent div. In jsfiddler, this worked, but only :hover is picked up on when I try it in RWT.
Within the custom widget's js code, I can also listen for the mousedown and -up events. in order to set a pressed (active) state.
First question: How do I capture the mouse while the button is pressed in order to get notified about a release while the mouse is outside of the control?
Second question: What I cannot figure out is how to be notified about the widget being focused and blured in order to update the visibility of the layers accordingly.
Any pointers would be appreciated.
Thanks,
Gunnar
[Updated on: Wed, 03 June 2020 12:33] Report message to a moderator
|
|
|
Powered by
FUDForum. Page generated in 0.03452 seconds