I am trying to make a hello world web full-screen application. So, I created a new project called Hello world. Then, I created a folder called WebContent. Inside it, I put the following code in an index.html as following.
WebContent/ 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="resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.m"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-resourceroots='{"com.Project":""}'>
</script>
<!-- only load the mobile lib "sap.m" and the "sap_bluecrystal" theme -->
<script>
var app = new sap.m.App({initialPage:"idpage1"});
var page1 = sap.ui.view({id:"idpage1", viewName:"com.Project.HelloWorld.Page1", type:sap.ui.core.mvc.ViewType.XML});
app.addPage(Page1);
app.placeAt("content");
</script>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>
</html>
Then, in this directory WebContent/ HelloWorld I put a file called Page1.controller.js with the following code in it
WebContent/ HelloWorld/ Page1.controller.js
sap.ui.define([
"sap/ui/core/mvc/Controller"
], function(Controller) {
"use strict";
return Controller.extend("com.Project.HellowWorld.Page1", {
});
});
Also, I made another file as following
WebContent/ HelloWorld/ Page1.view.xml
<!DOCTYPE xml>
<core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m"
controllerName="com.Project.HellowWorld.Page1" xmlns:html="http://www.w3.org/1999/xhtml">
<Page title="Full screen App">
<content>
</content>
</Page>
</core:View>
The problem is that the background appears. But, the whole content does not appear on the page as required.
I am following a course published by an external consultant by the way.
Your <page> is written lowercase. It should be <Page>.
You should get the following error in console though:
Uncaught Error: failed to load 'sap/m/page.js' from .../resources/sap/m/page.js: 404 - Not Found
I just found the solution to my problem.
In the index.html:20 this part of my code is written like this app.addPage(Page1); So, I just replaced it with app.addPage(page1); and the error disappeared.
Related
If it is unclear than let's try this again.
In my research I learned that some call it a micro-loader, which is what I am trying to achieve. In the webpack configuration I have this in the plugin section
new HtmlWebpackPlugin({
template: 'src/index.html',
title: METADATA.title,
chunksSortMode: 'dependency',
metadata: METADATA,
inject: 'head'
}),
which turns an html file without any script tags (or even placeholders for them) during compilation in something like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My angular widget</title>
<meta name="description" content="My angular widget">
<!-- base url -->
<base href="/">
<link href="main.23ca1423b5f74b9e7d3a76e9eed69f71.css" rel="stylesheet"><script type="text/javascript" src="polyfills.60dbe827b1b8353af66f.bundle.js" defer></script><script type="text/javascript" src="vendor.0f040ba30b8e909c6a82.bundle.js" defer></script><script type="text/javascript" src="main.d6e9175158901f87b307.bundle.js" defer></script></head>
<body>
<app class="skin-green gbp">
Loading...
</app>
</body>
</html>
It magically adds those 4 files (1 css, 3 js) into the head section.
Now what I want is something like this (the angular-widget.js file)
function loadCss(url) {
var link = document.createElement("link");
link.type = "text/css";
link.rel = "stylesheet";
link.href = url;
document.getElementsByTagName("head")[0].appendChild(link);
}
loadCss('https://my-domain.com/app/main.1928b5b43a58428e7798d12176de68e3.css');
require(['https://my-domain.com/app/polyfills.60dbe827b1b8353af66f.bundle.js'], function() {
require(['https://my-domain.com/app/vendor.623bbcbf99de3526eab8.bundle.js'], function() {
require(['https://my-domain.com/app/main.d4f6aea1525a044b41da.bundle.js'], function() {
});
});
});
Which is a file I came up which does what I want it to do, but takes manual work everytime and utilizes require.js for now (but can be anything, I don't really care), which is the only point of entry and gets automatically generated during the compilation so I don't have to manually change the hashes everytime something changes and gets redeployed.
-- Old Post starts here
I have an angular 2 project using webpack for compiling. But I do not want the entry point to be the index.html, because the app is to be embeded into another webpage, which I do not have full control over.
I am trying to find a way to output something similar to the index.html but inside a .js file which I than can include on the webpage.
www.some-domain.com/webpage
[...]
<script type="text/javascript" src="https://my-domain.com/angular-widget.js"></script>
<app>
Loading...
</app>
[...]
Is there a way to generate that angular-widget.js during the webpack process? I tried to hijack the HtmlWebpackPlugin, but that expects to output HTML. I am fairly new to the whole webpack process, but my approach right now would be some template where I just can output the different files which are produced by webpack, for example using require.js. But maybe the whole thing is even possible only via webpack?
I am trying to get AngularJS 1.5.9 up and running an MVC 5 application using a very simple component called configuration-list.
I created an MVC 5 application (4.5.2), added the Angular.Core 1.5.9 Nuget package
To take MVC 5, layout and razor rendering out of the picture, I created a simple file called test.htm:
<!DOCTYPE html>
<html ng-app>
<head>
<title></title>
<meta charset="utf-8" />
<script src="Scripts/angular.js"></script>
<script src="Scripts/app/module.js"></script>
</head>
<body>
<configuration-list></configuration-list>
</body>
</html>
And in module.js:
(function () {
"use strict";
angular.module("radar", []).component("configuration-list", {
template: "Hello from configuration list"
});
}());
The browser (IE 11) comes up empty.
I have opened the debugging tools and go to the console tab, and there are no errors logged.
I have put a breakpoint in module.js and it is hit (so I know the code is running)
I have tried moving the scripts below the component in the body tag
I have tried setting ng-app="radar" in the html tag
Any idea what I'm missing?
For components the naming has to be camelcase, not hyphencase
angular.module("radar", []).component("configurationList", {
template: "Hello from configuration list"
});
I'm trying to use React as part of a firefox addon I'm working on. React works fine as long as I don't use jsx. Babel isn't working - because I can't specify the type of the script I add.
I'm doing:
tabs.open({
url: 'index.html',
onReady: function( tab ){
var worker = tab.attach({
contentScriptFile: [
'./jquery-2.1.4.min.js',
'../node_modules/react/dist/react.js',
'../node_modules/react-dom/dist/react-dom.js',
'../node_modules/babel-preset-react/index.js',
'./js/main.js', // the file i need to specify as type: text/babel
],
});
}
);
Ideally I'd be able to set a type property on the './js/main.js' script, but the docs don't appear to have anything.
The trick is to load react, jquery, babel and your jsx directly in your html, as you usually do. The javascripts files that you'll have to load using the contentScriptFile param are those one that you need to load the logic to communicate with the addon main js file.
An example for a valid html will be:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="react-with-addons.js"></script>
<script src="react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
</head>
<body>
<h1>Hello!</h1>
<div id="example"></div>
<script type="text/babel">
ReactDOM.render(
<p>Hello, world!</p>,
document.getElementById('example')
);
</script>
</body>
</html>
If you tell me what you need to do in that html/content script I can give you an example of how you can do to communicate it with the main script.
I create my app using OpenUI5 and I want try to integrate OPA5 to test it.
I write my test page: TestOPA.html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Opa sample for matchers</title>
<script id="sap-ui-bootstrap" src="https://openui5.netweaver.ondemand.com/resources/sap-ui-core.js"></script>
<link rel="stylesheet" href="https://openui5.netweaver.ondemand.com/resources/sap/ui/thirdparty/qunit.css" type="text/css" media="screen" />
<script>
(function () {
jQuery.sap.require("sap.ui.thirdparty.qunit");
jQuery.sap.require("sap.ui.test.Opa5");
jQuery.sap.require("sap.ui.test.opaQunit");
var Opa = sap.ui.test.Opa;
var Opa5 = sap.ui.test.Opa5;
module("Matchers");
opaTest("Should find a Button with a matching property", function(Given, When, Then) {
// Act
Given.iStartMyAppInAFrame("../index.html");
/* When.waitFor({
viewName : "view.Main",
controlType : "sap.m.Button",
matchers : new sap.ui.test.matchers.PropertyStrictEquals({name : "text", value : "Changed text"}),
success : function (aButtons) {
ok(true, "Found the button: " + aButtons[0]);
},
errorMessage : "Did not find the button with the property Text equal to Changed text"
});
Then.iTeardownMyAppFrame(); */
});
})();
</script>
</head>
<body>
<h1 id="qunit-header">Opa sample for matchers</h1>
<h2 id="qunit-banner"></h2>
<h2 id="qunit-userAgent"></h2>
<ol id="qunit-tests"></ol>
<div id="qunit-fixture"></div>
</body>
</html>
index.html is the root of my app. Inside the flow (not at start) I load resources that are not loaded properly.
I want load the resource http://localhost:8080/ZWebapp2/apps/appChangePwd/changePwd.js
but the console of browser show me a error to load the resource at http://localhost:8080/ZWebapp2/index.htmlapps/appChangePwd/changePwd.js
On all browsers it work fine (open http://localhost:8080/ZWebapp2/apps/appChangePwd/changePwd.js) but I have the problem when I start TestOPA.html
I have the same problem if I launch the my app (index.html) on internal Eclipse browser by Run as --> Web App Preview
Maybe you are referencing your files with a relative path, but you want an absolute one. Here is an example of how to do this with the jQuery.sap.require function of UI5:
JSBIN exmaple
The require statement in the bin should always create the correct request.
In your case it seems like you want declare an absolute path which means it will start building an URL after you host (localhost:8080). An relative path starts where your index.html is located.
Currently working through this tutorial on using Backbone.js with coffeescript.
Leveraging the following index.html file:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CoffeeScript, Meet Backbone.js: Part N</title>
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script src="http://ajax.cdnjs.com/ajax/libs/json2/20110223/json2.js"></script>
<script src="http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.6/underscore-min.js"></script>
<script src="http://ajax.cdnjs.com/ajax/libs/backbone.js/0.3.3/backbone-min.js"></script>
<script type="text/javascript" src="./index.js"></script>
</head>
<body>
<header>
<h1>CoffeeScript, Meet Backbone.js: Part 1</h1>
</header>
</body>
</html>
which loads an index.js file after loading Backbone, jQuery, etc from a cdn. Hoping to work within a script.coffee file that I'd like to have automatically compile into the script.js file loaded by index.html above by running something like coffee script.coffee -c -w.
Trouble is, I'm getting ReferenceErrors when I try to run the above command on the following script.coffee file:
jQuery ->
class ListView extends Backbone.View
el: $ 'body'
initialize: ->
_.bindAll #
#render()
render: ->
$(#el).append '<ul><li>Hello, Backbone!</li></ul>'
list_view = new ListView
For instance:
ReferenceError: jQuery is not defined
...
because, clearly, jQuery is being loaded in the index.html file.
Is there a way to suppress the error reporting from the coffeescript compiler so that it just converts the code without the error?
The options must go before the file, e.g.:
coffee -cw script.coffee
Otherwise, it will try to run script.coffee right then and there as a Node.js script, passing it the options -c and -w. That's not what you want; if you want the CoffeeScript compiler to get the options, it's got to be before the file name.