The .xsl View Files

 <  Day Day Up  >  

The .xsl View Files

Views in InfoPath are created dynamically using XSLT 1.0 stylesheets ( .xsl files), with one XSLT file corresponding to each view that has been created in the form template. The Microsoft flavor of XSLT is almost 100% compliant with the XSLT 1.0 Recommendation from the W3C, so if you are familiar with any flavor of XSLT 1.0, it is unlikely that you will run into implementation-specific syntax difficulties when editing XSLT files in InfoPath.

SHOP TALK
PRESERVING HAND-EDITED XSLT CODE

When you make hand edits in XSLT and later work in the InfoPath client in design mode, the edits might be overwritten by the XSLT code generator. To protect code from being overwritten, you must use a mode attribute with the value of xd:preserve on each xsl:template element whose content you want to preserve.

Using xd:preserve as a value of the mode attribute on an xsl:template element means that it is difficult to use the mode attribute for its typical purpose of processing part of the source XML (in InfoPath, the data source) more than once. One way around this difficulty is to create two InfoPath views, each of which displays the data in a specific way, and perhaps provide a button to toggle easily between the views.


The InfoPath client dynamically applies the XSLT stylesheet that corresponds to the view chosen in the InfoPath client by the designer or user . The XSLT stylesheet uses information from each field in the data source when creating the view.

The XSLT stylesheet extracted from SimpleControls.xsn , view1.xsl , is shown in Listing 15.3.

