< Day Day Up > |
The .xsl View FilesViews 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.
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="""> <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.
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).
Let's look briefly at how InfoPath uses XSLT to create HTML/XHTML controls. Creating a Text Box Form ControlThe 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 ControlThe 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="""> <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 > |