【问题标题】:How to apply CSS to an HTML table using RenderSnake library?如何使用 RenderSnake 库将 CSS 应用于 HTML 表格?
【发布时间】:2014-11-08 12:49:23
【问题描述】:

我正在尝试使用Render Snake HTML 库以编程方式为我生成 HTML。我正在尝试使用RenderSnake 制作一个 HTML 表格,如下所示。

PoolName    TotalSyncCount  TotalAsyncCount SyncNinetyFivePercentile    AsyncNinetyFivePercentile

Hello          100              100             4                           0
World          300              300             2                           0

这里PoolNameTotalSyncCountTotalAsyncCountSyncNinetyFivePercentileAsyncNinetyFivePercentile 是我的列名。

下面是我可以使用RenderSnake 库创建的示例,它会为我生成 HTML。

public class RendersnakeTest {

    public static void main(String[] args) throws IOException {

        List<PoolMetrics> poolMetricsList = new ArrayList<>();
        poolMetricsList.add(new PoolMetrics("A", "0", "0", "0", "0"));
        poolMetricsList.add(new PoolMetrics("A", "1", "1", "1", "1"));
        poolMetricsList.add(new PoolMetrics("A", "2", "2", "2", "2"));
        poolMetricsList.add(new PoolMetrics("A", "3", "3", "3", "3"));
        poolMetricsList.add(new PoolMetrics("A", "4", "4", "4", "4"));

        HtmlCanvas html = new HtmlCanvas();
        html.html().body().table().tr().th().content("PoolName").th().content("TotalSyncCount").th()
                .content("TotalAsyncCount").th().content("SyncNinetyFivePercentile").th()
                .content("AsyncNinetyFivePercentile")._tr();

        // add the rows
        for (PoolMetrics pool : poolMetricsList) {
            html.tr()
                    .td(class_("city-table")).content(pool.getPoolName())
                    .td().content(pool.getTotalAsyncCount())
                    .td().content(pool.getTotalSyncCount())
                    .td().content(pool.getSyncNinetyFivePercentile())
                    .td().content(pool.getAsyncNinetyFivePercentile())
                ._tr();
        }

        // close the table
        html._table()._body()._html();

        // write the file
        final String rendered = html.toHtml();
        final File output = new File("c:/output.html");
        Files.write(output.toPath(), rendered.getBytes("UTF-8"), StandardOpenOption.TRUNCATE_EXISTING);

        // and send out an html email with above table
        // so at this moment I would like to have css embedded in my html table so that once I receive html email
        // it should have applied css in it
        SendEmail.getInstance().sendEmail("abc@host.com", "abc@host.com", "TestSubject", html.toHtml());
    }
}

class PoolMetrics {

    private String poolName;
    private String totalSyncCount;
    private String totalAsyncCount;
    private String syncNinetyFivePercentile;
    private String asyncNinetyFivePercentile;

    public PoolMetrics(String poolName, String totalSyncCount, String totalAsyncCount, String syncNinetyFivePercentile, String asyncNinetyFivePercentile) {
        this.poolName = poolName;
        this.totalSyncCount = totalSyncCount;
        this.totalAsyncCount = totalAsyncCount;
        this.syncNinetyFivePercentile = syncNinetyFivePercentile;
        this.asyncNinetyFivePercentile = asyncNinetyFivePercentile;
    }

    public String getPoolName() {
        return poolName;
    }

    public String getTotalSyncCount() {
        return totalSyncCount;
    }

    public String getTotalAsyncCount() {
        return totalAsyncCount;
    }

    public String getSyncNinetyFivePercentile() {
        return syncNinetyFivePercentile;
    }

    public String getAsyncNinetyFivePercentile() {
        return asyncNinetyFivePercentile;
    }
}

问题陈述:

现在我想在上表中应用 CSS,但我不知道如何应用。一般来说,我想使用RenderSnake 库在上表中使用这个CSS

我无法从他们的文档中了解如何应用 CSS。谁能帮我做这件事?

