We Keep Coding

Spring Web App - Refreshing data routinely

I'm currently developing an online banking application where you can buy stocks. It is being built with spring boot and the front-end is html/css.
I am using the YahooFinance API to get stock quotes but I need to refresh my page to get the live stock quotes, how can I automatically update the page every 30 seconds to get the new prices for each stock?
Also, is there a way I could implement this using Threads?
Banking Controller
#GetMapping("/banking/stocks")
public String stocks(Model model) {
model.addAttribute("stock", new StockDto());
try {
List<Stock> stocks = stockService.getDefaultStocks();
model.addAttribute("stocks", stocks);
} catch (IOException e) {
e.printStackTrace();
}
return "stocks.html";
}
StockServiceImpl:
#Service
public class StockServiceImpl implements StockService {
private String[] startingStocks = { "AAPL", "BABA", "MSFT", "AXP", "BA", "AMD", "TSLA", "MA", "SHOP", "GOOGL",
"KL" };
#Override
public Stock getStock(String stockName) throws IOException {
Stock stock = YahooFinance.get(stockName);
return stock;
}
#Override
public Map<String, Stock> getStock(String[] s) throws IOException {
Map<String, Stock> stocks = YahooFinance.get(s);
return stocks;
}
#Override
public List<Stock> getDefaultStocks() throws IOException {
Map<String, Stock> stocks = YahooFinance.get(startingStocks);
List<Stock> stockList = new ArrayList<Stock>();
for(String s : startingStocks) {
stockList.add(stocks.get(s));
}
return stockList;
}
}
HTML Page For Displaying Stocks:
<main class='main-content bgc-grey-100'>
<div id='mainContent'>
<div class="container-fluid">
<br>
<h4 class="c-grey-900 mT-10 mB-30">Stock Table</h4>
<form action="#" th:object="${stock}" th:action="#{/banking/stock-search}"
method="POST" class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search"
th:field="*{name}" placeholder="Search Stock"
aria-label="Search">
<button class="btn btn-outline-primary my-2 my-sm-0" type="submit">Search</button>
</form>
<br>
<div class="row">
<div class="col-md-12">
<div class="bgc-white bd bdrs-3 p-20 mB-20">
<table id="dataTable" class="table table-striped table-bordered"
cellspacing="0" width="100%">
<thead>
<tr>
<th>Ticker</th>
<th>Trade</th>
<th>Name</th>
<th>Price</th>
<th>(%) Change</th>
<th>Div Yield (%)</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Ticker</th>
<th>Trade</th>
<th>Name</th>
<th>Price</th>
<th>(%) Change</th>
<th>Div Yield (%)</th>
</tr>
</tfoot>
<tbody>
<tr th:each="stock : ${stocks}">
<td th:text="${stock.getSymbol()}"></td>
<td>
<form action="#" th:action="#{/banking/stocks/} + ${stock.symbol}" method="get">
<button class="btn btn-outline-success my-2 my-sm-0" th:id="'table_entry_childs_button_' + ${stock.symbol}" type="submit">
<i>Trade</i>
</button>
</form>
</td>
<td th:text="${stock.getName()}"></td>
<td th:text="${stock.getQuote().getPrice()}"></td>
<td th:class="${stock.getQuote().getChangeInPercent() > 0 ? 'text-success' : 'text-danger'}" th:text="${stock.getQuote().getChangeInPercent() + '%'} "></td>
<td th:if="${stock.getDividend().getAnnualYield() != null}" th:text="${stock.getDividend().getAnnualYield() + '%'}">0.00%</td>
<td th:if="${stock.getDividend().getAnnualYield() == null}" >0.00%</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</main>

You can exploit STOMP protocol and web sockets using spring boot.
For reference:
https://www.baeldung.com/spring-websockets-send-message-to-user
on back end side you can use
#Autowired
SimpMessagingTemplate messagetemplate;
public void somemethod(String strParam){
while (true){
// build string or json whatever you need to send
messagetemplate.convertAndSend("/blabla/blabla",strParam);
Thread.sleep(30*1000);
}
}
on front end side you have to use stomp.js
<script src="https://cdnjs.cloudflare.com/ajax/libs/stomp.js/2.3.3/stomp.js">
<script type="text/javascript">
function load(){
var stompClient = Stomp.client("ws://localhost:8080/ws");
stompClient.connect({}, function (frame) {
stompClient.subscribe('/blabla/blabla', function (message) {
// do something here
});
});
}
lastly, part of html where you want to call on load
<html>
<body onload="load()">
</body>
</html>

