ADF页面的输出样式_html/css_WEB-ITnose

JDev version: 11.1.2.0.0

ADF页面的打印样式、邮件样式通常比普通样式简单，打印时有许多不需要显示的内容（按钮、滚动条），邮件样式尽可能简单以便在邮件中正常操作。

可以使用ADF提供的变量adfFacesContext.outputMode来控制组件是否显示显示：

rendered="#{adfFacesContext.outputMode != "email"}"/>

adfFacesContext.outputMode对应的API如下， 可以使用它取得页面样式：

AdfFacesContext.getOutputMode()

1，打印样式 printable

showPrintablePageBehavior 加到commandButton 中，打印commandButton 所在布局控件panelSplitter 、panelAccordion 、或者页面标签树的root节点包含的内容，打印时buttons、 tabs、scrollbars将会被忽略掉。

ADF页面：

对应的打印样式：

2，邮件样式 emailable

1）无法引用外部stylesheets，email页面与原页面肯定不同。

2）ADF会进行JSF页面的自动conversion来适应Microsoft Outlook、 Mozilla Thunderbird、Gmail

3）不是所有的组件都能显示在邮件样式中，下面是可以转换到邮件样式的组件

document

panelHeader

panelFormLayout

panelGroupLayout

panelList

spacer

showDetailHeader

inputText (renders as readOnly)

inputComboBoxListOfValues (renders as readOnly)

inputNumberSlider (renders as readOnly)

inputNumberSpinbox (renders as readOnly)

inputRangeSlider (renders as readOnly)

outputText

selectOneChoice (renders as readOnly)

panelLabelAndMessage

image

table

column

goLink (renders as text)

commandImageLink (renders as text)

commandLink (renders as text)

goImageLink (renders as text)

如何创建邮件样式：

在当前的URL中加 org.apache.myfaces.trinidad.agent.email=true

邮件样式的皮肤：

af|table {

border: 1px solid #636661;

}

@agent email {

af|table

{border:none}

}

运行时：

在 Render Response 阶段，如果ADF Faces框架接收到request参数 org.apache.myfaces.trinidad.agent.email=true ，监听器设置了一个内部标识，然后框架做如下处理：

1）Remove any JavaScript from the HTML.

2）Add all CSS to the page, but only for components included on the page.

3）Remove the CSS link from the HTML.

4）Convert all relative links to absolute links.

5）Render images with absolute URLs.

在URL中增加oracle.adf.view.rich.render.emailContentType=multipart/related，可以将HTML转换为MIME（图片可以在offline状态下浏览）。完整的request参数为：org.apache.myfaces.trinidad.agent.email=true&oracle.adf.view.rich.render.emailContentType=multipart/related

ADF页面：

对应的邮件样式：

技巧：

1）使用inlineStyle，在保证普通ADF页面布局不变的情况下，正常显示Email样式。

2）最后一列stretch，需要给最后一列设置个合理的宽度。

3）CSS问题导致af:table无上边框，可以设置Column的header样式。

4）要设置af:table 列头居中，列内容靠左、靠右等。