ui.xhtml - primefaces - Next Generation Component Suite

Source path: svn/ examples/ trunk/ showcase/ src/ main/ webapp/ templates/ ui.xhtml

‹r7461

r7521

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui">

<f:view contentType="text/html">

	<h:head>
        <f:facet name="first">
            <meta content='text/html; charset=UTF-8' http-equiv="Content-Type"/>
            <title>PrimeFaces - ShowCase</title>
        </f:facet>
        
        <link type="text/css" rel="stylesheet" href="#{request.contextPath}/css/default.css" />
        <link type="text/css" rel="stylesheet" href="#{request.contextPath}/css/syntaxhighlighter/syntaxhighlighter.css" />

		<ui:insert name="head"></ui:insert>
        
        <script type="text/javascript">
            $(function() {$('.sidebar a').hover(function() {$(this).toggleClass('ui-state-hover');})});
        </script>
	</h:head>

	<h:body>

		<div id="header" class="ui-widget ui-widget-header">
			<div id="logo">
				<img src="#{request.contextPath}/images/logo.png" alt="Logo"/>
			</div>
            
            <div id="menu" class="ui-widget">
                <ul id="main">
                    <li class="current_page_item"><a href="#{request.contextPath}/ui/home.jsf" style="background:url('../design/ui.png') no-repeat center left;">PrimeUI</a></li>
                    <li><a href="#{request.contextPath}/mobile/index.jsf" style="background:url('../design/iphone.png') no-repeat center left;">PrimeMobile</a></li>
                    <li><a href="#{request.contextPath}/push/index.jsf" style="background:url('../design/push.png') no-repeat center left">PrimePush</a></li>
                    <li class="current_page_item"><a href="#{request.contextPath}/ui/macosx.jsf" style="background:url('../design/mac.png') no-repeat center left;">Mock OS X</a></li>
                </ul>
            </div>
            
            <div id="globalthemeswitcher">
                <h:form>
                    <p:themeSwitcher value="#{themeSwitcherBean.theme}" style="width:175px;" effect="fade" var="t">
                        <f:selectItem itemLabel="Choose Theme" itemValue="" />
                        <f:selectItems value="#{themeSwitcherBean.advancedThemes}" var="theme" itemLabel="#{theme.name}" itemValue="#{theme}"/>
                        <p:ajax listener="#{themeSwitcherBean.saveTheme}" />
                        
                        <p:column>
                            <p:graphicImage value="/images/themes/#{t.image}" />
                        </p:column>
                        
                        <p:column>
                            #{t.name}
                        </p:column>
                    </p:themeSwitcher>
                </h:form>
            </div>
		</div>

        <div id="page" class="ui-widget">
            <div id="sidebar" class="ui-widget-content ui-corner-bottom ui-helper-clearfix ui-shadow">

                <h3 class="ui-widget ui-widget-header ui-corner-all submenu-title" style="margin-top:2px">Ajax Core</h3>
                <div class="ui-widget submenu-content">
                    <table>
                        <tr>
                            <td style="width:33%">
                                <ul>
                                    <li><a href="#{request.contextPath}/ui/pprUpdate.jsf">Basics</a></li>
                                    <li><a href="#{request.contextPath}/ui/pprPartialTree.jsf">Partial Processing</a></li>
                                    <li><a href="#{request.contextPath}/ui/partialSubmit.jsf" class="ui-state-highlight">Partial Submit</a></li>
                                    <li><a href="#{request.contextPath}/ui/pprAjaxValidations.jsf">Validations</a></li>
                                    <li><a href="#{request.contextPath}/ui/selectors.jsf" class="ui-state-highlight">Selectors</a></li>
                                </ul>
                            </td>
                            <td style="width:33%">
                                <ul>
                                    <li><a href="#{request.contextPath}/ui/poll.jsf">Polling</a></li>
                                    <li><a href="#{request.contextPath}/ui/remoteCommand.jsf">RemoteCommand</a></li>
                                    <li><a href="#{request.contextPath}/ui/pprAjaxStatus.jsf">AjaxStatus 1</a></li>
                                    <li><a href="#{request.contextPath}/ui/pprAjaxStatusScript.jsf">AjaxStatus 2</a></li>
                                </ul>
                            </td>
                            <td style="width:33%">
                                <ul>
                                    <li><a href="#{request.contextPath}/ui/ajaxifyKeyEvents.jsf">Events</a></li>
                                    <li><a href="#{request.contextPath}/ui/pprSelect.jsf">Selects</a></li>
                                    <li><a href="#{request.contextPath}/ui/ajaxifyAction.jsf">Listeners</a></li>
                                    <li><a href="#{request.contextPath}/ui/pprCounter.jsf">Counter</a></li>
                                </ul>
                            </td>
                        </tr>
                    </table>
                </div>

                <h3 class="ui-widget ui-widget-header ui-corner-all submenu-title">Input</h3>
                <div class="submenu-content">
                    <table>
                        <tr>
                            <td style="width:33%">
                                <ul>
                                    <li><a href="#{request.contextPath}/ui/autocompleteHome.jsf" class="ui-state-highlight">AutoComplete</a></li>
                                    <li><a href="#{request.contextPath}/ui/selectBooleanButton.jsf">BooleanButton</a></li>
                                    <li><a href="#{request.contextPath}/ui/selectBooleanCheckbox.jsf">BoolCheckbox</a></li>
                                    <li><a href="#{request.contextPath}/ui/calendarHome.jsf">Calendar</a></li>                                        
                                    <li><a href="#{request.contextPath}/ui/selectCheckboxMenu.jsf">CheckboxMenu</a></li>
                                    <li><a href="#{request.contextPath}/ui/colorPicker.jsf">ColorPicker</a></li>
                                    <li><a href="#{request.contextPath}/ui/editor.jsf">Editor</a></li>
                                    <li><a href="#{request.contextPath}/ui/inplace.jsf">Inplace</a></li>
                                </ul>
                            </td>
                            <td style="width:33%">
                                <ul>
                                    <li><a href="#{request.contextPath}/ui/inputMask.jsf">InputMask</a></li>
                                    <li><a href="#{request.contextPath}/ui/inputText.jsf">InputText</a></li>
                                    <li><a href="#{request.contextPath}/ui/inputTextarea.jsf" class="ui-state-highlight">InputTextarea</a></li>
                                    <li><a href="#{request.contextPath}/ui/keyboard.jsf">Keyboard</a></li>
                                    <li><a href="#{request.contextPath}/ui/selectManyButton.jsf">ManyButton</a></li>
                                    <li><a href="#{request.contextPath}/ui/selectManyMenu.jsf">ManyMenu</a></li>
                                    <li><a href="#{request.contextPath}/ui/selectManyCheckbox.jsf">ManyCheckbox</a></li>
                                    <li><a href="#{request.contextPath}/ui/selectOneButton.jsf">OneButton</a></li>
                                </ul>
                            </td>
                            <td style="width:33%">
                                <ul>
                                    <li><a href="#{request.contextPath}/ui/selectOneMenu.jsf">OneMenu</a></li>
                                    <li><a href="#{request.contextPath}/ui/selectOneListbox.jsf">OneListbox</a></li>
                                    <li><a href="#{request.contextPath}/ui/selectOneRadio.jsf">OneRadio</a></li>
                                    <li><a href="#{request.contextPath}/ui/password.jsf">Password</a></li>
                                    <li><a href="#{request.contextPath}/ui/rating.jsf" class="ui-state-highlight">Rating</a></li>
                                    <li><a href="#{request.contextPath}/ui/spinner.jsf">Spinner</a></li>
                                    <li><a href="#{request.contextPath}/ui/slider.jsf">Slider</a></li>
                                </ul>
                            </td>
                        </tr>
                    </table>
                </div>

                <h3 class="ui-widget ui-widget-header ui-corner-all submenu-title">Button</h3>
                <div class="submenu-content">
                    <table>
                        <tr>
                            <td><a href="#{request.contextPath}/ui/button.jsf">Button</a></td>
                            <td><a href="#{request.contextPath}/ui/commandButton.jsf">CommandButton</a></td>
                            <td><a href="#{request.contextPath}/ui/commandLink.jsf">CommandLink</a></td>
                            <td><a href="#{request.contextPath}/ui/splitButton.jsf">SplitButton</a></td>
                        </tr>
                    </table>
                </div>

                <h3 class="ui-widget ui-widget-header ui-corner-all submenu-title">Data</h3>
                <div class="submenu-content">
                    <table>
                        <tr>
                            <td style="width:33%">
                                <ul>
                                    <li><a href="#{request.contextPath}/ui/carouselHome.jsf">Carousel</a></li>
                                    <li><a href="#{request.contextPath}/ui/exporterHome.jsf">DataExporter</a></li>
                                    <li><a href="#{request.contextPath}/ui/dataListHome.jsf">DataList</a></li>
                                    <li><a href="#{request.contextPath}/ui/datagrid.jsf">DataGrid</a></li>

                                </ul>
                            </td>
                            <td style="width:33%">
                                <ul>
                                    <li><a href="#{request.contextPath}/ui/datatableHome.jsf">DataTable</a></li>
                                    <li><a href="#{request.contextPath}/ui/picklist.jsf">PickList</a></li>
                                    <li><a href="#{request.contextPath}/ui/orderList.jsf">OrderList</a></li>
                                    <li><a href="#{request.contextPath}/ui/sheet.jsf">Sheet</a></li>
                                </ul>
                            </td>
                            <td style="width:33%">
                                <ul>
                                    <li><a href="#{request.contextPath}/ui/ring.jsf">Ring</a></li>
                                    <li><a href="#{request.contextPath}/ui/treeHome.jsf">Tree</a></li>
                                    <li><a href="#{request.contextPath}/ui/treeTableHome.jsf">TreeTable</a></li>
                                </ul>
                            </td>
                        </tr>
                    </table>
                </div>

                <h3 class="ui-widget ui-widget-header ui-corner-all submenu-title">Panel</h3>
                <div class="submenu-content">
                    <table>
                        <tr>
                            <td style="width:33%">
                                <ul>
                                    <li><a href="#{request.contextPath}/ui/accordionPanelHome.jsf">Accordion</a></li>
                                    <li><a href="#{request.contextPath}/ui/dashboard.jsf">Dashboard</a></li>
                                    <li><a href="#{request.contextPath}/ui/fieldset.jsf">Fieldset</a></li>
                                    <li><a href="#{request.contextPath}/ui/layoutHome.jsf">Layout</a></li>
                                </ul>
                            </td>
                            <td style="width:33%">
                                <ul>
                                    <li><a href="#{request.contextPath}/ui/notificationBar.jsf">NotificationBar</a></li>
                                    <li><a href="#{request.contextPath}/ui/outputPanel.jsf">OutputPanel</a></li>
                                    <li><a href="#{request.contextPath}/ui/panel.jsf">Panel</a></li>
                                    <li><a href="#{request.contextPath}/ui/panelGrid.jsf">PanelGrid</a></li>
                                </ul>
                            </td>
                            <td style="width:33%">
                                <ul>
                                    <li><a href="#{request.contextPath}/ui/scrollPanel.jsf">ScrollPanel</a></li>
                                    <li><a href="#{request.contextPath}/ui/tabviewHome.jsf">TabView</a></li>
                                    <li><a href="#{request.contextPath}/ui/toolbar.jsf">Toolbar</a></li>
                                    <li><a href="#{request.contextPath}/ui/wizard.jsf">Wizard</a></li>
                                </ul>
                            </td>
                        </tr>
                    </table>
                </div>

                <h3 class="ui-widget ui-widget-header ui-corner-all submenu-title">Overlay</h3>
                <div class="submenu-content">
                    <table>
                        <tr>
                            <td style="width:33%">
                                <ul>
                                    <li><a href="#{request.contextPath}/ui/confirmDialog.jsf">ConfirmDialog</a></li>
                                    <li><a href="#{request.contextPath}/ui/dialogHome.jsf">Dialog</a></li>
                                </ul>
                            </td>
                            <td style="width:33%">
                                <ul>
                                    <li><a href="#{request.contextPath}/ui/lightBox.jsf">LightBox</a></li>
                                    <li><a href="#{request.contextPath}/ui/overlayPanel.jsf">OverlayPanel</a></li>
                                </ul>
                            </td>
                            <td style="width:33%">
                                <ul>
                                    <li><a href="#{request.contextPath}/ui/tooltip.jsf">Tooltip</a></li>
                                </ul>
                            </td>
                        </tr>
                    </table>
                </div>

                <h3 class="ui-widget ui-widget-header ui-corner-all submenu-title">Menu</h3>
                <div class="submenu-content">
                    <table>
                        <tr>
                            <td style="width:33%">
                                <ul>
                                    <li><a href="#{request.contextPath}/ui/breadCrumb.jsf">BreadCrumb</a></li>
                                    <li><a href="#{request.contextPath}/ui/contextMenuHome.jsf" class="ui-state-highlight">ContextMenu</a></li>
                                    <li><a href="#{request.contextPath}/ui/dock.jsf">Dock</a></li>
                                    <li><a href="#{request.contextPath}/ui/megaMenu.jsf" class="ui-state-highlight">MegaMenu</a></li>
                                </ul>
                            </td>
                            <td style="width:33%">
                                <ul>
                                    <li><a href="#{request.contextPath}/ui/menu.jsf" class="ui-state-highlight">Menu</a></li>
                                    <li><a href="#{request.contextPath}/ui/menubar.jsf" class="ui-state-highlight">Menubar</a></li>
                                    <li><a href="#{request.contextPath}/ui/menubutton.jsf">MenuButton</a></li>
                                    <li><a href="#{request.contextPath}/ui/slideMenu.jsf"  class="ui-state-highlight">SlideMenu</a></li>
                                </ul>
                            </td>
                            <td style="width:33%">
                                <ul>
                                    <li><a href="#{request.contextPath}/ui/stack.jsf">Stack</a></li>
                                    <li><a href="#{request.contextPath}/ui/tieredMenu.jsf" class="ui-state-highlight">TieredMenu</a></li>
                                </ul>
                            </td>
                        </tr>
                    </table>
                </div>

                <h3 class="ui-widget ui-widget-header ui-corner-all submenu-title">Charts</h3>
                <div class="submenu-content">
                    <table>
                        <tr>
                            <td style="width:33%">
                                <ul>
                                    <li><a href="#{request.contextPath}/ui/areaChart.jsf">Area</a></li>
                                    <li><a href="#{request.contextPath}/ui/barChart.jsf">Bar</a></li>
                                    <li><a href="#{request.contextPath}/ui/bubbleChart.jsf">Bubble</a></li>
                                    <li><a href="#{request.contextPath}/ui/donutChart.jsf">Donut</a></li>
                                </ul>
                            </td>
                            <td style="width:33%">
                                <ul>
                                    <li><a href="#{request.contextPath}/ui/lineChart.jsf">Line</a></li>
                                    <li><a href="#{request.contextPath}/ui/meterGaugeChart.jsf">MeterGauge</a></li>
                                    <li><a href="#{request.contextPath}/ui/ohlcChart.jsf">OHLC</a></li>
                                    <li><a href="#{request.contextPath}/ui/pieChart.jsf">Pie</a></li>
                                </ul>
                            </td>
                            <td style="width:33%">
                                <ul>
                                    <li><a href="#{request.contextPath}/ui/liveChart.jsf">Live</a></li>
                                    <li><a href="#{request.contextPath}/ui/interactiveCharts.jsf">Interactive</a></li>
                                    <li><a href="#{request.contextPath}/ui/dynamicImage.jsf">Static</a></li>
                                </ul>
                            </td>
                        </tr>
                    </table>     
                </div>

                <h3 class="ui-widget ui-widget-header ui-corner-all submenu-title">Message</h3>
                <div class="submenu-content">
                    <table>
                        <tr>
                            <td style="width:50%"><a href="#{request.contextPath}/ui/growl.jsf">Growl</a></td>
                            <td style="width:50%"><a href="#{request.contextPath}/ui/messages.jsf">Messages</a></td>
                        </tr>
                    </table>
                </div>

                <h3 class="ui-widget ui-widget-header ui-corner-all submenu-title">Multimedia</h3>
                <div class="submenu-content">
                    <table>
                        <tr>
                            <td style="width:33%">
                                <ul>
                                    <li><a href="#{request.contextPath}/ui/imageCompare.jsf">Compare</a></li>
                                    <li><a href="#{request.contextPath}/ui/imageCropper.jsf">Cropper</a></li>
                                </ul>
                            </td>
                            <td style="width:33%">
                                <ul>
                                    <li><a href="#{request.contextPath}/ui/dynamicImage.jsf">DynaImage</a></li>
                                    <li><a href="#{request.contextPath}/ui/galleriaHome.jsf">Galleria</a></li>
                                </ul>
                            </td>
                            <td style="width:33%">
                                <ul>
                                    <li><a href="#{request.contextPath}/ui/photoCam.jsf">PhotoCam</a></li> 
                                    <li><a href="#{request.contextPath}/ui/imageSwitch.jsf">Switch</a></li>
                                    <li></li>
                                    <li></li>
                                </ul>
                            </td>
                        </tr>
                    </table>
                </div>

                <h3 class="ui-widget ui-widget-header ui-corner-all submenu-title">File</h3>
                <div class="submenu-content">
                    <table>
                        <tr>
                            <td style="width:33%">
                                <ul>
                                    <li><a href="#{request.contextPath}/ui/fileUploadAuto.jsf">Auto</a></li>
                                    <li><a href="#{request.contextPath}/ui/fileUploadSimple.jsf">Basic</a></li>
                                </ul>
                            </td>
                            <td style="width:33%">
                                <ul>
                                    <li><a href="#{request.contextPath}/ui/fileUploadDnd.jsf">DragDrop</a></li>
                                    <li><a href="#{request.contextPath}/ui/fileDownload.jsf">Download</a></li>
                                </ul>
                            </td>
                            <td style="width:33%">
                                <ul>
                                    <li><a href="#{request.contextPath}/ui/fileUploadMultiple.jsf">Multiple</a></li>
                                    <li><a href="#{request.contextPath}/ui/fileUploadSingle.jsf">Single</a></li>
                                </ul>
                            </td>
                        </tr>
                    </table>
                </div>

                <h3 class="ui-widget ui-widget-header ui-corner-all submenu-title">DragDrop</h3>
                <div class="submenu-content">
                    <table>
                        <tr>
                            <td><a href="#{request.contextPath}/ui/draggableBasic.jsf">Draggable</a></td>
                            <td><a href="#{request.contextPath}/ui/dndGrid.jsf">DataGrid</a></td>
                            <td><a href="#{request.contextPath}/ui/dndTable.jsf">DataTable</a></td>
                            <td><a href="#{request.contextPath}/ui/droppableBarca.jsf">Football</a></td>
                        </tr>
                    </table>
                </div>

                <h3 class="ui-widget ui-widget-header ui-corner-all submenu-title">Misc</h3>
                <div class="submenu-content" style="margin-bottom:20px">
                    <table>
                        <tr>
                            <td style="width:33%">
                                <ul>
                                    <li><a href="#{request.contextPath}/ui/blockUI.jsf">BlockUI</a></li>
                                    <li><a href="#{request.contextPath}/ui/captchaHome.jsf">Captcha</a></li>
                                    <li><a href="#{request.contextPath}/ui/collector.jsf">Collector</a></li>
                                    <li><a href="#{request.contextPath}/ui/defaultCommand.jsf">DefaultCommand</a></li>
                                    <li><a href="#{request.contextPath}/ui/effectsHome.jsf">Effects</a></li>
                                    <li><a href="#{request.contextPath}/ui/feedReader.jsf">FeedReader</a></li>
                                    <li><a href="#{request.contextPath}/ui/focus.jsf">Focus</a></li>
                                    <li><a href="#{request.contextPath}/ui/gmapHome.jsf">GMap</a></li>
                                    
                                </ul>
                            </td>
                            <td style="width:33%">
                                <ul>
                                    <li><a href="#{request.contextPath}/ui/hotkey.jsf">HotKey</a></li>
                                    <li><a href="#{request.contextPath}/ui/idlemonitorHome.jsf">IdleMonitor</a></li>
                                    <li><a href="#{request.contextPath}/ui/log.jsf">Log</a></li>
                                    <li><a href="#{request.contextPath}/ui/media.jsf">Media</a></li>
                                    <li><a href="#{request.contextPath}/ui/outputLabel.jsf" class="ui-state-highlight">OutputLabel</a></li>
                                    <li><a href="#{request.contextPath}/ui/printer.jsf">Printer</a></li>
                                    <li><a href="#{request.contextPath}/ui/progressBar.jsf">ProgressBar</a></li>
                                    <li><a href="#{request.contextPath}/ui/requestContext.jsf">RequestContext</a></li>
                                    <li><a href="#{request.contextPath}/ui/resizableHome.jsf">Resizable</a></li>
                                    
                                </ul>
                            </td>
                            <td style="width:33%">
                                <ul>       
                                    <li><a href="#{request.contextPath}/ui/scheduleHome.jsf">Schedule</a></li>
                                    <li><a href="#{request.contextPath}/ui/separator.jsf">Separator</a></li>
                                    <li><a href="#{request.contextPath}/ui/spacer.jsf">Spacer</a></li>
                                    <li><a href="#{request.contextPath}/ui/tagCloud.jsf">TagCloud</a></li>
                                    <li><a href="#{request.contextPath}/ui/terminalHome.jsf">Terminal</a></li>
                                    <li><a href="#{request.contextPath}/ui/themeswitcher.jsf">Themeswitcher</a></li>
                                    <li><a href="#{request.contextPath}/ui/watermark.jsf">Watermark</a></li>
                                </ul>
                            </td>
                        </tr>
                    </table>
                </div>

            </div>

            <div id="content">
                <div class="post">
                    <ui:insert name="content">...</ui:insert>
                </div>
            </div>

            <div style="clear: both;">&nbsp;</div>
        </div>

		<div id="footer" class="ui-widget ui-widget-header ui-corner-all">
			<p class="copyright">Running #{build.primefacesVersion} on #{build.jsfVersion}</p>
		</div>

        

	</h:body>

	<ui:insert name="highlight">
		<script language="javascript" src="#{request.contextPath}/syntaxhighlighter/scripts/sh.js"></script>
		<script language="javascript">
			dp.SyntaxHighlighter.ClipboardSwf = '#{request.contextPath}/syntaxhighlighter/scripts/clipboard.swf';
			dp.SyntaxHighlighter.HighlightAll('code');
		</script>
	</ui:insert>

</f:view>
</html>

Show details Hide details

Change log

r7470 by cagatay.civici on May 18, 2012 Diff

Sample update

Go to:

Project members, sign in to write a code review

Older revisions

r7461 by cagatay.civici on May 18, 2012 Diff

Sample update

r7426 by cagatay.civici on Apr 30, 2012 Diff

Sample update, changes to showcase
layout

r7425 by cagatay.civici on Apr 29, 2012 Diff

Sample update

All revisions of this file

File info

Size: 27235 bytes, 452 lines

View raw file