Develop Reference

How can I bind an array of data to html table using Spring boot REST apllication and not by Spring MVC

I have a Spring Boot REST application, in which one of the REST API sends mail to the respective users.
I have designed a mailer template in Html and my rest API has data in an array which I am binding to an Html table using and tags.
How can I bind an array of data to Html table using Spring Boot REST application and not by Spring MVC
1. HTML code
<tr>
<td style="padding: 20px 18px 0; color: #888686; font-size: 15px; font-family: 'Open Sans';">
<table style="border-collapse: collapse;" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<th
style="padding: 8px 20px; border: 1px solid #eeeeee; background: #ffffff; color: #888686; font-size: 15px; font-family: 'Open Sans'; width: 35%;">
DATE</th>
<th
style="padding: 8px 20px; border: 1px solid #eeeeee; background: #ffffff; color: #888686; font-size: 15px; font-family: 'Open Sans'; width: 35%;">
AVAILABILITY</th>
<th
style="padding: 8px 20px; border: 1px solid #eeeeee; background: #ffffff; color: #888686; font-size: 15px; font-family: 'Open Sans'; width: 35%;">
WORK START TIME</th>
<th
style="padding: 8px 20px; border: 1px solid #eeeeee; background: #ffffff; color: #888686; font-size: 15px; font-family: 'Open Sans'; width: 35%;">
WORK END TIME</th>
<th
style="padding: 8px 20px; border: 1px solid #eeeeee; background: #ffffff; color: #888686; font-size: 15px; font-family: 'Open Sans'; width: 35%;">
BREAK START TIME</th>
<th
style="padding: 8px 20px; border: 1px solid #eeeeee; background: #ffffff; color: #888686; font-size: 15px; font-family: 'Open Sans'; width: 35%;">
BREAK END TIME</th>
</tr>
<c:forEach var="oldList" items="${scheduleDetailsOld}">
<tr>
<td style="padding: 8px 20px; border: 1px solid #eeeeee; background: #ffffff; color: #888686; font-size: 15px; font-family: 'Open Sans'; width: 35%;">${oldList.day}</td>
<td style="padding: 8px 20px; border: 1px solid #eeeeee; background: #ffffff; color: #888686; font-size: 15px; font-family: 'Open Sans'; width: 35%;">${oldList.availability}</td>
<td style="padding: 8px 20px; border: 1px solid #eeeeee; background: #ffffff; color: #888686; font-size: 15px; font-family: 'Open Sans'; width: 35%;">${oldList.workStartTime}</td>
<td style="padding: 8px 20px; border: 1px solid #eeeeee; background: #ffffff; color: #888686; font-size: 15px; font-family: 'Open Sans'; width: 35%;">${oldList.workEndTime}</td>
<td style="padding: 8px 20px; border: 1px solid #eeeeee; background: #ffffff; color: #888686; font-size: 15px; font-family: 'Open Sans'; width: 35%;">${oldList.breakStartTime}</td>
<td style="padding: 8px 20px; border: 1px solid #eeeeee; background: #ffffff; color: #888686; font-size: 15px; font-family: 'Open Sans'; width: 35%;">${oldList.breakEndTime}</td>
</tr>
</c:forEach>
</tbody>
</table>
</td>
</tr>
2.email sender method
public void shiftUpdatedMailForEditor(Staff staff) {
new Thread(() -> {
try {
Map<String, String> values = new HashMap<>();
values.put("getName", staff.getName());
values.put("getSubject", "Work schedule details have been modified.");
mailerService.sendStaffShiftUpdatedForEditorEmail(values, staff.getEmail());
} catch (PaperTrueException e) {
e.printStackTrace();
}
}).start();
}
3. get HTML temlate service
protected void sendStaffShiftUpdatedForEditorEmail(Map<String, String> valuesMap, String receiverEmail)
throws PaperTrueJavaException {
// concerned Editor (receiverEmail)
System.out.println("Inside sendStaffShiftUpdatedForEditorEmail");
mailer.sendMail("xyz#gmail.com", "xyz#gmail.com", valuesMap.get("getSubject"),
formatHtml(getHTMLBody(HtmlTemplateURL), valuesMap));
}
4. here is my controller
#PostMapping("/update-schedule-details")
public ResponseEntity<StatusResponse> updateScheduleDetails(#Valid #RequestBody addScheduleDetailsBody body,
Model model) {
StatusResponse statusResponse = new StatusResponse();
try {
util.isStaffLoggedIn(request, response, List.of(StaffRole.EDITOR, StaffRole.HR_MANAGER));
Iterator<AddScheduleDetails> iterator = body.getScheduleDetails().iterator();
ArrayList<ScheduleDetails> scheduleDetailsNew = new ArrayList<ScheduleDetails>();
ArrayList<ScheduleDetails> scheduleDetailsEarlier = new ArrayList<ScheduleDetails>();
while (iterator.hasNext()) {
AddScheduleDetails addScheduleDetails = (AddScheduleDetails) iterator.next();
if (scheduleDetailsService.getShift(new Date(addScheduleDetails.getDay()),
addScheduleDetails.getEditorId())) {
addScheduleDetails(addScheduleDetails);
} else {
scheduleDetailsEarlier = updateScheduleDetails(addScheduleDetails, scheduleDetailsEarlier);
}
ScheduleDetails scheduleDetails = scheduleDetailsService.get(new Date(addScheduleDetails.getDay()),
addScheduleDetails.getEditorId());
scheduleDetailsNew.add(scheduleDetails);
}
model.addAttribute("scheduleDetailsOld", scheduleDetailsEarlier);
model.addAttribute("scheduleDetailsNew", scheduleDetailsNew);
emailSender.shiftUpdatedMailForEditor(util.getLoggedInStaff(request));
statusResponse.setStatus(new Status("Editor Schedule Details Updated Successfully"));
} catch (PaperTrueException e) {
util.logException(e, LogType.GET_JOBS);
statusResponse.setStatus(new Status(e.getCode(), e.getMessage()));
}
return ResponseEntity.ok(statusResponse);
}

