How to: McDialog Jsf component in JSP and facelets view

McDialog is a part of the McFaces (WshFaces) Rich Comnponents Library (JSF 2.0 version). You can find a complete sample code in project webpage: http://wshfaces.sourceforge.net.

Dialog with "static content":

            <mc:dialog id="dlg1" autoOpen="false" closeOnEscape="false" closeText="Zamknij" disabled="false" draggable="true"
                       height="300" hideEffect="none" includeCssTemplate="false" maxHeight="450" maxWidth="550" minHeight="250" minWidth="450"
                       modal="true" buttons="Yes; No; Cancel" resizable="true" title="This is McDialog demo" width="500"
                       dialogShowListener="#{dialogView.dialogShow}"
                       dialogCloseListener="#{dialogView.dialogClose}">
                <div>
                    <p>You can modify look and feel of this dialog by modyfying dialog CSS. Cause MCDialog uses JQuery.dialog pugin as a javascript frontend, you can use JQuery tools to design CSS template for your application.</p>
                    <p>dialogShowListener is called before dialog activation - please look at method mc.hqproducts.components.samples.Dialog.dialogShow to see how it works.</p>
                    <p>dialogCloseListener is called after one of buttons is clicked - please look at method mc.hqproducts.components.samples.Dialog.dialogClose to see it in action. Return value is an integer value. Last button click returns 1, next from right 2 and so on.</p>
                </div>
            </mc:dialog>



Dialog with content loaded via AJAX request:

             <mc:dialog id="dlg2" autoOpen="false" closeOnEscape="false" closeText="Zamknij" disabled="false" draggable="true"
                       height="300" hideEffect="none" includeCssTemplate="false" maxHeight="450" maxWidth="550" minHeight="250" minWidth="450"
                       modal="true" buttons="Yes; No; Cancel" resizable="true" title="This is McDialog demo" width="500" ajaxContentDelivery="true"
                       dialogShowListener="#{dialogView.dialogShow}"
                       dialogCloseListener="#{dialogView.dialogClose}"
                       >
                 <h:panelGroup id="pg2" layout="block">
                    <p>This is an exaple of Dialog with dynamically loaded content</p>
                 </h:panelGroup>
            </mc:dialog>