How can I use a Generator to modify a css file for a CssResource?

Question

I am using GWT Generators and want to modify a css file with a Generator. The css file contains constants like the following (test/client/App.css):

@def LINE_WIDTH 100px;

I defined an interface (test/client/DeviceDensity.java):

public interface DeviceDensity extends CssResource {

    String APP_CSS = "test/client/App.css";

}

Using a gwt generator I want to modify the constant LINE_WIDTH to be either 75px, 100px, 150px or 200px; depending on the value of a property phone.density which is defined in a module file as:

    <define-property name="phone.density" values="lpdi,mdpi,hpdi,xhdpi" />
    <property-provider name="phone.density"><![CDATA[
    {
        var ratio = window.devicePixelRatio;
        if (ratio == 0.75) { return "lpdi"; }
        else if (ratio == 1) {return "mdpi"; }
        else if (ratio == 1.5) {return "hpdi"; }
        return "xhdpi";
    }
    ]]></property-provider>

How can I get the value of phone.density in a Generator and how can I modify the css constant LINE_WIDTH?

Are you able to get the value of phone.density in a Generator [Java Code]? — Braj, May 21 '14 at 21:17

score 0 · Answer 1 · edited May 23 '17 at 12:05

How can I get the value of phone.density in a Generator?

Possibly not as simple as you wanted, but you can do something like this:

Create a base class com.gwt.demo.client.PhoneDensity and subclasses one for each value of phone density as shown below.

public class PhoneDensity {}

public class PhoneDensityLpdi extends PhoneDensity{}
public class PhoneDensityMdpi extends PhoneDensity{}
public class PhoneDensityHpdi extends PhoneDensity{}
public class PhoneDensityXhdpi extends PhoneDensity{}

Add this to your gwt.xml:

    <define-property name="density" values="lpdi,mdpi,hpdi,xhdpi" />

    <property-provider name="density"><![CDATA[
    {
        var ratio = window.devicePixelRatio;
        if (ratio == 0.75) { return "lpdi"; }
        else if (ratio == 1) {return "mdpi"; }
        else if (ratio == 1.5) {return "hpdi"; }
        return "xhdpi";
    }
    ]]></property-provider>

    <replace-with class="com.gwt.demo.client.PhoneDensityLpdi">
        <when-type-is class="com.gwt.demo.client.PhoneDensity" />
        <when-property-is name="density" value="lpdi" />
    </replace-with>

    <replace-with class="com.gwt.demo.client.PhoneDensityMdpi">
        <when-type-is class="com.gwt.demo.client.PhoneDensity" />
        <when-property-is name="density" value="mdpi" />
    </replace-with>

    <replace-with class="com.gwt.demo.client.PhoneDensityHpdi">
        <when-type-is class="com.gwt.demo.client.PhoneDensity" />
        <when-property-is name="density" value="hpdi" />
    </replace-with>

    <replace-with class="com.gwt.demo.client.PhoneDensityXhdpi">
        <when-type-is class="com.gwt.demo.client.PhoneDensity" />
        <when-property-is name="density" value="xhdpi" />
    </replace-with>

In your client-side code:

    // this is the magical line to read the phone density
    PhoneDensity phoneDensity = GWT.create(PhoneDensity.class);

    String density = null;
    if (phoneDensity instanceof PhoneDensityLpdi) {
        density = "lpdi";
    } else if (phoneDensity instanceof PhoneDensityMdpi) {
        density = "mdpi";
    } else if (phoneDensity instanceof PhoneDensityHpdi) {
        density = "hpdi";
    } else {
        density = "xhdpi";
    }

You'll get an instance of PhoneDensity based on the value of phone density.

Done

Read the section Elements for Deferred Binding.

For detailed discussion on the above approach please have a look at below thread

Get value of GWT property at runtime.

How can I modify the css constant LINE_WIDTH?

Now you have the value of phone density in your client side JAVA code. Move this value to a constant file instead of css and you could use @eval in UIBinder

Sample code:

<ui:style>
      @eval phoneDensity com.gwt.demo.client.Styles.INSTANCE.phoneDensity(); 
     .widget{ width: phoneDensity; }
</ui:style>

Please have a look at below posts. It might help to solve this issue with some alternative solution.

How can I use a Generator to modify a css file for a CssResource?

1 Answers1