java - 如何使用 RenderSnake 库将 CSS 应用于 HTML 表格？

Question

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

PoolName    TotalSyncCount  TotalAsyncCount SyncNinetyFivePercentile    AsyncNinetyFivePercentile

Hello          100              100             4                           0
World          300              300             2                           0

PoolName、TotalSyncCount、TotalAsyncCount、SyncNinetyFivePercentile 和 AsyncNinetyFivePercentile 是我的列名。

下面是我可以使用 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，但我不确定如何应用。一般来说，我想用这个 CSS在我的上表中使用 RenderSnake 库。

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

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

我熟悉 HTML 和 CSS 及其工作原理，但对 RenderSnake 库及其使用方法感到困惑。

Answer 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 设置为内联样式。此外，由于许多电子邮件客户端可能会删除标题部分，因此推荐使用内联样式 - 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 源代码中可见):

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

所以因为这些包裹在body中的style-tags的classes也可能被邮件客户端移除，所以应该建议按照设置html-attributes的例子中提到的方式添加内联样式这里:http://rendersnake.org/devguide.html#attributes

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 电子邮件的问题在那里有很好的描述)和其中一个答案中提到的工具链接 SO-post: http://templates.mailchimp.com/resources/inline-css/