Develop Reference

Dynamic image preview on JSP

I have a textfield inside my rich:dataTable in one column:
<h:inputText id="logourl" value="#{item.logoUrl}" />
And I have this tag in another column:
<h:graphicImage id="logoimage" value="#{item.logoUrl}" url="#{item.logoUrl}" />
One element puts the value into bean "item" and another reads it but it happens only on page rerender. What I want is when I change a value in the image must refresh automatically.
I heard it can be done with a4j:mediaOutput butt all I found is how to create images manually.

I think you would need to submit the form to have it change automatically, personally I would use JavaScript to do this.
<script type="text/javascript">
function swapImage(divId) {
document.getElementById("img").src=divId;
}
</script>

How to use JSF tags in resource bundles / How to rewrite URLs in a resource bundle?

Enviornment:
JSF 2.1.7
SEAM 2.3.0
JBOSS 5.1.2
My application has a string that needs to be localized
"I agree to WorldSite's Privacy Policy and Cookie Notice"
Where the italicized Privacy Policy and Cookie Notice are hyperlinks to other pages.
Originally our facelet was set up like this:
<h:outputText value="#{messages['iAgreeTo']}" />
<h:outputLink target="_blank" value="#{bean.privacyPolicy}">#{messages['privacyPolicy']}</h:outputLink>
<h:outputText value="#{messages['and']}"/>
<h:outputLink target="_blank" value="/jsf/Notice.xhtml">
<h:outputText value="#{messages['cookieNotice']}"/>
<f:param name="content" value="Cookie-Notice"/>
<f:param name="application" value="#{bean.application}"/>
</h:outputLink>
Note: We have URL rewriting in place that takes /jsf/Notice.xhtml and rewrites to
rewrite pattern: /#{application}/Notice/#{content}
result:http://contextRoot/contextPath/myApp/Notice/Cookie-Notice
This allowed for piecemeal translations of the individual keys
iAgreeTo=I agree to WorldSite's 
privacyPolicy=Privacy Policy
and= and 
cookieNotice=Cookie Notice
But this required a workaround for some languages (in "iAgreeTo" and "and" keys)
iAgreeTo=J'accepte la 
privacyPolicy=Politique de la vie privée
and= de WorldSite et les 
cookieNotice=Note D'information sur les Cookies
Ideally I would like to be able to have the links be movable within the key. Something like this:
iAgreePhrase=I agree to WorldSite's #{messages['privacyPolicyLink']} and the #{messages['cookieNoticeLink']}
privacyPolicy=Privacy Policy
cookieNotice=Cookie Notice
//The following non-translatable keys held in a separate file
privacyPolicyLink=<h:outputLink target="_blank" value="#{bean.privacyPolicy}">#{messages['privacyPolicy']}</h:outputLink>
cookieNoticeLink=<h:outputLink target="_blank" id="cookieNoticeLink" value="/jsf/Notice.xhtml">\
#{messages['cookieNotice']}\
<f:param name="content" value="Cookie-Notice"/>\
<f:param name="application" value="#{bean.application}"/>\
</h:outputLink>
But the facelet returns the JSF tags (h:outputLink) as strings instead of expanding them to their HTML tags. I can use <a> tags, but then I'm putting rewrite logic in the properties file which is difficult to maintain
iAgreePhrase=I agree to WorldSite's #{messages['privacyPolicyLink']} and the #{messages['cookieNoticeLink']}
privacyPolicy=Privacy Policy
cookieNotice=Cookie Notice
//The following non-translatable keys held in a separate file
privacyPolicyLink=<a target="_blank" href="#{bean.privacyPolicy}">#{messages['privacyPolicy']}</a>
cookieNoticeLink=<a target="_blank" href="#{contextPath}/#{bean.application}/Notice/Terms-and-Conditions">\
#{messages['cookieNotice']}</a>
Is there a way I can achieve my desired effect without having to put rewrite logic in the resource bundle? Some thoughts I have are forcing the application container to process the facelet twice/reorder it, so it inserts the resource bundles first, and then expands the JSF tags.
Alternatively I may be able to construct the rewritten URL in a bean then call that from my resource bundle?