You can create an #Scheduled method that can call this API request every 30 seconds to get data and update your Front-End.
#Scheduled(fixedRate = 30000)
public void updateStocksElement() {
//Call your /banking/stocks rest endpoint
}
https://spring.io/guides/gs/scheduling-tasks/

getting Ids from selected checkboxes in a table using Spring + Thymeleaf

I'm getting an error NotReadablePropertyException: Invalid property 'userIds' of bean class [...ListOfIds]... And I'm not sure why. If I remove the th:field attribute on the checkbox, the table fills in properly. I've tried with th:field="*{requestIds}" and th:field="*{requestIds.ids}"
What I'm trying to do is collect the list of ids from the selected checkboxes and pass them back to the controller for the post.
Form
public class ListOfIds {
List<Long> ids = new ArrayList<>();
public List<Long> getIds() { return ids; }
// I've tried both set methods by themselves and together.
public void setIds(List<Long> ids) { this.ids = ids; }
public void setIds(Long[] ids) { this.ids = Arrays.asList(ids); }
}
Request bean
public class Request {
long id;
String name;
String phone;
String email;
// Getters/Setters
}
Controller
#GetMapping("/myTable")
public ModelAndView getMyTable(ModelAndView mav) {
mav.setViewName("myTable");
List<Request> requests = service.getRequests();
mav.addObject("requests", requests);
mav.addObject("requestIds", new ListOfIds());
return mav;
}
#PostMapping("/myTable")
public ModelAndView postRequests(ModelAndView mav, #ModelAttribute("requestIds") ListOfIds ids) {
...
}
html page
...
<form method="post" th:action="#{/myTable}" th:object="${requestIds}">
<table class="table ...">
<thead>
<tr>
<th><input type="checkbox" class="selectall" data-target="requests-all"/></th>
<th>Name</th>
<th>Phone</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr role="row" th:each="request : ${requests}">
<td>
<input type="checkbox" name="requestId" data-target="requests-all"
th:value="${request.id}" th:field="*{requestIds}"/>
</td>
<td th:text="${request.name}"></td>
<td th:text="${request.phone}"></td>
<td th:text="${request.email}"></td>
</tr>
</tbody>
</table>
<button class="btn btn-primary show-selected">Process</button>
</form>
...
<script>
$(document).ready(function() {
$('button').click(function(e) {
if !(confirm("Are you sure you wish to process these requests")) {
e.preventDefault();
}
});
});
</script>
...

So the answer is that name and th:field don't play nice together.
I made the following changes and it worked:
Controller
#PostMapping("/myTable")
public ModelAndView postRequests(ModelAndView mav,
#ModelAttribute("requestIds") Long[] ids) {
...
}
html
<form id="postMyTable" method="post" th:action="#{/myTable}">
<table ...
<input type="checkbox" name="requestId" data-target="requests-all"
th:value="${request.id}"/>
...
<script>
$(document).ready(function() {
$('button').click(function(e) {
if !(confirm("Are you sure you wish to process these requests")) {
e.preventDefault();
} else {
$("#postMyTable").submit();
}
});
});
</script>

validate input in Thymeleaf

I have this input:
Masa: <input type="number" class="form-control form-text" name="masa"/>
<div class="text col-sm-12 error" th:if="${wzrost}" >
<p class="text text-center">
To pole jest wymagane
</p>
</div>
Wzrost: <input type="number" class="form-control form-text " name="wzrost"/>
<div class="text col-sm-12 error" th:if="${wzrost}" >
<p class="text text-center">
To pole jest wymagane
</p>
</div>
And this controller;
String x = String.valueOf(masa);
String y = String.valueOf(wzrost);
if(x==null ){
model.addAttribute("wzrost",true);
return"views/success";
}
if(y==null ){
model.addAttribute("wzrost",true);
return"views/success";
}
When I click form submit button I always get error nullpointerexception.
How do I validate input, so that when it is empty the message pops up

#PostMapping("/cal-bmi")
public String calculateBmiForm(Model model, Integer masa, Integer wzrost) {
String x = String.valueOf(masa);
String y = String.valueOf(wzrost);
if(x==null ){
model.addAttribute("wzrost",true);
return"views/success";
}
if(y==null ){
model.addAttribute("wzrost",true);
return"views/success";
}
}
ANd when i get a valu form masa and wzrost i check from null, i click submit alwas nullpointerexception
<form th:action="#{/cal-bmi}" method="post">
<ul class="gender-options">
<input id="man" type="radio" name="gender" value="male" required />
<label for="man">mężczyzna</label> ⁄
<input id="woman" type="radio" name="gender" value="female"/>
<label for="woman">kobieta</label>
</ul>
Masa: <input type="number" class="form-control form-text" required placeholder="(kg)" name="masa"/>
<!--<div class="text col-sm-12 error" th:if="${wzrost}">-->
<!--<p class="text text-center">-->
<!--To pole jest wymagane-->
<!--</p>-->
<!--</div>-->
Wzrost: <input type="number" class="form-control form-text " required placeholder="(cm)" name="wzrost"/>
<!--<div class="text col-sm-12 error" th:if="${wzrost}">-->
<!--<p class="text text-center">-->
<!--To pole jest wymagane-->
<!--</p>-->
<!--</div>-->
<input type="submit" class="col-lg-10 btn btn-primary" value="Oblicz"/>
</form>
Now i used required but is not good solution

