Im trying to trasnform xml BlockLayout structured code to js. But it doesnt work properly, because it doesnt show any content on view. I checked the aggregations and I see there is cell aggregation for Row and sap.ui.Control aggregation for cell.
JavaScript:
var oLayout = new sap.ui.layout.VerticalLayout("Layout", {
content: [
new sap.ui.layout.BlockLayout("Block", {
content: [
new sap.ui.layout.BlockLayoutRow("Row", {
content: [
new sap.ui.layout.BlockLayoutCell("Cell1", {
content: [
new sap.m.Text("sample", {text: "test"})
]
})
]
})
]
})
]
});
var viewID = this.getView().sId;
viewID = viewID + "--detailPage-cont";
oLayout.placeAt(viewID);
When I check debugger if some content were added I see added content without cells and text.
hope this can help
https://jsbin.com/benogay/edit?html,js,output
<!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="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js" id="sap-ui-bootstrap" data-sap-ui-libs="sap.m, sap.ui.table" data-sap-ui-theme="sap_bluecrystal">
</script>
<script>
sap.ui.define([
'sap/ui/core/mvc/Controller',
'sap/ui/layout/VerticalLayout',
'sap/ui/layout/BlockLayout',
'sap/ui/layout/BlockLayoutRow',
'sap/ui/layout/BlockLayoutCell',
'sap/m/Text'
], function(Controller, VerticalLayout, BlockLayout, BlockLayoutRow, BlockLayoutCell, Text) {
sap.ui.jsview("myView.Template", {
getControllerName: function() {
return "myView.Template";
},
createContent: function(oController) {
return new VerticalLayout({
content: new BlockLayout({
content: new BlockLayoutRow({
content: new BlockLayoutCell({
content: new Text({
text: "test"
})
})
})
})
});
}
});
Controller.extend("myView.Template", {
onInit: function(oEvent) {
},
});
});
var view = sap.ui.view({
type: sap.ui.core.mvc.ViewType.JS,
viewName: "myView.Template"
});
view.placeAt("content");
</script>
</head>
<body class="sapUiBody sapUiSizeCompact" role="application">
<div id="content"></div>
</body>
</html>
Related
I want to parse the ROS status inside my webpage, but I can't get my element by Id correctly.
Can you please tell me how can I parse my ROS status inside my HTML page correctly? thanks in advance.
main.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Something</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="favicon.ico"><script defer src="main.js"></script></head>
<body>
<div id="container"></div>
<div id="ros_status"></div>
</body>
</html>
main.js
import { Ros, Message, Topic, } from "roslib";
class ROSInterface {
constructor(container_id) {
this.container = document.getElementById(container_id, true);
console.log(this.container);
this.ros = new Ros({
url : 'ws://localhost:9090'
});
}
init() {
if (this.container in document) {
console.log(this.container);
this.ros.on('connection', function () {
this.container.innerHTML = "Connected";
});
this.ros.on('error', function (error) {
this.container.innerHTML = "Error";
});
this.ros.on('close', function () {
this.container.innerHTML = "Closed";
});
}
else {
console.log(document);
this.ros.on('connection', function () {
console.log("Connected");
});
this.ros.on('error', function (error) {
console.log("Error");
});
this.ros.on('close', function () {
console.log("Closed");
});
}
}
}
const ros_iface_ = new ROSInterface('ros_status');
ros_iface_.init();
Currently I am trying to create a chart for the first time using javascript.
I want to show the data on the screen by using the fill chart json method in the mainpage page.
When I check the url in json format, output looks like below.
[
{
"CV_STATU":"Reddedildi",
"MyCount":366
},
{
"CV_STATU":null,
"MyCount":23
},
{
"CV_STATU":"Görüşmeye Bekleniyor",
"MyCount":14
}
]
but when I call the mainpage(localhost:56569/Yonetim/Home/MainPage), nothing is displayed.
public class HomeController : Controller
{
public ActionResult MainPage()
{
var model = new CvViewModel();
return View(model);
}
public JsonResult FillChart()
{
using (MULAKATDBEntities1 ent = new MULAKATDBEntities1())
{
var dbStatuList = ent.CV.GroupBy(x => new { x.CV_STATU }).Select(g => new { g.Key.CV_STATU , MyCount = g.Count() }).ToList();
return Json(JsonConvert.SerializeObject(dbStatuList), JsonRequestBehavior.AllowGet);
}
}
}
my javascript code is as follows :
<html>
<head>
<script type="text/javascript" src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="https://canvasjs.com/assets/script/jquery.canvasjs.min.js"></script>
</head>
<body>
<div id="chartContainer" style="height: 300px; width: 100%;"/>
</body>
</html>
<script type="text/javascript">
window.onload()=function(){
var dataPoints = [];
$.getJSON("Yonetim/Home/FillChart", function (data) {
for (var i = 0; i <= data.length - 1; i++) {
dataPoints.push({ label: data[i].CV_STATU, y: parseInt(data[i].MyCount) });
}
var chart = new CanvasJS.Chart("chartContainer", {
theme: "theme2",
title: {
text: "CanvasJS Charts "
},
data: [
{
type: "column",
dataPoints: dataPoints
}
]
});
chart.render();
});
}
</script>
How can I create a chart with cv_statu and mycount information on the screen?
Here is a working solution:
<html>
<head>
<script type="text/javascript" src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="https://canvasjs.com/assets/script/jquery.canvasjs.min.js"></script>
</head>
<body>
<div id="chartContainer" style="height: 300px; width: 100%;" ></div>
</body>
</html>
<script type="text/javascript">
$(document).ready(function() {
$.getJSON("https://79723e01-80d8-4331-ad9f-5ec9b34a6857.mock.pstmn.io/Yonetim/Home/FillChart", function (data) {
const dataPoints = data.map(point => {
return {
label: point.CV_STATU,
y: parseInt(point.MyCount),
}
})
const chart = new CanvasJS.Chart("chartContainer", {
theme: "theme2",
title: {
text: "CanvasJS Charts"
},
data: [
{
type: "column",
dataPoints: dataPoints
}
]
});
chart.render();
})
})
</script>
You need to change the url in $.getJSON to yours. Mine will work only if you launch your page as a server.
I am guessing I am doing something stupid here and you can point me right direction. I am trying to use jquery-ui "pencil" icon for edit and the icon looks like it is not active. See the html and js below.
<!DOCTYPE html>
<HTML>
<HEAD>
<meta http-equiv="X-UA-Compatible" content="IE=Edge" >
<TITLE>Sample</TITLE>
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="sample.js"></script>
</HEAD>
<script>
$(document).ready(function() {
$( window ).on( "load", function() {
sample.launch();
});
});
</script>
<body>
<input type="button" id="applybtn" style="width:65px" value="Click Me" />
</body>
</HTML>
and here is the js file :
var sample = sample || {};
(function ($) {
"use strict";
function onApplyBtnClick() {
var html = '<input type="text" id="schpn12" value=' + "ABCD" + '>';
html += '<button class="editbtn" >Edit</button>';
$('<div></div>')
.html('<span></span>' + html)
.css("background-color","#FFFFFF")
.dialog({
modal: true,
close: function () { $(this).remove(); },
buttons: {
"Apply": function () {
$(this).dialog('close');
}
}
});
$('.editbtn').button({
icons: {
primary: "ui-icon-pencil"
},
text: false
});
}
function launch() {
$("#applybtn").click(onApplyBtnClick);
}
sample.launch = launch;
}(jQuery));
Consider the following.
$(function() {
function onApplyBtnClick() {
var dialogBox = $("<div>", {
title: "Test Dialog"
})
.css("background-color", "#FFFFFF")
.dialog({
modal: true,
close: function() {
$(this).remove();
},
buttons: {
"Apply": function() {
$(this).dialog('close');
}
}
});
$("<input>", {
type: "text",
id: "schpn12",
value: "ABCD"
}).appendTo(dialogBox);
$("<button>", {
class: "editbtn"
})
.html("Edit")
.button({
icons: {
primary: "ui-icon-pencil"
},
showLabel: false
}).appendTo(dialogBox);
}
$("#applybtn").click(onApplyBtnClick);
});
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<button id="applybtn">Apply</button>
Since you are building the Dialog, Input, and Buttons, it may be best to initialize them as you create them.
text is not a Option or Method of Button. You will want to use showLabel Option.
I am following the example in "Creating a new OpenUI5 Component" from the OpenUI docs, and when I run my demo page I am getting an error in the Chrome console that reads:
Uncaught Error: The specified component controller 'my.components.button.Component' could not be found!
I can navigate to 'localhost:3000/components/button/Component.js' and see the contents of the JS file. So the file exists, so i guess i am not referencing it correctly in my code (or have an unfortunate typo somewhere). How should i be referencing the component?
My folder structure looks like this:
folder structure
webapp
components
button
Within the button folder I have Component.js and Component.json.
Component.js looks like this:
jQuery.sap.require("sap.ui.core.UIComponent");
jQuery.sap.require("sap.ui.commons.Button");
jQuery.sap.declare("components.button.Component");
// new Component
sap.ui.core.UIComponent.extend("components.button.Component", {
metadata: {
properties: {
text: "string"
}
},
init: function() {
sap.ui.core.UIComponent.prototype.init.apply(this, arguments);
}
});
components.button.Component.prototype.createContent = function () {
this.oButton = new sap.ui.commons.Button("btn");
return this.oButton;
};
components.button.Component.prototype.setText = function (sText) {
this.oButton.setText(sText);
this.setProperty("text", sText);
return this;
};
And Index.html looks like this:
<!DOCTYPE html >
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8">
<title>Component Test</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"
data-sap-ui-resourceroots='{
"my": "./"
}' >
</script>
<script>
sap.ui.getCore().attachInit(function () {
var oComp1 = sap.ui.getCore().createComponent({
name: "my.components.button",
id: "Comp1",
settings: {text: "Hello World"}
});
// place this Ui Container with the Component inside into UI Area
oCompCont1.placeAt("target1");
var oCompCont2 = new sap.ui.core.ComponentContainer("CompCont2", {
name: "my.components.button",
settings: {text: "Hello World again"}
});
oCompCont2.placeAt("target2");
});
</script>
</head>
<body class="sapUiBody">
<div id="target1"></div>
<div id="target2"></div>
</body>
</html>
The correct answer was provided by #deterministicFail in the comments to the original question. I am providing the updated/corrected code here for completeness
Corrected Component.js
jQuery.sap.require("sap.ui.core.UIComponent");
jQuery.sap.require("sap.ui.commons.Button");
jQuery.sap.declare("components.button.Component");
sap.ui.core.UIComponent.extend("my.components.button.Component", {
metadata: {
properties: {
text: "string"
}
},
init: function() {
sap.ui.core.UIComponent.prototype.init.apply(this, arguments);
}
});
my.components.button.Component.prototype.createContent = function () {
this.oButton = new sap.ui.commons.Button("btn");
return this.oButton;
};
my.components.button.Component.prototype.setText = function (sText) {
this.oButton.setText(sText);
this.setProperty("text", sText);
return this;
};
Corrected Index.html
<!DOCTYPE html >
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8">
<title>Component Test</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"
data-sap-ui-resourceroots='{
"my": "./"
}' >
</script>
<script>
sap.ui.getCore().attachInit(function () {
jQuery.sap.registerModulePath("my.components.button", "components/button");
var oComp1 = sap.ui.getCore().createComponent({
name: "my.components.button",
id: "Comp1",
settings: {text: "Hello World"}
});
// Create a Ui container
var oCompCont1 = new sap.ui.core.ComponentContainer("CompCont1", {
component: oComp1
})
// place this Ui Container with the Component inside into UI Area
oCompCont1.placeAt("target1");
var oCompCont2 = new sap.ui.core.ComponentContainer("CompCont2", {
name: "my.components.button",
settings: {text: "Hello World again"}
});
oCompCont2.placeAt("target2");
});
</script>
</head>
<body class="sapUiBody">
<div id="target1"></div>
<div id="target2"></div>
</body>
</html>
I wrote a code that will translate text from en-US to id-ID (Indonesian). Here button has got a text which reads as Click me if you are serious. After applying translation, it is getting translated as Klik saya jika anda serius successfully. If I click on that button, an alert message will be displayed like this: You have been alerted, code it down. I want that alert message to be translated to id-ID. Here is my code:
<!DOCTYPE html>
<html>
<head>
<title>Translation</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<button onclick="alertbox();" id="btn" >Click me if you are serious</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="i18next-1.10.1.min.js"></script>
<script>
function alertbox () {
alert("You have been alerted, code it down");
}
$.i18n.init({
lng: 'id-ID',
ns: {
namespaces: ['ns.common', 'ns.special'],
defaultNs: 'ns.special'
},
useLocalStorage: false,
debug: true
}, function(t) {
$('#btn').text($.t('app.btn', {
btn: ''
}))
});
</script>
</body>
</html>
id-ID (ns.special.json)
{
"app": {
"btn": "Klik saya jika anda serius"
}
}
en-US (ns.special.json)
{
"app": {
"btn": "Click me if you are serious"
}
}
How can I translate alert message into id-ID?
Where is your problem? You dont even try :) There is everything documented:
http://i18next.com/pages/doc_jquery.html
And you can find many examples with jquery. You can find even live examples on jsfiddle, like that:
$(document).ready(function () {
i18n.init({
"lng": 'en',
"resStore": resources,
"fallbackLng" : 'en'
}, function (t) {
$(document).i18n();
});
$('.lang').click(function () {
var lang = $(this).attr('data-lang');
i18n.init({
lng: lang
}, function (t) {
$(document).i18n();
});
});
});
http://jsfiddle.net/SalvadorDali/dLc7x/
Finish your code and edit your question, so we can help you. First declare i18n variables, then use $.t
My code:
<!DOCTYPE html>
<html>
<head>
<title>Translation</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
<button id="btn">Click me if you are serious</button>
<div id="qwe"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="i18next-1.10.1.min.js"></script>
<script>
/*$("#btn").click(function() {
alert("You have been alerted, code it down!!!");
});*/
$.i18n.init({
lng: 'en-US',
ns: {
namespaces: ['ns.common', 'ns.special'],
defaultNs: 'ns.special'
},
useLocalStorage: false,
debug: true
}, function(t) {
var key = $('#qwe').text();
$('#btn').text($.t('app.btn', {
btn: ''
}))
$('#qwe').text($.t('app.alert', {
alert: ''
}))
});
$("#btn").click(function() {
alert($('#qwe').text());
});
</script>
</body>
</html>
CSS:
div {
display: none;
}
ns.special.json (en-US):
{
"app": {
"btn": "Click me if you are serious",
"alert": "You have been alerted, code it down!!!"
}
}
ns.special.json (id-ID):
{
"app": {
"btn": "Klik saya jika anda serius",
"alert": "Anda telah diperingatkan, kode itu turun!!!"
}
}