ListStyles.xml defines the HTML structures to use when delivering UI elements to a particular device. All applications built upon the Mobile Entrée
API deliver client interfaces constructed as lists, list groups and list items. Not lists in the context of a SharePoint list, but rather as a functional display of data and items. These lists and items are then run against their corresponding ListStyles to generate the actual rendered content.
Out of the box, Mobile Entrée provides a number of ListStyles that you can use in your applications. Check out the
Controls Overview for a list of .NET objects you can use that implement these OOTB ListStyles.
You may also create your own ListStyles for your custom applications. Like
UserAgentMapping.xml your custom ListStyle.xml will be merged with the default and your styles will be avaialble for use in your application.
Dissecting a Custom ListStyle
This custom list style will display a progress bar with % Complete.
The "name" attribute of the ListItemStyle tag is what you reference inside your custom mobile application
<ListItemStyle name="progress_bar">
The XSLT for the style. Notice the custom class; this means I also have a custom CSS file for my application.
<![CDATA[ <li class="pmc-ls">
<div class="pb">
<xsl:attribute name="style">
<xsl:text>background-position:</xsl:text>
Inside your application, you will add properties to your list items. This is how you render those.
<xsl:value-of select="(Properties/Property[@name='PercentComplete'] * 2) - 200"/>
<xsl:text>px 0px</xsl:text>
</xsl:attribute>
<xsl:value-of select="Properties/Property[@name='PercentComplete']"/>
<xsl:text>% Complete</xsl:text>
</div>
</li>
]]>
</ListItemStyle>