I am pretty new to UI5 and following this tutorial http://openui5.org/getstarted.html. I am getting an issue in step 3 of this tutorial where I am creating XML view of the app. The data "Hello World" is not showing up on the page. When I looked into the console, I am seeing this error
Failed to load resource: the server responded with a status of 404 (Not Found) https://openui5.hana.ondemand.com/resources/sap-ui-core.js
Here is my code:
index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='X-UA-Compatible' content='IE=edge' />
<title>Hello World</title>
<script
id="sap-ui-bootstrap"
src='https://openui5.hana.ondemand.com/resources/sap-ui-core.js'
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-libs="sap.m"
data-sap-ui-compatVersion="edge"
data-sap-ui-preload="async">
</script>
<script>
sap.ui.getCore().attachInit(function(){
new sap.ui.xmlview({
viewName: "sap.ui.demo.wt.App"
}).placeAt("content");
});
</script>
</head>
<body class="sapUiBody">
<div id="content"></div>
</body>
</html>
App.view.xml
<mvc:View
xmlns="sap.m"
xmlns:mvc="sap.ui.core.mvc">
<Text text="Hello World!" />
</mvc:View>
You are using a View with the namespace sap.ui.demo.wt, but the framework doesn't know where to find this namespace.
You need to add this definition to you bootstrap-script-tag:
data-sap-ui-resourceroots='{"sap.ui.demo.wt": "./"}'
Looking at the linked guide, I see that the code in the text doesn't have this declaration, however the code in the Try it out yourself-Box (and the linked Plunker) does.
Related
I was following the Browser section of official documentation https://bootstrap-vue.org/docs, however the BootstrapVue components just didn't render as expected.
html file as follow:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>webapp</title>
<!-- Load required Bootstrap and BootstrapVue CSS -->
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap#4.6.0/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue#2.21.2/dist/bootstrap-vue.min.css" />
<!-- Load Vue followed by BootstrapVue -->
<script src="//unpkg.com/vue#2.6.12/dist/vue.min.js"></script>
<script src="//unpkg.com/bootstrap-vue#2.21.2/dist/bootstrap-vue.min.js"></script>
<!-- Load the following for BootstrapVueIcons support -->
<script src="//unpkg.com/bootstrap-vue#2.21.2/dist/bootstrap-vue-icons.min.js"></script>
</head>
<body>
<div>
<h2>Example heading <b-badge>New</b-badge></h2>
</div>
</body>
</html>
What I see is 1
Instead of 2
What should be fixed to get the components rendered properly?
The issue is resolved, I have to add below code somewhere(e.g. main.js):
new Vue(...).$mount("#div_where_vue_should_render")
The following code is not working on my SAP WebIDE. When I run the index.html it shows the blank page.
Code
index.html
<!DOCTYPE html >
<!--Use the xml view from folder view -->
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta charset="UTF-8">
<title>OpenSAP - Developing Web Apps with SAPUI5</title>
<script
id="sap-ui-bootstrap"
src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-libs="sap.m"
data-sap-ui-compatVersion="edge"
data-sap-ui-preload="async"
data-sap-ui-resourceroots='{
"opensap.myapp": "./"
}'>
</script>
<script>
sap.ui.getCore().attachInit(function () {
sap.ui.xmlview({
viewName: "opensap.myapp.week1u21.view.App"
}).placeAt("content");
});
</script>
</head>
<body class="sapUiBody" id="content"></body>
</html>
App.view.xml
<mvc:View
displayBlock="true"
xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m">
<Carousel>
<Pages>
<Image src="https://upload.wikimedia.org/wikipedia/commons/0/0e/GEO_Globe_10.jpg"
height="400px"/>
<Image src="https://upload.wikimedia.org/wikipedia/commons/b/b1/Globe_Atlantic.svg"
height="400px"/>
</Pages>
</Carousel>
My Folder path in SAP WebIDE is as under. Please review below screen link.
Please help me to find out the problem.
Hope this will help you, aggregation for the Carousel control is pages
<Carousel class="sapUiContentPadding" loop="true">
<pages> <!-- this should in small letters -->
<Image src="https://upload.wikimedia.org/wikipedia/commons/0/0e/GEO_Globe_10.jpg" height="400px"/>
<Image src="https://upload.wikimedia.org/wikipedia/commons/b/b1/Globe_Atlantic.svg" height="400px"/>
</pages>
</Carousel>
Note: Kindly see browser console for JavaScript errors.
I use The Elm Architecture and my view-function is simply div [] [...].
How to alter the view-function (or other functions) such that the favicon-link tag <link rel="favicon" type="image/ico" href="favicon.ico" /> (or similar) gets generated into the index.html document?
You can compile elm src into javascript and load it from html.
when building:
elm-make src/Main.elm --output elm.js
index.html:
<html>
<head>
<link rel="favicon" type="image/ico" href="favicon.ico" />
<script src="elm.js"></script>
</head>
<body>
<script>
var app = Elm.Main.fullscreen()
</script>
</body>
</html>
New to ionic I am having a play and have come across this issue. I have created an app that runs an XMLHttpRequest to get some data from a secure site. If I load the app's index.html file directly the data loads fine but not if I run ionic serve. The error is, I think, because the request is coming from localhost as on inspection I see the error.
Origin http://localhost:8100 is not allowed by Access-Control-Allow-Origin.
I am interested to know if I am going to run into ionic specific issues if I continue testing the app directly from the index file, and/or is there a way of allowing the ionic serve method access the data?
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="cordova.js"></script>
<script src="js/app.js"></script>
</head>
<body ng-app="starter">
<ion-pane>
<ion-header-bar class="bar-calm">
<button class="button icon ion-navicon button button-clear"></button>
<h1 class="title">Log</h1>
<button class="button icon ion-gear-b button button-clear"></button>
</ion-header-bar>
<ion-content>
<script type="text/javascript">
var xmlhttp = new XMLHttpRequest();
var url = "https://xxxxx/getLog.php";
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById('listLog').innerHTML=xmlhttp.responseText;
}
};
xmlhttp.open("GET", url, true);
xmlhttp.send();
</script>
<p id="listLog"></p>
</ion-content>
</ion-pane>
</body>
</html>
I solved the same issue by installing Allow-Control-Allow-Origin: * plugin in my Google Chrome.
I'm hoping to be able to load an ExtJS chart inside Ext.Net(coolite) pages.
I've copied the pie chart from the ExtJS samples and have put it in an test aspx document to see it work:
heres is my pie.aspx
<html>
<head>
<title>Pie Chart</title>
<script type="text/javascript" src="ExtJs4/ext-all.js" />
<script type="text/javascript">
Ext.Loader.setConfig({
enabled: true,
disableCaching: true,
paths: { 'Ext': "/app/" }
});
</script>
<link rel="stylesheet" type="text/css" href="ExtJs4/resources/CSS/ext-all.css" />
<link rel="stylesheet" type="text/css" href="ExtJs4/examples/shared/example.css" />
<script type="text/javascript" src="ExtJs4/examples/example-data.js"></script>
<script type="text/javascript" src="app/pie.js"></script>
<script type="text/javascript" src="ExtJs4/bootstrap.js"></script>
</head>
<body id="docbody">
</body>
when I try and load it from an Ext.Window I dont see anything just an empty popup. if I go to the url directly i dotn see anything either
Here's the code I'm using to attempt to load the chart (i put it inside my existing coolite code):
<ext:Window
Title='!'
runat="server"
AutoDataBind="true"
Modal="true"
ID="ChartWindow"
Width="900"
Height="670"
Hidden="false">
<AutoLoad Url="pie.aspx" Mode="IFrame" />
</ext:Window>
Am I going about this the wrong way in trying to using the Ext.Net dll with the new ExtJS libraries? Is there another way I could go about accomplishing the same thing (ie: have a server-side window to load the ExtJS 4 charts)?
Thanks for any input.
solved!!
not sure what was the problem,my code is correct,maybe only the cache