<div class="post">
<div class="post-user-image">
image
</div>
<div class="post-content">
<h4>
link to user profile, firstname and last name of the post owner
</h4>
<p>......messege itself......</p>
<div class="post-footer">
post --> date and post --> likes...
</div>
</div>
</div>
I have the html code above that represents a post on a users wall, and i want this to reoccur for the number of post that user has using GWT. I don't know how to approach the problem I don't feel comfortable with the GWT integration to existing html code.
You can get familiar with GWT from the resources at the GWT Dev guide.
For your particular problem, I suggest you look at UiBinder.
You can use your HTML snip as the template for a UiBinder GWT widget. Your widget would have parameters for the image/link/content/whatever you want to display.
Let's call your widget Post. Every time you want to add a new instance to the display you might do something like this:
// Crete and populate our Post
Post newPost = new Post();
newPost.setUsername("XXX");
newPost.setLink("xxx");
newPost.setDate("xxx");
// Display the post.
postContainer.add(newPost);
Note that 'postContainer' could be anything - one of the GWT Panels, a custom container you are using to display the widgets into, etc.
Related
I have a JSP file in which there are two textareas and a submit button all in a form ;
<form action="" method="post">
<textarea name="inConsole" id="in" cols="100" rows="10"> </textarea> <br/>
<input type="submit" name="Send Command"/> <br/>
<textarea name="outConsole" id="out" cols="100" rows="10"></textarea>
</form>
this page is supposed to work like any SQL program. so the user types a command in the first textarea and clicks submit, then the value of textarea will be extracted to a field and a method will take care of the command and return a log (1 row inserted, error:bad syntax etc) which will be displayed in the second textarea.
I know how for example make a login page and send data and redirect user to a new page(new jsp) file if user pass is correct.
what I can't find is how can I do all the things that I said above without going to a new page while using form action.
I have checked other questions that linked the action attribute to a servlet which was confusing for me( the way that a servlet was called). I'm looking forward to use a simple scriptlet for this purpose like the one I used for my login page:
<%
DatabaseLoginTest dbLogTest = new DatabaseLoginTest();
if (dbLogTest.DBLoginChecker(request.getParameter("user"), request.getParameter("pass")) == true){
%>
<p>Login Successful</p>
<% } else { %>
<p>Login Failed</p>
<% } %>
also I'm aware that adding java scripts(not Javascript scripts:) ) to html isn't a good practice(and the reasons for it) but I think this might be easier for a simple program that I'm working on.
p.s: I'm using tomcat and Intellij for developing this web application
and I have made a custom SQL so I only need the code that gives me the textarea value and the one that sets the other one's value
Update: now I know I should use javascript but I don't know how can I send the data extracted by javascript to a java method.
If you want to do this while remaining in the same page, you have to use Javascript. This is because if you want the server to be able to re-render the page, there has to be a page refresh.
You would need to write onClick handler for the submit button and make a Ajax call to your server to a specific URL with the user input. This URL would serve the data needed for the necessary UI changes.
You can use a scriptlet to generate the HTML that would be shown in the webpage but this would only suffice for a simple use-case and it would be a lot simpler if, say, your service returned just the data required to make the UI change and actual UI change is handled by the JS.
Also,I don't think it is a bad practice to embed JS in HTML. Sure, you can optimize this by including a JS source file but that's a separate optimization.
My Question:
Is there a way i can add an infobox to a label which was created by the form:checkboxes-Tag? It should appear while hovering over the label (I know that the title attribute in html does exactly this).
Scenario:
I have a div with generated checkboxes. Those checkboxes have labels which are longer than the max-width of the containing div. As i don't want the width to be increased i thought displaying the name while hovering over the label would suffice. But as far as is know the checkboxes-Tag does not support a title-tag per item (items are computed at runtime and passed to the model).
It looks like this:
<fieldset>
<div id="selectedAccounts" style="overflow-y:scroll;overflow-x:hidden;" onchange="loadSthElse()">
<form:checkboxes path="selectedAccounts" items="${accounts}" delimiter="</br>/>
</div>
</fieldset>
As items i pass a Map<Integer,String> to fill values and labels.
The Spring Documentation says that the standard html attribute title is still available. But i can't see if or how it is used for every single item that is created as you only seem to define one title.
I tried something like
$("#selectedAccounts label").each(function(element) {
element.attr('title', element.name)
}
but it wouldn't work either.
Is there a way to make this work - Javascript, Jquery - or is the checkboxes-Tag poorly chosen?
Greetings,
Uwe
If you don't want to use title attribute (¿WHY?), you can define hover event in any hidden object you want. It also gives your code and HTML structure more readability.
HTML
<form:input type="checkbox" value="CHECKBOX1" checked="checked">
<div>all the info you want to show when hovering your checkbox</div>
CSS
input+div{display:none;}
input:hover+div{display:inline;}
I fixed this issue.
I simply added a title using dojo after generating the checkboxes.
<div id = "selectedCampaigns" onchange="loadAdSets()">
<form:checkboxes path="selectedCampaigns" multiple="true" items="${campaigns}" delimiter="<br/>"/>
<script type="text/javascript">
dojo.query("#selectedCampaigns label").forEach(function(element) {
dojo.setAttr(element,"title",element.innerHTML);
});
</script>
</div>
After setting the attribute to the innerHTML everything looks just fine.
Our team built a custom portlet to load Google markers onto a map. The markers are created in the template script. We now would like to display these markers in another asset publisher in a list like format. Is there anyway to pass a conditional to the template file depending on the portlet that is requesting it? Or alternatively are there any good methods for building this code into the jsp rather than the template file?
//code that creates the markers on the full map
gmarker=new google.maps.Marker({position:new google.maps.LatLng("$Lattitude.getData()","$Longitude.getData()"),title:"$reserved-article-title.getData()",icon:gicon,map:map});
if(window.location.href.indexOf("fullmap") > -1) {
google.maps.event.addListener(gmarker, 'click', function() {
new google.maps.InfoWindow({content:
'<div id="node_content">
<div id="siteNotice"></div>
<h3 id="firstHeading" class="firstHeading">$reserved-article-title.getData(), $City.getData(), $Country.getData()</h3>
<hr class="m_spacer"/>
<div id="bodyContent">
<p class="gdes">$Description.getData()</p>
<img class="m_image" src="$Image.getData()"/>
</div>
</div>'
}).open(map,this);
});
}
gmarker.setMap(map);
//redirect code that opens the infowindow on load if the id paramater is not null
if(flag==true){new google.maps.InfoWindow({content:
'<div id="node_content" class="gs2">
<div id="siteNotice"></div>
<h3 id="firstHeading" class="firstHeading">$reserved-article-title.getData(), $City.getData(), $Country.getData()</h3>
<hr class="m_spacer"/>
<div id="bodyContent">
<p class="gdes">$Description.getData()</p>
<img class="m_image" src="$Image.getData()"/>
</div>
</div>'}).open(map,gmarker);
flag=false;
}
It is liferay 6.1 so we don't get to enjoy the luxuries of the latest release.
Here is a screen shot of the two portlets and what they are displaying as well as an example of what we are aiming for. A website that is very similar to what we are attempting can be found here. Were hoping for conceptual ideas on how to differentiate the portlets not code necessarily. Your help is very much appreciated.
If you want to use the same JavaScript function from diverse portlets, then the better way is to put the JavaScript function to the Theme
http://www.liferay.com/documentation/liferay-portal/6.2/development/-/ai/creating-themes-and-layout-templates-liferay-portal-6-2-dev-guide-09-en
and call the function from the portlet-jsp with different properties.
I am not sure if I understood your question correctly, but have you considered creating a custom Display Style for your asset publisher to achieve this? If not, check this out:
http://www.rotterdam-cs.com/blogs/-/blogs/hooking-the-asset-publisher-for-custom-display-styles
You can create a new display style with your Map on top and the list below, everything in one jsp (unless you break it down off-course). I think it will possibly resolve your problem.
The problem is pretty simple but I cant find a straight-forward solution online.
I have a document template, which I want to be able to populate with information (different information, more than once) and then print. My initial thought was to create a html template, and then send a parsed version to the print.
I suppose there is more than one question here:
What is the best approach to solve this problem?
If the HTML parsing is the best solution can someone point me in the correct direction as I dont know where to start.
Thanks.
-- EDIT: a better example to clear up any confusion.
On a java GUI program, the user is able to pull up a customers information. I wish them to be able to print an invoice at the click of a button. My current problem is deciding how to populate the invoice with the customers information and send it to the printer.
I would go for a web HTML form. Let the user populate the input fields and pass them in the POST body when a form submit button is pressed. Then you analyze the input and create the final document version (on the server) and only then return the document to the client with an appropriate MIME type in the response header (that's how you enable the printing).
For example (simple form with submit button)
<form name="input" action="html_form_action.asp" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>
EDIT:
For building document template take a look on playframework.
I don't have access to my HTML code but I have access to Javascript in the footer of my document. With that being said I would like to switch out the URL "/vistor_signup" with a new URL of my choosing. Lets say "http://www.example.com/account_signup"
And I would also like to do the same for "/user_signup", lets say swap to "http://www.example.com/master_signup"
I have to use JavaScript to do so and I don't have any understanding of JS.
How do I make this work with JS code?
My code
<div class="grid_12">
<div id="login">
<div class="panel" id="login-form">
<div id="login-promo">
<div class="clear"></div>
<h2>Visitor Sign-Up ></h2>
<h2>User Sign-Up ></h2>
</div>
</div>
</div>
</div>
</div>
you mean something like this:
var anchors = document.body.getElementsByTagName("a");
for(var i=0; i < anchors.length; i++) {
var anc = anchors[i];
if (anc.getAttribute("href") == "/visitor_signup") {
anc.setAttribute("href", "http://www.example.com/account_signup");
}
}
WARNING: due to the way browser render HTML (parsing the page, semi-sequentially fetching referenced resources, evaluating javascript along the way), it might happen that someone sees the html before your script gets executed, and even clicks the '/visitor_signup' link.
Under your limitations, esp.
No access to code
No id tag on elements
your best bet is to
use document.body.GetElementsByTagName() to find all tags
on those check the href property
change it accordingly
EDIT: This is exactly what #milan's answer does, so please disregard this one
Since you can't edit the HTML and the <h2>s aren't differentiated, using jQuery might be easier than using plain JS in order to reach the elements.
This jQuery could be:
$('#login-promo h2:first a').attr("href", "/account_signup").parent().next().find('a').attr("href", "/master_signup");
Here we are selecting the first <h2> <a> and changing its href. Then we go back tho the <a>s parent, find the next <h2> <a>and change its href too.
You can check an example in this jsfiddle.