java - 如何使用生成器修改 CssResource 的 css 文件？

Question

我正在使用 GWT 生成器并想用生成器修改一个 css 文件。 css 文件包含如下常量 (test/client/App.css):

@def LINE_WIDTH 100px;

我定义了一个接口(interface)(test/client/DeviceDensity.java):

public interface DeviceDensity extends CssResource {

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

}

我想使用 gwt 生成器将常量 LINE_WIDTH 修改为 75px、100px、150px 或 200px；取决于属性 phone.density 的值，它在模块文件中定义为:

    <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>

如何在生成器中获取 phone.density 的值以及如何修改 css 常量 LINE_WIDTH？

Answer 1

如何获取生成器中 phone.density 的值？

可能没有你想的那么简单，但你可以这样做:

• 创建一个基类 com.gwt.demo.client.PhoneDensity 并为电话密度的每个值创建一个子类，如下所示。

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

• 将此添加到您的 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>
  

• 在您的客户端代码中:

      // 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.

• 完成

---

阅读 Elements for Deferred Binding 部分.

有关上述方法的详细讨论，请查看下面的线程

• Get value of GWT property at runtime .

---

如何修改 css 常量 LINE_WIDTH？

现在您在客户端 JAVA 代码中有了电话密度的值。将此值移动到常量文件而不是 css，您可以在 UIBinder

中使用 @eval

示例代码:

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

请看下面的帖子。它可能有助于通过一些替代解决方案解决此问题。

• How can I use the same @def in multiple CssResource css files?

• CssResource @def in UiBinder