Unable to display value of input tag when converting xhtml

Post a reply

Unable to display value of input tag when converting xhtml

Postby psychic » Thu Aug 08, 2013 2:21 am

Hi there,

I'm able to convert xhtml to pdf file, but the value in each input tag can not be displayed in my exported pdf. Please can anyone help me or guide me to the right topic. Here is what I'm doing

Code: Select all
InputStream is = //code to get content input stream
WordprocessingMLPackage wordMLPackage = WordprocessingMLPackage.load(is);
CustomXmlDataStoragePart[] xmlParts =
                wordMLPackage.getCustomXmlDataStorageParts().values().toArray(new CustomXmlDataStoragePart[0]);
OpenDoPEHandler openDoPEHandler = new OpenDoPEHandler(wordMLPackage);
OpenDoPEIntegrity openDoPEIntegrity = new OpenDoPEIntegrity();

// replace the xml with actual data from the data source
xmlParts[0].getData().setDocument(new ByteArrayInputStream(sourceXml.getBytes()));

// process the xml content with binding components
openDoPEHandler.preprocess();
openDoPEIntegrity.process(wordMLPackage);
BindingHandler.applyBindings(wordMLPackage.getMainDocumentPart());
FileBackedOutputStream os = new FileBackedOutputStream(THRESHOLD);
RemovalHandler rh = new RemovalHandler();
rh.removeSDTs(wordMLPackage, Quantifier.ALL);
SaveToZipFile saver = new SaveToZipFile(wordMLPackage);
saver.save(os);


And my html code
Code: Select all
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></meta>
<style type="text/css">
#form_container
{
   background:#fff;
   border:1px solid #ccc;
   margin:0 auto;
   text-align:left;
   width:682px;
}
.appnitro {
    font-family: Arial,Helvetica,Tahoma,Verdana,sans-serif;
}
label.description {
    border: medium none;
    color: #222222;
    display: block;
    font-size: 10pt;
    line-height: 130%;
    padding: 0 0 1px;
}

#top
{
   display:block;
   height:10px;
   margin:10px auto 0;
   width:682px;
}

#footer a{
   color:#999999;
   text-decoration: none;
   border-bottom: 1px dotted #999999;
}

#bottom
{
   display:block;
   height:10px;
   margin:0 auto;
   width:682px;
}

.appnitro
{
   margin:20px 20px 0;
   padding:0 0 20px;
}
form li:after {
    clear: both;
    display: block;
    height: 0;
    visibility: hidden;
}
form li.section_break {
    padding-bottom: 0;
    padding-left: 9px;
    padding-top: 13px;
    width: 97% !important;
}
.appnitro li {
    width: 61%;
}
form li {
    display: block;
    margin: 0;
    padding: 4px 5px 2px 9px;
    position: relative;
}

h1.Header
{
   background-color:#dedede;
   margin:0;
   min-height:0;
   padding:0;
   text-decoration:none;
   text-indent:-8000px;
   
}

h1.Header a
{
   
   display:block;
   height:40px;
   overflow:hidden;
}


.form_description
{
   clear:both;
   display:inline-block;
   margin:0 0 1em;
}

.form_description[class]
{
   display:block;
   padding-left:9px;
}

.form_description h2
{
   clear:left;
   font-size:1.5em;
   margin:0 0 3px;
}

.form_description p
{
   font-size:12px;
   margin:0 0 12px;
}
form ul {
    font-size: 10pt;
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 100%;
}
.form_description[class] {
    display: block;
    padding-left: 9px;
}
.form_description {
    clear: both;
    display: inline-block;
    margin: 0 0 1em;
}
</style>
</head>
<div id="form_container">
   
      <h1 class="Header"><a>My sample header</a></h1>
      <form id="form_595650" class="appnitro"  method="post" action="">
      <div class="form_description">
         <center><b><h1>Sample</h1></b></center>
         <p>The longest paragraph ever
         </p>
      </div>                  
         <ul >
         <h2>User Information:</h2>
         <p>Please note that if ANY of the information that is pre-populated in this Section: User Information is incorrect, you MUST FIRST update your personal information.</p>
         <li class="section_break">
         <h3>1. User Information:</h3>
            <table class="Information_tbl">
            <tr>
               <td class="BorderNone" width="280px"><label class="description" for="element_firstName">First Name: </label></td>
               <td><input style="width:255px" id="element_firstName" name="element_firstName" class="element text medium" type="text" maxlength="255"></input> </td>
            </tr>
            <tr>
               <td class="BorderNone" width="280px"><label class="description" for="element_lastName">Last Name: </label></td>
               <td><input style="width:255px" id="element_lastName" name="element_lastName" class="element text medium" type="text" maxlength="255"></input></td>
            </tr>
            <tr>
               <td class="BorderNone" width="280px"><label class="description" for="element_email">Email Address: </label></td>
               <td><input style="width:255px" id="element_email" name="element_email" class="element text medium" type="text" maxlength="255"/> </td>
            </tr>
            </table><br></br>
         </li>
         </ul>
      </form>
