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.
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")
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>
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.
I am developing a sample ios app with phonegap for learning purpose. Following is the code that I have used
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<title>Hello World</title>
</head>
<body>
<div data-role="page" id="main-page">
<h1>Apache Cordova</h1>
<div data-role="content">
<div data-role="fieldcontain">
<label for="textinput1">
Title
</label>
<input name="" id="textinput1" placeholder="" value="" type="text">
</div>
<a id="share" data-role="button" data-inline="true" data-theme="a" href="#">
Button
</a>
</div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<!--<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>-->
<script type="text/javascript">
app.initialize();
</script>
</body>
Now the problem is, while running the application the button is not displaying properly.Please help me out??!!
This line
<!--<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>-->
Must be uncommented.
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
Because jQuery Mobile needs jQuery. Also, you need to add it before jQuery Mobile's JS file, like this :
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
Hope this helps.
Till now I am developed an app with jquery mobile in phonegap.
It has multiple views/pages.
how to load multiple pages using jQuery mobile
The following snippets show how you can load different page:
Go to Page2 <!-- for page2 in same html -->
Go to Page2 <!-- redirect to different html -->
or
$.mobile.changePage("#page2"); // for page2 in same html
$.mobile.changePage("page2.html"); // to go to different html file
I have a sample Android Phonegap application in Github which contains two html files with two pages and shows connects them together.
Although it is using Android but the /www file structure will remain same for iOS XCode project also. So you can copy the folder and run it same in xcode. I have tested the setup on XCode with Cordova 1.7.1.
you should add all javascripts and css files in the first page that is loaded first;;
ex: my app the first page is index.html;
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
<link rel="stylesheet" href="css/jquery.mobile-1.0.min.css" />
<link rel="stylesheet" href="css/jqm-docs.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.mobile.datebox.min.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.mobile.scrollview.css" />
<link rel="stylesheet" media="only screen and (max-device-width: 1024px)" href="ipad.css" type="text/css" />
<!--
<link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="iphone.css" type="text/css" />
<!-- If your application is targeting iOS BEFORE 4.0 you MUST put json2.js from http://www.JSON.org/json2.js into your www directory and include it here -->
</head>
<body>
<div data-role="page" id="indexPage" >
<div data-role="header">
<a href="#" id="btnExit" data-role="button" data-inline="true" data-icon="back" >Exit</a>
<h1>Sample App</h1>
</div>
<div data-role="content">
</div>
</div>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/iscroll.js"></script>
<script type="text/javascript" src="js/cordova-1.7.0rc1.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
</script>
<script type="text/javascript" src="controllers/firstpage.js" ></script>
<script type="text/javascript" src="controllers/secondpage.js" ></script>
</body>
</html>
and fisrtpage should like this:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div data-role="page" id="firstpage" >
<div data-role="header" data-inline="true">
<a href="#" data-role="button" data-inline="true" id="btnLogOut" data-icon="back" >Log out</a>
</div>
<div data-role="content" data-content-theme="a" style="width:97%;">
the first page
</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul style='background-color:#313439'>
</ul>
</div>
</div>
</div>
</body>
</html>
And firstpage.cs
$( document ).delegate("#firstpage" ,"pageinit", function() {
/// add your code here
});