I'm having quite a mistery and I have no idea where to start searching or what for. Problem is that my edit page for selected item does not load css, while practically same page for adding the same item loads just fine. I went to check differences with diff check just to make sure and I can't find it. Is it possible because it is /id of item that somehow CSS is not getting loaded?
To be more clear. On edit page Bootstrap does load but my CSS does not. If needed, let me know if I need to provide pictures.
Controller add part:
#RequestMapping(value = "/newcontactor", method = RequestMethod.GET)
public ModelAndView contactorFormNew() {
ModelAndView mav = new ModelAndView("ContactorFormNew");
Contactor c = new Contactor();
List<Manufacturer> miro = serviceManu.listManufacturers();
mav.addObject("contactor", c);
mav.addObject("listManufacturers", miro);
return mav;
}
Controller edit part:
#RequestMapping(value = "/contactors/{id}", method = RequestMethod.GET)
public ModelAndView fuseForm(#PathVariable Integer id) {
ModelAndView mav = new ModelAndView("ContactorForm");
Contactor c = serviceContactor.getContactorById(id);
List<Manufacturer> miro = serviceManu.listManufacturers();
for (int i = 0; i < miro.size(); i++) {
if (miro.get(i).getName().equals(c.getManufacturer().getName())) {
miro.add(0, miro.get(i));
miro.remove(i + 1);
}
}
mav.addObject("contactor", c);
mav.addObject("listManufacturers", miro);
return mav;}
Edit html (not loading CSS):
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Contactor Editor</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"></link>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="Style.css"></link>
</head>
Add html(loading css):
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Contactor New</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"></link>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="Style.css"></link>
</head>
Yes, it's looking for your css in the wrong page when editing (because of the extra / in the url when editing:
On /newcontactor it's looking for the CSS in /Style.css
On /contactors/{id} it's looking for the CSS in /contactors/Style.css
I think changing <link rel="stylesheet" type="text/css" href="Style.css"></link> to <link rel="stylesheet" type="text/css" th:href="#{/Style.css}"></link> should fix this. (This does depend slightly on how your context/servlets are setup.)
(And you should be debugging this kind of stuff by watching the network tab in your browser's developer tools. The network tab would clearly show a 404 when trying to load Style.css.)
Related
When I import the files which the front-end developer packages the dist project, and SpringBootApplication run, I can visit index.html, but I can't read its static resources, can't show the pic, it's all black. And index.html source code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="apple-touch-icon" href="./pwa-192x192.png">
<link rel="mask-icon" href="./safari-pinned-tab.svg" color="#00aba9">
<meta name="msapplication-TileColor" content="#00aba9">
<script>
(function () {
const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
const setting = localStorage.getItem('vueuse-color-scheme') || 'auto'
if (setting === 'dark' || (prefersDark && setting !== 'light'))
document.documentElement.classList.toggle('dark', true)
})()
</script>
<script type="module" crossorigin src="./static/js/index-d3549438.js"></script>
<link rel="stylesheet" href="./static/css/index-db70e0a5.css">
</head>
<body class="font-sans">
<div id="app"></div>
</body>
</html>
the positions of dist file : resources/dist, and my dist file contains static file.
And my configuration about SpringApplication is in application.yml:
Spring:
web:
resources:
static-locations: "classpath:/dist"
And I also add SpringWebMvcConfig.java in my config-files:
#Configuration
#ComponentScan
public class SpringWebMvcConfig extends WebMvcConfigurationSupport {
#Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
registry.addResourceHandler("/dist/**").addResourceLocations("classpath:/dist/");
}
}
If possible, I would really appreciate it if you could help me point out the problem.
:)
I can visit "index.html" only use npm.
I don't know how to set it up the way you want it, but this is how I do it in my project. I copy the files to the resources folder of the java application. Here an excerpt of my vue.config.js:
const {defineConfig} = require('#vue/cli-service');
module.exports = defineConfig({
outputDir: 'src/main/resources/public/clientlibs/vue-dist'
});
Then you can access these from the spring templates with: /clientlibs/vue-dist/vue-app.js
I'm researching building a simple web app using Polymer. I'd like to pass an numerical id to a custom component. I can accomplish this using JSP by adding the id to a map and passing it in to a Viewable:
private Response buildUI(LinkedHashMap<String, String> map) {
return Response.ok(new Viewable("/MyApp", map)).build();
}
I would prefer not to introduce JSP to handle a single value though.
Is there a simpler way to accomplish this?
The HTML code-in-progress is:
// MyApp.html
<html>
<head>
<title>iron-form demo</title>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="custom-form-element.html">
<link rel="import" href="custom-id-element.html">
</head>
<body unresolved>
<custom-form-element>
<template>
<form is="iron-form" method="get" action="/" id="basic">
<custom-id-element value="{id}"/>
<paper-button raised onclick="_submit(event)">Submit</paper-button>
</form>
<script>
function _submit(event) {
Polymer.dom(event).localTarget.parentElement.submit();
}
basic.addEventListener('iron-form-submit', function(event) {
this.querySelector('.output').innerHTML = JSON.stringify(event.detail);
});
</script>
</template>
</custom-form-element>
</body>
</html>
It turns out the solution was simple using the Polymer component "app-route". My app is REST-based, and the ID is a resource, so it was logical to place it in the URI path:
<app-route
route="{{route}}"
pattern="/:id"
data="{{routeData}}"
tail="{{subroute}}">
</app-route>
Now I can databind to the id where I need it:
<iron-label>
route = {{routeData.id}}
</iron-label>
I followed the trick for passing data to HTML webview from SO post How to pass parameter into HTML file from android.
I have this in my Java:
try {
String template = streamToString(getAssets().open("html/index.html"));
String data = template.replaceAll("%PARAMETER%", PARAMETER);
webView.loadDataWithBaseURL("file:///android_asset/html/", data, "text/html", "utf-8", null);
} catch (IOException e) {
e.printStackTrace();
}
In my HTML, I have the string "%PARAMETER%".
The solution works for my test device running Android 2.3.6, but didn't work in device running Android 4.1.1. The HTML have some CSS and JS files. Is the problem related to the content of the HTML page?
Any better approach on what I'm trying to achieve? Simple I just want to send data from Java to HTML webview.
This is the content of HTML:
<!DOCTYPE html>
<html>
<head>
<title>Like a Pub</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile-1.2.0.min.css" />
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="jquery.mobile-1.2.0.min.js"></script>
<script type="text/javascript">
$('#index-page').live('pageshow', function(event, data){
//
});
</script>
</head>
<body>
<div data-role="page" id="index-page">
%WEBSITE_URL%
</div>
</body>
</html>
Basically I want to do the same as here which is done in Python.
I'd like to replace all self-closed elements to the long syntax.
Example
<iframe src="http://example.com/thing"/>
becomes
<iframe src="http://example.com/thing"></iframe>
Full example:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="/sample.css">
<title></title>
<script type="text/javascript" src="/swfobject.js">
//void
</script>
<script type="text/javascript" language="JavaScript" src="/generate.js">
//void
</script>
<script type="text/javascript" language="JavaScript" src="/prototype.js">
//void
</script>
</head>
<body id="mediaPlayer" style="margin:0;padding:0;">
<script type="text/javascript">
swfobject.registerObject('id_G12564763');
function getFlashObject() {
var object;
if (navigator.appName == 'Microsoft Internet Explorer' || navigator.userAgent.indexOf("Chrome")!=-1)
{
object = document.getElementById('id_G12564763');
}
else
{
object = document['flash_id_G12564763'];
}
return object;
}
</script>
</body>
</html>
This can be used to replace one tag (code in javascript).
var becomes = "<iframe src='http://example.com/thing'/>".replace(/<(\w*) (.*)\//,'<$1 $2></$1')
The same, in Java.
String becomes = "<iframe src=\"http://example.com/thing\"/>".replaceFirst("<(\\w*) (.*)\\/", "<$1 $2></$1");
Ok guys. I found a workaround. I hooked the output method to xml where this html comes from and the XSLT engine takes care of closing those open tags for me. Thanks for answers, but if you happen to have a solution for the problem pls, leave your answer and I will mark it as an answer. This could be useful for others.
String resultHtml = inputHtml.replaceAll("(?six)<(\\w+)([^<]*?)/>", "<$1$2></$1>");
and this will properly handle tags that are not terminated like <hr> and <img>
I know you can open a new browser window using the Window.open() function directing it to a specific URL. However, is it possible to open a new browser Window containing a GWT Panel? And if it is, can someone show an example of it?
Here's my idea. I implemented it in pure JavaScript, but if it's possible in JS, it should also be possible with GWT!
parent.html:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Parent page</title>
<script type="text/javascript">
function openChild() {
window.mychild = window.open("print.html");
setTimeout('setContent();', 2000);
}
function setContent() {
window.mychild.document.body.innerHTML =
'<b>Here is your dynamically generated print content</b>';
// This could be produced by your main GWT module.
}
</script>
</head>
<body>
Open child window
</body>
</html>
print.html:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Print view</title>
</head>
<body>
One moment please...
</body>
</html>
Note, that I used a timeout. This isn't ideal, because if the (very small) print.html takes longer to be fetched, then it will overwrite the dynamically set content.
I assume, the solution could be optimized (but make sure that the child window is fetched from the same origin, otherwise you'll run into "Same Origin Policy" problems).