It seems like you want to implement server side validation. For this the best approach is to use validators and its bindingResult. Steps to implement server side validation is
Have for model
public class PersonForm {
private String name;
public String getName() {
return this.name;
}
public void setName(String name) {
this.name = name;
}
}
Use form model in html
<form action="#" th:action="#{/personForm}" th:object="${personForm}" method="post">
<table>
<tr>
<td><label th:text="#{label.name}+' :'"></label></td>
<td><input type="text" th:field="*{name}" /></td>
<td th:if="${#fields.hasErrors('name')}" th:errors="*{name}">Generic Error</td>
</tr>
<tr>
<td><button type="submit">Submit</button></td>
</tr>
</table>
</form>
Have validator class
#Component
public class PersonFormValidator implements Validator {
#Override
public boolean supports(Class<?> clazz) {
return PersonForm.class.equals(clazz);
}
#Override
public void validate(Object target, Errors errors) {
ValidationUtils.rejectIfEmpty(errors, "name", "field.name.empty");
PersonForm p = (PersonForm) target;
if (p.getName().equalsIgnoreCase("XXX")) {
errors.rejectValue("name", "Name cannot be XXX");
}
}}
Bind validator to controller and let spring do the magic.
#Controller
public class WebController {
#Autowired
PersonFormValidator personFormValidator;
#InitBinder("personForm")
protected void initPersonFormBinder(WebDataBinder binder) {
binder.addValidators(personFormValidator);
}
#PostMapping("/personForm")
public String checkPersonInfo(#Validated PersonForm personForm, BindingResult bindingResult, final RedirectAttributes redirectAttributes) {
if (bindingResult.hasErrors()) {
return "personForm";
}
redirectAttributes.addFlashAttribute("personResult", apiClientService.getPersonResult(personForm));
return "redirect:/spouseForm";
}
}

Wicket Form loads empty values after validation fails