If you use some standard library like Datatables, it will be much easier. See this,
https://datatables.net/reference/option/ajax.data
This way, you can just send json data from your REST API in response

Header banner to start CSS after another div

My code with css is defined in my JSP and css as follows:
basic.css
*{
padding: 0;
margin: 0;
}
body {
background: #eeeeec url(../images/image1.gif) repeat-x;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #333;
padding: 0;
margin: 0;
}
layout.css
#Outage{
width: 984px;
margin: 0 auto;
}
#bgd{
background-image: url(../images/image2.gif);
background-position: top right;
background-repeat: no-repeat;
}
#Wrapper{
width: 984px;
margin: 0 auto;
}
/*-----------BANNER-----------*/
#banner{
padding-right: 100px;
overflow: auto;
}
header.jsp
<div id="bgd">
<div id="Wrapper">
<div><img src="<%=contextPath%>/images/logo.gif" alt="test and 123" width="255" height="34" />
</div>
<div id="banner">
<div id="procNae"></div>
</div>
<div>
<div>
Now I want to add outage at the top of all this as follows:
<div id="Outage">
<div id="notificationDiv" style="display:none; width: 255px; height: 34px;">Test</div>
</div>
<div id="bgd">...////...</div>
But this is acting as a layover on "bgd", so the img gets cuts off. I would want actually "Outage" to have a plain background and "bgd" and its css to start only after "Outage". Any help highly appreciated.
basic.css * {
padding: 0;
margin: 0;
}
body {
background: #eeeeec url(../images/image1.gif) repeat-x;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #333;
padding: 0;
margin: 0;
}
layout.css #bgd {
background-image: url(../images/image2.gif);
background-position: top right;
background-repeat: no-repeat;
}
#Wrapper {
width: 984px;
margin: 0 auto;
}
/*-----------BANNER-----------*/
#banner {
padding-right: 100px;
overflow: auto;
}
<div id="bgd">
<div id="Wrapper">
<div><img src="https://data.photofunky.net/output/image/4/1/7/1/4171e9/photofunky.gif" alt="test and 123" width="255" height="34" />
</div>
<div id="banner">
<div id="procNae"></div>
</div>
</div>
</div>
I see that the div outage gets the same body as the dbg. Is there a way to apply body to my 1st div and bgd has its own div?

