I am able to use image sprites (#sprite) successfully by explicitly defining a ClientBundle with sibling CssResource and ImageResource accessors. However I'm wondering whether using a sprite means that must have a separate .css file. If I define my styles inline with <ui:style>, how do I get a known name for an image accessor to use with gwt-image:?
Answered my own question:
<ui:style>
#sprite .panel {
gwt-image: "titleBackground";
}
</ui:style>
<ui:image field='titleBackground' src="constants/title-bg.jpg" />
The field names of image resources in the same template serve as the names of image accessor functions in the generated client bundle.
Related
SO. I have a simple CSS Class just like below:
.Container
{
width: 300px;
height: 100px;
background-image: url('../images/flags.png');
}
Is it possible that I change the value of background-img while running my MVC application? Some how I'd like to inject the value of background-image from my controller action. Your thoughts...
Just to make it clear that why would I need to do this? Refer to my
previous question which is not answered with a bounty of 50+.
There's a few ways to do this. Probably the easiest is to include the css class inside your master view and use some sort of base model that has a property for the value of the image you want and render that out in the view.
Alternatively, there's no reason your link tag for the css couldn't reference another controller action, take a query string parameter of the value you want and render out css instead of html. The controller could render a partial view that is css rather than html.
If the number of possible background images is well defined and small, create css classes with those background images defined.
Then switch the class of your element in HTML using ASP.NET on the server-side or JavaScript on the client-side.
E.g.:
<div class="image-container #imageClass"></div>
If you instead want to show arbitrary images, use inline-style and set that using ASP.NET. Here are two examples both using server-side rendering, written in the Razor templating syntax:
<div class="image-container" style="background-image: url(#imageUrl);"></div>
and here one using sprites where the image itself is set in the funnyimage class:
<div class="image-container funnyimage" style="background-position: #xPos #yPos"></div>
The examples above all work with server-side rendering. This means your images only switch when you change or reload the page. For changes while the page is viewed, you'll need to use AJAX.
Whatever you're doing that cannot be solved with a jQuery line like $(".Container").css('background-image', myImage); or adding a simple style tag to your head/body..
.. yeah, you can still use <style> tag injecting to manage your css.
Following the questions
Using jquery remove style tag from html page and jQuery CSS - Write into the <style>-tag, and mixing the recipe with some AJAX, here's the approach:
$.get(url, function(myImage){
if(myImage) {
$('#mystyle').remove();
$("<style id='mystyle'>body .Container{ background-image: url(" + resultImage + "); }</style>" ).appendTo("head");
}
});
This way you're renewing your background image for all of your .Container on every ajax call to whatever service you're using.
Yes, it is possible now to Change HTML, CSS, and JavaScript during runtime. follow the following steps :
go to NuGet package manager and install Microsoft.AspNetCore.MVC.Razor.RuntimeCompilation. Check the compatibility during installation.
add the following line of code in your startup.cs file :
services.AddRazorPages().AddRazorRuntimeCompilation();
now save and build the project. it worked for me.
You can't change the css during runtime, but you can override the attribute by injecting the new class instead:
.ContainerUpdated
{
background-image: url('../images/newimage.png')!important;
}
I'm a new user of GWT and I'm looking for some advice concerning "theme management".
I have to make a website that can handle theme changes. What I mean is that a user can make is own theme by filling a form, then the website will automatically and dynamically changes its color to display the new ones.
I thought using a CSS sheet for all the static properties and using some GWT lines (e.g. label.getElement.getStyle.setColor(...)) to change color. But I have many "hover" properties and I think creating many MouseOverHandler is not a good idea ...
Is there a way to edit CSS sheet dynamically or a magic trick to do that ?
Thanks.
You have many options - the most straight forward (to me) is to make use of the existing CSS classes that GWT introduces. If you look at javadocs for any of the widgets GWT provides, you'll notice the CSS Style Rules section. For example, Button:
.gwt-Button
the outer element
That means that every Button you add to the page has a .gwt-Button style applied to it. If you inject a CSS stylesheet with a rule that overrides this style:
.gwtButton {
background: red;
}
All your buttons will turn red. You can inject stylesheets using StyleInjector. Creating the stylesheet's content dynamically is up to you - but it's just text, it shouldn't be hard (but make sure the generated CSS rules are valid!).
To get you started, try hooking up this code to some button and see if clicking it triggers changing all the Buttons on the page red:
StyleInjector.inject(".gwt-Button { background: red; }");
If you have custom widgets that you want styled differently, just add an individual class to them (.customWidgetWhatever, like Button has .gwt-Button, etc.) that you will include in your custom stylesheet.
Make sure you understand how CSS works and what it can do for you. For example, if you want to style each button the same, you don't have to change each button's style individually, just use:
button {
background: green;
}
And all the <button>s will turn green.
The easiest way to change themes without reloading the whole application is to assign a theme class to the body element.
You'd want to prepend each CSS class in your app with a particular theme, e.g.:
.theme1 .myClass {
color: red;
}
.theme2 .myClass {
color: blue;
}
Then you'll apply a particular theme to the body element:
<body class="theme1">
When you want to change themes, you'll have to change the body class so it will become:
<body class="theme2">
this way, each element that has class myClass will have its color changed from red to blue.
You cannot edit a CSS file dynamically, but you can inject CSS style either as a new CSS file, or directly into your document.
For example, you can define all key CSS rules in your "main.css" file, and add your user-defined rules directly into the host HTML page with a style tag.
For my GWT application, I want to show the selected row in a FlexTable, and for that purpose I add a style to the specific row:
#UiField FlexTable productTable;
int row;
[...]
/* select row */
productTable.getRowFormatter().addStyleName(row, "row-selected");
In the corresponding ui.xml file, I have the style added as follows:
ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
xmlns:g="urn:import:com.google.gwt.user.client.ui"
xmlns:u="urn:import:myapplication.client.ui">
<ui:style>
tr.row-selected {
background: #92C1F0;
}
</ui:style>
<g:VerticalPanel>
<g:ScrollPanel>
<g:FlexTable ui:field="productTable" width="100%" height="100%">
</g:FlexTable>
</g:ScrollPanel>
</g:VerticalPanel>
</ui:UiBinder>
This does not work, while adding the style in my global .css file does. In FireBug I see that the name tr.row-selected is garbled into something like: tr.GB1HWLGEI
Why does this not work and how should it work instead?
UiBinder uses ClientBundle for ui:style, so the rules and syntax/features of CssResource apply.
This means that your CSS class names will be obfuscated (so that they're unique and won't conflict with a same-named CSS class from another CssResource or external stylesheet).
In your case, you can either define a CssResource interface and declare the ui:style to extend that interface and inject the instance into a #UiField; so you can use the obfuscated style into your addStyleName; as in http://code.google.com/webtoolkit/doc/latest/DevGuideUiBinder.html#Programmatic_access
Or you can use #external in your ui:style to disable obfuscation for the CSS class; see http://code.google.com/webtoolkit/doc/latest/DevGuideClientBundle.html#External_and_legacy_scopes.
Garbled is really obfuscated which will be faster in the browser and harder for someone to reverse engineer. It also means you don't need to worry about css namespace conflicts.
So, just use the following line in your ModuleName.gwt.xml file during development to disable obfuscation.
<set-configuration-property name="CssResource.style" value="pretty" />
I am using a CssResource contained within a ClientBundle according to this guide:
http://code.google.com/webtoolkit/doc/latest/DevGuideUiCss.html#cssfiles
I am accessing the styles from my UiBinder xml according to this guide using ui:with:
http://code.google.com/webtoolkit/doc/latest/DevGuideUiBinder.html#Using_an_external_resource
This works great for accessing my css using class on html elements or styleName on GWT widgets. However, I would like to override the body selector, how can I accomplish that?
This worked great when I previously used tag within my html-file or when I pointed to the css within my GWT module xml. But since this was depracted I switched to only using CssResource. Now my own body selector is not used and the one from GWT Standard Theme is used.
Alright, I found two solutions myself for this:
Add #external to the body CSS selector to suppress selector obfuscation, according to this guide:
http://code.google.com/webtoolkit/doc/latest/DevGuideClientBundle.html#External_and_legacy_scopes
#external body;
body {
my style
}
Add an id to the body, grab the element using GWTs DOM.getElementById and add the style.
Element body = DOM.getElementById("bodyId");
body.addClassName(AppResources.layout().body());
Hope this can help other in the same situation.
I'm writing a ServerControl in ASP.NET 3.5, and I'm exposing CssClass, so the user can manipulate the visual appearance of the control. My problem is that I want to establish reasonable defaults, so that the user doesn't have to configure CSS unless he wants to change the defaults.
My specific problem is that my control is emitting html divs, that need to display background images. I want the user to be able to specify a different image in CSS, but I want to display a default background image, and I can't make that work.
The entire server control is emitted as a div, with a class name set to the value the user provided in CssClass. The div that needs the background image is enclosed within this outer div, with a class name of its own. I am currently setting the background image in CSS on the page that contains the control:
<style type="text/css">
.cssClass .innerDiv {
background-image: url("http://....");
}
</style>
With this the proper image is drawn. But if it's not there, no image is drawn.
What I want is for the ServerControl to emit some CSS that will define these image urls, that would be over-ridden by any css that was added by the user, and for that default CSS to include URLs to images embedded in the ServerControl's assembly.
And I'm not sure of how to do either. Nor, for that matter, am I sure this is the best approach.
Any ideas?
Expose various properties with CSS classes, such as HeaderCssClass, ItemCssClass, if you need more than one style.
Also, you can do a check that if the user has a CSS class name specified, you use that; otherwise, use your default and omit the custom CSS from the control.
In your rendering logic, you can render the right CSS class name as the attribute of the DIV depending on whether the user has specified anything. So you can do:
if (this.HeaderCssClass != null)
writer.AddAttribute("class", this.HeaderCssClass);
else
writer.AddAttribute("class", "standard");
writer.RenderBeginTag("div");
And only write out your standard CSS if the HeaderCssClass is null.