We have a trouble in our wicket 6 project. We have a form which is loading via AJAX.
When our form fails validation we can't load other object into the model correcly (fields that have failed are empty).
I'm trying to create new object (my modelobject value = new MyObject()) and validation fails :
Then if I choose already created object from the tree on the left side I can see empty fields :
But really this object has all the fields setted :
Form markup:
<wicket:panel>
<div wicket:id="feedback"></div>
<form wicket:id="form" role="form" class="form-horizontal">
<div class="form-group">
<label wicket:for="shortName" class="control-label col-sm-4"><wicket:message key="shortName"></wicket:message></label>
<div class="col-sm-8">
<input type="text" class="form-control" wicket:id="shortName" />
</div>
</div>
<div class="form-group">
<label wicket:for="fullName" class="control-label col-sm-4"><wicket:message key="fullName"></wicket:message></label>
<div class="col-sm-8">
<input type="text" class="form-control" wicket:id="fullName" />
</div>
</div>
<div class="form-group">
<label wicket:for="parentServiceGroup" class="control-label col-sm-4"><wicket:message key="parentServiceGroup"></wicket:message></label>
<div class="col-sm-8">
<select type="text" class="form-control width-abs" wicket:id="parentServiceGroup"></select>
</div>
</div>
<div class="form-group">
<label wicket:for="status" class="control-label col-sm-4"><wicket:message key="status"></wicket:message></label>
<div class="col-sm-8">
<select class="form-control width-abs" wicket:id="status"></select>
</div>
</div>
<div>
<a wicket:id="save" class="btn btn-primary"></a>
<a wicket:id="cancel" class="btn btn-default"></a>
</div>
</form>
</wicket:panel>
Form code :
#Override
protected void onInitialize() {
super.onInitialize();
add(new MiraFeedbackPanel("feedback"));
final Form form = new Form("form", CompoundPropertyModel.of(getDefaultModel())) {
#Override
protected void onError() {
super.onError();
this.updateFormComponentModels();
}
};
add(form);
form.add(new TextField("shortName").setRequired(true));
form.add(new TextField("fullName"));
form.add(new DropDownChoice("status", Arrays.asList(CommonStatus.values()),
new ChoiceRenderer<CommonStatus>("name")).setRequired(true));
form.add(new ServiceGroupDropDownChoice("parentServiceGroup", getServiceGroupModelObject()));
form.add(new AjaxSubmitLabeledLink("save", "Save", form) {
#Override
protected void onError(AjaxRequestTarget target, Form<?> form) {
super.onError();
error(getString("savingError"));
target.add(ServiceGroupEditPanel.this.get("feedback"));
}
#Override
protected void onSubmit(AjaxRequestTarget target, Form<?> form) {
getServiceGroupModelObject().setDateCreated(new Date());
getServiceGroupModelObject().setWorkerCreated(UserSession.get().getWorker());
getServiceGroupModelObject().setDateModification(new Date());
getServiceGroupModelObject().setWorkerModification(UserSession.get().getWorker());
DAOService.ejbCommonBean().saveEntity(getServiceGroupModelObject());
info(getString("serviceGroupSaved"));
target.add(ServiceGroupEditPanel.this.get("feedback"));
target.add(ServiceGroupEditPanel.this.getParent().getParent()
.get("serviceGroupsTree"));
}
});
form.add(new AjaxLabeledLink("cancel", "Cancel") {
#Override
public void onClick(AjaxRequestTarget target) {
getServiceGroupModel().setObject(null);
target.add(ServiceGroupEditPanel.this.getParent().getParent()
.get("serviceGroupsTree"));
target.add(ServiceGroupEditPanel.this.getParent().getParent()
.get("serviceNotSet"));
target.add(ServiceGroupEditPanel.this.getParent().getParent()
.get("selectedServiceGroup"));
target.add(ServiceGroupEditPanel.this.getParent());
}
});
}
We tried the workaround from this issue : Apache wicket: how to update model after validation error but it didn't helped.
UPD: Code of tree from where I'm trying to update model :
add(new DefaultNestedTree<ServiceGroup>("serviceGroupsTree", new ServiceGroupsTreeProvider()) {
#Override
protected Component newContentComponent(String id, IModel<ServiceGroup> node) {
return new Folder<ServiceGroup>(id, this, node) {
#Override
protected Component newLabelComponent(String id, IModel<ServiceGroup> model) {
return new Label(id, PropertyModel.of(model, "shortName"));
}
#Override
protected MarkupContainer newLinkComponent(String id, final IModel<ServiceGroup> model) {
return new AjaxLink(id, model) {
#Override
public void onClick(AjaxRequestTarget target) {
serviceGroupModel.setObject(DAOService.ejbCommonBean()
.getEntityFullFetch(
ServiceGroup.class,
model.getObject().getUidservicegroup()
));
target.add(ServiceGroupListPage.this.get("selectedServiceGroup"));
target.add(ServiceGroupListPage.this.get("serviceNotSet"));
target.add(ServiceGroupListPage.this.get("tabs"));
((ServiceGroupEditPanel)editPanelTab.getPanel("editTab")).onModelObjectChanged(target);
}
};
}
};
}
}
Our form added to the AjaxTabbedPanel :
final ServiceGroupEditPanelTab editPanelTab = new ServiceGroupEditPanelTab("editTab", serviceGroupModel);
List<ITab> tabsList = new ArrayList<>();
tabsList.add(editPanelTab);
tabsList.add(new ServiceGroupServicesPanelTab("servicesTab", serviceGroupModel));
final AjaxTabbedPanel tabs = new AjaxBootstrapTabbedPanel("tabs", tabsList);
tabs.setSelectedTab(0);
add(tabs);
UPD2:
I've added the sample project to Github to show my problem. In README.md there are steps to reproduce the error.

If you're just swapping the object in your model, all your form components will still hold the previous raw input.
Call Form#clearInput() after you've changed your model object, i.e. after you've chosen a different entity from your tree.

Getting IllegalStateException when creating dynamic Fields using Thymeleaf

In my program, I am generating dynamic form names based on the number of feedbacks I get. I am then taking the satisfaction, comment and feedbackId inputs. They are different for each iteration. This is giving me an IllegalStateException error.
My HTML form is:
<form action="#" th:action="#{/heart2heart/token/__${tokenId}__/}" method="post">
<div class="table-responsive">
<table class="table table-striped table-bordered table-hover table-condensed">
<tr>
<th style="display:none;"></th>
<th th:text="#{service.desc}">Service</th>
<th th:text="#{feedback.description}">Feedback</th>
<th th:text="#{visit.date}">Date of Visit</th>
<th th:text="#{repr.name}">FU Repr</th>
<th th:text="#{resolution.response}">Response</th>
<th th:text="#{resolution.satisfactionLevel}">Satisfaction</th>
<th th:text="#{resolution.comment}">Comment</th>
</tr>
<tr th:each="feedback, feedbackStat : *{feedbacks}">
<td style="display:none;"><input type="hidden" th:field="*{feedbacks[__${feedbackStat.index}__].feedbackId}" th:value="${feedback.id}" /></td>
<td th:text="${feedback.service.description}">Steel</td>
<td th:text="${feedback.description}">Problem</td>
<td th:text="${feedback.visits[0].date}">12/08/2015</td>
<td th:text="${feedback.visits[0].repr.fullName}">XYZ</td>
<td th:text="${feedback.receipt.resolutions[0].response}">response</td>
<td>
<div class="radio">
<label><input type="radio" th:field="*{feedbacks[__${feedbackStat.index}__].satisfaction}" th:text="#{global.yes}" value="SATISFIED">Yes</input></label>
</div>
<div class="radio">
<label><input type="radio" th:field="*{feedbacks[__${feedbackStat.index}__].satisfaction}" th:text="#{global.no}" value="NOT SATISFIED">No</input></label>
</div>
</td>
<td><textarea th:field="*{feedbacks[__${feedbackStat.index}__].comment}" class="form-control" rows="2"></textarea></td>
</tr>
</table>
<div class="form-group">
<button type="submit" name="addRow" th:text="#{button.submit}"
class="btn btn-primary btn-md">Submit</button>
</div>
</div>
</form>
My controller is:
#RequestMapping(value = "/{tokenId}/", method = RequestMethod.POST)
public String addSatisfaction(#PathVariable int tokenId, #Valid ReceiptForm receiptForm, BindingResult result, Model model) {
try {
for (SatisfactionForm satisfactionForm : receiptForm.getFeedbacks()) {
Feedback feedback = new Feedback();
feedback.setId(satisfactionForm.getFeedbackId());
Feedback feedback1 = heart2heartService.getFeedbackById(feedback);
Resolution resolution = new Resolution();
resolution.setId(feedback1.getReceipt().getResolutions().get(0).getId());
resolution.setSatisfactionLevel(satisfactionForm.getSatisfaction().name());
resolution.setComment(satisfactionForm.getComment());
heart2heartService.addSatisfaction(resolution);
model.addAttribute("success", "Satisfaction added for tokenId " + tokenId);
}
} catch (Exception e) {
logger.error("Exception :: ", e);
}
return "success2";
}
#RequestMapping(value = "/{tokenId}/", method = RequestMethod.GET)
public String getSatisfaction(#PathVariable int tokenId, Model model) {
Token token = new Token();
token.setId(tokenId);
try {
model.addAttribute("feedbacks", heart2heartService.getFeedbacksByToken(token));
} catch (Exception e) {
logger.error("Exception :: ", e);
}
return "heart2heart/closeFeedback";
}
My forms are:
public class ReceiptForm {
private List<SatisfactionForm> feedbacks = new ArrayList<SatisfactionForm>();
public List<SatisfactionForm> getFeedbacks() {
return feedbacks;
}
public void setFeedbacks(List<SatisfactionForm> feedbacks) {
this.feedbacks = feedbacks;
}
}
and
public class SatisfactionForm {
public static enum Satisfaction {
NOT_SATISFIED, SATISFIED
}
private String comment;
private int feedbackId;
private Satisfaction satisfaction;
public String getComment() {
return comment;
}
public int getFeedbackId() {
return feedbackId;
}
public Satisfaction getSatisfaction() {
return satisfaction;
}
public void setComment(String comment) {
this.comment = comment;
}
public void setFeedbackId(int feedbackId) {
this.feedbackId = feedbackId;
}
public void setSatisfaction(Satisfaction satisfaction) {
this.satisfaction = satisfaction;
}
}
I am getting the following error:
java.lang.IllegalStateException: Neither BindingResult nor plain target object for bean name 'feedbacks[0]' available as request attribute
How do I fix this?

You did not specify the form-backing bean in your Thymeleaf template.
You are using the *{} operator to access fields of the bean, but Thymeleaf does not know
which bean you want to use. To resolve the error, add a th:object to your form.
Assuming that heart2heartService.getFeedbacksByToken(token) returns a ReceiptForm your form would look like this:
<form action="#" th:action="#{/heart2heart/token/__${tokenId}__/}" method="post" th:object="${feedbacks}">