Can't render html in Wicket

Let's consider I have a HTML markup:
<div class="pull-right">
<div class="btn-group">
<a href="#" class="btn btn-default">
<i class="ico ico-prev"></i>
</a>
<div class="dropdown2 inline">
<a href="#" class="btn btn-default btn-shorter">
<strong>1-8</strong>
</a>
<ul class="dropdown-menu spec_width">
<li><a data-ico="1" href="#">10-30</a></li>
<li>30-40</li>
<li>40-50</li>
<li>50-60</li>
</ul>
</div>
<a href="#" class="btn btn-default">
<i class="ico ico-next"></i>
</a>
</div>
<span class="page-title">from<strong>45</strong></span>
.dropdown-menu {
padding: 0;
margin: 0;
left: -1px;
top: 37px;
font-size: 13px;
-webkit-box-shadow: 0px 0px 25px 0px rgba(100, 100, 100, 0.5);
-moz-box-shadow: 0px 0px 25px 0px rgba(100, 100, 100, 0.5);
box-shadow: 0px 0px 25px 0px rgba(100, 100, 100, 0.5);
border: 1px solid #d1d4d3;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
background-color: #f9f9f9;
}
.dropdown-menu li > a {
color: #4d5357;
padding: 8px 20px;
}
.spec_width {
width: 72px;
min-width: 72px;
left: 50% !important;
margin-left: -36px;
max-height: 150px;
min-height: 30px;
float: left;
overflow: hidden;
display: block !important;
visibility: hidden;
}
.spec_width li {
line-height: 29px;
width: 100%;
text-align: center;
padding: 4px 0;
}
.spec_width li:hover {
background: #e1e1e1;
}
.spec_width li a {
padding: 0px 0;
background: none !important;
width: 100%;
text-align: center;
}
I use that markup in ModalWindow, and it works pretty good, but when I apply CSS class to <ul> tag I don't see it in the browser, but when I inspect element, it generates in HTML code. I think that it must be because I use it in ModalWindow, and something(script, style) is conflicted. Any ideas?

In order to use Wicket to create HTML emails, we need to fake the request/response cycle. I wrote this convenient method that renders a bookmarkable page (pageclass + pageparameters) to a string:
http://www.danwalmsley.com/render_a_wicket_page_to_a_string_for_html_email
protected String renderPage(Class extends Page> pageClass,
PageParameters pageParameters) {
//get the servlet context WebApplication application =
(WebApplication) WebApplication.get();
ServletContext context = application.getServletContext();
//fake a request/response cycle MockHttpSession servletSession =
new MockHttpSession(context); servletSession.setTemporary(true);
MockHttpServletRequest servletRequest = new MockHttpServletRequest(
application, servletSession, context); MockHttpServletResponse servletResponse = new MockHttpServletResponse(
servletRequest);
//initialize request and response servletRequest.initialize();
servletResponse.initialize();
WebRequest webRequest = new WebRequest(servletRequest);
BufferedWebResponse webResponse = new
BufferedWebResponse(servletResponse); webResponse.setAjax(true);
WebRequestCycle requestCycle = new WebRequestCycle(
application, webRequest, webResponse);
requestCycle.setRequestTarget(new
BookmarkablePageRequestTarget(pageClass, pageParameters));
try { requestCycle.request();
log.warn("Response after request: "+webResponse.toString());
if (requestCycle.wasHandled() == false) {
requestCycle.setRequestTarget(new WebErrorCodeResponseTarget(
HttpServletResponse.SC_NOT_FOUND)); } requestCycle.detach();
} finally { requestCycle.getResponse().close(); } return
webResponse.toString();
}

