Having JSF spit out an HTML Search field. Doable? - java

I'm not a Java developer, but work with a team that is using JSF 1.2
We'd like to start using HTML 5 tags and attributes. It does not appear that JSF 1.2 supports those by default.
Is there anyway to have a JSF text tag:
<x:inputText>
spit out an html 5 search tag:
<input type="search" placeholder="blahblah" />
Right now, I'm having to let it output a regular text field and then I place inline JS after it to trigger a function that converts it client side:
<input type="text">
<script> funciton here that changes type to 'search' and adds placeholder attribute</script>
It works, but is a bit hacky. Is there a legitimate way to get server-side JSF to output proper HTML 5 tags?

Create a custom component. This allows you fine grained control over rendered HTML.
Or upgrade to JSF 2.0, then you can create a composite component which is a lot easier.

Related

Migrating app to AngularJS?

i have existing web application where most of the time pages are submitted traditional way(like document.form.submit or )
I am planning to migrate to angularJS which i am learning. I am not sure how we can submit form in traditional way (without ajax) with angularJS ?
I know it won't be true Single Page App(SPA), but for starting i would like to go this way.
Approach for migrating traditional app to SPA :-
In future , i would like to go for SPA in which i will submitting the form thru ajax way using AngularJS. I have vague understanding
how will i approach this but would like to get experts advice on this.
My Understanding:-
Say i land to welcome page with a link for customer creation. I will make the ajax call from WelcomeController(angularJS Controller) to my servlet/spring controller
which will return html response containing js file. HTML response will be conatining below
1)HTML will be containing ng-view and ng-template which will be used by routeProvide
2)One of the js files will be containing routeProvider Info to map the ng-template with view
Please correct me if this is right approach ?
Use AngularJS for data-binding and form-validation. When you want to submit a form, you can rely on jQuery:
<div ng-controller="ctrl">
<form id="myform" name="myform">
Name: <input type="text" ng-model="person.name" name="person.name" /> <br />
<button ng-click="submit(person)">Submit</button>
</form>
</div>
Script
app.controller('ctrl', function($scope) {
$scope.submit = function(person) {
if ($scope.myform.$valid) {
$('#myform').submit();
}
}
});
For this to work, make sure you give your input fields properly scoped names so that it binds to your MVC models.
This approach does have its limitations. For example, input fields that use ngModel should not have any $formatters/$parsers which limits you to simple formats.
I was exactly looking for Single Page App with AngularJS which describes how you can have full fledged SPA web app using AngularJS(with features like router,controller,service etc) in a clear and succinct way

ESAPI implementation for spring form tags

How can we implement ESAPI output encoding in an application using java and spring-mvc.
Read many posts and saw this:
<%# page import="org.owasp.esapi.*" %>
<input type="hidden" name="hidden" value="<%out.print(ESAPI.encoder().encodeForHTML(content));%>"/>
But, in my application all the jsps use spring form tags like the following,
<td>Number:
<form:input path="someNo" size="20" maxlength="18" id="firstfield" onkeypress="return PressAButton('submithidden');"/></td>
How can I have ESAPI implementation for above code? is there any other way of implementing output encoding like creating a filter or something? Any suggestions are greatly appreciated!
After researching spring tags a bit, it appears that the data-binding happens in framework code thus preventing you from applying any escaping in the jsp.
One, semi-quick win could be defaulting all output to escape HTML. Add this entry in web.xml:
<context-param>
<param-name>defaultHtmlEscape</param-name>
<param-value>true</param-value>
</context-param>
The only problem here is that output-escaping is a BIG pain... the rules for html escaping are different when your value is going to be passed as data to an HTML attribute or a Javascript function. And there could be some parts of your application where you DO NOT want to html escape, but you should be able to override those with the form tag attribute htmlEscape="false" when you need to.
What you need is to be able to hook the part of Spring tags where it is binding the HTML to the form, but you need to be able to do it so you can escape based on where its being placed. Escaping rules are different for an HTMLAttribute as opposed to plain HTML and if the value is going to be passed as data to a javascript function. So Spring's solution only defends one category of attack.
These are the only ways out I see, all of them will require work:
Use JSTL tags instead of Spring tags so you can write your variables with ${thisSyntax} and wrap them in esapi tags like this:
<c:out value="<esapi:encodeForHTML>${variable}</esapi:encodeForHTML>"/>
Follow a solution like what #A. Paul put forward, where you do your context escaping back on the controller side. I'm aware you feel that this isn't an option, but the next solution I'm putting forward is untested.
Implement your own tag library that subclasses [org.springframework.web.servlet.tags.form.InputTag][1], specifically the method writeValue. While esapi prevents alot, I would recommend looking at owasp's new Encoder project to show you exactly how tricky output encoding is. Ideally your tag library will allow you to utilize either esapi's Encoder or this new API.
Just a thought not sure if this is what you are looking for.
Can you use the below code in Java and change the data in the bean itself and then send in the user interface.
if ( ESAPI.securityConfiguration().getLogEncodingRequired() ) {
data = ESAPI.encoder().encodeForHTML(message);
}
You can check the below url.
http://www.jtmelton.com/tag/esapi/