我无法理解的是我们将 CSS 文件放在哪里,以便它可以在我的桌子上应用那个 CSS,以及我的程序如何知道它必须应用这个 CSS。一般来说,我会将我的表格作为 HTML 电子邮件的一部分发送出去,因此在电子邮件中它应该将所有 CSS 嵌入表格中。

我熟悉 HTML 和 CSS 以及它们的工作原理,但对 RenderSnake 库以及如何使用它感到困惑。

【问题讨论】:

    标签: java html css


    【解决方案1】:

    鉴于RenderSnake Examples 此处的示例,您必须缺少创建头部分,您可以在其中添加链接样式表,如下所示:

    public class Head implements Renderable {
    
      public void renderOn(HtmlCanvas html) throws IOException {
    
        html
            .head()
               .macros().stylesheet("htdocs/style-01.css"))
            ._head();           
       }
    }  
    

    完整示例:

    public class Head implements Renderable {
    
      public void renderOn(HtmlCanvas html) throws IOException {
    
        html
            .head()
                .title().content(canvas.getPageContext().getString("title"))
                .meta(name("description").add("content","renderSnake doc",false))
                .macros().stylesheet("htdocs/style-01.css"))
                .render(JQueryLibrary.core("1.4.3"))
                .render(JQueryLibrary.ui("1.8.6"))
                .render(JQueryLibrary.baseTheme("1.8"))
            ._head();           
      }
    }
    

    剩下的一个问题是您将如何发送电子邮件 - 并非每个邮件应用程序都能够将带有链接样式表的头部附加到电子邮件中。如果您的邮件应用程序不是,您应该考虑将 CSS 设置为内联样式。此外,由于许多电子邮件客户端可能会删除 head-section,因此推荐使用内联样式 - http://www.benchmarkemail.com/help-FAQ/answer/Using-CSS-in-HTML-emails

    还有对 RenderSnake 项目所有者 Ernest Micklei Simple HTML Output From Java Using renderSnake 的采访,其中有一个在添加 HTML 输出时设置样式的示例,但不建议使用这种方法,因为样式在附加元素上方设置为 css-class:

    public class Logo implements Renderable {
    public void renderOn(HtmlCanvas html) throws IOException { //@formatter:off
        html
            .div(id("logo"))
                .div(id("logo_text"))
                    .h1()
                        .a(href("index.html"))
                            .write("render")
                            .style().write(".snake { color:yellow; }")._style()
                            .span(class_("snake")).write("S")._span()
                            .write("nake")
                        ._a()
                    ._h1()._div()
                ._div();
        }
    }  
    

    这将导致(在 RenderSnake 站点 html-source 中可以看到):

    <a href="index.html">render<style>.snake { color:yellow; }</style>  
    <span class="snake">S</span>nake</a>  
    

    因此,由于这些包裹在正文中的样式标签中的类也可能被电子邮件客户端删除,因此应建议按照此处设置 html-attributes 的示例中提到的相同方式添加内联样式:@987654324 @

    html.div(id("me").class_("hidden")).content("Invisible text");  
    

    例如

    html.td(style("color:#000000;")).content("Black text");  
    

    如果还没有完成,有必要

    import static org.rendersnake.HtmlAttributesFactory.*  
    

    为此。

    如果这不起作用,上面的链接也提到可以添加新属性:

    new HtmlAttributes("key","value").add("another-key","another-value");
    

    但我猜 RenderSnake 已经包含了样式属性。

    作为进一步的参考:Best practices for styling HTML emails,这里有一些有用的信息:http://kb.mailchimp.com/campaigns/ways-to-build/using-css-in-campaigns(虽然我不推荐任何特殊的邮件服务,CSS 和 HTML-email 的问题在那里有很好的描述)和其中提到的工具链接的SO-post的答案:http://templates.mailchimp.com/resources/inline-css/

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2011-01-03
      • 2011-07-16
      • 1970-01-01
      • 1970-01-01
      • 2015-12-31
      • 2012-06-10
      相关资源
      最近更新 更多