is it possible to add an event to SAPUI5 sap.ui.commons.Panel's minimize and maximize? What i need is to add a different style when the Panel's collapse- or expand-Button is clicked.
If the user clicks on the minus-Symbol i have to add a styleclass like pnl.addStyleClass("XYZ"); when the user clicks on "maximize" a different styleclass should be added to the panel pnl.addStyleClass("ZYFDEFD");
if i overwrite the .setCollapse- or .setExpanded-function the panel doesn't collapse or expand anymore, so something else has to be found.
A couple of possible options...
1) You could make use the standard style class (sapUiPanelColl) which is added to the control depending on the expanded state - see example below...
var oPanel = new sap.ui.commons.Panel({});
oPanel.addStyleClass("myPanel");
oPanel.placeAt("content");
.myPanel { background-color: green; }
.myPanel.sapUiPanelColl { background-color: red; }
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>sap.ui.commons.Panel style class example</title>
</head>
<body id="content">
<script src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js" id="sap-ui-bootstrap" data-sap-ui-theme="sap_bluecrystal" data-sap-ui-libs="sap.m,sap.ui.commons"></script>
</body>
</html>
2) Alternatively, if it's not essential to use the Panel from the commons library you could switch to sap.m.Panel (as the sap.ui.commons.Panel is depreciated since version 1.38) and then make use of the expand event
Related
When one adds an event handler to a tinymce-editor web component, the target of the received event appears to not be the tinymce-editor element, but another component
below the shadow-root of the tinymce-editor element.
Is there any simple way around this because its quite difficult to determine which tinymce-editor element the event was from if you have more than one for example?
(Is this a common approach for, or limitation of, web components or something - seems a bit odd??)
Sample Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<script>
function changeHandler(evt) {
console.log(evt.target.id); //gives something like mce_<n>
}
</script>
<tinymce-editor id='e1' api-key="<api-key>" on-Change="changeHandler"></tinymce-editor>
<tinymce-editor id='e2' api-key="<api-key>" on-Change="changeHandler"></tinymce-editor>
<script src="https://cdn.jsdelivr.net/npm/#tinymce/tinymce-webcomponent#2/dist/tinymce-webcomponent.min.js"/>
</body>
</html>
well i've done the space shooter tutorial and run the compiled webgl app in a html file, but I noticed that the top screen area is cut off I can scroll down and see the rest of the game app, the bottom shows as expected and if I press the fullscreen button, obviously the game shows off entirely on the screen but I want to show the entire screen in the browser not in the fullscreen mode, another thing I noticed is that if i zoom out the page to 75%, the screen in the browser shows as expected but if I zoom in to 100%, for example, that's when the top screen area gets cut off, I was thinking of giving a default zoom via js or css, but someone recommended not to depend on that, so what can i do??? please help...
with 100% zoom
with 75% zoom
here is the code for the html file:
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Unity WebGL Player | SpaceShooter</title>
<link rel="shortcut icon" href="TemplateData/favicon.ico">
<link rel="stylesheet" href="TemplateData/style.css">
<script src="TemplateData/UnityProgress.js"></script>
<script src="Build/UnityLoader.js"></script>
<script>
var gameInstance = UnityLoader.instantiate("gameContainer", "Build/Build.json", {onProgress: UnityProgress});
</script>
</head>
<body>
<div class="webgl-content">
<div id="gameContainer" style="width: 600px; height: 900px;"></div>
<div class="footer">
<div class="webgl-logo"></div>
<div class="fullscreen" onclick="gameInstance.SetFullscreen(1)"></div>
<div class="title">SpaceShooter</div>
</div>
</div>
</body>
</html>
I have the following simple HTML page:
<!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.ui.commons, sap.ui.table, sap.ui.ux3"
data-sap-ui-theme= "sap_bluecrystal">
</script>
<script>
sap.ui.localResources("zvhr_dashboard");
var view = sap.ui.view({id:"idDashboard1", viewName:"zvhr_dashboard.Dashboard", type:sap.ui.core.mvc.ViewType.JS});
view.placeAt("content");
</script>
</head>
<body class="sapUiBody" role="application">
<header class="header">Page Header</header>
<div id="content" class="content">
<div id="totalHoursChart" class="chartContainer"></div>
<div id="totalCostChart" class="chartContainer"></div>
<div id="totalCountChart" class="chartContainer"></div>
</div>
</body>
The containers totalHoursChart, totalCostsChart, totalCountChart are for line charts. Whenever the template is rendered because of the lines
var view = sap.ui.view({
id:"idDashboard1",
viewName:"zvhr_dashboard.Dashboard",
type:sap.ui.core.mvc.ViewType.JS
});
view.placeAt("content");
There is only one div created in content div and line charts that I draw and place at respective chart containers get overridden. I am unable to figure out how to do this nested views.
I have been unable to find one simple example showing how to do this.
Create a separate div to place your view in:
<div id="content" class="content">
<div id="dashboardContainer"></div>
<div id="totalHoursChart" class="chartContainer"></div>
<div id="totalCostChart" class="chartContainer"></div>
<div id="totalCountChart" class="chartContainer"></div>
</div>
view.placeAt("dashboardContainer");
Well I was able to achieve what I needed and I guess it precisely does fulfill my requirement. I referred to this and understood that the whole page can have a layout and I can place multiple views inside that layout.
The link I provided is of VerticalLayout but there are lot many options to pick from. Using it I was able to place three views(line charts in my case one below the other). The only thing I didnt like was that I had to give fixed width in pixels for every view that I placed inside layout, because when I gave width in percentages the views started shrinking after the page rendering was done.
So to follow the suggestion of #Qualiture I did it in one single div.
I want to render some javascript snippet with sapui5. I am trying to use Text control but when I use that I cannt format javascript text to show up properly.Is there a way to do that?
You can use the HTML core control to embed html/javascript: https://sapui5.hana.ondemand.com/sdk/#docs/api/symbols/sap.ui.core.HTML.html
Or create a custom control
All other SAPUI5 controls are protected against XSS and forgery attacks so they won't accept any javascript code.
I also suggest that you use sap.ui.core.HTML to embed HTML in your sapui5 view. However to get your code formatted correctly (for example it shall be indented correctly) you can use the markdown-js library. See this example:
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"/>
<title>Render javascript source code in 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.ui.commons"></script>
<script src="markdown.js"></script>
<script>
$.get("markdown.md", function(data) {
var mdView = new sap.ui.core.HTML({
content: markdown.toHTML(data)
});
mdView.placeAt("uiArea");
}, "html");
</script>
</head>
<body class="sapUiBody">
<div id="uiArea"></div>
</body>
</html>
markdown.md:
# Markdown
To produce a code block in Markdown, simply indent every line of the block by at least 4 spaces or 1 tab.
for (i=0; i < 10; i++) {
if (true) {
console.log("Hello World!");
}
}
If you want to test this example in you Chrome browser, do the following:
Download markdown-browser-*.tgz from markdown-js and place the contained markdown.js together with the above index.html and markdown.md in some folder.
Start Chrome with parameter --allow-file-access-from-files and drop the index.html on the Chrome browser window.
In the interest of DRY, I have 3 page types in my SPA: (1)Layout, (2)Index, and (3)XXXX (view).
Layout has the body related tags, Index the nav system, and XXXX the relative content. Here is the code:
Layout.ejs:
<!DOCTYPE>
<html>
<head>
<title>Index Page</title>
<% include ../includes/styles%>
<script type="text/javascript" src="/vendor/jquery/dist/jquery.min.js" ></script>
</head>
<body>
</body>
<% include ../includes/scripts%>
</html>
Index.ejs:
<% include ../includes/layout %>
<h1>This is where the nav bar goes</h1>
<div data-ng-view></div>
View pages not important for this problem.
What I noticed is that my sccript tags from layout are above the body's children DOMs, not at all what I wanted.
What I wanted is:
----- body
--- content
----- scripts
What must I do in layout.ejs to keep the script tags at the bottom of the final html page?
ejs-locals does not support Express 4.x.
I opted for creating a custom engine.