So i decided to implement some themes in my AIR app. I have converted my CSS files into SWF files, removed the Style linkage from my main file. Based on the user preferences stored in a file, I decide which theme to use. i.e; load the SWF file using StyleManager class.
I made my application window invisible, added a StyleEvent.COMPLETE event listener for the IEventDispatcher object returned by StyleManager.loadStyleDeclarations method. After the StyleEvent.COMPLETE occurs, I made my main window visible.
The problem i have now is, for a few seconds, i can see white canvases and all my components without any styles before using the style selected. I want to know if my approach is correct or do I need to make any changes to implement this properly?
Alright, so I seem to have figured it out myself. Getting some help from this link albeit.
Previously i read the settings in my applicationComplete and loaded the styles. So i guess all the UI components were created and added to the display list. They were bare naked without any style values.
So i changed the reading of the settings file to preinitialize, so that by the time the applicationComplete is triggered, AIR has already loaded the SWF stylesheet. So it will display the UI as i wanted.
Related
I have a .scss file which is holding all the application css classes. There is an admin portal which user can set the properties like font size, text color e.t.c. When the application loads, client will be receiving these properties in a form of a key value object.
ex:
properties:{
'font-size':26,
'color':'blue'
}
I want to override these properties with defaults holding in my scss file.
I searched a bit and found that css variables is one of the option. But with that we will loose the support for IE11 as it does not work in IE 11.
Is there is any other way where i can look in to. Or is there any way where I can build the css file when i receive this object response from server.
Kindly help and suggest some approaches to deal with this.
Is it possible to set how JavaFX loads images from CSS? If I could delegate this to a certain utility class.
In Swing I had an ImageStore utility class which loaded the images needed by all the components. The ImageStore retrieved the image from a given URL and cached it to disk for later retrieval. It also used in memory cache for running application to avoid touching the disk on every retrieval. This way if 100 components wanted the same image, the image was only fetched 1 times, and not 100 times.
I have a dilemma now with using CSS for styling
-fx-background-image:url('/images/single-search.png')
How to delegate this loading to ImageStore?
How does JavaFX handle loading of images defined in CSS?
If JavaFX CSS does some caching on their own, this will only solve one problem. It will not fetch the same image multiple times. However my ImageStore saves all images to file cache where they are also available the next time the application is started a new.
JavaFX uses it's own cache class:
com.sun.javafx.css.StyleManager contains the Image getCachedImage(String url) method that is used by the converter used for the background image css properties. (Note that this class is not part of the public API.) This class does not seem to write the images to files and neither is there a way to replace the way the images are loaded in a clean way (i.e. not using reflection or similar means), but keeps references to the images used in memory...
Of course you could replace the CssMetaData object responsible for the background properties in the List returned by the getCssMetaData() method with a CssMetaData object using your own cache, but this would require extending every subclass of Region you want to use your cache with and using those classes instead of the standard Regions...
With
void QApplication::setStyleSheet()
I can set a global style sheet for my Qt application.
For example, I set the default background of all QWidgets to black.
However, in the QT Designer all my widgets still have the default looks (grey background), because it doesn't know anything about my code.
Is there a way to set a global style sheet to my application that also affects the widgets looks in the QT Designer? Then I wouldn't have to compile my project every time I want to see how it looks.
Or is there maybe a more sophisticated way to solve this problem?
There is solution. You can set in Qt Designer your stylesheet for top level widget styleSheet property.
For example: you set style
QWidget {background-color:black;}
for MainWindow form in Qt Designer and all child widgets now have black background.
In the Preferences dialog (menu: Settings, Preferences...), there's a section in Forms called "Print/Preview Configuration". You can set a stylesheet there for the preview action (normally on Ctrl+R). This won't change the colour of the form as you edit it, but you can quickly see it as it will appear in your application.
See also my question Can I style the top-level form in Designer preview?
As you said yourself: It doesn't know anything about your code. So nothing you can do in code. But compiling your project every time you want to see how it looks? One stupid question... don't you know about the preview function in the designer? Press ctrl-alt-r.
Of course, it shows only the style, which is applied to the widget currently loaded in the designer. But you could temporarily set your style sheet to this widget to see how it would look, if you later on set this sheet globally in your program. Not perfect, but at least no need to compile your whole project.
It seems it isn't possible at runtime to change styling defined in CSS files, ex.: colors. This is seemingly because the CSS files are compiled into SWF.
Is it possible to externalize styling information in CSS (or any other format) without compiling it to SWF file so that it can be changed easily at runtime just as normal CSS can be changed when it is used in HTML.
You can do this in Flex 3, Loading an external CSS file and hopes similarly can be used for Flex 4 as
Load CSS File using URLLoader
List item Parse it with StyleSheet parseCSS function
Assign it to Application
Also see StyleSheet
Hopes that helps
We eventually found a way of applying styling, without having a compilation step. We are sticking to basics.
We defined a configuration XML file and using onPre method of mx:application we read this XML file and applied the styling to UI components.
This approach ensured that the styling is centralized at least at application level and most importantly it is now possible to quickly try out new styles by changing the configuration file and refreshing the page.
I suppose this documentation answers all your questions. You have to use some CSS at compile time but you can load and apply another one at runtime without problem.
I have a Flex 4/Blaze/Java application and would like to provide my users with a way to switch between several pre-determined skins. Does anyone have a good example of how to do this?
Ideally, the list of themes would be provided by the server -- where the themes are stored. Or do I have to compile in all possible themes into the swf ahead of time?
Check out runtime loading of style sheets.
You can package each style sheet with its skin classes in a swf that can be dynamically loaded by your application at run time using styleManager.loadStyleDeclarations("yourTheme.swf");
http://help.adobe.com/en_US/flex/using/WS2db454920e96a9e51e63e3d11c0bf69084-7f8c.html