</div>
</html>


Attached is my sample docx template.

Thanks in advanced
Attachments
sampletemplate.docx
(30.96 KiB) Downloaded 439 times
psychic
 
Posts: 7
Joined: Wed Jul 31, 2013 3:38 pm
Top

Re: Unable to display value of input tag when converting xht

Postby jason » Thu Aug 08, 2013 7:20 pm

I took your html, replaced "<" with "&lt;" (and same ">"), then manually stuck it into the custom xml part in your sampletemplate, in your /document/data/htmlProperty

Then I ran it through ContentControlBindingExtensions, and saw the XHTML successfully injected as WordML.

So I'm guessing at your sourceXml doesn't look like:

Syntax: [ Download ] [ Hide ]
Using xml Syntax Highlighting
<document><data><htmlProperty>
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt;&lt;/meta&gt;
  &lt;style type="text/css"&gt;
etc
 
Parsed in 0.000 seconds, using GeSHi 1.0.8.4


By the way, do you intend to use other features of OpenDoPE, or are you just converting XHTML?

If you are just importing XHTML, docx4j provides other ways to do this, which don't require you to author content controls etc.
jason
 
Posts: 4030
Joined: Wed Mar 19, 2008 11:47 pm
Top

Re: Unable to display value of input tag when converting xht

Postby psychic » Fri Aug 09, 2013 8:35 pm

Hi Jason,

Thank you for replying me.

I tried with ContentControlBindingExtensions but it didn't work. Actually, I already escape my html string before merge it into template and store in "sourceXml" variable. I think the problem is this row
Code: Select all
xmlParts[0].getData().setDocument(new ByteArrayInputStream(sourceXml.getBytes()));


sourceXml still has value of input tag, but after these row (I look into the log after System.out.print), the value is gone:
Code: Select all
   BindingHandler.applyBindings(wordMLPackage.getMainDocumentPart());
endTime = System.currentTimeMillis();
timingSummary.append("\nBindingHandler.applyBindings: " + (endTime-startTime));
System.out.println(
XmlUtils.marshaltoString(wordMLPackage.getMainDocumentPart().getJaxbElement(), true, true)
);


Do you have any ideas about this ?

Best regards
psychic
psychic
 
Posts: 7
Joined: Wed Jul 31, 2013 3:38 pm
Top

Re: Unable to display value of input tag when converting xht

Postby psychic » Fri Aug 09, 2013 8:50 pm

This is my sourceXml' s data

Code: Select all
<document>
  <data>
    <htmlProperty>&lt;html&gt;
&lt;head&gt;
  &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=UTF-8&quot; /&gt;
  &lt;style type=&quot;text/css&quot;&gt;
#form_container
{
   background:#fff;
   border:1px solid #ccc;
   margin:0 auto;
   text-align:left;
   width:682px;
}
.appnitro {
    font-family: Arial,Helvetica,Tahoma,Verdana,sans-serif;
}
label.description {
    border: medium none;
    color: #222222;
    display: block;
    font-size: 10pt;
    line-height: 130%;
    padding: 0 0 1px;
}

#top
{
   display:block;
   height:10px;
   margin:10px auto 0;
   width:682px;
}

#footer a{
   color:#999999;
   text-decoration: none;
   border-bottom: 1px dotted #999999;
}

#bottom
{
   display:block;
   height:10px;
   margin:0 auto;
   width:682px;
}

.appnitro
{
   margin:20px 20px 0;
   padding:0 0 20px;
}
form li:after {
    clear: both;
    display: block;
    height: 0;
    visibility: hidden;
}
form li.section_break {
    padding-bottom: 0;
    padding-left: 9px;
    padding-top: 13px;
    width: 97% !important;
}
.appnitro li {
    width: 61%;
}
form li {
    display: block;
    margin: 0;
    padding: 4px 5px 2px 9px;
    position: relative;
}

