We Keep Coding

How to display data from object in zk (zul file)?

I am using zk framework for my internship. I currently have a controller that goes and fetches a special link from an api and I have to create an IFrame in a zul file and bind this link into this iframe.
I do not know how to dynamically bind data either from an object, a modal or a properties file.
<div id="iframe-div" height="100%" style="background: #ccc;">
<iframe id="iframe" width="100%" height="100%" src="https://thisIsTheLink.com"/>
</div>
is there something similar as src="{mylink}" in zk as they do in other front end frameworks? Is it possible to dynamically bind data in zk framework?

Yes it is possible. I recommend using MVVM binding.
zul file:
<window viewModel="#id('vm') #init('com.example.IndexVM')">
<div id="iframe-div" height="100%" style="background: #ccc;">
<iframe id="iframe" width="100%" height="100%" src="#load(vm.includeSrc)" />
</div>
</window>
view model:
public class IndexVM() {
public String getIncludeSrc() {
return "https://thisIsTheLink.com";
}
}
You can even pass parameters to your included file.

How to display a progress / please wait type component while waiting for a long POST request

I am building a web app that includes some features that can take a few seconds to complete such as importing 2000+ entities after clicking on a link.
One such feature first has the user choose a CSV file, uploads it to the server and then iterates through it line by line to create the associated entities and save them in the database.
Here is an example of how the JSP page looks :
JSP
<form method="POST" enctype="multipart/form-data" action="<c:url value="/import/importFormulary" /> " class="form-style-7">
<ul>
<li>
<label> File : </label>
<input type="file" name="file" accept=".csv"/>
</li>
</ul>
<input type="submit" value="Upload and Import" />
<input type="reset" value="Reset" />
</form>
I would like the submission of this form to trigger some sort of "please wait" overlay on the page. Something like this would be REALLY nice : http://tobiasahlin.com/spinkit/
I understand the "waiting for localhost" message is the controller doing its thing in the background which means the page this form is on is technically not active anymore. Knowing that fact, i'm struggling to figure out how to implement this. I have a place in my app where i do an AJAX request every second to refresh the content of a table and I have a feeling this is a direction to explore in order to achieve the result i want but seeing an example of a similar thing being done would be very helpful.
How does one show a spinning circle of please wait on the current page while waiting for the underlying controller to finish processing?

I settled with something like this, courtesy of font awesome :
<a th:href = "#{'/export/formularyAdd/' + ${facility.id}}" class="btn btn-outline-info eBtn"
title="Export Formulary Add Messages" onclick="showPleaseWait()">
Wrote this function in an included JS file :
function showPleaseWait()
{
$('.modal').modal('show');
}
<div class="modal fade bd-example-modal-lg" data-backdrop="static" data-keyboard="false" tabindex="-1">
<div class="modal-dialog modal-sm">
<div class="modal-content" style="width: 200px;">
<span class="fa fa-spinner fa-spin fa-5x fa-fw" style="width: 200px;"></span>
<p class="please-wait-message">Please wait</p>
</div>
</div>
</div>
The following import is on my page :
<link rel="stylesheet" th:href="#{/webjars/font-awesome/4.7.0/css/font-awesome.min.css}"/>
And finally this maven import :
<dependency>
<groupId>org.webjars</groupId>
<artifactId>font-awesome</artifactId>
<version>4.7.0</version>
</dependency>
This lets the controller do its thing and displays the progress spinner until the page is redirected.

Is it possible to include format of a thymeleaf fragment

I'm looking for a way to include the structure of a thymeleaf fragment into a page.
What i mean by that is as follows:
The fragmend defined as follows:
<div class="container" th:fragment="container">
<div class="row">
{the content of the page continues here}
</div>
</div>
The page template:
<div th:replace="fragments/main:: container">
{I can continue here for eq, <div class="col-md-5"></div>}
</div>
I dont't know if this is possible but i'm looking for a way to do this.

Due to layout dialect of Thymeleaf, this can be done by adding
<th:block layout:fragment="content"/> to desired layout and using this as parent element in your view.