You seem to have got everything round the wrong way and I'm sorry to have to say that I found the question poorly analysed, overlong and confusing to read.
What you should be trying to do is use resource bundles from within JSF tags and not the other way round. Where you need to parameterise a message you use a construct such as this:
messages.properties
nameHeader=My name is {0}
index.xhtml
<h:outputFormat value="#{msgs.nameHeader}">
<f:param value="#{bean.name}"/>
</h:outputFormat>
If you have a scenario where this doesn't work you would have to build the string in a backing bean.

While Oversteer's answer is certainly applicable, this could also prove helpful. You can create URLs from EL expressions like this:
#{facesContext.externalContext.encodeActionURL('/myapp/Notice/Privacy-Policy')}
To include HTML markup in a message, you need to use escape="false" in <h:outputText/>, for example:
<h:outputText escape="false" value="#{messages['iAgreePhrase']}" />
And, in your messages.properties (or localized version):
iAgreePhrase=I agree to WorldSite's Privacy Policy and ...
This has the problem that the URL is calculable only from within an HTTP request, if you for example use the message key from within an asynchronous thread, the URL will not be calculated (there's no facesContext available).

Use Servlets to display the data on same webpage?

I am using a html form like this:
<form action="question" method="get">
where question is a java servlet class which renders the data from the form and display on other page.
What I am trying to do is display this data just below the html form not on other screen.
(Somewhat like the page where we Ask Question in stackoverflow.com where the question you enter is rendered and displayed below.)
So I am trying to do same. Anyone has an idea how to do that?

The simplest way to do it, is to use javascript (client side).
Below is a very crude example on how to do this. This will give you an idea on how to proceed.
create a html page, with two separate text area boxes.
Let the first text area box be the source where you type in the text.
Assign it an id 'source_area'.
<textarea id='source_area'>
</textarea>
Let the second text area box be the destination.
Assign it an id 'destination_area'.
Set this area as "readonly" because you don't want users typing here directly.
<textarea id='destination_area' readonly>
</textarea>
Now when a user types into the first box, we need to capture the particular action.
For this example I will use the "onKeyUp" to capture events when a keyboard key is released.
Now when typing into the source text box, a key on your keyboard is released, it will invoke a javascript function "transferToNextArea()" is invoked.
We will create the javascript function "transferToNextArea()" in
Read more about javascripts here. http://w3schools.com/js/js_events.asp
Complete list of events here. http://w3schools.com/jsref/dom_obj_event.asp
The javascript function will extract text from 'source_area' text box.
It will then assign the same text into 'destination_area'.
function transferToNextArea()
{
//extracting text.
var varSrcText = document.getElementById("source_area").value;
//assigning text to destination.
document.getElementById("destination_area").value=varSrcText
}
Complete html (tested in Google Chrome)
<html>
<body >
Source Box
<textarea id='source_area' onKeyUp="transferToNextArea();">
</textarea>
<br>
Destination Box
<textarea id='destination_area' readonly>
</textarea>
</body>
<script type="text/javascript">
function transferToNextArea()
{
var varSrcText = document.getElementById("source_area").value;
document.getElementById("destination_area").value=varSrcText
}
</script>
</html>
This is just a very basic example. It is not very effecient, but it will give you an idea of how data can be moved around.
Before assigning the text, you could manipulate the text however you want it using javascript.
Stackoverflow formats the text as per the html tags after extracting it. This will require lot more code and more work.
Using a servlet for the above task is overkill.
You would use a servlet, only if you want to do something with the data on the server side.
Example
a) store it in a database before displaying it below.
Read about "ajax" calls to send and recieve data between the server and client.
Ajax will give you the means to send data to the servlet without having to refresh the whole page.

Create a JSP with a form
on submit post the data to some servlet
process request and produce resultant data and set it to request's attribute
forward the request to same jsp
check if the data is not null display under the form

