| | Class | Description |
|---|
| | AutoCompleteDropDownList |
Representation of PrimeFaces autoComplete component
Visual Editor XML:
<DropDownList
Attributes
width="120"
height="30"
multiple="false"
value="" completeMethod=""
var="" itemLabel="" itemValue=""
converter=""
dropDown="true"/>
PrimeFaces output:
<p:autoComplete
Attributes
style="width:120px;height:30px;"
multiple="false"
value="" completeMethod=""
var="" itemLabel="" itemValue=""
converter=""
dropDown="true"/>
|
| | Button |
Representation of PrimeFaces button component
Visual Editor XML:
<Button
Attributes
width="100"
height="30"
disabled="false"
value="Button"
title=""/>
PrimeFaces output:
<p:button
Attributes
style="width:100px;height:30px;"
disabled="false"
value="Button"
title=""/>
|
| | Calendar |
Representation of Calendar in HTML
Visual Editor XML:
<Calendar
Attributes
selectedDate=""
width="120"
height="120"
mode="popup"
minDate=""
maxDate=""
pattern="MM/dd/yyyy"/>
PrimeFaces output:
<p:calendar
Attributes
value=""
style="width:120px;height:120px;"
mode="popup"
minDate=""
maxDate""
pattern="MM/dd/yyyy"/>
|
| | DataTable |
Representation of PrimeFaces dataTable component
Visual Editor XML:
<DataTable
Attributes
width="120"
height="120"
paginator="false"
resizableColumns="false"
var="" value=""
emptyMessage="No records found.">
<column headerText="Column 1" value=""/>
</DataTable>
PrimeFaces output:
<p:dataTable
Attributes
style="width:120px;height:120px;"
paginator="false"
resizableColumns="false"
var="" value=""
emptyMessage="No records found.">
<p:column headerText="Column 1" value="">
<h:outputText value=""/>
</p:column>
</p:dataTable>
|
| | Div |
Representation of div in HTML
Visual Editor XML:
<Div
Attributes
width="120"
height="120"
percentWidth="80"
percentHeight="80"
class="flexHorizontalLayout flexHorizontalLayoutLeft flexHorizontalLayoutTop">
<Script>
<![CDATA[ Some information ]]>
</Script>
</Div>
PrimeFaces output:
<div
Attributes
style="width:120px;height:120px;"
class="flexHorizontalLayout flexHorizontalLayoutLeft flexHorizontalLayoutTop"/>
|
| | Fieldset |
Representation of PrimeFaces fieldset component.
Fieldset component is generated with div inside where children are positioned using FlexBox
Visual Editor XML:
<Fieldset
Attributes
width="110"
height="120"
toggleable="false"
legend="Basic"
toggleSpeed="200">
<Div percentWidth="100" percentHeight="100"
class="flexHorizontalLayout flexHorizontalLayoutLeft flexHorizontalLayoutTop"
wrap="false"/>
</Fieldset>
PrimeFaces output:
<p:fieldset
Attributes
style="width:110px;height:120px;"
toggleable="false"
legend="Basic"
toggleSpeed="200"
<div style="width:100%;height:100%;"
class="flexHorizontalLayout flexHorizontalLayoutLeft flexHorizontalLayoutTop"/>
</p:fieldset>
|
| | Grid |
Representation of PrimeFaces Grid CSS component.
Visual Editor XML:
<Grid
Attributes
width="110"
height="120"
percentWidth="80"
percentHeight="80">
<Row>
<Column class="ui-g-12 ui-lg-12 ui-sm-6 ui-md-6 ui-xl-12">
<Div percentWidth="100" percentHeight="100"/>
</Column>
</Row>
PrimeFaces output:
<p:outputPanel
Attributes
style="width:110px;height:120px;">
<div class="ui-g">
<div class="ui-g-12 ui-lg-12 ui-sm-6 ui-md-6 ui-xl-12">
<div style="width:100%;height:100%;"/>
</div>
</div>
</p:outputPanel>
|
| | Include |
Representation of PrimeFaces include component.
Visual Editor XML:
<Include
Attributes
width="110"
height="110"
src=""/>
PrimeFaces output:
<ui:include
Attributes
style="width:110px;height:110px;"
src=""/>
|
| | InputMask |
Representation of PrimeFaces inputMask component.
Visual Editor XML:
<InputMask
Attributes
id=""
width="100"
height="30"
value=""
mask="(999) 999-9999"
required="false"/>
PrimeFaces output:
<p:inputMask
Attributes
id=""
style="width:100px;height:30px;"
value=""
mask="(999) 999-9999"
required="false"/>
|
| | InputNumber |
Representation of PrimeFaces inputNumber component.
Visual Editor XML:
<InputNumber
Attributes
id=""
width="100"
height="30"
value=""
decimalSeparator="."
thousandSeparator=","
required="false"/>
PrimeFaces output:
<p:inputNumber
Attributes
id=""
style="width:100px;height:30px;"
value=""
decimalSeparator="."
thousandSeparator=","
required="false"/>
|
| | InputText |
Representation of PrimeFaces inputText component.
Visual Editor XML:
<InputText
Attributes
id=""
width="100"
height="30"
value=""
maxlength=""
required="false"/>
PrimeFaces output:
<p:inputText
Attributes
id=""
style="width:100px;height:30px;"
value=""
maxlength=""
required="false"/>
|
| | InputTextarea |
Representation of PrimeFaces inputTextarea component.
Visual Editor XML:
<InputTextarea
Attributes
id=""
width="100"
height="60"
isAutoResize="true"
value=""
maxlength=""
counter=""
counterTemplate="{0} characters remaining."
required="false"/>
PrimeFaces output:
<p:inputTextarea
Attributes
id=""
style="width:100px;height:60px;"
autoResize="true"
value=""
maxlength=""
counter=""
counterTemplate="{0} characters remaining."
required="false"/>
|
| | MainApplication |
Representation of index.html file.
Visual Editor XML:
<MainApplication
Attributes
width="700"
height="450"
title=""
wrap=""
class="flexHorizontalLayoutWrap flexHorizontalLayoutLeft flexHorizontalLayoutTop">
<Script>
<![CDATA[ Some information ]]>
</Script>
</MainApplication>
HTML output:
<?xml version="1.0" encoding="utf-8"?>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<h:head>
<link rel="stylesheet" type="text/css" href="resources/moonshine-layout-styles.css"/>
<title/>
</h:head>
<h:body>
<div class="flexHorizontalLayout flexHorizontalLayoutLeft flexHorizontalLayoutTop"
style="width:700px;height:450px;"/>
</h:body>
</html>
|
| | OutputLabel |
Representation of PrimeFaces outputLabel component.
Visual Editor XML:
<OutputLabel
Attributes
width="100"
height="30"
value="Label"
for=""
indicateRequired="false"/>
PrimeFaces output:
<h:outputLabel
Attributes
style="width:100px;height:30px;"
value="Label"
for=""/>
|
| | OutputPanel |
Representation of div in HTML
Visual Editor XML:
<OutputPanel
Attributes
width="120"
height="120"
percentWidth="80"
percentHeight="80"
PrimeFaces output:
<p:outputPanel
Attributes
style="width:120px;height:120px;"
|
| | PanelGrid |
Representation of PrimeFaces panelGrid component.
Visual Editor XML:
Example 1:
<PanelGrid
Attributes
width="100"
height="30"/>
<Header name="header">
<Row>
<Column>Header Title 1</Column>
<Column>Header Title 2</Column>
</Row>
</Header>
<Row>
<Column>
some control (ex: OutputLabel) which displays text
</Column>
<Column>
some control (ex: OutputLabel) which displays text
</Column>
</Row>
</PanelGrid>
Example 2 - With control:
<PanelGrid
Attributes
width="100"
height="30"/>
<Header name="header">
<Row>
<Column>Header Title 1</Column>
<Column>Header Title 2</Column>
</Row>
</Header>
<Row>
<Column>
<Div class="flexHorizontalLayout flexHorizontalLayoutLeft flexHorizontalLayoutTop">
<OutputLabel width="100" height="30" value="Label"/>
</Div>
</Column>
<Column>
<Div class="flexHorizontalLayout flexHorizontalLayoutLeft flexHorizontalLayoutTop">
<OutputLabel width="100" height="30" value="Label"/>
</Div>
</Column>
</Row>
</PanelGrid>
PrimeFaces output:
Output for Example 1:
<p:panelGrid
Attributes
width="100"
height="30"/>
<f:facet name="header">
<p:row>
<p:column>Header Title 1</p:column>
<p:column>Header Title 2</p:column>
</p:row>
</f:facet>
<p:row>
<p:column>
<div class="flexHorizontalLayout flexHorizontalLayoutLeft flexHorizontalLayoutTop"/>
</p:column>
<p:column>
<div class="flexHorizontalLayout flexHorizontalLayoutLeft flexHorizontalLayoutTop"/>
</p:column>
</p:row>
</p:panelGrid>
Output for Example 2:
<p:panelGrid
Attributes
width="100"
height="30"/>
<f:facet name="header">
<p:row>
<p:column>Header Title 1</p:column>
<p:column>Header Title 2</p:column>
</p:row>
</f:facet>
<p:row>
<p:column><p:outputLabel style="width:100px;height:30px;" value="Label Text"/></p:column>
<p:column><p:outputLabel style="width:100px;height:30px;" value="Label Text"/></p:column>
</p:row>
</p:panelGrid>
|
| | RootDiv |
This component is special representation of Div, which is root component for newly created file.
|
| | SelectBooleanCheckbox |
Representation of PrimeFaces selectBooleanCheckbox component.
Visual Editor XML:
<CheckBox
Attributes
width="121"
height="20"
label="Checkbox"
selected="false"/>
PrimeFaces output:
<p:selectBooleanCheckbox
Attributes
style="width:121px;height:20px;"
label="Checkbox"
value="null"/>
|
| | SelectOneListbox |
Representation of selectOneMenu in HTML
Visual Editor XML:
<SelectOneListbox
Attributes
width="120"
height="30"
percentWidth=""
percentHeight=""
value="">
<selectItem itemLabel="Title" itemValue=""/>
</SelectOneListbox>
PrimeFaces output:
<p:selectOneListbox
Attributes
style="width:120px;height:30px;"
value="">
<f:selectItem itemLabel="Title" itemValue=""/>
</p:selectOneListbox>
|
| | SelectOneMenu |
Representation of selectOneMenu in HTML
Visual Editor XML:
<SelectOneMenu
Attributes
width="120"
height="30"
percentWidth=""
percentHeight=""
editable="false"
value="">
<selectItem itemLabel="Title" itemValue=""/>
</SelectOneMenu>
PrimeFaces output:
<p:selectOneMenu
Attributes
style="width:120px;height:30px;"
editable="false"
value="">
<f:selectItem itemLabel="Title" itemValue=""/>
</p:selectOneMenu>
|
| | SelectOneRadio |
Representation of selectOneRadio in HTML
Visual Editor XML:
<SelectOneRadio
Attributes
width="230"
height="21"
value=""
columns="0"
percentWidth=""
percentHeight="">
<selectItem itemLabel="Title" itemValue=""/>
</SelectOneRadio>
PrimeFaces output:
<p:selectOneRadio
Attributes
value=""
columns="0"
style="width:230px;height:21px;">
<f:selectItem itemLabel="Title" itemValue=""/>
</p:selectOneRadio>
|
| | TabView |
Representation of PrimeFaces tabView component.
Visual Editor XML:
<TabView
Attributes
width="120"
height="120"
orientation="top"
scrollable="false">
<tab title="Tab">
<Div class="flexHorizontalLayout flexHorizontalLayoutLeft flexHorizontalLayoutTop" wrap="false"/>
</tab>
</TabView>
PrimeFaces output:
<p:tabView
Attributes
style="width:120px;height:120px;"
orientation="top"
scrollable="false"/>
<p:tab title="Tab">
<div class="flexHorizontalLayout flexHorizontalLayoutLeft flexHorizontalLayoutTop" />
</p:tab>
</p:tabView>
|
| | TextEditor |
Representation of PrimeFaces TextEditor component.
Visual Editor XML:
<TextEditor
Attributes
width="250"
height="100"
percentWidth=""
percentHeight=""
placeholder=""
text=""
widgetVar=""
/>
PrimeFaces output:
<p:textEditor
Attributes
style="width:250px;height:100px;"
placeholder=""
value=""
widgetVar=""
/>
|
| | Tree |
Representation of PrimeFaces tree component.
Visual Editor XML:
<Tree
Attributes
width="120"
height="120"
var=""
value="">
<TreeNode value="#{}"/>
</Tree>
PrimeFaces output:
<p:tree
Attributes
style="width:120px;height:120px;"
var=""
value="">
<p:treeNode>
<h:outputText value="#{}"/>
</p:treeNode>
</p:tree>
|
