Develop Reference

Change page name in Tapestry

I'm beginner with Tapestry. I have a component called Navigation, where I dynamically get the pageName of my web pages, and display the link in header of a website. Here's the relevant part:
<t:loop source="pages" value="row">
<li><t:pagelink t:page="${page}">${pageName}</t:pagelink></li>
</t:loop>
That works ok.
I have page About_us.tml, and About_us.java. That page contains only text, so it's simple. My problem is, that my Navigation component displays this page in header (where are links to all of the pages of my web app) as About_us link. I want to change this to About us link. I don't want the "_" sign.
Any idea how could I possibly solve this?
Thanks.

It's very easy to pass the pageName through a bit of Java code to prepare it to be presented.
public String prepare(String pageName) { return pageName.replace("_", " "); }
and
<t:pagelink ...>${prepare(pageName)}</t:pagelink>

Display Web Content Title instead of "Web Content Display"

when I add a Web Content Display to my Page the Portlet is titled "Web Content Display".
So how to tell Liferay that it should use the title of the displayed Web Content.

One idea I can think of is to hide the title "Web-content Display" through Look and Feel of the portlet and then create a web-content using Structures & Templates.
And in the Template you can specify the title to be display at the top of the web-content and you can use some css-magic to position it where the portlet-title used to appear. It should not be difficult I think.
<!-- position this div with the help of CSS to give the feel of the title -->
<div class="temp-title">$contentTitle</div>
<div class="content">$myContent</div>

Need to display hosted html page in full screen on page load

I am developing a GWT web application and for a specific requirement I need to display my only hosted html page in full screen on load.
This we done with the help of pressing F11 on any web page. I need exactly the same functionality in my GWT application.
I have tried glimpses of Javascript for this which wasn't worked.
<script language="JavaScript1.2">
top.window.moveTo(0,0);
if (document.all) {
top.window.resizeTo(screen.availWidth,screen.availHeight);
}
else if (document.layers||document.getElementById)
{
if (top.window.outerHeight<screen.availHeight||top.window.outerWidth<screen.availWidth){
top.window.outerHeight = screen.availHeight;
top.window.outerWidth = screen.availWidth;
}
}
</script>
Could it be possible?

You can't force the user on how to display your document. Still, there's a Draft for a fullscreen api, see also https://developer.mozilla.org/en/DOM/Using_full-screen_mode

I think you will need to use the page you load to launch a new browser window with the fullpage html in it. The first page is nothing but to kick off the full page with a script like this
<script>
<!--
window.open("fullpage.html","fs","fullscreen=yes")
//-->
</script>

Display page data on same page without forwarding it to another page

In my webpage (Eg Link1: http://localhost:8086/MyStrutsApp/login.do) I have several links. When a user clicks on one of the links, he is taken to another page (Eg link2: http://localhost:8086/MyStrutsApp/AddBook.jsp) to fill an html form.
Now what I want to achieve is that when any user clicks on the link, that html form (Link2) is displayed on the same page (i.e. Link1).
I have no idea how to achieve this.

The AJAX way to achieve this is the following:
you have a DIV on your original page that will be replaced (i.e., either has content that only makes sense in the original context or completely empty)
your Link2 servlet produces only the contents of the above DIV (and not the contents of that page)
you use a tiny bit of Javascript to make an AJAX call and fill the DIV with the response.
If you want to use Dojo, the HTML page would look like this:
<!-- main content -->
<div id="leftpanel">
<h3>This content will be replaced</h3>
You can add a book
</div>
The Javascript code would look like this:
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js" type="text/javascript"></script>
<script type="text/javascript">
function display_wait(s) {
var mainPanel=dojo.byId("leftpanel");
mainPanel.innerHTML='<div class="waitingmsg">'+s+'</div>';
}
function updateFromURL(url) {
display_wait("loading content");
dojo.xhrGet({url:url,
load:function(result) {
dojo.byId('leftpanel').innerHTML=result;
}});
}
</script>
(As Rafa mentioned, you can use the same technique to display the new part in a dialog)

You can always use jQuery to present a dialog ... http://jqueryui.com/demos/dialog/
Retrieve the page with AJAX and present it inside the dialog.

To display one page within another, use an iframe. See the iframe docs.
To make a link on the outer page load its target page into the iframe, give the iframe a name attribute, and give the link a matching target attribute.

Add custom css to html code with jsoup

I'm working on an Android app, which loads a HTML page and shows it in a webview.
The problem is I want to add my custom css (the loaded HTML hasn't any CSS or link to a css). How do I add the custom css to the HTML code using jsoup?
I cant modify the html.
And how does the webview can open it afterwards?
Thank you

Several ways. You can use Element#append() to append some piece of HTML to the element.
Document document = Jsoup.connect(url).get();
Element head = document.head();
head.append("<link rel=\"stylesheet\" href=\"http://example.com/your.css\">");
Or, use Element#attr(name, value) to add attributes to existing elements. Here's an example which adds style="color:pink;" to all links.
Document document = Jsoup.connect(url).get();
Elements links = document.select("a");
links.attr("style", "color:pink;");
Either way, after modification get the final HTML string by Document#html().
String html = document.html();
Write it to file by PrintWriter#write() (with the right charset).
String charset = Jsoup.connect(url).response().charset();
// ...
Writer writer = new PrintWriter("/file.html", charset);
writer.write(html);
writer.close();
Finally open it in the webview. Since I can't tell it from top of head, here's just a link with an example which I think is helpful: WebViewDemo.java. I found the link on this blog by the way (which I in turn found by Google).

Probably the easiest way is to search and replace on the HTML text to insert your custom styles, before loading it into your WebView. I do this in my app BBC News to restyle the news article page slightly. My code looks like this:
text = text.replace("</head>",
"<style>h1 {font-size: x-large;} h1, div.date, div.storybody, img {margin:4px; padding:4px; line-height:1.25;}</style></head>");
See how I search and replace on the end head tag (including my own </head> tag in the replaced segment. This ensures that the new snippet goes in the right pace on the page.

There a a few ways to include ccs in html
Tis i use if you have it stored as a external file:
<head><link rel="stylesheet" type="text/css" href="mystyle.css" /></head>
If You want to put it stight i the html file:
<head>
<style type="text/css">
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>
Or if you wnat to modify a singel tag:
<p style="color:sienna;margin-left:20px">This is a paragraph.</p>
*Edit
Any of thees examples shouldn't have any problem whit displaying.
Ref: W3 Schools CSS