I have a file structure that looks like the following:
/root
/images
image1.png
image2.png
button1.png
button2.png
/css
app.css
core.css
/scripts
jquery-1.6.4.min.js
jquery.mobile-1.1.0.min.js
/path1
/pathA
index.cshtml
page1.cshtml
index.cshtml
/path2
/pathA
index.cshtml
page1.cshtml
/pathB
index.cshtml
page1.cshtml
index.cshtml
index.cshtml
_layout.cshtml
All of the .cshtml files rely on _layout.cshtml for the shared content. My _layout.cshtml file looks like the following:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<link rel="stylesheet" href="/css/core.css" />
<link rel="stylesheet" href="/css/app.css" />
<script src="/scripts/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="/scripts/jquery.mobile-1.1.0.min.js" type="text/javascript"></script>
<style type="text/css">
#button1 .ui-icon { background: url(/images/button1.png) }
#button2 .ui-icon { background: url(/images/button2.png) }
</style>
</head>
<body>
#RenderBody()
</body>
</html>
This file references all urls by starting with "/". Unfortunately, this won't work when I move my app to PhoneGap. I was hoping to replace all beginning "/" with a relative path. For instance, if I accessed /path1/pathA/index.cshtml I would want the two button css definitions to look like:
#button1 .ui-icon { background: url(../../images/button1.png) }
#button2 .ui-icon { background: url(../../images/button2.png) }
Is there a way that I can automatically change my paths so that they are relative like shown above? Am I making sense in what I want?
I suggest that you use the built in html helpers, for example:
<script src="#Url.Content("~/Scripts/jquery-1.6.4.min.js")" type="text/javascript"></script>
...
#button1 .ui-icon { background: url(#Url.Content("~/Content/images/button1.png")) }
Related
I have a spring boot app that generates a pdf with itext,
I'm trying to add a map when generating it.
I didn't find any way to add the leaflet.
my example:
<!DOCTYPE html>
<html xmlns:th="http://www.springframework.org/schema/mvc">
<head>
<title>Leaflet</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.6.0/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin=""/>
<script src="https://unpkg.com/leaflet#1.6.0/dist/leaflet.js" integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew==" crossorigin=""></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<div id="mapid" style="width: 100%; height: 750px;"></div>
<script th:inline="javascript">
var mymap = L.map('mapid').setView([0, 0], 4);
L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
attribution: 'Corona Virus'
}).addTo(mymap);
</script>
</body>
</html>
any suggestion?
as far as I know, it is not possible to save as pdf the result of the javascript code. I suggest that you look how to get the map as an image and then you can pass the url of that image (or base64 encoding) to your template and convert to pdf.
Check example usages: http://sampleserver1.arcgisonline.com/arcgis/sdk/rest/export.html
My project structure:
resoureces
static
css
js
templates
a.html
b.html
My application.yml:
resources:
static-locations: classpath:/
And my html code:
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<meta content="webkit" name="renderer">
<meta content="width=device-width, initial-scale=1" name="viewport">
<link rel="shortcut icon" href="static/img/favicon.ico" />
<script src="static/js/jquery-3.2.1.js"></script>
<script src="static/js/bootstrap.min.js"></script>
<script src="static/js/jquery-confirm.min.js"></script>
<link href="static/css/reset.css" rel="stylesheet">
<link href="static/css/bootstrap.min.css" rel="stylesheet">
<link href="static/css/pretty.css" rel="stylesheet">
<link href="static/css/iconfont.css" rel="stylesheet">
<link href="static/css/common.css" rel="stylesheet">
<link href="static/css/jquery-confirm.min.css" rel="stylesheet">
</head>
<body>
<p>test</p>
</body>
My controller:
#Controller
public class IndexController {
#GetMapping("/index")
public String toIndex(){
return "index";
}
#GetMapping("/index/test")
public String test(){
return "index";
}
}
/index css and js success
but /index/test idea show no mapping for it
What is the correct configuration?
HTML How to link CSS and JS?
The issue is that you're using relative paths, such as static/css/reset.css.
Your browser will handle these by using the current path, and append the relative one.
Assuming that you're running your application on port 8080, when you call http://localhost:8080/index, the resources will be fetched from http://localhost:8080/static/css/reset.css. However, when you're calling /index/test, the relative path would refer to http://localhost:8080/index/static/css/reset.css.
That means that due to you using relative paths, it will fetch the resources from a different location if your path is different.
One possible solution is to use a <base /> tag within the <head> section of your HTML, such as:
<base href="/" />
By setting the <base /> tag, you're telling your browser where to relatively fetch resources from.
More detailed information can be found within this question.
Also, be aware that by default, Spring boot will serve resources within src/main/resources/static on the context path itself, so might have to drop the static/ part from the URLs, such as:
<link href="css/reset.css" rel="stylesheet">
I am new in SAP and trying to develop a SAPUI5 application, but faced some problems when reusing views/partial views. I want to have a partial view and pass custom data in a specefic format (data changes but model is same), and reuse these partial view many times in one page, every time passing different data. Somehow like Tiles, but very cuszomized.
what do you suggest me to use?
I have tryied to make new instance of a regular view but faced this error:
GET https://sapui5.hana.ondemand.com/resources/view/List.view.xml 404
(Not Found)
this is my code to make new instance:
var firstListView=sap.ui.xmlview("firstViw", "view.List");
thanks for your help
Update:
this is my index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv='Content-Type' content='text/html;charset=UTF-8' />
<script src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.m, sap.ushell"
data-sap-ui-xx-bindingSyntax="complex"
data-sap-ui-theme="sap_belize"
data-sap-ui-resourceroots='{
"sap.ui.appName": "./"
}'>
</script>
<script src="../libs/jquery.cookie.js"></script>
<link href="css/site.css" rel="stylesheet" type="text/css" />
<link href="css/library.css" rel="stylesheet" type="text/css" />
<link href="css/theme/library.css" rel="stylesheet" type="text/css" />
<script>
sap.ui.getCore().attachInit(function () {
new sap.m.Shell({
appWidthLimited:false,
app: new sap.ui.core.ComponentContainer({
name: "sap.ui.appName"
})
}).placeAt("content");
});
</script>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>
</html>
and this is the folder structered:
Please have a look at chapter “Reusing UI Parts: Fragments” of the UI5 SDK.
Here is an excerpt. Please have a look whether this helps.
Current scheduler working with google calendar. But not mobile friendly.
<!DOCTYPE html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title></title>
</head>
<script src="./codebase/dhtmlxscheduler.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="./codebase/dhtmlxscheduler.css" type="text/css" media="screen" title="no title" charset="utf-8">
<style type="text/css" media="screen">
html, body{
margin:0px;
padding:0px;
height:100%;
overflow:hidden;
}
</style>
<script type="text/javascript" charset="utf-8">
function init() {
scheduler.config.xml_date="%Y-%m-%d %H:%i";
scheduler.init('scheduler_here',new Date(2013, 7, 5),"week");
scheduler.load("./data.php", "json");
var dp = new dataProcessor("./data.php");
dp.init(scheduler);
dp.setTransactionMode("POST", false);
}
</script>
<body onload="init();">
<div id="scheduler_here"></div>
</div>
</body>
Current Scheduler that is mobile friendly but won't get events from google calendar.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale = 1.0, maximum-scale = 1.0, user-scalable = no">
<script src="cal/webix.js" type="text/javascript"></script>
<script src="cal/scheduler/scheduler.js" type="text/javascript"> </script>
<link rel="stylesheet" type="text/css" href="cal/skins/touch.css">
<link rel="stylesheet" type="text/css" href="cal/scheduler/scheduler.css">
<title></title>
<script type="text/javascript" charset="utf-8">
webix.ready(function() {
scheduler.config.hour_date = "%g:%i%a";
scheduler.config.readonly = true;
webix.ui.fullScreen();
webix.ui({
view: "scheduler",
id: "scheduler"
});
$$("scheduler").load("data.json", "json");
});
</script>
</head>
<body>
<div id="scheduler"></div>
</body>
</html>
Can't seem to figure out how to merge them or create a new code that has the css to be mobile friendly but still get data from a google calendar.
In case of json data source, both desktop and mobile scheduler must be able to share the same data source, so code like next must work
$$("scheduler").load("data.php", "json");
Look the following image:
I can not submit a image now,pls click code image to see the image.
I set a _ViewStart,_Layout and relative files in "Login" file that are different from "Shared" file.What I want is to display a different layout when open page "/Login/Index" and others display the default layout.And it works well as my expect.
But when I use a section to load a "js" file in "index.cshtml",the web show errors "defined thd following sections,but not for layout“~/Views/Login/_Layout.cshtml”appear:“HeadJs”。"
the following codes is a part of Login/Layout:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>#ViewBag.Title</title>
#if (IsSectionDefined("Meta"))
{
RenderSection("Meta", false);
}
<link href="#GlobalVal.__siteResource/Css/Global/Site.css" rel="stylesheet" type="text/css" />
#if (IsSectionDefined("Css"))
{
RenderSection("Css", false);
}
<script type="text/javascript">
var GlobalVal={__siteHome:"#(GlobalVal.__siteHome)",__siteResource:"#(GlobalVal.__siteResource)"};
</script>
<script src="#GlobalVal.__siteResource/js/Lib/jquery-1.5.1.min.js" type="text/javascript"></script>
#if (IsSectionDefined("HeadJs"))
{
RenderSection("HeadJs", false);
}
</head>
and the following codes is "/login/index.cshtml":
#using TJK.Model;
#model MemberUser
#section HeadJs {
<script src="#GlobalVal.__siteResource/Js/Lib/jquery.validate.min.js" type="text/javascript"></script>
<script src="#GlobalVal.__siteResource/Js/Lib/jquery.validate.unobtrusive.min.js" type="text/javascript"></script>
}
You need to define your sections all the way down to the top master page.
Basically doing RenderSection("Myname", false);