I have html content. I want to convert it to velocity template. Please provide the steps to be taken to convert it to template.
I need to insert the html in database also.
Following is the html :
<div class="divNumberFilter">
<div class="divLabel" style="width: 70px;">Number:</div>
<div class="divInputField">
<input id="$tags.searchStandard" type="text" style="width: 100px;">
<script src='<s:url value=""></s:url>' type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
addOnload(grouping());
addOnload(initilizeStandardAutoComplete());
</script>
</div>
<div class="clear"></div>
</div>
<!-- Standard Description filter -->
<div class="divDescriptionFilter">
<div class="divLabel" style="width: 70px;">Description:</div>
<div class="divInputField">
<input id="$tags.standardFilter" type="text" style="width: 318px;">
<script src='<s:url value=""></s:url>' type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
addOnload(grouping());
addOnload(initilizeStandardDescAutoComplete());
</script>
</div>
<div class="clear"></div>
</div>
<div id="standard_list" class="selection_property_div" style="padding-bottom: 5px;">
</div>
Please help..
Okay first of all, to convert this into a Velocity template, you must have an idea what you EXACTLY want to do. That's step 1.
Then start writing the code in a velocity template file. Figure out what part would be dynamic, i.e., would be rendered by the Velocity Template Engine., which I guess you already know.
<input id="$tags.standardFilter" type="text" style="width: 318px;">
Inserting it into database.
You would need a table structure like this.
create table if not exists Templates (
template_file_name varchar(50), --The column to store the name of templates.
html mediumblob, --The column which actually has the velocity templates.
lastmod timestamp --The column which contains the last modification information.
);
Then use the DataSourceResourceLoader and configure it (please read Velocity Docs for reference).
Make a VelocityEngine out of the configurations of the DataSourceResourceLoader.
have FUN.
--Cheers, Jay.
Related
I have the following thymeleaf template
<!doctype html>
<html lang="nl" xmlns:th="http://www.thymeleaf.org">
<head th:replace="fragments::head(title='Film zoeken')">
<title>Film zoeken</title>
</head>
<body>
<nav th:replace="fragments::menu"></nav>
<form method="get" th:object="${zoekForm}" th:action="#{/film/zoeken}">
<label>
Nummer:
</label>
<span th:errors="*{id}"></span>
<input th:field="*{id}" type="number" autofocus required min="1">
<button>Zoeken</button>
</form>
<th:block th:if="${film}" th:object="${film}">
<dl>
<dt>Titel</dt>
<dd th:text="*{title}"></dd>
<dt>Regisseur</dt>
<dd th:text="*{regisseur}"></dd>
<dt>Uitgekomen op</dt>
<dd th:text="*{releaseDate}"></dd>
<dt>Karakters</dt>
<dd th:each="karakter : *{karakters}" th:text="${karakter}"></dd>
</dl>
<form th:if="not ${score}" th:object="${scoreForm}" method="post"
th:action="#{/film/{id}/score(id=${param.id})}">
<label>
Score:
<span th:errors="*{score}"></span>
<input th:field="*{score}" type="number" required min="1" max="10">
</label>
<button>Bewaren</button>
</form>
<div th:if="${score}">
Je score voor deze film is <strong th:text="${score.score}"></strong>
</div>
</th:block>
</body>
</html>
I have two #GetMapping methods and then the final #PostMapping.
The first one do a modelAndView.addObject(new ZoekForm(null));, so it shows only the first form.
Then, the second getmapping do a thing with the content (it shows the film data) and then it has a
modelAndView.addObject("scoreForm", new ScoreForm(null));.
So far the template shows 1) search form for a movie, 2) the film data and finally a field to give the movie a score.
I need to give a score (hit the button from the second form) and show the div
<div th:if="${score}">
Je score voor deze film is <strong th:text="${score.score}"></strong>
</div>
but the website must keep showing the film data. Now, when I hit that score button, all goes away.
It seems like the th:if=${film} is not happening. Clues?
(I assume also that the score object needs to be passed in the post, because if I look up again the same movie, I must be unable to give it a score).
Thymeleaf doesn't create objects for you. You need to pass it the object in your controller. You can either do it in every controller method that returns this template page or just use #ModelAttribute (place it as a method to your controller)
#ModelAttribute("film")
public Film methodNameDoesntMatter() {
return new Film();
}
This will occur on every page reload, so Film object is always new. Make sure there are getters/setters and no arg constructor defined - this is important for thymleaf
been trying to get comfortable with Spring Boot/Thymeleaf/frontend development in general. I'm currently using a table on the frontend to display a list of objects from the backend, as well as a form to allow users to view properties of each item in the list.
I feel like the way I'm doing this is really weird and feel that there could be a better way. Would appreciate any tips/feedback, thank you.
HTML/Thymeleaf
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Gambler Card List</title>
<link th:href="#{/css/styles.css}" rel="stylesheet" />
</head>
<body>
<h1>Gambler Card List</h1>
<div class="cardlist-wrapper">
<div class="cardlist-names">
<form action="/gambler/cardlist" method="get">
<table class="cardlist-table">
<tr th:each="card : ${cardList.getCardList()}">
<td>
<input th:class="card-btn"
th:attr="id=${{card.getId()} == {currentCard.getId()} ? 'selected' : ''}"
type="submit" th:value="${card.getName()}" name="cardName">
</td>
</tr>
</table>
</form>
</div>
<div class="cardlist-description">
<h4 th:text="${currentCard.getDescriptionTitle()}"></h4>
<p th:text="${currentCard.getDescription()}"></p>
</div>
</div>
</body>
</html>
Controller
#RequestMapping(value = "gambler/cardlist")
public String baseCardList(Model model,
#RequestParam(value="cardName", required=false) String cardName) {
model.addAttribute("currentCard", cardList.getCardByName(cardName));
model.addAttribute("cardList", cardList);
return "gambler/cardlist";
}
Output (need 10 rep to post image, so here's a link)
One potential improvement/simplification is to remove the form and replace the inputs with anchors. The anchors would look something like this (not tested!):
<a th:href="#{/gambler/cardlist(cardName=${card.name})}">
<button th:text="${card.name}"
th:classappend="${card.id == currentCard.id ? 'selectedButton' : 'deselectedButton'}">Card Name</button>
</a>
You can style selectedButton and deselectedButton as you wish.
I have an HTML to parse with Jsoup and I lose track after the HTML's weird structure. I can summarize HTML like this(Every line is one level inside of the above):
<html>
<body class="page3078">
<div id="mainCapsule">
<div id="contentCapsule" class="capsule">
<div id="content">
<div id="subCapsule" class="clearFix" xmlns="">
<div id="contentLeft">
<iframe width="635" height="1000" frameborder="0" src="apps/Results.aspx">
#document
<html xmlns="http://www.w3.org/1999/xhtml">
<body style="background:none;">
<form id="form1" action="Results.aspx" method="post" name="form1">
<div class="pressContent">
<div class="tableCapsule details">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr class="even">
Basically I want to get text inside of the tag with class "even". I tried directly calling class even like this:
doc.getElementsByClass("even")
It didn't work. I tried parent > child relationship with selector method. It didn't work either. I tried this inside of second html tag:
doc.select("body.page3078 > html > body > #form1 > th");
Didn't work either. Where am I wrong?
One comment summarizes the start of a solution here:
As mentioned here you need to get the page from the iframe in a separate jsoup parser. This page isn't weird at all - it's just a separate page is shown in the iframe. – Boris the Spider
I trying to do like this:
$("iframe.cke_dialog_ui_input_file").contents()
but it returns:
< #document(gquery, error getting the element string representation: (TypeError) #com.google.gwt.dom.client.DOMImplMozilla::toString(Lcom/google/gwt/dom/client/Element;)([JavaScript object(8570)]): doc is null)/>
But document is not null!
Help me please to solve this problem :(
UPD. HTML CODE:
<iframe id="cke_107_fileInput" class="cke_dialog_ui_input_file" frameborder="0" src="javascript:void(0)" title="Upload Image" role="presentation" allowtransparency="0">
<html lang="en" dir="ltr">
<head>
<body style="margin: 0; overflow: hidden; background: transparent;">
<form lang="en" action="gui/ckeditor/FileUploadServlet?CKEditor=gwt-uid-7&CKEditorFuncNum=0&langCode=en" dir="ltr" method="POST" enctype="multipart/form-data">
<label id="cke_106_label" style="display:none" for="cke_107_fileInput_input">Upload Image</label>
<input id="cke_107_fileInput_input" type="file" size="38" name="upload" aria-labelledby="cke_106_label">
</form>
<script>
window.parent.CKEDITOR.tools.callFunction(90);window.onbeforeunload = function() {window.parent.CKEDITOR.tools.callFunction(91)}
</script>
</body>
</html>
</iframe>
First get the iframe element using javascript like your existing cod and store it into Iframe of GWT
IFrameElement iframe = (IFrameElement) element;
Now use iframe to get content
iframe.getContentDocument().getBody().getInnerText();
Hope it help you to get values.
The contents() method returns the HTMLDocument, so normally you have to find the <body> to manipulate it.
$("iframe.cke_dialog_ui_input_file").contents().find("body");
A common mistake is to query the iframe before it has been fully loaded, so code a delay using a Timer, Scheduler or GQuery.delay(). For instance:
$("iframe.cke_dialog_ui_input_file")
.delay(100,
lazy()
.contents().find("body")
.css("font-name", "verdana")
.css("font-size", "x-small")
.done());
I'm building a webapp (using java,spring,freemarker and tiles) with tinyMCE editor.
I've added all files to classpath, everything is on the right place, tinyMCE editor is ALMOST correctly loaded...
There are several fields in my form, text inputs, options, buttons, labels etc... but the problem occurs when I run this form. tinyMCE replaces the whole form, not just textarea and puts that form inside itself - into tinyMCE editor area.
I am following basic installation found here http://www.tinymce.com/wiki.php/Installation
My code is almost the same as here, has more elements in form.
Is there any solution for this? Is this a standard behavior?
I run it on FF 13.0.1 if it matters...
my init code in form.ftl file is:
<#import "../spring.ftl" as spring>
<#assign form=JspTaglibs["http://www.springframework.org/tags/form"]>
<html>
<head>
<script type="text/javascript" src="/resources/tinymce/tiny_mce.js"></script>
<script type="text/javascript">
tinyMCE.init({
height : "480",
mode : "textareas"
});
</script>
</head>
<body>
<div id="content">
<#form.form>
<input type="text" id="title"/><br>
<input type="text" id="author"/><br>
<textarea id="content"></textarea><br>
<button type="submit"/> <button type="reset"/>
</#form.form>
</div>
</body>
</html>
Ok
I've found the solution. The problem was that I had two elements with the same id="content", there was
<div id="content">...</div>
and
<textarea id="content"></textarea>
when I changed it to be unique it resolved the problem.