h1.Header
{
   background-color:#dedede;
   margin:0;
   min-height:0;
   padding:0;
   text-decoration:none;
   text-indent:-8000px;
   
}

h1.Header a
{
   
   display:block;
   height:40px;
   overflow:hidden;
}


.form_description
{
   clear:both;
   display:inline-block;
   margin:0 0 1em;
}

.form_description[class]
{
   display:block;
   padding-left:9px;
}

.form_description h2
{
   clear:left;
   font-size:1.5em;
   margin:0 0 3px;
}

.form_description p
{
   font-size:12px;
   margin:0 0 12px;
}
form ul {
    font-size: 10pt;
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 100%;
}
.form_description[class] {
    display: block;
    padding-left: 9px;
}
.form_description {
    clear: both;
    display: inline-block;
    margin: 0 0 1em;
}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;div id=&quot;form_container&quot;&gt;
   &lt;h1 class=&quot;Header&quot;&gt;&lt;a&gt;My sample header&lt;/a&gt;&lt;/h1&gt;
   &lt;form id=&quot;form_595650&quot; class=&quot;appnitro&quot; method=&quot;post&quot; action=&quot;&quot;&gt;
    &lt;div class=&quot;form_description&quot;&gt;
     &lt;center&gt;
      &lt;b&gt;&lt;h1&gt;Sample&lt;/h1&gt;&lt;/b&gt;
     &lt;/center&gt;
     &lt;p&gt;The longest paragraph ever &lt;/p&gt;
    &lt;/div&gt;
    &lt;ul&gt;
     &lt;h2&gt;User Information:&lt;/h2&gt;
     &lt;p&gt;Please note that if ANY of the information that is pre-populated in this Section: User Information is incorrect, you MUST FIRST update your personal information.&lt;/p&gt;
     &lt;li class=&quot;section_break&quot;&gt; &lt;h3&gt;1. User Information:&lt;/h3&gt;
      &lt;table class=&quot;Information_tbl&quot;&gt;
       &lt;tbody&gt;
        &lt;tr&gt;
         &lt;td class=&quot;BorderNone&quot; width=&quot;280px&quot;&gt;&lt;label class=&quot;description&quot; for=&quot;element_firstName&quot;&gt;First Name: &lt;/label&gt;&lt;/td&gt;
         &lt;td&gt;&lt;input style=&quot;width:255px&quot; id=&quot;element_firstName&quot; name=&quot;element_firstName&quot; class=&quot;element text medium&quot; type=&quot;text&quot; maxlength=&quot;255&quot; value=&quot;Ultricies Nam&quot; /&gt; &lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
         &lt;td class=&quot;BorderNone&quot; width=&quot;280px&quot;&gt;&lt;label class=&quot;description&quot; for=&quot;element_lastName&quot;&gt;Last Name: &lt;/label&gt;&lt;/td&gt;
         &lt;td&gt;&lt;input style=&quot;width:255px&quot; id=&quot;element_lastName&quot; name=&quot;element_lastName&quot; class=&quot;element text medium&quot; type=&quot;text&quot; maxlength=&quot;255&quot; value=&quot;Vivamus&quot; /&gt;&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
         &lt;td class=&quot;BorderNone&quot; width=&quot;280px&quot;&gt;&lt;label class=&quot;description&quot; for=&quot;element_email&quot;&gt;Email Address: &lt;/label&gt;&lt;/td&gt;
         &lt;td&gt;&lt;input style=&quot;width:255px&quot; id=&quot;element_email&quot; name=&quot;element_email&quot; class=&quot;element text medium&quot; type=&quot;text&quot; maxlength=&quot;255&quot; value=&quot;doesnotexist@genixventures.com&quot; /&gt; &lt;/td&gt;
        &lt;/tr&gt;
       &lt;/tbody&gt;
      &lt;/table&gt;&lt;br /&gt;&lt;br /&gt; &lt;/li&gt;
    &lt;/ul&gt;
   &lt;/form&gt;
  &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;</htmlProperty>
  </data>
  <today>09 Aug 2013</today>
  <currentTime>16:29</currentTime>