The problem was solved after I append target.appendJavaScript("launchJS();"); where I had AjaxRequestTarget in my pages.

step by step gflot tutorial?

I feel a bit dumb asking this question here, but I can't seem to find a decent Gflot tutorial. Yes, there are tons of examples, and you can even download the whole code and try it out, but if you just want to create a uiBinder in a GWT project and add it to the main panel...it becomes really hard. I'm trying to add a simple LineChart to my main html file in a test GWT project.
Here is my LineExample uiBinder, directly copied from the examples:
public class LineExample extends DefaultActivity{
private static Binder binder = GWT.create( Binder.class );
interface Binder extends UiBinder<Widget, LineExample>{}
interface Style extends CssResource{
String button();
String darkTheme();
String whiteTheme();
String legendLabel();
}
/**
* Plot
*/
#UiField( provided = true )
SimplePlot plot;
/**
* Button switch to dark
*/
#UiField
Button switchDark;
/**
* Button switch to white
*/
#UiField
Button switchWhite;
/**
* Access to UiBinder style
*/
#UiField
Style style;
public LineExample( Resources resources ){
super( resources );
}
/**
* Create plot
*/
public Widget createPlot(){
PlotModel model = new PlotModel();
PlotOptions plotOptions = PlotOptions.create();
plotOptions.setLegendOptions( LegendOptions.create().setBackgroundOpacity( 0 )
.setPosition( LegendPosition.NORTH_WEST ) );
plotOptions.setGridOptions( GridOptions.create().setMargin( 5 ) );
plotOptions.addXAxisOptions( AxisOptions.create().setFont( FontOptions.create().setColor("black").setWeight( "bold" ).setStyle( "italic" ) ) );
plotOptions.addYAxisOptions( AxisOptions.create().setFont( FontOptions.create().setColor( "black" ).setWeight( "bold" ).setStyle( "italic" ) ) );
// create the plot
plot = new SimplePlot( model, plotOptions );
// add data
generateRandomData();
return binder.createAndBindUi( this );
}
/**
* On click on the generate button, we clear the current data and generate new ones
*
* #param e click event
*/
#UiHandler( "generate" )
void onClickGenerate( ClickEvent e ){
plot.getModel().removeAllSeries();
generateRandomData();
plot.redraw();
}
/**
* Generate random data
*/
private void generateRandomData(){
int nbSeries = Random.nextInt( 5 ) + 1;
for ( int i = 0; i < nbSeries; i++ ){
plot.getModel().addSeries( Series.of( "Random Series " + i ) );
}
for ( int i = 1; i < 13; i++ ){
for ( SeriesHandler series : plot.getModel().getHandlers() ){
series.add( DataPoint.of( i, Random.nextInt( 30 ) ) );
}
}
}
/**
* Switch to dark theme
*
* #param e click event
*/
#UiHandler( "switchDark" )
void onClickSwitchToDark( ClickEvent e ){
switchDark.setVisible( false );
switchWhite.setVisible( true );
plot.removeStyleName( style.whiteTheme() );
plot.addStyleName( style.darkTheme() );
plot.getOptions().getXAxisOptions().getFont().setColor( "white" );
plot.getOptions().getXAxisOptions().setTickColor( "rgba(255, 255, 255, 0.6)" );
plot.getOptions().getYAxisOptions().getFont().setColor( "white" );
plot.getOptions().getYAxisOptions().setTickColor( "rgba(255, 255, 255, 0.6)" );
plot.getOptions().getGridOptions().setBorderColor( "white" );
plot.redraw();
}
/**
* Switch to white theme
*
* #param e click event
*/
#UiHandler( "switchWhite" )
void onClickSwitchToWhite( ClickEvent e ){
switchDark.setVisible( true );
switchWhite.setVisible( false );
plot.removeStyleName( style.darkTheme() );
plot.addStyleName( style.whiteTheme() );
plot.getOptions().getXAxisOptions().getFont().setColor( "black" );
plot.getOptions().getXAxisOptions().clearTickColor();
plot.getOptions().getYAxisOptions().getFont().setColor( "black" );
plot.getOptions().getYAxisOptions().clearTickColor();
plot.getOptions().getGridOptions().clearBorderColor();
plot.redraw();
}
}
Here is the correspoding LineExample.ui.xml:
<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder" xmlns:g="urn:import:com.google.gwt.user.client.ui"
xmlns:p="urn:import:com.googlecode.gflot.client">
<ui:style type='gflot.sample.client.LineExample.Style'>
.button {
margin-top: 10px;
margin-left: 10px;
}
.darkTheme {
background-color: black;
}
#external legendLabel;
.darkTheme .legendLabel {
color: white;
}
.whiteTheme .legendLabel {
color: black;
}
Generate
Switch to dark
Switch to white
The Resources file used:
public interface Resources extends ClientBundle {
#Source( "gflot.css" )
Style style();
public interface Style extends CssResource{
String headerContainer();
String headerTitle();
String headerDescription();
String headerHomePageLink();
String menuScrollContainer();
String menuContainer();
String menuCategory();
String menuLink();
String menuLinkSelected();
String sourceContainer();
String sourceLink();
String sourceLinkSelected();
String mainScrollContainer();
String mainContainer();
}
}
And the css file, gflot.css:
#def headerBgColor #0D0D0D;
#def mainBgColor #FFF7FF;
body {
font-family: 'Ubuntu', sans-serif;
font-size: 13px;
background-color: mainBgColor;
color: #0D0D0D;
}
#external gwt-Button;
.gwt-Button {
/* background-color: #D14836; */
/* background-image: -webkit-linear-gradient(top, #DD4B39, #D14836); */
/* background-image: -moz-linear-gradient(top, #DD4B39, #D14836); */
/* background-image: -ms-linear-gradient(top, #DD4B39, #D14836); */
/* background-image: -o-linear-gradient(top, #DD4B39, #D14836); */
/* background-image: linear-gradient(top, #DD4B39, #D14836); */
/* border: 1px solid transparent; */
/* height: 27px; */
/* line-height: 27px; */
/* padding: 0px 8px; */
/* outline: 0; */
/* font-weight: bold; */
/* -webkit-border-radius: 5px; */
/* -moz-border-radius: 5px; */
/* border-radius: 5px; */
/* cursor: pointer; */
}
.headerContainer {
margin: 8px;
padding: 10px;
background-color: headerBgColor;
color: white;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 5px 5px 5px #888;
-webkit-box-shadow: 5px 5px 5px #888;
box-shadow: 5px 5px 5px #888;
}
.headerContainer a {
color: white;
}
.headerTitle {
font-size: 20px;
font-weight: bold;
}
.headerDescription {
font-style: italic;
margin-left: 10px;
}
.headerHomePageLink {
float: right;
margin-top: 3px;
}
.menuScrollContainer {
}
.menuContainer {
}
.menuCategory {
margin: 5px;
font-size: 16px;
}
.menuLink {
margin: 0px 10px;
}
.menuLink a {
display: block;
padding: 5px 8px;
color: black;
outline: 0px;
}
.menuLinkSelected a {
background-color: #8C2E0B;
color: white;
-moz-box-shadow: 5px 5px 5px #888;
-webkit-box-shadow: 5px 5px 5px #888;
box-shadow: 5px 5px 5px #888;
border-radius: 5px;
-moz-border-radius: 5px;
}
.menuLink a:hover {
background-color: #8C501C;
color: white;
-moz-box-shadow: 5px 5px 5px #888;
-webkit-box-shadow: 5px 5px 5px #888;
box-shadow: 5px 5px 5px #888;
border-radius: 5px;
-moz-border-radius: 5px;
}
.sourceContainer {
padding: 10px;
}
.sourceLink {
font-weight: bold;
padding: 3px;
color: black;
}
.sourceLink:hover {
cursor: pointer;
text-decoration: underline;
}
.sourceLinkSelected {
color: grey;
}
.sourceLinkSelected:hover {
cursor: auto;
text-decoration: none;
}
.mainScrollContainer {
margin: 5px;
}
.mainContainer {
margin: 5px;
}
Now, what I don't know how to proceed is adding the widget to my main panel...here is my EntryPoint class, where I'm adding an already existing widget I created before:
public class Gflot_example implements EntryPoint {
public void onModuleLoad() {
RootPanel.get().add(new Login());
//RootPanel.get().add(???); >> new LineExample() does not look like the way to proceed here
}
I've checked the EntryPoint in the examples, but it calls a MainWidow class that does lots of stuff I really don't know what is going on there...anyone has a working example NOT from the official examples?
Thanks!
Alex

The important part of the examples is the createPlot() method in each one. Rest of the stuff is used to handle history and source code viewing.
To add a SimplePlot to your RootPanel, just do the following :
Create a PlotModel and add your data to it
Create a PlotOptions and define the options you want
Create a SimplePlot with the model and options you created
Add the SimplePlot to your RootPanel
Basically, just copy the createPlot() method, put it inside your EntryPoint and do RootPanel.get().add(createPlot());
If you haven't done it yet, you also need to include the gflot module. Add <inherits name='com.googlecode.gflot.GFlot'/> to your module descriptor XML file.

Change Background-color of menue with jquery

I am trying to build a photo gallery with Zenphoto. They use php and one can add a custom menue like this:
<div id="navmenu">
<?php printCustomMenu('main_menue'); ?>
</div>
I changed the appearance of the whole thing in the sylesheet, which looks like this:
#navmenu {
width: 1000px;
height: 42px;
margin: 0px auto 30px auto;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
text-align: left;
font-size: 21px;
background-color: #000000
}
#navmenu li {
display: inline;
}
#navmenu a {
color: #eee;
display: inline;
line-height: 2em;
padding: 0.375em 0.5em;
text-decoration: none;
}
#navmenu a:hover {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 21px;
color: #000000;
background-color: #ffff33;
padding: 0.375em 0.5em;
}
Now I want to change the background-color of the individual menu items, so that every menu item has its own color. Random or not I don't care. I created a js file that is wired correctly.
I have tried several bits of code I found, but nothing works. Now I tried to do this to see if I can change the color at all:
$(document).ready(function() {
$("navmenu").hover(function(){
$(this).css('background-color', '#eeeeee')
});
});
Does not work. I am new to all this programming and I would greatly appreciate any help. It would be super nice if you could answer for dummies, so that I can understand.

Use:
$("#navmenu").hover(function(){
You missed the ID # selector.

You need to properly address the div using # for an ID or a . for a class:
$(document).ready(function() {
$("#navmenu").hover(function(){
$(this).css('background-color', '#eeeeee')
});
});
A tip for beginners: if you're not getting the result you expect, you can verify that the function is being called by throwing in a console log message anywhere like this:
$(document).ready(function() {
console.log("document ready!");
$("#navmenu").hover(function(){
console.log("hover activated");
$(this).css('background-color', '#eeeeee')
});
});

You could give something like this a try as it will pick a random color on hover and switch back to the #EEE background on the hover out event:
jQuery:
$(function () {
$("#navmenu a").hover(function () {
var newColor = Math.floor(Math.random() * 16777215).toString(16);
$(this).css('background-color', '#' + newColor);
}, function () {
$(this).css('background-color', '#EEE')
});
});​
Working Example: http://jsfiddle.net/Qc4R7/