How to add customised tag to add a pagebreak in html2pdf conversion using iText 7

<div>
<h1>
This is a custom tag worker sample.
</h1>
<br>
<h1>
This is a custom tag worker sample.</h1>
<break/>
<h1>
This is a custom tag worker sample after page break.</h1>
<break/>
<h3>This is last page</h3>
</div>
According to the above html, I want the generated pdf to contain a pagebreak of type next_page wherever there is a break tag.

how do I call a spring mvc REST controller from angular.js?

How do I hook up an angularjs web form with a spring mvc REST controller, so that only a small fragment of a page is refreshed (instead of the entire page) when the form is submitted?
In this case, only a string is refreshed in the page instead of refreshing the entire page. Specifically, how do I alter the code below so that the only element on the page that refreshes from the server after form submit is <H1>${person.answer}</H1>.
NOTE: the code below has been edited to adhere to #Cotta's suggestions. I am replacing the original code with #Cotta's suggestions instead of appending because I want this to be easy to read.
index.html is:
<!DOCTYPE html>
<html>
<head>
<!-- CSS ===================== -->
<!-- load bootstrap -->
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<style>
body { padding-top:30px; }
</style>
<!-- JS ===================== -->
<!-- load angular -->
<script src="http://code.angularjs.org/1.2.6/angular.js"></script>
<script src="app.js"></script>
</head>
<!-- apply angular app and controller to our body -->
<body ng-app="validationApp" ng-controller="mainController">
<div class="container">
<div class="col-sm-8 col-sm-offset-2">
<!-- PAGE HEADER -->
<div class="page-header"><h1>What is your name?</h1></div>
<!-- FORM -->
<!-- pass in the variable if our form is valid or invalid -->
<form name="userForm" ng-submit="submitForm(userForm.$valid)" novalidate> <!-- novalidate prevents HTML5 validation since we will be validating ourselves -->
<!-- NAME -->
<div class="form-group">
<label>Name</label>
<input type="text" name="name" class="form-control" ng-model="name" required>
</div>
<!-- SUBMIT BUTTON -->
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div><!-- col-sm-8 -->
</div><!-- /container -->
</body>
</html>
<!-- example from: https://scotch.io/tutorials/angularjs-form-validation -->
app.js is:
var validationApp = angular.module('validationApp', ['ngResource']);
validationApp.controller('mainController', ['$scope'], '$resource', function($scope, $resource) {
// function to submit the form after all validation has occurred
$scope.submitForm = function(isValid) {
// check if form is valid before sending data to the server
if (isValid) {
var NameCheck = $resource('/api/namecheck', {});
var result = NameCheck.get();
console.log(result.answer);
}
};
});
RingRestController.java is:
#RestController
#RequestMapping("/api")
public class RingRestController {
#RequestMapping(value = "/namecheck", method = RequestMethod.POST)
public #ResponseBody Person create(#RequestBody Person person) {
String answer = "";
if (person.getName().equals("Frodo") || person.getName().equals("frodo")){
answer = "Frodo, would you please hold onto this ring for me?";
}
else {
answer = "Thank you for telling us your name.";
}
person.setTransientAnswer(answer);
return person;
}
}
NOTE: this uses the same core project as the angularjs branch of the spring petclinic sample app (I deleted everything in /src/main/webapp and built up new angularjs within the spring project shell. Thus, it uses the same spring.xml config files, which might be related to a solution. You can read the spring config files by clicking on this link.

You may solve this by:
Include ngResource in your application
var validationApp = angular.module('validationApp', ['ngResource']);
Inject $resource on your controller
validationApp.controller('mainController', ['$scope', '$resource', function($scope, $resource) { ... }]);
Then you may use $resource to create an object responsible for sending your requests inside submitForm:
var NameCheck = $resource('http://url-to-service', {});
var result = NameCheck.get();
console.log(result.answer);
Remember to include angular-resource.js file.
You may also do something similiar with $http and a few lines of code more.