</document>
psychic
 
Posts: 7
Joined: Wed Jul 31, 2013 3:38 pm
Top

Re: Unable to display value of input tag when converting xht

Postby jason » Fri Aug 09, 2013 10:23 pm

Make your xml look like:

Syntax: [ Download ] [ Hide ]
Using xml Syntax Highlighting
<document><data><htmlProperty>
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt;&lt;/meta&gt;
  &lt;style type="text/css"&gt;
etc
 
Parsed in 0.000 seconds, using GeSHi 1.0.8.4


then use ContentControlsMergeXML
jason
 
Posts: 4030
Joined: Wed Mar 19, 2008 11:47 pm
Top

Re: Unable to display value of input tag when converting xht

Postby psychic » Sun Aug 18, 2013 10:46 pm

I'm sorry for my stupid. But I can't get the right result, even using ContentControlsMergeXML.
Yes, I forgot to replace "&quot;" with " \" ". I already did that, and below is my xhtml:

Code: Select all
<document><data><htmlProperty>
&lt;html&gt;
&lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt; &lt;/meta&gt;
  &lt;style type="text/css"&gt;
#form_container
{
   background:#fff;
   border:1px solid #ccc;
   margin:0 auto;
   text-align:left;
   width:682px;
}
.appnitro {
    font-family: Arial,Helvetica,Tahoma,Verdana,sans-serif;
}
label.description {
    border: medium none;
    color: #222222;
    display: block;
    font-size: 10pt;
    line-height: 130%;
    padding: 0 0 1px;
}

#top
{
   display:block;
   height:10px;
   margin:10px auto 0;
   width:682px;
}

#footer a{
   color:#999999;
   text-decoration: none;
   border-bottom: 1px dotted #999999;
}

#bottom
{
   display:block;
   height:10px;
   margin:0 auto;
   width:682px;
}

.appnitro
{
   margin:20px 20px 0;
   padding:0 0 20px;
}
form li:after {
    clear: both;
    display: block;
    height: 0;
    visibility: hidden;
}
form li.section_break {
    padding-bottom: 0;
    padding-left: 9px;
    padding-top: 13px;
    width: 97% !important;
}
.appnitro li {
    width: 61%;
}
form li {
    display: block;
    margin: 0;
    padding: 4px 5px 2px 9px;
    position: relative;
}

h1.Header
{
   background-color:#dedede;
   margin:0;
   min-height:0;
   padding:0;
   text-decoration:none;
   text-indent:-8000px;
   
}

h1.Header a
{
   
   display:block;
   height:40px;
   overflow:hidden;
}


.form_description
{
   clear:both;
   display:inline-block;
   margin:0 0 1em;
}

.form_description[class]
{
   display:block;
   padding-left:9px;
}

.form_description h2
{
   clear:left;
   font-size:1.5em;
   margin:0 0 3px;
}

.form_description p
{
   font-size:12px;
   margin:0 0 12px;
}
form ul {
    font-size: 10pt;
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 100%;
}
.form_description[class] {
    display: block;
    padding-left: 9px;
}
.form_description {
    clear: both;
    display: inline-block;
    margin: 0 0 1em;
}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;div id="form_container"&gt;
   &lt;h1 class="Header"&gt;&lt;a&gt;My sample header&lt;/a&gt;&lt;/h1&gt;
   &lt;form id="form_595650" class="appnitro" method="post" action=""&gt;
    &lt;div class="form_description"&gt;
     &lt;center&gt;
      &lt;b&gt;&lt;h1&gt;Sample&lt;/h1&gt;&lt;/b&gt;
     &lt;/center&gt;
     &lt;p&gt;The longest paragraph ever &lt;/p&gt;
    &lt;/div&gt;
    &lt;ul&gt;
     &lt;h2&gt;User Information:&lt;/h2&gt;
     &lt;p&gt;Please note that if ANY of the information that is pre-populated in this Section: User Information is incorrect, you MUST FIRST update your personal information.&lt;/p&gt;
     &lt;li class="section_break"&gt; &lt;h3&gt;1. User Information:&lt;/h3&gt;
      &lt;table class="Information_tbl"&gt;
       &lt;tbody&gt;
        &lt;tr&gt;
         &lt;td class="BorderNone" width="280px"&gt;&lt;label class="description" for="element_firstName"&gt;First Name: &lt;/label&gt;&lt;/td&gt;
         &lt;td&gt;&lt;input style="width:255px" id="element_firstName" name="element_firstName" class="element text medium" type="text" maxlength="255" value="Ultricies Nam" &gt; &lt;/input&gt; &lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
         &lt;td class="BorderNone" width="280px"&gt;&lt;label class="description" for="element_lastName"&gt;Last Name: &lt;/label&gt;&lt;/td&gt;
         &lt;td&gt;&lt;input style="width:255px" id="element_lastName" name="element_lastName" class="element text medium" type="text" maxlength="255" value="Vivamus" &gt; &lt;/input&gt;&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
         &lt;td class="BorderNone" width="280px"&gt;&lt;label class="description" for="element_email"&gt;Email Address: &lt;/label&gt;&lt;/td&gt;
         &lt;td&gt;&lt;input style="width:255px" id="element_email" name="element_email" class="element text medium" type="text" maxlength="255" value="doesnotexist@mailinator.com" &gt;&lt;/input&gt; &lt;/td&gt;
        &lt;/tr&gt;
       &lt;/tbody&gt;
      &lt;/table&gt;&lt;br /&gt;&lt;br /&gt; &lt;/li&gt;
    &lt;/ul&gt;
   &lt;/form&gt;
  &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;</htmlProperty>
  </data>
  <today>09 Aug 2013</today>
  <currentTime>16:29</currentTime>
