I am learning openui5 (Version 1.61.1) using openUI5 Documentation
From the version 1.61.1 openUI5 includes index.js file.This index.js file is missing in the documetation from "step:9 Component configuration " till the last step. I am unable to proceed further without index.js file.I am not sure whether i missed any point or its something related to documentation error.
I have found the issue. in step no 9 we have to include the below meta
data tag and change onInit value in index.html file.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
data-sap-ui-oninit="module:sap/ui/core/ComponentSupport"
I had the same problem with step 9 of the tutorial. In addition to the suggested changes, I had also to change the body of the index.html to show the content of my view.
My working index.html looks like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chatter UI</title>
<script
id="sap-ui-bootstrap"
src="http://127.0.0.1:8080/openui5-demo/resources/sap-ui-core.js"
data-sap-ui-theme="sap_belize"
data-sap-ui-libs="sap.m"
data-sap-ui-compatVersion="edge"
data-sap-ui-async="true"
data-sap-ui-resourceroots='{
"sap.ui.demo.walkthrough": "./"
}'
data-sap-ui-oninit="module:sap/ui/core/ComponentSupport"
>
</script>
</head>
<body class="sapUiBody" id="content">
<div data-sap-ui-component data-name="sap.ui.demo.walkthrough" data-id="container"></div>
</body>
</html>
I have found the issue. in step no 9 we have to include the below meta data tag and change onInit value in index.html file.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
data-sap-ui-oninit="module:sap/ui/core/ComponentSupport"
However i am not sure why its working if we add this meta data tag. can anyone explain me.
Related
I am using visual studio code .I have the php extension installed already . But it is very repetitive to create each php file with the base structure like this one . Since it does'nt automatically insert it for me .
<!DOCTYPE HTML >
<HTML lang="en">
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
Is there anyway or short key to quickly copy this structure into the newly created php file ? without using control+C control+V from a note ?
If you are using VS code then you can use this command shift + 1 and enter to auto-populate HTML Doctype in HTML or PHP.
When you will press enter it will add the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
press---> Shift+1 + enter or tab
OR
press----> html:5 + enter or tab
Note:- In VS-Code.
Type !, and then click the first snippet in the auto complete. It will generate the default HTML template
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
Or, you can use snippet to add your own code, and this should help you
I don't know why. just ! doesn't work for me, but when I type html5 or html:5 and use autocomplition, it works like a charm.
When I type ! and hit enter in an .html file I get a nice boilerplate like below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
My question is can I remove the tag:
<meta http-equiv="X-UA-Compatible" content="IE=edge">
I know I can add my own snippets but I haven't found a way to change the default HTML boilerplate when I type !
I think you can. But keep in mind that an update could overwrite this setting.
Open VSCode installation path and navigate to
.. VS Code\resources\app\extensions\emmet\dist\node\emmetNodeMain.js
just search and delete the next meta
meta[http-equiv='X-UA-Compatible'][content='IE=edge']+
near the secuence:
doc:"html[lang=${lang}]>(head>meta[charset=${charset}]+meta[http-equiv='X-UA-Compatible'][content='IE=edge']+meta:vp+title{${1:Document}})+body"
This path could be different from one version to other.
Is it possible to merge JS files (or CSS files) with parcel ?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="/js/aos.js"></script>
<script src="/js/club.js"></script>
</head>
<body>
</body>
</html>
When I run
parcel build js.html
I got 2 minified .js files into /dist
Is there a way to get one single file ?
regards
I don't think there's currently a config-driven way to get parcel to do this, but if your project can tolerate using modules (and if you have a choice - i.e. you wrote both aos.js and club.js), I would highly recommend this to avoid bugs that can come with global variables), then you can have your html reference a single index.js file, which then imports all of it's dependencies, like this:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="/js/index.js" type="module"></script>
</head>
<body>
</body>
</html>
Note the type="module" property in the script tag - see documentation
js/index.js
import "js/aos.js"
import "js/club.js"
This morning, I was able to view vscode intellisense suggestions with PIXI.js.
My index.html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Fun with PIXI</title>
<script src="node_modules/pixi.js/dist/pixi.min.js"></script>
</head>
<body>
<script type="text/javascript" src="index.js"></script>
</body>
</html>
My index.js:
const app = new PIXI.Application();
document.body.appendChild(app.view);
Serving the file and running index.js is fine. I am just so annoyed that I lost intellisense suggestions for PIXI.js (or any third party libraries). I still do see Intellisense suggestions working for DOM APIs (i.e. document methods, etc...)
I am creating a custom Share page that must have none of the Alfresco UI on it, but which still needs access to the Alfresco and YAHOO objects.
I have successfully created the page and caused it to open in a new tab, but I get errors that the Alfresco and YAHOO objects are undefined.
What are the minimum includes I must add to my Freemarker template to get access to those objects?
Update: I have gotten the Alfresco and YAHOO objects to load, but now am getting "Uncaught Error: extend failed, please check that all dependencies are included."
Here are the freemarker and javascript includes I've got so far, if it'll help:
<#import "import/alfresco-common.ftl" as common />
...
<script type="text/javascript" src="../scripts/ajax/yahoo/yahoo-min.js"> </script>
<script type="text/javascript" src="../scripts/ajax/yahoo/connection/connection-min.js"> </script>
<script type="text/javascript" src="../scripts/ajax/common.js"> </script>
<script type="text/javascript" src="../scripts/ajax/utilities/utilities.js"> </script>
<script type="text/javascript" src="../yui/yuiloader/yuiloader.js"> </script>
<script type="text/javascript" src="../js/alfresco.js"> </script>
Update 2: Based on the first answer, the first few lines of the template look like this and again yield Uncaught ReferenceError: YAHOO is not defined:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<region-id>head-resources</region-id>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<title></title>
<script>
var urlParams;
Update 3: I've reduced the source to the minimum necessary to demonstrate the problem. What follows next is the template component definition file, followed by the freemarker template itself. Definition:
<?xml version='1.0' encoding='UTF-8'?>
<page>
<title>iPad Viewer</title>
<title-id>page.iPad.title</title-id>
<description>iPad Viewer</description>
<description-id>page.iPad.description</description-id>
<template-instance>viewer-ipad</template-instance>
<authentication>user</authentication>
</page>
Freemarker template:
<html>
<body>
<div class="content">
<#region-id>head-resources</#region-id>
<script>
alert(YAHOO);
alert(Alfresco);
</script>
</div>
</body>
</html>
Error is:
Caused by: freemarker.core.ParseException: Parsing error in template "org/alfresco/viewer-ipad.ftl" in line 11, column 7: Unclosed #... when the end of the file was reached.
I'm not sure how you created the page, but this is not needed when you define your regions.
Probably there are all in the <region-id>head-resources</region-id> So if you include that in the page-template that should suffice.