I had to spend a little time figuring out how to do this, so I thought I would share the solution approach I used in case anyone else needs to do this:
Requirement Scenario: Formatted text provided in Microsoft Word document that is several pages long. Document needs to be displayed on the web page with near-identical formatting. Also, need to add Radio Button Control to ask user to agree, or, to not agree to the terms shown in the document (in other words requirements for both HTML and ADF Faces on the same web page.)
1. In Microsoft Word Document - use File | Save As | Web Page Filtered to save as an HTML document. Using the filtered option prevents MS Word from including all the MS Office markup crud.
2. Create a new .JSP page. Normally I use .JSPX pages, but because we will use the f:verbatim tag, .JSP allows direct copy of HTML source from the source of the MS Word HTML document, while .JSPX would require modification of the HTML tags (i.e., <gt> to '>>').
3. Open the HTML version of the MS Word document (from step #1) using a web browser and select 'view source'.
3a. Copy everything from the <head> section of the HTML source to within the <afh:head> section of the .JSP document. Enclose all of the newly inserted code within a set of <f:verbatim escape="false"> </f:verbatim> tags. Note - in my case, I decided not to do this step because the style sheets & formatting from the MS Word document interfered with the formatting for my menus on the .JSP page. I probably could have worked around this, but I decided to use the default formatting already in place.
3b. Copy everything within the <body> section of the MS Word HTML source document (not including the <body> tag itself) and paste into the .JSP document within the following tag hierachy: <afh:body><h:form><af:panelPage><f:verbatim escape="false"> INSERT HTML CODE HERE </f:verbatim></af:panelPage></h:form><afh:body>. Of course the af:panelPage tag is optional. Alternatively, the <f:verbatim> HTML code </f:verbatim> tags can be placed outside of the </h:form> tags.
4. Create ADF Faces controls as normal within the <h:form> tag set, but outside of the <f:verbatim> tags.
5. A couple of additional notes:
* you may see some errors highlighted within the HTML code on the page - you should be able to ignore these if they are within the <f:verbatim> section
* its not a good idea to select 'Reformat' to re-format the layout on the page - maybe you should be able to do this, but I ran into some issues.
Example:
<!--
<f:view>
<afh:html>
<afh:head title="page">
<meta http-equiv="Content-Type"
content="text/html; charset=windows-1252"/>
<title>page tite</title>
</afh:head>
<afh:body>
<af:messages/>
<h:form>
<af:panelPage title="Page Title">
<af:selectOneRadio id="radioaccept" value="#{bindings.vo1accept.inputValue}"
layout="vertical" label="" required="true"
requiredMessageDetail="Selection Required. Please indicate whether or not you Agree with this Business Agreement."
autoSubmit="true" inlineStyle="font-weight:bold;">
<af:selectItem label="I Agree" value="1"/>
<af:selectItem label="I Do Not Agree" value="0"/>
</af:selectOneRadio>
<f:verbatim escape="false">
<div class=Section1>
<p class=MsoNormal align=center style='text-align:center'><b><span
style='font-size:14.0pt'>Business Agreement</span></b></p>
(HTML Code continued.............................)
</f:verbatim>
</af:panelPage>
</h:form>
</afh:body>
</afh:html>
</f:view> -->
Hope this can help someone.
javaX