</document>


In additional, I used docx4j-2.7.1, serializer-2.7.1, xalan-2.7.1, jaxb-xmldsig-core-1.0.0, itext-2.1.7 to run your example. Please help or point me to the incorrect part of my xhtml.
Attached sample.docx is my exported file from my code, and export file from ContentControlsMergeXML .

Thank you
Attachments
sample.docx
(31.67 KiB) Downloaded 434 times
OUT_ContentControlsMergeXML.docx
(31.57 KiB) Downloaded 356 times
psychic
 
Posts: 7
Joined: Wed Jul 31, 2013 3:38 pm
Top

Re: Unable to display value of input tag when converting xht

Postby psychic » Fri Aug 30, 2013 8:25 pm

Hi Jason,

I have found this while debug through your code:
<input> tag which is converted to 'Blockbox - type: inline-block' IS IGNORED in method of XHTMLImporter

Code: Select all
private void traverse(Box box, List<Object> contentContext, Box parent, TableProperties tableProperties) throws Docx4JException
{
....
if (box.getStyle().getDisplayMine().equals("inline") ) {
...
} else if (box instanceof org.docx4j.org.xhtmlrenderer.newtable.TableSectionBox) {
...
} else if (box instanceof org.docx4j.org.xhtmlrenderer.newtable.TableBox)  {
...
} else if (e.getNodeName().equals("table") ) {
...
} else if (box instanceof org.docx4j.org.xhtmlrenderer.newtable.TableRowBox) {
...
} else if (box instanceof org.docx4j.org.xhtmlrenderer.newtable.TableCellBox) {
..
} else {
}
}


so that input tag doesn't get display in my exported doc. Have you meet this issue before ? If yes, is the fixed included in latest nightly build ? If no, can I make some modification to fix my problem ? Or please point me to incorrect point in my investigation.

Thanks in Advanced
psychic
psychic
 
Posts: 7
Joined: Wed Jul 31, 2013 3:38 pm
Top

Re: Unable to display value of input tag when converting xht

Postby jason » Fri Aug 30, 2013 9:20 pm

Sorry, I hadn't realised you were referring to a form <input> tag; I thought you were referring to input xhtml generally.

The XHTML Import doesn't currently support that tag. (What should it become? A content control, or a legacy form field, or something else?)

I also just noticed you mentioned you were using docx4j-2.7.1. Importing XHTML wasn't part of 2.7.1.

In current nightlies, its been made into a separate project: http://www.docx4java.org/docx4j/docx4j- ... 130829.jar

I'd recommend you use that in conjunction with a current docx4j nightly (you can't use it with 2.8.1, and using it with anything earlier .. well .. )
jason
 
Posts: 4030
Joined: Wed Mar 19, 2008 11:47 pm
Top
Post a reply

Return to XHTML import

Who is online

Users browsing this forum: No registered users and 15 guests

Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group
Style by Marc Alexander © 2007 - 2010

phpBB SEO

x