Hi Cajus, I'm currently using a theme based on John Spackmans aristo theme which uses png images as radio and check box decoration, allowing a large number of button states. A lot of combinations like focused, read only, disabled, checked, invalid which tries to exactly show the button state to the user.
Along with the state changes, the icon is changed by the appearance, which is in the end a background-image change and leads to a flicker at least in current chrome. IE, Safari and Firefox do not show this flicker in the current versions. Digging more deeper in my current implementation, I've replaced the radio button and check box implementation with my own version, which is not based on qx.ui.basic.Atom, but on qx.ui.basic.Label. The goal was to reduce the number of used DOM elements and qx objects. This way I cut down the used DOM elements from 3 to 1 and the used qx objects from 6 to 2. This light versions of the buttons are currently limited to a layout where the button itself is left and the label is right. So this light radiobuttons/checkboxes are using css background-image in order to display the button images, changing the url according to button states. I have a LARGE form consisting of approx 600 items, which itself having nearly 500 radio buttons and 200 check boxes. I've created a monster! This way I was able to cut down the time to first appear of the form to 50% compared when using the original button implementation on IE11. But this is another story. Back to my initial question: I wonder if pre loading all the button images would stop the flicker. I thought that there may be a generic way to find all image resources somehow using the resource manager and allowing me to iterate over and pre load them into img tags. And yes! It would be desirable to move from the png implementation to an icon font, but that would be an even harder thing to achieve, retaining all those button states and fitting well into the aristo theme (yeah real knobs on the buttons!) Back to your suggestion to use combined images: I've already created a combined image of all the readio/checkbutton states, but I'm not shure how this fits into using this in the standard qx.ui.form.RadioButton and qx.ui.form.CheckBox implementations. The theme appearance eg. of the checkbox just assigns a icon path to the icon property of the button, depending on all those states, build paths like myapp/decoration/form/checkbox-checked-hovered.png. The combined image is checkbox-combined.png aside with a checkbox-combined.meta file which contains a map offering the background offsets for the combined images. For my own implementation, which only has one div, I would need to work with pseudo elements :after and place the background-image there, because I can not restrict the display of the background-image in the single div, as it may have additional padding around the image. So enough for now ;-) Any ideas welcome. Regards Dietrich Am 03.12.2015 um 15:58 schrieb Cajus Pollmeier: > Hi Dietrich, > > is it an option to use the image map feature? > > http://manual.qooxdoo.org/4.1/pages/tool/generator/generator_config_ref > .html#combine-images > > That only loads one single image in all browsers. Although we've > switched to icon fonts now ;-) > > Cheers, > Cajus > > ------------------------------------------------------------------------------ Go from Idea to Many App Stores Faster with Intel(R) XDK Give your users amazing mobile app experiences with Intel(R) XDK. Use one codebase in this all-in-one HTML5 development environment. Design, debug & build mobile apps & 2D/3D high-impact games for multiple OSs. http://pubads.g.doubleclick.net/gampad/clk?id=254741911&iu=/4140 _______________________________________________ qooxdoo-devel mailing list qooxdoo-devel@lists.sourceforge.net https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