Just let the servlet forward the request to the same JSP page and use JSTL <c:if> to conditionally display the results.
request.setAttribute("questions", questions);
request.getRequestDispatcher("/WEB-INF/questions.jsp").forward(request, response);
with
<c:if test="${not empty questions}">
<h2>There are ${fn:length(questions)} questions.</h2>
<c:forEach items="${questions}" var="question">
<div class="question">${question}</div>
</c:forEach>
</c:if>
See also:
Our servlets wiki page - Contains concrete Hello World examples.

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>

How to put Google Adsense in GWT

Do anyone know how to put Google adsense ads inside a GWT web application?

You can put the javascript-code from Adsense in the single HTML page that GWT starts with. This way the advertising will not be displayed in the same area as GTW but above/below the GWT code. For advertising that could be ok.
This example places a baner above the application:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>www.javaoracleblog.com</title>
<script type="text/javascript" language="javascript" src="com.javaoracleblog.aggregator.nocache.js"></script>
</head>
<body>
<script type="text/javascript"..
ADsense code here
</script>
<!-- OPTIONAL: include this if you want history support -->
<iframe src="javascript:''" id="__gwt_historyFrame" tabIndex='-1' style="position:absolute;width:0;height:0;border:0"></iframe>
</body>
</html>
In order to indicate to Google WT that the site of Google adsense can be trusted you need to add a regex matching URL to the -whitelist command line argument.
Note that this will probably not solve the problems desribed in the above "Why I dumped GWT" article.

According to this thread on AdSense:
Short version, you can't use Adsense
via Ajax without breaking the
programme policies/t&c's
Long version...
Ad code passed through an xmlhttp call
is not rendered, it's just treated as
text (hence, responseText). The only
way to execute js code is to use
"responseXML" coupled with the
"exec()" command.
For instance...
If your xml contains something along
the lines of:
This is the
content from the external
file javascript code
goes here
You would assign a variable (called
page_data for instance) using
ajax_obj.responseXML, run the XML
through a parser and run
exec(js variable or line from XML
here);
Not really helpful from an Adsense
standpoint, but that's how it's done.
It's also worth mentioning Why I dumped GWT:
Another problem were my adsense
banners. Since I didn’t have a lot of
content on the page, the banners were
sometimes off topic. An even bigger
problem was that the banners stayed
the same when people searched for
different keywords (since the ajax
refresh didn’t trigger an adsense
refresh). I solved this by doing the
search with a page refresh instead of
an ajax call. The ajax part of the
site was limited to sorting, faceting,
i18n and displaying tips.

You might check out the interview I did with InfoQ. It includes a sample chapter from my book and it happens to be on SEO.
It's not trivial, but I think the solutions in the chapter let GWT work nicely in an environment where SEO is important. The basic solution is to implement something I call 'bootstrapping'. This means that your pages take the info that would normally come across in GWT-RPC requests and serialize them into the page. The GWT widget then loads this information without an RPC request. While your page serializes the info into JavaScript, it's easy to also write a <noscript> to the page that can be used for SEO.
Take a look at the PDF included here: InfoQ GWT it goes into all the detail. The whole sample project is here: google code with source on github.

If you really want AdSense to be kinda "inside" GWT I'd use the Frame widget. Basically the Frame widget generates an <iframe ...> inside your GWT code. First I've thought iframe, UGH! But the <iframe> tag is still part of the HTML5 spec and has been even extended by some attributes that seem to be there for exactly this "sandboxing" purpose. And with corresponding CSS styling you will not have any scrollbars around your <iframe>.
And here is the actual solution:
You should put
<ui:style>
.sponsor {
border: 0em;
width: 20em;
height: 6em;
float: right;
display: inline;
}
</ui:style>
<g:HTMLPanel>
<g:Frame ui:field="sponsor" url="issue/extern/Google-AdSense.html" styleName="{style.sponsor}"/>
</g:HTMLPanel>
into your .ui.xml file and the logic into the corresponding .java file:
#UiField
Frame sponsor;
Also you should put the actual Google AdSense code (the <script> stuff) into a separate HTML file inside GWT's public folder which is - in this case - called Google-AdSense.html and is located inside the extern folder inside the public folder. issue (in the Frame url attribute) is in this case the GWT output folder.
And here is how it looks like: The ad in the upper right corner.
Btw this is also the way to embed the Google Analytics code into GWT.

