How to style notifications in Vaadin Flow - notifications

I would like to style notifications in Vaadin Flow (19+), in Java, exactly as shown here in typescript, by assigning a theme and not setting the color of the elements (as shown in the java example). Apart the fact that setting the color is troublesome (foreground, background...) and fragile (e.g. switching to dark mode), the Java example shows setting a CSS color, I would expect to be allowed to use Lumo color variables (e.g. --lumo-success-color). Is this possible? Can anybody show an example?

You can use the addThemeVariants() method to define the variant you want to use:
Notification notification = new Notification();
notification.addThemeVariants(NotificationVariant.LUMO_PRIMARY);
The Java examples have not been moved over to the new docs site yet, you can find them here https://vaadin.com/components/vaadin-notification/java-examples/theme-variants

Related

Sticky Scroll with custom language

In vscode, the new Sticky scroll doesn't seem to work out of the box with my custom language extension. Is there some interface my language needs to implement in order to support it?
The new Sticky Scroll feature seems to be based on the language elements (class/interface/namespace/function/method/constructor) being recognized, and available in the Outline view. This means your custom language must have a Language Server or any other tooling that provides such elements to the editor.
If your language does provide that, but is not being properly supported in the new Sticky Scroll feature, I suggest you to open an issue in VS Code repo. As you can see (https://github.com/microsoft/vscode/labels/editor-sticky-scroll), there are a few issues reported.
Hope this helps
That could change with VSCode 1.72 and issue 157165 "Add option to base Sticky Scroll on indent, not Document Symbols"
Basing Sticky Scroll on class/function/namespace etc. makes a lot of sense, but only as long as there is an active language server or language extension that provides good Document Symbols (Outline).
For all languages that either have no LSP (so, so many), whose LSP provides no Outline, whose LSP provide invalid Outline or which simply have no concept of functions/classes etc., Sticky Scroll can not be leveraged :-(
I'd argue that in many cases the respective context could be inferred from the indentation instead.
I realize this may not be desirable by default, so perhaps it should be either hidden behind a flag or configurable per language. For example, in a large JSON file, you might then get this context:
1 {
51 "a": {
52 "b": [
-----------------------------------------------
74 "current_line",
75 "..."
Personally, I'd like to have SS in CoffeeScript, Crystal, AutoHotkey, Markdown, JSON, and pretty much everywhere else except maybe plain text files.
This implemented with PR 159198;
When no document symbol provider use the folding model for the sticky scroll:
This is available in VSCode insiders today.

Vuetify - Customizations

Vuetify allows us to change the default themes and presets by using a variables.scss/sass file in our project.
But I am unable to figure out how to change the font-style/font-weight (or any other global properties except the color) for the entire app, dynamically on the fly.
For Example:
We have a vue application running and the global font is currently set to Roboto,
What I want to do is provide a list of available fonts in a v-select and dynamically feed the selected value(suppose Raleway) in the variables.scss file or somehow trigger Vuetify to pick up the updated font-family (even other customizations), and change the default font to Raleway for the entire application.
I don't want to add classes everywhere. It won't be maintainable.
Any ideas on how can this be achieved?
Thanks in advance!
Changing the font app-wide is possible through the variables file as you mention, but this is a build-time decision. If you're wanting the user to swap out the font in the running app, there isn't any mechanism for this as far as I know, because the app is already compiled and running.

Windows 8 Themes

While searching for a method to determine which theme is currently in use for Windows 8, I came across this article. It states that the theme is set per application and cannot be changed. I didn't realize that this was the case, nor did I do anything to set my theme to "Dark" (although it seems to be so). If this is correct, then how is the app theme set or, if not, how can I determine which theme is currently in use?
By default new applications use the "Dark" theme, this is set by a property called RequestedTheme on the Application object. To change to the "Light" theme you can set the property in the App.xaml file on the Application element. You can read that same property to determine which theme isn't being used, but since it cannot be changed by the user it's value will only ever be what you set it to be.

AIR custom transparent chrome problem Flash Builder 4.5.1

I'm re-creating an AIR app with FB 4.5.1. (I've started from scratch, having had trouble importing FB 4 projects).
In the app.xml I have the following defined:
<systemChrome>none</systemChrome>
<transparent>true</transparent>
Having done this I still get a full window with titlebar, min, max, and close buttons.
what gives?
I believe you need to create a skin for the application.
This appears in Adobe's forum, and includes an FXP of a functional transparent app:
http://forums.adobe.com/thread/476699
Setting systemChrome & transparency along with "backgroundAlpha" to "0" would have helped in Flex 3.
But, skinning of components in Flex 4 i.e Spark components is little different and completely customizable.
Following are the steps you need to do make the window transparent.
Set systemChrome to "none" in the XML configuration file
Set transparent to "true" in the XML configuration file
Copy the skin code from <SDK_FOLDER>\frameworks\projects\airframework\src\spark\skins\spark\S parkChromeWindowedApplicationSkin.mxml and paste in a new MXML file.
Set the "alpha" property of "backgroundRect" object inside the skin file to "0".
Assign the newly created skin as the "skinClass" for "s:WindowedApplication" object
Please import the attached FXP file using "File->Import Flex Project" menu and have a look at the code to make it much more clear.
First, I discovered it is easier to interact with app.XML by opening it via "Open With -> Text Editor".
Second, and this is really embarrassing, I had simply failed to remove the comments bracketing
was:
<!-- <systemChrome>none</systemChrome> -->
<!--<transparent>true</transparent>-->
should have been:
<systemChrome>none</systemChrome>
<transparent>true</transparent>
...duh! I knew better, but...
Lastly, for a completely chromeless app, add
showStatusBar="false"
to the app header.
that's it!

Putting in "broken image" placeholders with Flying Saucer

I'm using Flying Saucer to generate PDF from HTML (so I'm using ITextRenderer, if that matters.)
I would like to simulate something like what Webkit or Gecko put in when the image cannot be found - something like an inset outline and a little broken page image.
I have determined that overriding getImageResource in the UserAgentCallback is a way to test for this condition (the image in the ImageResource will be null) but I can't figure out a nice way to render a placeholder at this point in the API.
Is there a proper way to do this? (It would be nice if this happened out of the box...)
You're on the right track here.
You want to extend UserAgentCallback with your own custom user agent functionality. It should perform almost the identical functionality of what the existing Flying Saucer implementation does, except, when an image is not found, it should return the default broken page image that you want to include.
If you're using the iTextRenderer, there is an ITextUserAgent class which you can extend for your own custom UserAgent.
To set the UserAgent, after you create the ITextRenderer, use the following code.
ITextRenderer renderer = new ITextRenderer();
renderer.getSharedContext().setUserAgentCallback(new CustomITextUserAgent(renderer.getOutputDevice()));