Skip to main content

I want to bind value in a backing bean (defined by getter's & setters) to an html5 component without using JavaScript

1 reply [Last post]
ivanradmore
Offline
Joined: 2011-07-08
Points: 0

I am currently involved in developing an Internet Application using Netbeans 7.0 with JSF/Ajax/CSS3/EJB 3.0. I want to bind a value in a backing bean (defined by getter's & setters) to an HTML5 component without using JavaScript.

The following code refers to HTML 5 components and my backing beans that I am using.

<form>
<p><label id="seven" value="#{indexBean.loginResult}"/></p>
<p><label>Username:</label>
<input name="#{indexBean.username}" id="fifth" type="text" required/></p>
<p><label>Display password</label>
<input type="checkbox" id="loginBool"
value="#{indexBean.displayLoginPassword}"/></p>
<p><label></label>
<label id="loginPaswd" value="#{indexBean.loginPassword}"></label>
<p><label>Password:</label>
<input name="#{indexBean.password2}" id="fifth" type="password"
required/></p>
<button onclick="{indexBean.confirmUser}">Login</button>
<button action="#{indexBean.confirmUser}">Resend password</button>
</form>

Following from that in the event that a solution is not available, we used facelets with html5 components to accommodate what couldn't be resolved above. Using a dynamic menu, it seems not to render properly in the facelets framework. If I run it outside the framework all function properly. I have marked the problem area in red. I think "<ul", "<li>" might need to be replaced with the facelet's equivalent but don't know what it might be.

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets">

<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></meta>
<link href="resources/assets/style.css" rel="stylesheet" type="text/css"></link>
<script src="resources/assets/jquery.js" type="text/javascript"></script>
<script src="resources/assets/jquery-cookie.js" type="text/javascript"></script>

<link href="resources/auroramenu/auroramenu.css" rel="stylesheet" type="text/css"></link>
<script src="resources/auroramenu/auroramenu.js" type="text/javascript"></script>

</h:head>

<body>

<ui:composition template="./Templates/newTemplate.xhtml">
<ui:define name="content">

<!-- BEGIN EXAMPLE 1 CODE -->
<ul id="menu1" class="auroramenu">
<li><a href="#">Example 1 Menu 1</a> <a style="display: none;" class="aurorashow" href="#"></a> <a style="display: inline;" class="aurorahide" href="#"></a>
<ul>
<li><input size="25"/></li>
<li><a href="#">Lorem Ipsum</a></li>
<li><a href="#">Ipsum Consecteteur</a></li>
<li><a href="#">Dolor Sit Amet</a></li>
</ul>
</li>
<li><a href="#">Example 1 Menu 2</a> <a style="display: none;" class="aurorashow" href="#"></a> <a style="display: inline;" class="aurorahide" href="#"></a>
<ul>
<li><a href="#">Lorem Ipsum</a></li>
<li><a href="#">Ipsum Consecteteur</a></li>
<li><a href="#">Dolor Sit Amet</a></li>
<li><a href="#">Consecteteur</a></li>
</ul>
</li>
</ul>
<!-- END EXAMPLE 1 CODE -->

</ui:define>
</ui:composition>

</body>
</html>

AttachmentSize
Project_Snapshot.png141.46 KB

Reply viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.
OneJumpedUp
Offline
Joined: 2012-04-05
Points: 0

You need to be using JSF or for really fancy stuff JSF + Primefaces
example of one of many components:

<h:inputText id="name" value="#{myBean.value}" 
             title="#{myBean.title}" required="true"
             requiredMessage="#{myBean.message}"/>