Validating ActionErrors in JavaScript

Is is possible to validate or view the ActionErrors/ActionMessages in JavaScript? so that proper javascript alert can be displayed on the screen.
Thanks.
Javascript used for client-side validations, where as ActionErrors/ActionMessages are for serverside.
Precisely, Struts validation is an alternative to the Javascript validations. So Why would you want to combine both of them? I feel it is meaningless.
yes you can.
you must add these 2 lines to your jsp file.
<script src="scripts/libs/staticStrutsJvs.js"></script>
<html:javascript formName="XXXForm" dynamicJavascript="true" staticJavascript="false" bundle="someBundleName" />
File staticStrutsJvs is a part of struts framework.
These lines automatic generate javascript validation code with method names
validateXXXForm()
In the end you have to call this method before submit form.
<html:form action="/XXXAction" method="post" onsubmit="return validateXXXForm(this);">

JSF and Javascript and HTML - How to create a highly dynamic interface

I'm new to JSF and developing web applications with Java.
I'm basically developing a pretty complex interface, with lots of AJAX content loaded (Pagination, posts, comments, ...).
I'll start with a basic example, a user writes a comment. The form is sent through JSF f:ajax to the server and then I can do a render="sectionId", but the problem is, that I want to make the post not just appear, but slide down and even toggle background color.
How can I obtain this sort of effect using JSF and Javascript?
The designer (who knows only HTML/CSS/Javscript/Jquery) says that usually, he just does a Jquery AJAX call to a page with a string of data and then the page generates a JSON encode that he can then use to do all the magic.
I'm not asking how you do the toggle/color in jquery, it's the communication between the JSF and Javascript. So how can I send to his javascript the newly generated HTML code, so that he can what he wants with it.
Thanks for any help.
JSF is a server-side technology and you'd typically conditionally display content within
a construct such as a panelGroup, so why not include your jquery magic inside a ready
handler inside the conditionally rendered panelGroup like this:
<h:panelGroup id="ajaxRenderTarget">
<ui:repeat value="#{bean.listOfComments}" var="var">
... display required information ...
</ui:repeat>
<h:panelGroup rendered="#{bean.showJqueryEffects}">
<script type="text/javascript">
jQuery(function($) {
... funky effects here ...
});
</script>
</h:panelGroup>
</h:panelGroup>
Where I've used ui:repeat in the above example you could be and probably would be using any data iteration component from jsf or a component library such as a datatable.
Another thing to consider is OmniFaces which has <o:onloadScript> and a host of other tags which are worth knowing about.
One mistake to avoid is trying to load JSF pages using jQuery ajax functions, the server will have no state of the component tree and it won't work.

Write Multiple Full HTML 'Files' to Single Output Stream?

I'm writing a testing utility- I want to show multiple finished HTML "pages" in a single browser window.
Is this possible? I'm using Java Servlets.
For example, normally the user goes to a utility screen, fills in a bunch of fields and POSTS this to my servlet, which builds up a full HTML stream based on their input and writes it to HttpServletResponse.getWriter(). When the user views source, they get a <html> ... </html>.
What I want to do is allow users to request multiple "screens" and get the results in a single web page where you'd scroll down to see the 2nd, 3rd, etc. screens, maybe there is some kind of divider in between. I thought of frames or iframes, but didn't have luck. I have seen where I can write my big html stream to a javascript variable, then use document.write to dump it into the iframe. But that seems pretty awkward, and I'd have to be really careful about escaping quotes and stuff.
You will have to use iframes or frames to do this. A single web page can only contain one set of html tags and thus one html page.
Another idea would be to render the page by your script and then capture a picture of it and then have a page containing images. You will of course loose all interaction with the page.
I'm not sure what you're trying with your frames, but I imagine frames should work OK for what you've described.
Instead of trying to post to more than one URL from your form, you just post to a servlet that returns a page with the frameset, and each frame has a source that points to one of the URLs you want to test. For example:
<form action="testServlet" method="post">
<input type="text" name="someValue" />
</form>
The testServlet then returns a page with this content:
<frameset rows="33%,33%,33%">
<frame src="testUrl1?someValue=value">
<frame src="testUrl2?someValue=value">
<frame src="testUrl3?someValue=value">
</frameset>
The only problem with this is that you're doing a GET instead of a POST, but that's easy to get around. All you would need do is to implement the doGet method within your servlets and just call doPost from within doGet.
Just leave out the <html>/</html> tags for each page and wrap the whole thing inside a single large ....
Like this maybe:
<html>
[page1Content]
<hr />
[page2Content]
<hr />
[page3Content]
<hr />
</html>

Categories

Resources