Here is how I do it. I have a demo and source code here: http://code.google.com/p/gwt-examples/wiki/DemoGwtAdsene

You can use AdSense and GWT together without using frames or other hacks if you take some care in how you create your host pages.
The key is to include your AdSense code in the host page and then to manipulate the dom element containing the ad but to not detach it from the page. So you can reposition the ads into the body of your other gwt code as long as the dom structure is not changed.
If you do detach and reattach the containing dom element then it will appear to work in Chrome and Firefox but IE will show a blank space. I tried initially to move the ads DIV element into a DockLayoutPanel and thought everything was great until I belatedly tested it in IE.
So this is OK:
Element element = Document.get().getElmentById("ad");
element.getStyle().setPosition(ABSOLUTE);
element.getStyle().setTop(20, PX);
But this is not:
myPanel.add(ElementWrapper.wrap(element));
because adding a widget to another widget re-parents it.
This means that you cannot use any of the built-in LayoutPanel stuff to hold your ad div because Layout cannot wrap an existing element (It creates its own DIV in its constructor). You may be able to modify the layout panel stuff so it wraps an element and does not re-parent it... but I have not tried this yet.
I've tested the results in IE6+, Chrome and Firefox. Downside is that you cannot refresh the ads unless you load a new page. But in my case GWT was used to enhance html pages so that was not an issue. In any case... are users more likely to click on a different ad than one they read several times? Not sure it is so vital.

I could do this using DFP Small Business + Async Publisher tag + AdSense integration:
Here is the code:
On of your host page, put your publisher tag, something like:
<head>
<script type="text/javascript" src="http://www.googletagservices.com/tag/js/gpt.js"></script>
<script type="text/javascript">
var slot1 = googletag.defineUnit('/XXXX/ca-pub-YYYYYYYYYYYYYYY/transaction', [468, 60], 'div-gpt-ad-ZZZZZZZ-0').addService(googletag.pubads());
googletag.pubads().enableSingleRequest();
googletag.enableServices();
</script>
...
</head>
I've created a view with uiBinder, with a div with the id specified at the head, like this:
<g:HTMLPanel height="62px" width="100%">
<div id='div-gpt-ad-ZZZZZZZ-0' style='width:470px; height:60px;'>
</div>
</g:HTMLPanel>
On the onLoad() method of the view, you initialize the ad, like this:
#Override
protected void onLoad() {
setupAd();
}
public static native void setupAd() /*-{
$wnd.googletag.cmd.push(function() {$wnd.googletag.display('div-gpt-ad-ZZZZZZZ-0')});
}-*/;
To refresh the ad, just call refresh ad for the slot specified at head:
public static native void refreshAd() /*-{
$wnd.googletag.pubads().refresh([$wnd.slot1]);
}-*/;
That's all!
For more information about the publisher tag, check:
http://support.google.com/dfp_sb/bin/answer.py?hl=en&answer=1649768
Now I'm struggling to know how to make AdSense bot to craw my ajax application. I've implemented the Ajax Crawling scheme:
https://developers.google.com/webmasters/ajax-crawling/docs/getting-started
But I've got the information from AdSense forum that the AdSense bot (Mediapartners-Google) doesn't work with "escaped fragment" Ajax scheme.
Does anybody know if Google plan to make any progress on that?
This limits this approach to serve just interest based ads, since the context based ad serving depends on ajax crawling scheme.

Google's AdSense bot crawls your page to determine what ads to serve. Therefore, you should not put AdSense on pages with mostly dynamic content. It won't work well.
Maybe you should look into other ad programs?