This is an automated email from the ASF dual-hosted git repository.
doebele pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/empire-db.git
The following commit(s) were added to refs/heads/master by this push:
new d2cca226 EMPIREDB-405 Demonstration of new formGrid tag with
corresponding css style classes
d2cca226 is described below
commit d2cca2266aef2acbef4eaf80a2f868f5eaaf85b1
Author: Rainer Döbele <[email protected]>
AuthorDate: Sun Mar 26 15:23:57 2023 +0200
EMPIREDB-405
Demonstration of new formGrid tag with corresponding css style classes
---
.../empire/jsf2/websample/db/SampleDBwithMeta.java | 5 +-
.../src/main/webapp/css/common.css | 9 +-
.../src/main/webapp/css/content.css | 105 ++---------
.../src/main/webapp/css/form.css | 206 +++++++++++++++++++++
.../src/main/webapp/css/layout.css | 2 +
.../src/main/webapp/css/{layout.css => root.css} | 58 +++---
.../src/main/webapp/pages/employeeDetailPage.xhtml | 18 +-
.../src/main/webapp/pages/employeeListPage.xhtml | 23 +--
.../src/main/webapp/pages/loginPage.xhtml | 29 +--
.../resources/components/formButtonRow.xhtml | 36 ----
.../{formInputRow.xhtml => formControl.xhtml} | 82 ++++----
.../webapp/resources/components/formPanel.xhtml | 39 ----
.../webapp/resources/components/formPanelRow.xhtml | 34 ----
.../{buttonBar.xhtml => pageButtons.xhtml} | 3 +-
14 files changed, 348 insertions(+), 301 deletions(-)
diff --git
a/empire-db-examples/empire-db-example-jsf2/src/main/java/org/apache/empire/jsf2/websample/db/SampleDBwithMeta.java
b/empire-db-examples/empire-db-example-jsf2/src/main/java/org/apache/empire/jsf2/websample/db/SampleDBwithMeta.java
index 74ef228b..f229a21d 100644
---
a/empire-db-examples/empire-db-example-jsf2/src/main/java/org/apache/empire/jsf2/websample/db/SampleDBwithMeta.java
+++
b/empire-db-examples/empire-db-example-jsf2/src/main/java/org/apache/empire/jsf2/websample/db/SampleDBwithMeta.java
@@ -59,8 +59,9 @@ public class SampleDBwithMeta extends SampleDB
Options retired = new Options();
retired.set(false, "!option.employee.active");
retired.set(true, "!option.employee.retired");
- T.RETIRED.setOptions(retired);
- T.RETIRED.setControlType("checkbox");
+ T.RETIRED.setOptions(retired)
+ .setControlType("checkbox")
+ .setAttribute("wrapperClass", "checkboxWrapper"); /* NEW:
Wrapper class for <e:input> and <e:control>! */
// Hint for DATE_OF_BIRTH
T.DATE_OF_BIRTH.setAttribute("format:date", "yyyy-MM-dd");
diff --git
a/empire-db-examples/empire-db-example-jsf2/src/main/webapp/css/common.css
b/empire-db-examples/empire-db-example-jsf2/src/main/webapp/css/common.css
index 8a677986..5f616b03 100644
--- a/empire-db-examples/empire-db-example-jsf2/src/main/webapp/css/common.css
+++ b/empire-db-examples/empire-db-example-jsf2/src/main/webapp/css/common.css
@@ -16,9 +16,8 @@
* specific language governing permissions and limitations
* under the License.
*/
-/*
- * common
- */
+
+/* common */
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
@@ -31,10 +30,12 @@
box-sizing: border-box;
}
html, body {
- width: 800px;
+ min-width: 400px;
+ max-width: 1200px;
margin-left: 10px;
margin-right: auto;
margin-bottom: 5px;
+ padding-right: 20px;
color: black;
background-color: white;
font-family: Verdana, Arial, sans-serif;
diff --git
a/empire-db-examples/empire-db-example-jsf2/src/main/webapp/css/content.css
b/empire-db-examples/empire-db-example-jsf2/src/main/webapp/css/content.css
index b13f0495..e097f62b 100644
--- a/empire-db-examples/empire-db-example-jsf2/src/main/webapp/css/content.css
+++ b/empire-db-examples/empire-db-example-jsf2/src/main/webapp/css/content.css
@@ -17,49 +17,38 @@
* under the License.
*/
-form {
+.margin-above {
+ margin-top: 10px;
}
-
-div.formPanel {
+
+/* form panel */
+.formPanel {
border: 1px #8F99EF solid;
- background-color: #F8F8F8;
+ background-color: var(--form-background-color);
padding: 8px 4px;
}
-table.inputForm {
- width: 100%;
-}
-table.inputForm td.eCtlLabel {
- vertical-align:top;
- width: 140px;
- height: 24px;
- padding-top: 3px;
- font-weight: bold;
-}
-table.inputForm td.eCtlInput {
- vertical-align:top;
-}
-table.inputForm td.buttonBar {
- padding-top: 8px;
-}
-
-div.buttonBar {
- margin: 12px 0;
+.formPanel > .buttonBar {
+ padding: var(--control-v-pad) 0;
+ padding-left: var(--label-width);
+ margin-top: 10px;
}
.buttonBar a,
.buttonBar a:visited {
display: inline-block;
- border: 1px #8F99EF solid;
- padding: 4px 12px;
+ border: var(--button-border-width) var(--button-border-color) solid;
+ padding: var(--input-v-pad) 12px;
color: black;
text-decoration: none;
margin-right: 16px;
background-color: white;
+ font-weight: bold;
}
.buttonBar a:hover {
background-color: #EFFBEF;
}
+/* result table */
div.searchResult,
span.searchResult {
display: block;
@@ -73,7 +62,7 @@ span.searchResult {
}
.searchResult table tr th,
.searchResult table tr td {
- padding: 4px;
+ padding: var(--table-cell-v-pad) var(--table-cell-h-pad);
}
.searchResult table tr th {
background-color: #EFFBEF;
@@ -84,69 +73,9 @@ span.searchResult {
color: brown;
font-weight: bold;
}
-label.eLabel.eInpReq:after {
- content: "*";
- color: #D00000;
-}
-select,
-input[type=text],
-input[type=password] {
- border: 1px #8f99ef solid;
-}
-select.eInpReq,
-input[type=text].eInpReq {
-/* border: 1px brown solid; */
- background-color: #FFFFE0;
-}
-select.eInpDis,
-textarea.eInpDis,
-input[type=text].eInpDis {
- border: 1px #C0C0C0 solid;
- color: #808080;
-}
-.eInput {
- width: 100%;
-}
-.eInput.eTypeBool {
- width: auto;
-}
-select.eInput.eInpShort,
-input.eInput.eInpShort,
-input.eInput.eTypeDate {
- width: 100px;
-}
-input.eInput.eInpDecimal {
- width: 100px;
- text-align: right;
-}
-span.eInpDis {
- display: inline-block;
- padding-top: 3px;
-}
-.eUnit {
- padding-left: 4px;
- font-style: bold;
-}
-.eInputHint {
- padding-left: 4px;
- font-style: italic;
-}
-div.eTypeBoolFalse {
- width: 12px;
- height: 12px;
- background-image:url('../img/boxes.gif');
- background-repeat: no-repeat;
- background-position: 0 0;
-}
-div.eTypeBoolTrue {
- width: 12px;
- height: 12px;
- background-image:url('../img/boxes.gif');
- background-repeat: no-repeat;
- background-position: -12px 0;
-}
+
+/* tab view */
div.eTabView {
- width: 500px;
}
table.eTabBar {
width: 100%;
diff --git
a/empire-db-examples/empire-db-example-jsf2/src/main/webapp/css/form.css
b/empire-db-examples/empire-db-example-jsf2/src/main/webapp/css/form.css
new file mode 100644
index 00000000..643519d5
--- /dev/null
+++ b/empire-db-examples/empire-db-example-jsf2/src/main/webapp/css/form.css
@@ -0,0 +1,206 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+label {
+ font-weight: bold;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+label.eLabel.eInpReq:after {
+ content: "*";
+ color: #D00000;
+}
+select,
+input[type=text],
+input[type=password] {
+ padding: var(--input-v-pad) var(--input-h-pad);
+ border: var(--input-border-width) var(--input-border-color) solid;
+}
+select.eInpReq,
+input[type=text].eInpReq {
+ background-color: #FFFFE0;
+}
+select.eInpDis,
+textarea.eInpDis,
+input[type=text].eInpDis {
+ border: 1px #C0C0C0 solid;
+ color: #808080;
+}
+select.eInput.eInpShort,
+input.eInput.eInpShort,
+input.eInput.eTypeDate {
+ width: 100px;
+}
+input.eInput.eInpDecimal {
+ width: 100px;
+ text-align: right;
+}
+
+/* general */
+.eCtlInput > .eInput {
+ width: 100%;
+}
+.eCtlInput > .eInput.eTypeBool {
+ width: auto;
+}
+.eCtlInput > span {
+ display: inline-block;
+ padding: var(--input-v-pad) 0;
+ border: var(--input-border-width) transparent solid;
+}
+.eCtlInput .eUnit {
+ padding-left: var(--input-h-pad);
+ font-weight: bold;
+}
+.eInputHint {
+ padding-left: 4px;
+ font-style: italic;
+}
+.eTypeBoolFalse {
+ width: 12px;
+ height: 12px;
+ background-image:url('../img/boxes.gif');
+ background-repeat: no-repeat;
+ background-position: 0 0;
+}
+.eTypeBoolTrue {
+ width: 12px;
+ height: 12px;
+ background-image:url('../img/boxes.gif');
+ background-repeat: no-repeat;
+ background-position: -12px 0;
+}
+.eControl > .eCtlLabel {
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+/* wrapper class styles */
+.eWrapInp {
+ /* general wrapper style */
+ display: flex;
+ padding: var(--input-v-pad) var(--input-h-pad);
+}
+.eWrapVal {
+ /* general wrapper style */
+ display: inline-block;
+}
+.checkboxWrapper {
+ /* special checkbox wrapper style */
+ /* background-color: #E8E8E8; */
+}
+
+/* formGrid in Grid mode */
+div.eFormGrid {
+ display: grid;
+ grid-template-columns: 1fr;
+ grid-gap: var(--grid-v-space) var(--grid-h-space);
+/* background-color: white; */
+}
+
+/* grid-top-align */
+div.eFormGrid > .eControl {
+ display: flex;
+/* background-color: #F8F8F8; */
+ min-height: var(--control-min-height);
+}
+div.eFormGrid > .eControl > .eCtlLabel {
+ width: var(--label-width);
+ padding: calc(var(--control-v-pad) + var(--input-v-pad) + 1px)
var(--control-h-pad) var(--control-v-pad) var(--control-h-pad);
+}
+div.eFormGrid > .eControl > .eCtlInput {
+ width: calc(100% - var(--label-width));
+ padding: var(--control-v-pad) var(--control-h-pad);
+ padding-left: 0;
+}
+
+/* grid-v-align */
+div.eFormGrid.grid-v-align {
+}
+div.eFormGrid.grid-v-align > .eControl {
+ display: table;
+}
+div.eFormGrid.grid-v-align > .eControl > .eCtlLabel {
+ display: table-cell;
+ vertical-align: middle;
+ padding: 0 var(--control-h-pad);
+ max-width: var(--label-width);
+}
+div.eFormGrid.grid-v-align > .eControl > .eCtlInput {
+ display: table-cell;
+ vertical-align: middle;
+}
+
+/* extentions */
+@media (min-width: 800px) {
+ div.eFormGrid.grid-columns-2 {
+ grid-template-columns: repeat(2, 1fr);
+ }
+ div.eFormGrid > .eControl.grid-full-row {
+ grid-column: 1 / -1;
+ }
+ div.eFormGrid > .eControl.grid-new-row {
+ grid-column: 1 / 2;
+ }
+}
+
+/* formGrid in table mode */
+table.eFormGrid {
+ width: 100%;
+/* max-width: 800px; */
+ table-layout: fixed;
+ border-spacing: 0 var(--grid-v-space);
+ border-collapse: separate;
+}
+table.eFormGrid td.eCtlLabel {
+ vertical-align: middle;
+ padding: 0 var(--control-h-pad);
+ width: var(--label-width);
+}
+table.eFormGrid td.eCtlInput {
+ vertical-align: middle;
+ padding: var(--control-v-pad) var(--control-h-pad);
+ padding-left: 0;
+}
+
+/* grid-white-gap */
+.grid-white-gap {
+ background-color: red;
+}
+.grid-white-gap .eCtlLabel {
+ /* optional */
+ background-color: var(--form-background-color);
+}
+.grid-white-gap .eCtlInput {
+ /* optional */
+ background-color: var(--form-background-color);
+}
+
+/* misc */
+.formSection {
+ grid-column: 1 / -1;
+ background-color: lightgray;
+ padding: var(--control-v-pad) 0;
+ text-align: center;
+ font-weight: bold;
+}
+.xSalaryWrapper {
+ background-color: yellow;
+}
+
diff --git
a/empire-db-examples/empire-db-example-jsf2/src/main/webapp/css/layout.css
b/empire-db-examples/empire-db-example-jsf2/src/main/webapp/css/layout.css
index 39bcce1a..3137c3ce 100644
--- a/empire-db-examples/empire-db-example-jsf2/src/main/webapp/css/layout.css
+++ b/empire-db-examples/empire-db-example-jsf2/src/main/webapp/css/layout.css
@@ -18,5 +18,7 @@
*/
@charset "UTF-8";
+@import url("root.css");
@import url("common.css");
@import url("content.css");
+@import url("form.css");
diff --git
a/empire-db-examples/empire-db-example-jsf2/src/main/webapp/css/layout.css
b/empire-db-examples/empire-db-example-jsf2/src/main/webapp/css/root.css
similarity index 66%
copy from
empire-db-examples/empire-db-example-jsf2/src/main/webapp/css/layout.css
copy to empire-db-examples/empire-db-example-jsf2/src/main/webapp/css/root.css
index 39bcce1a..8a6a5f35 100644
--- a/empire-db-examples/empire-db-example-jsf2/src/main/webapp/css/layout.css
+++ b/empire-db-examples/empire-db-example-jsf2/src/main/webapp/css/root.css
@@ -1,22 +1,36 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one
- * or more contributor license agreements. See the NOTICE file
- * distributed with this work for additional information
- * regarding copyright ownership. The ASF licenses this file
- * to you under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance
- * with the License. You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-@charset "UTF-8";
-
-@import url("common.css");
-@import url("content.css");
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+:root {
+ --label-width: 150px;
+ --button-border-width: 2px;
+ --button-border-color: #8F99EF;
+ --input-border-width: 1px;
+ --input-border-color: #8F99EF;
+ --input-v-pad: 7px;
+ --input-h-pad: 7px;
+ --control-v-pad: 5px;
+ --control-h-pad: 5px;
+ --control-min-height: 20px;
+ --grid-v-space: 2px;
+ --grid-h-space: 20px;
+ --table-cell-v-pad: 10px;
+ --table-cell-h-pad: 5px;
+ --form-background-color: #F8F8F8;
+}
diff --git
a/empire-db-examples/empire-db-example-jsf2/src/main/webapp/pages/employeeDetailPage.xhtml
b/empire-db-examples/empire-db-example-jsf2/src/main/webapp/pages/employeeDetailPage.xhtml
index 47808f29..5b019a8d 100644
---
a/empire-db-examples/empire-db-example-jsf2/src/main/webapp/pages/employeeDetailPage.xhtml
+++
b/empire-db-examples/empire-db-example-jsf2/src/main/webapp/pages/employeeDetailPage.xhtml
@@ -41,23 +41,23 @@
<e:tabPage title="#{msg.employeeDetail_tab_basic}"
id="tabBasic">
<e:record value="#{page.employeeRecord}">
- <!-- input form -->
+ <!-- formPanel -->
<div class="formPanel">
- <e:formGrid mode="table"
styleClass="inputForm">
+ <e:formGrid mode="grid"
styleClass="grid-columns-2"><!-- grid-v-align grid-white-gap -->
<e:control
column="#{db.EMPLOYEES.SALUTATION}"/>
- <e:control
column="#{db.EMPLOYEES.FIRST_NAME}"/>
+ <e:control
column="#{db.EMPLOYEES.FIRST_NAME}" controlClass="grid-new-row"/>
<e:control
column="#{db.EMPLOYEES.LAST_NAME}"/>
+ <e:control
column="#{db.EMPLOYEES.GENDER}"/>
<e:control
column="#{db.EMPLOYEES.DATE_OF_BIRTH}"/>
<e:control
column="#{db.EMPLOYEES.DEPARTMENT_ID}"/>
- <e:control
column="#{db.EMPLOYEES.GENDER}"/>
- <e:control
column="#{db.EMPLOYEES.PHONE_NUMBER}"/>
- <e:control
column="#{db.EMPLOYEES.EMAIL}"/>
+ <e:control
column="#{db.EMPLOYEES.PHONE_NUMBER}" controlClass="grid-new-row"/>
+ <e:control
column="#{db.EMPLOYEES.EMAIL}" controlClass="grid-full-row"/>
<e:control
column="#{db.EMPLOYEES.SALARY}"/>
<e:control
column="#{db.EMPLOYEES.RETIRED}"/>
<e:control
column="#{db.EMPLOYEES.UPDATE_TIMESTAMP}"/>
</e:formGrid>
</div>
- <!-- input form ende -->
+ <!-- formPanel -->
</e:record>
</e:tabPage>
@@ -92,14 +92,14 @@
</e:tabView>
<!-- button bar -->
- <h:panelGroup styleClass="buttonBar" layout="block">
+ <sample:pageButtons>
<h:commandLink value="#{msg.employeeDetail_back}"
action="#{page.doCancel}" immediate="true" />
<h:commandLink value="#{msg.employeeDetail_delete}"
action="#{page.doDelete}" immediate="true"
rendered="#{page.employeeRecord.exists}" />
<h:commandLink value="#{msg.employeeDetail_save}"
action="#{page.doSave}" />
<!--
<h:commandLink value="#{msg.employeeDetail_test}"
actionListener="#{page.doTestSerialization}" />
-->
- </h:panelGroup>
+ </sample:pageButtons>
</h:form>
diff --git
a/empire-db-examples/empire-db-example-jsf2/src/main/webapp/pages/employeeListPage.xhtml
b/empire-db-examples/empire-db-example-jsf2/src/main/webapp/pages/employeeListPage.xhtml
index 04cf9bac..df94174d 100644
---
a/empire-db-examples/empire-db-example-jsf2/src/main/webapp/pages/employeeListPage.xhtml
+++
b/empire-db-examples/empire-db-example-jsf2/src/main/webapp/pages/employeeListPage.xhtml
@@ -34,22 +34,23 @@
<!-- content -->
<ui:define name="content">
<h:form id="employeeListFilter">
- <sample:formPanel>
- <!-- search settings -->
- <sample:formPanelRow>
+
+ <!-- search settings -->
+ <div class="formPanel">
+ <!-- search criteria -->
+ <e:formGrid mode="grid"
styleClass="grid-columns-2">
<e:control
column="#{db.EMPLOYEES.FIRST_NAME}" value="#{page.searchFilter.firstName}" />
<e:control
column="#{db.EMPLOYEES.LAST_NAME}" value="#{page.searchFilter.lastName}" />
- </sample:formPanelRow>
- <sample:formPanelRow>
<e:control
column="#{db.EMPLOYEES.DEPARTMENT_ID}" value="#{page.searchFilter.departmentId}"
options="#{page.departmentOptions}" />
<e:control
column="#{db.EMPLOYEES.GENDER}" value="#{page.searchFilter.gender}" />
- </sample:formPanelRow>
- <sample:formButtonRow>
+ </e:formGrid>
+ <!-- button bar -->
+ <div class="buttonBar">
<h:commandLink
action="#{page.doResetSearch}" value="#{msg.employeeList_resetSearch}"
immediate="true" />
<h:commandLink
action="#{page.doSearch}" value="#{msg.employeeList_search}" />
- </sample:formButtonRow>
- </sample:formPanel>
+ </div>
+ </div>
</h:form>
<h:form id="employeeList">
@@ -100,10 +101,10 @@
</h:form>
<!-- button bar -->
- <h:panelGroup styleClass="buttonBar" layout="block">
+ <sample:pageButtons>
<e:link page="#{pages.LoginPage.doLogout}"
value="#{msg.application_logout}"/>
<e:link page="#{pages.EmployeeDetailPage.doCreate}"
value="#{msg.employeeList_create}" />
- </h:panelGroup>
+ </sample:pageButtons>
</ui:define>
diff --git
a/empire-db-examples/empire-db-example-jsf2/src/main/webapp/pages/loginPage.xhtml
b/empire-db-examples/empire-db-example-jsf2/src/main/webapp/pages/loginPage.xhtml
index fcb82dce..7a960c96 100644
---
a/empire-db-examples/empire-db-example-jsf2/src/main/webapp/pages/loginPage.xhtml
+++
b/empire-db-examples/empire-db-example-jsf2/src/main/webapp/pages/loginPage.xhtml
@@ -38,21 +38,24 @@
<h:form id="loginForm" method="post">
<p><h:outputText value="#{msg.login_hint}"/></p>
<!-- input form -->
- <sample:formPanel>
- <sample:formInputRow for="name"
label="#{msg.login_field_name}">
- <h:inputText id="name"
value="#{sampleUser.userName}" required="true"/>
- </sample:formInputRow>
- <sample:formInputRow for="password"
label="#{msg.login_field_password}">
- <h:inputSecret id="password"
value="#{sampleUser.password}" required="true" />
- </sample:formInputRow>
- <sample:formInputRow for="password"
label="#{msg.login_field_language}">
- <e:select id="language"
value="#{sampleUser.locale}" options="#{page.languageOptions}" />
- </sample:formInputRow>
+ <div class="formPanel">
+ <!-- search criteria -->
+ <e:formGrid mode="grid">
+ <sample:formControl for="name"
label="#{msg.login_field_name}">
+ <h:inputText id="name"
value="#{sampleUser.userName}" required="true"/>
+ </sample:formControl>
+ <sample:formControl for="password"
label="#{msg.login_field_password}">
+ <h:inputSecret id="password"
value="#{sampleUser.password}" required="true" />
+ </sample:formControl>
+ <sample:formControl for="password"
label="#{msg.login_field_language}">
+ <e:select id="language"
value="#{sampleUser.locale}" options="#{page.languageOptions}" />
+ </sample:formControl>
+ </e:formGrid>
<!-- button bar -->
- <sample:formButtonRow>
+ <div class="buttonBar">
<h:commandLink action="#{page.doLogin}"
value="#{msg.login_title}" />
- </sample:formButtonRow>
- </sample:formPanel>
+ </div>
+ </div>
</h:form>
</ui:define>
diff --git
a/empire-db-examples/empire-db-example-jsf2/src/main/webapp/resources/components/formButtonRow.xhtml
b/empire-db-examples/empire-db-example-jsf2/src/main/webapp/resources/components/formButtonRow.xhtml
deleted file mode 100644
index c8213326..00000000
---
a/empire-db-examples/empire-db-example-jsf2/src/main/webapp/resources/components/formButtonRow.xhtml
+++ /dev/null
@@ -1,36 +0,0 @@
-<!--
- Licensed to the Apache Software Foundation (ASF) under one
- or more contributor license agreements. See the NOTICE file
- distributed with this work for additional information
- regarding copyright ownership. The ASF licenses this file
- to you under the Apache License, Version 2.0 (the
- "License"); you may not use this file except in compliance
- with the License. You may obtain a copy of the License at
-
- http://www.apache.org/licenses/LICENSE-2.0
-
- Unless required by applicable law or agreed to in writing,
- software distributed under the License is distributed on an
- "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- KIND, either express or implied. See the License for the
- specific language governing permissions and limitations
- under the License.
- -->
-<html xmlns="http://www.w3.org/1999/xhtml";
- xmlns:cc="http://java.sun.com/jsf/composite";>
-
- <!-- Interface -->
- <cc:interface>
- </cc:interface>
-
- <!-- Implementation -->
- <cc:implementation>
- <tr class="formButtonRow">
- <td><!-- empty --></td>
- <td class="buttonBar" colspan="3">
- <cc:insertChildren/>
- </td>
- </tr>
- </cc:implementation>
-
-</html>
diff --git
a/empire-db-examples/empire-db-example-jsf2/src/main/webapp/resources/components/formInputRow.xhtml
b/empire-db-examples/empire-db-example-jsf2/src/main/webapp/resources/components/formControl.xhtml
similarity index 89%
rename from
empire-db-examples/empire-db-example-jsf2/src/main/webapp/resources/components/formInputRow.xhtml
rename to
empire-db-examples/empire-db-example-jsf2/src/main/webapp/resources/components/formControl.xhtml
index 1747c437..9f40011e 100644
---
a/empire-db-examples/empire-db-example-jsf2/src/main/webapp/resources/components/formInputRow.xhtml
+++
b/empire-db-examples/empire-db-example-jsf2/src/main/webapp/resources/components/formControl.xhtml
@@ -1,41 +1,41 @@
-<!--
- Licensed to the Apache Software Foundation (ASF) under one
- or more contributor license agreements. See the NOTICE file
- distributed with this work for additional information
- regarding copyright ownership. The ASF licenses this file
- to you under the Apache License, Version 2.0 (the
- "License"); you may not use this file except in compliance
- with the License. You may obtain a copy of the License at
-
- http://www.apache.org/licenses/LICENSE-2.0
-
- Unless required by applicable law or agreed to in writing,
- software distributed under the License is distributed on an
- "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- KIND, either express or implied. See the License for the
- specific language governing permissions and limitations
- under the License.
- -->
-<html xmlns="http://www.w3.org/1999/xhtml";
- xmlns:cc="http://java.sun.com/jsf/composite";
- xmlns:h="http://java.sun.com/jsf/html";>
-
- <!-- Interface -->
- <cc:interface>
- <cc:attribute name="label" />
- <cc:attribute name="for" targets="outputLabel"/>
- </cc:interface>
-
- <!-- Implementation -->
- <cc:implementation>
- <tr class="formButtonRow">
- <td class="eCtlLabel">
- <h:outputLabel id="outputLabel"
value="#{cc.attrs.label}" />:
- </td>
- <td class="eCtlInput">
- <cc:insertChildren/>
- </td>
- </tr>
- </cc:implementation>
-
-</html>
+<!--
+ Licensed to the Apache Software Foundation (ASF) under one
+ or more contributor license agreements. See the NOTICE file
+ distributed with this work for additional information
+ regarding copyright ownership. The ASF licenses this file
+ to you under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance
+ with the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing,
+ software distributed under the License is distributed on an
+ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ KIND, either express or implied. See the License for the
+ specific language governing permissions and limitations
+ under the License.
+ -->
+<html xmlns="http://www.w3.org/1999/xhtml";
+ xmlns:cc="http://java.sun.com/jsf/composite";
+ xmlns:h="http://java.sun.com/jsf/html";>
+
+ <!-- Interface -->
+ <cc:interface>
+ <cc:attribute name="label" />
+ <cc:attribute name="for" targets="outputLabel"/>
+ </cc:interface>
+
+ <!-- Implementation -->
+ <cc:implementation>
+ <div class="eControl">
+ <div class="eCtlLabel">
+ <h:outputLabel id="outputLabel"
value="#{cc.attrs.label}" />:
+ </div>
+ <div class="eCtlInput">
+ <cc:insertChildren/>
+ </div>
+ </div>
+ </cc:implementation>
+
+</html>
diff --git
a/empire-db-examples/empire-db-example-jsf2/src/main/webapp/resources/components/formPanel.xhtml
b/empire-db-examples/empire-db-example-jsf2/src/main/webapp/resources/components/formPanel.xhtml
deleted file mode 100644
index f74ad290..00000000
---
a/empire-db-examples/empire-db-example-jsf2/src/main/webapp/resources/components/formPanel.xhtml
+++ /dev/null
@@ -1,39 +0,0 @@
-<!--
- Licensed to the Apache Software Foundation (ASF) under one
- or more contributor license agreements. See the NOTICE file
- distributed with this work for additional information
- regarding copyright ownership. The ASF licenses this file
- to you under the Apache License, Version 2.0 (the
- "License"); you may not use this file except in compliance
- with the License. You may obtain a copy of the License at
-
- http://www.apache.org/licenses/LICENSE-2.0
-
- Unless required by applicable law or agreed to in writing,
- software distributed under the License is distributed on an
- "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- KIND, either express or implied. See the License for the
- specific language governing permissions and limitations
- under the License.
- -->
-<html xmlns="http://www.w3.org/1999/xhtml";
- xmlns:h="http://java.sun.com/jsf/html";
- xmlns:ice="http://www.icesoft.com/icefaces/component";
- xmlns:c="http://java.sun.com/jsp/jstl/core";
- xmlns:cc="http://java.sun.com/jsf/composite";>
-
- <!-- Interface -->
- <cc:interface>
- <cc:attribute name="columns" default="1" />
- </cc:interface>
-
- <!-- Implementation -->
- <cc:implementation>
- <h:panelGroup styleClass="formPanel" layout="block">
- <table class="inputForm">
- <cc:insertChildren />
- </table>
- </h:panelGroup>
- </cc:implementation>
-
-</html>
diff --git
a/empire-db-examples/empire-db-example-jsf2/src/main/webapp/resources/components/formPanelRow.xhtml
b/empire-db-examples/empire-db-example-jsf2/src/main/webapp/resources/components/formPanelRow.xhtml
deleted file mode 100644
index 2cd96c5d..00000000
---
a/empire-db-examples/empire-db-example-jsf2/src/main/webapp/resources/components/formPanelRow.xhtml
+++ /dev/null
@@ -1,34 +0,0 @@
-<!--
- Licensed to the Apache Software Foundation (ASF) under one
- or more contributor license agreements. See the NOTICE file
- distributed with this work for additional information
- regarding copyright ownership. The ASF licenses this file
- to you under the Apache License, Version 2.0 (the
- "License"); you may not use this file except in compliance
- with the License. You may obtain a copy of the License at
-
- http://www.apache.org/licenses/LICENSE-2.0
-
- Unless required by applicable law or agreed to in writing,
- software distributed under the License is distributed on an
- "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- KIND, either express or implied. See the License for the
- specific language governing permissions and limitations
- under the License.
- -->
-<html xmlns="http://www.w3.org/1999/xhtml";
- xmlns:cc="http://java.sun.com/jsf/composite";>
-
- <!-- Interface -->
- <cc:interface>
- <cc:attribute name="styleClass" />
- </cc:interface>
-
- <!-- Implementation -->
- <cc:implementation>
- <tr class="#{cc.attrs.styleClass}">
- <cc:insertChildren />
- </tr>
- </cc:implementation>
-
-</html>
diff --git
a/empire-db-examples/empire-db-example-jsf2/src/main/webapp/resources/components/buttonBar.xhtml
b/empire-db-examples/empire-db-example-jsf2/src/main/webapp/resources/components/pageButtons.xhtml
similarity index 89%
rename from
empire-db-examples/empire-db-example-jsf2/src/main/webapp/resources/components/buttonBar.xhtml
rename to
empire-db-examples/empire-db-example-jsf2/src/main/webapp/resources/components/pageButtons.xhtml
index a032f728..0e00aa31 100644
---
a/empire-db-examples/empire-db-example-jsf2/src/main/webapp/resources/components/buttonBar.xhtml
+++
b/empire-db-examples/empire-db-example-jsf2/src/main/webapp/resources/components/pageButtons.xhtml
@@ -24,12 +24,11 @@
<!-- Interface -->
<cc:interface>
- <cc:attribute name="columns" default="1" />
</cc:interface>
<!-- Implementation -->
<cc:implementation>
- <h:panelGroup styleClass="buttonBar" layout="block">
+ <h:panelGroup styleClass="buttonBar margin-above"
layout="block">
<cc:insertChildren />
</h:panelGroup>
</cc:implementation>
