i took the facet from the Jira and put it on mobitest/layout/contentStackMenu/contentStackMenu4.jsf
page.
I cannot get the facet to render. When I go through the debugger I noticed that the code path for the facet does not get used when this page is rendered. Also, the facet is not encoded unless iconPlacement is non-null.
I added the iconPlacement attribute, but still not getting the facet to render.
here is the snippet on that page I added for largeView
<mobi:largeView>
<mobi:splitPane columnDivider="30">
<f:facet name="left">
<h:form>
<mobi:contentStackMenu id="contentStackMenu" contentStackId="contentStack">
<mobi:contentMenuItem label="Menu"/>
<mobi:contentMenuItem label="Page 1" value="page1" iconPlacement="right"
icon="envelope">
<f:facet name="icon">
<span class="fa-stack fa-lg">
<i class="fa fa-envelope-o fa-stack-2x"></i>
<i class="fa fa-circle fa-stack-1x" style="color:red;"></i>
<strong class="fa fa-stack-1x" style="color:white;">9</strong>
</span>
</f:facet>
</mobi:contentMenuItem>
<mobi:contentMenuItem label="Page 2" value="page2"/>
<mobi:contentMenuItem label="Page 3" value="page3"/>
</mobi:contentStackMenu>
</h:form>
</f:facet>
<f:facet name="right">
<mobi:contentStack id="contentStack" contentMenuId="contentStackMenu"
currentId="#
{contentStackMenu4.currentPane}
">
<mobi:contentPane id="page1" client="true" >
<h:form>
<h2>Page 1</h2>
<mobi:contentStackFormProxy/>
</h:form>
</mobi:contentPane>
<mobi:contentPane id="page2" client="true">
<h2>Page 2</h2>
<mobi:contentStackFormProxy/>
</mobi:contentPane>
<mobi:contentPane id="page3" client="true">
<h2>Page 3</h2>
<mobi:contentStackFormProxy/>
</mobi:contentPane>
</mobi:contentStack>
</f:facet>
</mobi:splitPane>
</mobi:largeView>
mobitest sample is under jsf/components/tests folder.
the code path for icon in this example is executed at line 285 in the ContentMenuItemRenderer and the facet is not checked here. Might want to refactor that and have the check done in both code paths?
What the component renders with the 'icon' attribute is just the following markup (assuming that icon="envelope"):
If we want to render a bigger envelope icon that has a red circle in the middle, which in turns contains a number 9 (e.g. the number of e-mails), then the following markup is required.
So, for this improvement, an attribute that allows to specify arbitrary HTML markup would be the most appropriate solution. Simply using the body of the component to specify this markup is also an appropriate solution.