How to reuse popup component?

Question

Hi,
I have a <af:popup> defined in my jspx page which will show up when mouse over the last column in the table. This mouse over popup shows standard information like "Created By", "Creation Date", "Last Updated By", "Last Updated Date". Hence, many other UI pages have the same requirement. So my question is how can reuse this popup component? Currently, its codes in embedded in the jspx page. Here is a code snipplet in the jspx:
<af:table>
<af:column sortable="false" headerText="Std Info"
id="c16">
<af:image source="/images/activity_status.gif"
id="i1">
<af:clientAttribute name="createdBy"
value="#{row.bindings.CreatedByUser.inputValue}"/>
<af:clientAttribute name="creationDate"
value="#{row.bindings.CreationDate.inputValue}"/>
<af:clientAttribute name="lastUpdatedByUser"
value="#{row.bindings.LastUpdatedByUser.inputValue}"/>
<af:clientAttribute name="lastUpdatedDate"
value="#{row.bindings.LastUpdatedDate.inputValue}"/>
<af:showPopupBehavior popupId=":::p1"
triggerType="mouseOver"
align="endAfter"/>
</af:image>
</af:column>
</af:table>
*<af:popup id="p1" contentDelivery="lazyUncached"*
launcherVar="source" eventContext="launcher">
*<af:panelFormLayout id="pfl1">*
*<f:facet name="footer"/>*
*<af:panelLabelAndMessage label="Created By" id="plam1">*
*<af:outputText value="#{viewScope.createdBy}" id="ot2"/>*
*</af:panelLabelAndMessage>*
*<af:panelLabelAndMessage label="Creation Date" id="plam2">*
*<af:outputText value="#{viewScope.creationDate}"*
id="ot3"/>
*</af:panelLabelAndMessage>*
*<af:panelLabelAndMessage label="Last Updated By"*
id="plam3">
*<af:outputText value="#{viewScope.lastUpdatedByUser}"*
id="ot4"/>
*</af:panelLabelAndMessage>*
*<af:panelLabelAndMessage label="Last Updated Date"*
id="plam4">
*<af:outputText value="#{viewScope.lastUpdatedDate}"*
id="ot5"/>
*</af:panelLabelAndMessage>*
*</af:panelFormLayout>*
*<af:setPropertyListener from="#{source.attributes.createdBy}"*
*to="#{viewScope.createdBy}"*
*type="popupFetch"/>*
*<af:setPropertyListener from="#{source.attributes.creationDate}"*
*to="#{viewScope.creationDate}"*
*type="popupFetch"/>*
*<af:setPropertyListener from="#{source.attributes.lastUpdatedByUser}"*
*to="#{viewScope.lastUpdatedByUser}"*
*type="popupFetch"/>*
*<af:setPropertyListener from="#{source.attributes.lastUpdatedDate}"*
*to="#{viewScope.lastUpdatedDate}"*
*type="popupFetch"/>*
*</af:popup>*
Thanks.
-Mina

Answer 1

You can try this too..
have a popup in a seperate jspx like popup.jspx.
<af:popup binding="#{backingBeanScope.backing_popup.p1}" id="p1">
I could open that popup in another jspx page by using subview.
<f:subview id="popupView">
<jsp:include page="/popup.jspx"/>
</f:subview>
Within command button:
<af:showPopupBehavior popupId="popupView:p1"/>