Listing 15.3. The XSLT Stylesheet Extracted from SimpleControls.xsn
 <?xml version="1.0" encoding="UTF-8"?> <xsl:stylesheet  version="1.0"  xmlns:my="http://schemas.microsoft.com/office/infopath/2003/myXSD/2003-12-13T15:12:34"  xmlns:xsl="http://www.w3.org/1999/XSL/Transform"  xmlns:msxsl="urn:schemas-microsoft-com:xslt"  xmlns:xd="http://schemas.microsoft.com/office/infopath/2003"  xmlns:x="urn:schemas-microsoft-com:office:excel"  xmlns:xdExtension="http://schemas.microsoft.com/office/infopath/2003/xslt/extension"  xmlns:xdXDocument="http://schemas.microsoft.com/office/infopath/2003/xslt/xDocument"  xmlns:xdSolution="http://schemas.microsoft.com/office/infopath/2003/xslt/solution"  xmlns:xdFormatting="http://schemas.microsoft.com/office/infopath/2003/xslt/formatting"  xmlns:xdImage="http://schemas.microsoft.com/office/infopath/2003/xslt/xImage">  <xsl:output method="html" indent="no"/>  <xsl:template match="my:myFields">  <html>   <head>   <style tableEditor="TableStyleRulesID">TABLE.xdLayout TD {    BORDER-RIGHT: medium none; BORDER-TOP: medium none; BORDER-LEFT: medium none;    BORDER-BOTTOM: medium none    }    TABLE {    BEHAVIOR: url (#default#urn::tables/NDTable)   }   TABLE.msoUcTable TD {    BORDER-RIGHT: 1pt solid; BORDER-TOP: 1pt solid; BORDER-LEFT: 1pt solid;    BORDER-BOTTOM: 1pt solid   } </style>   <meta http-equiv="Content-Type" content="text/html"></meta>   <style controlStyle="controlStyle">    BODY{margin-left:21px;color:windowtext;background-color:window;layout-grid:none;}    .xdListItem {display:inline-block;width:100%;vertical-align:text-top;}    .xdListBox,.xdComboBox{margin:1px;}    .xdInlinePicture{margin:1px; BEHAVIOR: url(#default#urn::xdPicture) }    .xdLinkedPicture{    margin:1px; BEHAVIOR: url(#default#urn::xdPicture) url(#default#urn::controls/Binder) }    .xdSection{border:1pt solid #FFFFFF;margin:6px 0px 6px 0px;padding:1px 1px 1px 5px;}    .xdRepeatingSection{border:1pt solid #FFFFFF;margin:6px 0px 6px 0px;    padding:1px 1px 1px 5px;}    .xdBehavior_Formatting {    BEHAVIOR: url(#default#urn::controls/Binder) url(#default#Formatting);}    .xdBehavior_FormattingNoBUI{     BEHAVIOR: url(#default#CalPopup) url(#default#urn::controls/Binder)     url(#default#Formatting);}    .xdExpressionBox{margin: 1px;padding:1px;word-wrap: break-word;    text-overflow: ellipsis;overflow-x:hidden;}    .xdBehavior_GhostedText,.xdBehavior_GhostedTextNoBUI{    BEHAVIOR: url(#default#urn::controls/Binder) url(#default#TextField)    url(#default#GhostedText);}    .xdBehavior_GTFormatting{    BEHAVIOR: url(#default#urn::controls/Binder) url(#default#Formatting)    url(#default#GhostedText);}    .xdBehavior_GTFormattingNoBUI{    BEHAVIOR: url(#default#CalPopup) url(#default#urn::controls/Binder)    url(#default#Formatting) url(#default#GhostedText);}    .xdBehavior_Boolean{    BEHAVIOR: url(#default#urn::controls/Binder) url(#default#BooleanHelper); }    .xdBehavior_Select{BEHAVIOR: url(#default#urn::controls/Binder) url(#default#SelectHelper);}    .xdRepeatingTable{    BORDER-TOP-STYLE: none; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none;    BORDER-BOTTOM-STYLE: none; BORDER-COLLAPSE: collapse;    WORD-WRAP: break-word;}    .xdTextBox{display:inline-block;white-space:nowrap;    text-overflow:ellipsis;;padding:1px;margin:1px;    border: 1pt solid #dcdcdc;color:windowtext;background-color:window;overflow:hidden;    text-align:left;}    .xdRichTextBox{display:inline-block;;padding:1px;margin:1px;    border: 1pt solid #dcdcdc;color:windowtext;background-color:window;    overflow-x:hidden;word-wrap:break-word;text-overflow:ellipsis;    text-align:left;font-weight:normal;font-style:normal;text-decoration:none;    vertical-align:baseline;}    .xdDTPicker{;display:inline;margin:1px;margin-bottom: 2px;    border: 1pt solid #dcdcdc;color:windowtext;background-color:window;overflow:hidden;}    .xdDTText{height:100%;width:100%;margin-right:22px;overflow:hidden;padding:0px;    white-space:nowrap;}    .xdDTButton{margin-left:-21px;height:18px;width:20px;    behavior: url(#default#DTPicker);}    .xdRepeatingTable TD {VERTICAL-ALIGN: top;}   </style>   <style languageStyle="languageStyle">    BODY {    FONT-SIZE: 10pt; FONT-FAMILY: Verdana}    TABLE {    FONT-SIZE: 10pt; FONT-FAMILY: Verdana}    SELECT {    FONT-SIZE: 10pt; FONT-FAMILY: Verdana}    .optionalPlaceholder {    PADDING-LEFT: 20px; FONT-WEIGHT: normal; FONT-SIZE: xx-small;    BEHAVIOR: url(#default#xOptional); COLOR: #333333; FONT-STYLE: normal;    FONT-FAMILY: Verdana; TEXT-DECORATION: none}    .langFont {    FONT-FAMILY: Verdana}   </style>   </head>   <body>   <div>    <span class="xdTextBox" hideFocus="1" title="" xd:binding="my:field1" tabIndex="0" xd:xctname="PlainText" xd:CtrlId="CTRL1" style="WIDTH: 130px">    <xsl:value-of select="my:field1"/>    </span>   </div>   <div>    <select class="xdComboBox xdBehavior_Select" title="" size="1" xd:binding="my:field2" tabIndex="0" xd:xctname="DropDown" xd:CtrlId="CTRL2" xd:boundProp="value" style="WIDTH: 130px">    <xsl:attribute name="value">     <xsl:value-of select="my:field2"/>    </xsl:attribute>    <option value="">     <xsl:if test="my:field2=&quot;&quot;">     <xsl:attribute name="selected">selected</xsl:attribute>     </xsl:if>Select...</option>    </select>   </div>   <div> </div>   <div> </div>   <div>    <input class="langFont" title="" type="button" value="Button"    xd:xctname="Button" xd:CtrlId="CTRL3_5" tabIndex="0"/>   </div>   <div> </div>   </body>  </html>  </xsl:template> </xsl:stylesheet> 

The XSLT stylesheet is straightforward, if you ignore the three style elements in the head element of the HTML it creates.

OVERRIDING DEFAULT STYLES

If you want to apply custom styling, it's best to avoid editing the built-in style elements. You can insert another style element after the built-in style elements and add custom styling there. Using the !important CSS directive in your custom style rules means that they will override any corresponding CSS rules created automatically by the InfoPath client.


The xsl:output element indicates that the output is HTML. Microsoft states that the output is XHTML, which ought to be produced with the method attribute having a value of xml (all lowercase). In fact, the XSLT stylesheet produces a Microsoft-specific hybrid of HTML and XHTML. The absence of a default namespace declaration for, say, XHTML 1.0, confirms the hybrid nature of the output. Because the Internet Explorer rendering engine happily accepts the hybrid, it shouldn't cause you any practical problems.

There is only a single xsl:template element, which matches the my:myFields element that corresponds to the my:myFields group in the InfoPath data source for SimpleControls.xsn .

The content of the three style elements is considerably more readable, believe it or not, than the code produced by InfoPath. Editing style information is a horrible task in InfoPath 2003. As mentioned in the sidebar "External CSS Style Sheets," there is unfortunately no way to easily use external CSS style sheets in InfoPath 2003.

Many of the CSS rules in the style elements use InfoPath-specific classes, indicated by the initial xd in the names of classes such as xdDTPicker (which is used in an InfoPath date picker form control).

EXTERNAL CSS STYLE SHEETS

Unfortunately, the initial release of InfoPath 2003 doesn't allow for the easy use of external CSS style sheets. Styling in InfoPath's XSLT stylesheets is achieved using style element(s) in the head of the XHTML file plus style attributes, as appropriate, in elements where a custom style has, for example, been applied in InfoPath to a form control.

The ability to use external CSS style sheets in an enterprise tool seems necessary to me. It would make corporate styling (and re-styling) of large numbers of form templates much easier.


Let's look briefly at how InfoPath uses XSLT to create HTML/XHTML controls.

Creating a Text Box Form Control

The following XSLT code is used in the stylesheet to create the HTML/XHTML corresponding to the text box form control:

 <div>  <span  class="xdTextBox"  hideFocus="1"  title=""  xd:binding="my:field1"  tabIndex="0"  xd:xctname="PlainText"  xd:CtrlId="CTRL1"  style="WIDTH: 130px">  <xsl:value-of select="my:field1"/>  </span> </div> 

A div element is used to contain the form control. The CSS class xdTextBox is used to specify how the span element is to be displayed. In other words, an InfoPath text box is not created using the HTML/XHTML input element, as you might have expected.

The xd:binding attribute of the span element indicates the field in the InfoPath data source to which the text box is to be bound.

The xd:CtrlID attribute of the span element indicates the name of the form control that will be used in any script code.

The xsl:value-of element is used to specify that the value displayed in the text box is the value in the my:field1 field of the data source.

Creating a Drop-Down List Form Control

The following XSLT code creates the drop-down list form control:

 <div>  <select  class="xdComboBox xdBehavior_Select"  title=""  size="1"  xd:binding="my:field2"  tabIndex="0"  xd:xctname="DropDown"  xd:CtrlId="CTRL2"  xd:boundProp="value"  style="WIDTH: 130px">   <xsl:attribute name="value">    <xsl:value-of select="my:field2"/>   </xsl:attribute>  <option value="">   <xsl:if test="my:field2=&quot;&quot;">    <xsl:attribute name="selected">selected</xsl:attribute>   </xsl:if>Select...  </option>  </select> </div> 

Again, a div element is used to define the space that contains the form control.

An HTML/XHTML select element defines the behavior of the drop-down list form control. Notice that several of the attributes of the select element have InfoPath-specific attributes, indicated by the initial xd in the attribute name.

One or more option elements are nested inside the select element, corresponding to each option available to the user.

The xsl:if element tests whether the value of the data source field my:field2 is the empty string. If it is, an attribute selected with the value of selected is created, and the text Selected... is displayed in the InfoPath view.

 <  Day Day Up  >  


Microsoft Office InfoPath 2003 Kick Start
Microsoft Office InfoPath 2003 Kick Start
ISBN: 067232623X
EAN: 2147483647
Year: 2004
Pages: 206

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net