开头 我说一下 SAPUI5开发工具,我推荐使用离线版的SAP-web IDE(技术好了可以使用SAP HANA云平台（HCP）以后说吧!!)
博客可以说的还是太少了(关键打字排版太费时了)
01.全局变量和SAP私有变量
不要使用全局JavaScript变量。全局对象应该在全局命名空间中进行组织（例如，yourApp.*）
下面是加载命名空间!!
jQuery.sap.declare(sModule Name)
sap.ui.name.space(sNamespace)
不要访问其他sap对象的内部（私有）成员。(不稳定,肯能更新后你就用不了了!!)
不要使用console.log（） console在一些特定的浏览器开发者工具中中无法使用
使用下面的
► jQuery. sap.log. Level. DEBUG (debug level)
► jQuery. sap.log. Level. ERROR (error level)
► jQuery. sap.log. Level. FATAL (fatal level)
► jQuery. sap. log. Level. INFO (info level)
► jQuery. sap.log. Level. NONE (do not log anything)
► jQuery. sap.log. Level. TRACE (trace level)
► jQuery. sap.log. Level . HARNING (warning level)
02.代码格式
遵循ESLint规则!!其实就和写javascript一样的!!有一条使用“===”和“！==”而不是“==”和“！=”;
03.变量命名约定
匈牙利符号用于变量名称。 在这种表示法中，变量和对象属性的名称前面加上了变量类型的指示符.并使用大写字母作为变量名称中每个单独单词的开头。
04.第一段代码写入index.html---导入SAPUI5
<!DOCTYPE html><!--使用html语言-->
<html><head>
<meta http-equiv='X-UA-Compatible' content='IE=edge' /><!--使用IE浏览器的最高版本的兼容模式-->
<title>Hello World</title>
<!--开始导入SAPUI5库 -->
<!--
src='https://sapui5.hana.ondemand.com/1.38.26/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'异步加载模式
jQuery("#content").html("Hello UI5 World");向id为content的div中添加内容 -->
<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'>
</script>
<!--sap.ui.getCore().attachInit()它充当回调函数，在内核的Init事件被触发时立即调用它。
-->
<script>
sap.ui.getCore().attachInit(function () {
jQuery("#content").html("Hello UI5 World");
});
</script>
</head>
<body class='sapUiBody'>
<div id='content'></div>
</body>
</html>
你的项目结构应该是这样的
05.第二段代码写入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://sapui5.hana.ondemand.com/resources/sap-ui-core.js'
data-sap-ui-theme='sap_bluecrystal'
data-sap-ui-libs='sap.m'
data-sap-ui-preload='async'></script>
<script>
sap.ui.getCore().attachInit(function () {
var oImage = new sap.m.Image();
oImage.setSrc("img/UI5_logo.png");//设置图片来源
oImage.setDecorative(false);//不是装饰性图片===就是他有ALT属性
oImage.setAlt("SAPUI5 Logo");//设置鼠标放上去的提示
oImage.placeAt("content");//将与div进行替换
});
</script>
</head>
<body class='sapUiBody'>
<div id='content'></div>
</body>
</html>
06.第三段代码写入index.html----添加控件(JSON格式
)
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='X-UA-Compatible' content='IE=edge' />
<title>Hello World</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-preload='async'>
</script>
<script> sap.ui.getCore().attachInit(function () {
var oImage = new sap.m.Image({
src: "img/UI5_logo.png",
decorative: false,
alt: "SAPUI5 Logo" }).placeAt("content"); });
</script>
</head>
<body class='sapUiBody'>
<div id='content'></div>
</body>
</html>
07.第四段代码写入index.html----处理事件(
event-handler.
)
oEvent此对象包含有关事件本身的大量信息（例如，哪个控件触发的）var oSrc = oEvent.getSource() ;var sld = oSrc.getld():
<!DOCTYPE html>
<html><head>
<meta http-equiv='X-UA-Compatible' content='IE=edge' />
<title>Hello World</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-preload='async'>
</script>
<script>
sap.ui.getCore().attachInit(function () {
var oImage = new sap.m.Image({
src: "img/UI5_logo.png",
decorative: false,
alt: "SAPUI5 Logo" }).placeAt("content");
oImage.ontap = function(oEvent) {alert("Hello UI5 World!"); };
// defining the event handler on instantiation:
var onPressImage = function(oEvent){ alert("Hello UI5!"); }
var oImage2 = new sap.m.Image({
src: "img/UI5_logo.png",
decorative: false,
alt: "SAPUI5 Logo",
press: onPressImage }).placeAt("content"); });
</script>
</head>
<body class='sapUiBody'>
<div id='content'></div>
</body></html>
07.第五段代码写入index.html---聚合和关联(aggregations and associations)这里代码是聚合
1.聚合就是父子关系,共享生命周期(这样是聚合和管理的主要区别),
2.聚合是从父控件到子控件的引用。 它们可以具有0:1或0:n的基数，这意味着可以有只有一个子控件的聚合以及几个子控件的聚合
3.您可以通过多种方式将控件添加到聚合中。所有控件都从ManagedObject继承方addAggregation。
此方法有两个参数：控制API中指定的聚合名称和应添加到聚合的控件。 然而，大多数控件为添加聚合子控件提供自己的方法。例如，RadioButtonGroup有一个称为按钮的聚合，并且还提供了一种名为addButton的方法。向RadioButtonGroup添加新的RadioButton将如下所示：oRadioButtonGroup.addButton(oRadi oButton)。
4.只要聚合的基数允许多个聚合控件，将控件添加到聚合的方法将称为addAggregationName。 但是，如果基数仅为0:1，该方法将改为名为setAggregationName。
<!DOCTYPE html>
<html><head>
<meta http-equiv='X-UA-Compatible' content='IE=edge' />
<title>Hello World</title>
<script id='sap-ui-bootstrap'
src='../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 () {
var oImage = new sap.m.Image({
src: "img/UI5_logo.png",
decorative: false,
alt: "SAPUI5 Logo"
}).placeAt("content");
oImage.ontap = function(oEvent) {
alert("Hello UI5 World!");
};
// defining the event handler on instantiation:
var onPressImage = function(oEvent){
alert("Hello UI5!");
}
var oImage2 = new sap.m.Image({
src: "img/UI5_logo.png",
decorative: false,
alt: "SAPUI5 Logo",
press: onPressImage
}).placeAt("content");
var oLabel = new sap.m.Label("rbgLabel",{
text: "Which logo do you like better?"
}).placeAt("content2");
var oRadioButton = new sap.m.RadioButton({
text: "Left Logo"
});
var oRadioButton2 = new sap.m.RadioButton({
text: "Right Logo"
});
var oRadioButtonGroup = new sap.m.RadioButtonGroup({
columns: 2,
ariaLabelledBy: oLabel
});
oRadioButtonGroup.addButton(oRadioButton);
oRadioButtonGroup.addButton(oRadioButton2);
oRadioButtonGroup.placeAt("content3");
new sap.m.Label("rbg2Label", {
text: "Do you speak JavaScript?"
}).placeAt("content4");
new sap.m.RadioButtonGroup({
columns: 2,
buttons: [
new sap.m.RadioButton({
text: "Yes"
}),
new sap.m.RadioButton({
text: "No"
}),
],
ariaLabelledBy : "rbg2Label"
}).placeAt("content5");
});
</script>
</head>
<body class='sapUiBody'>
<div id='content'></div>
<div id='content2'></div>
<div id='content3'></div>
<div id='content4'></div>
<div id='content5'></div>
</body>
</html>
08.第六段代码写入index.html---聚合和关联(aggregations and associations)这里代码是关联
<!DOCTYPE html>
<html><head>
<meta http-equiv='X-UA-Compatible' content='IE=edge' />
<title>Hello World</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'></script>
<script>
sap.ui.getCore().attachInit(function () {
var oImage = new sap.m.Image({
src: "img/UI5_logo.png",
decorative: false,
alt: "SAPUI5 Logo" }).placeAt("content");
oImage.ontap = function(oEvent) {
alert("Hello UI5 World!"); };
// defining the event handler on instantiation:
var onPressImage = function(oEvent){ alert("Hello UI5!"); }
var oImage2 = new sap.m.Image({
src: "img/UI5_logo.png",
decorative: false,
alt: "SAPUI5 Logo",
press: onPressImage }).placeAt("content");
var oLabel = new sap.m.Label("rbgLabel",{
text: "Which logo do you like better?" }).placeAt("content2");
var oRadioButton = new sap.m.RadioButton({ text: "Left Logo" });
var oRadioButton2 = new sap.m.RadioButton({ text: "Right Logo" });
var oRadioButtonGroup = new sap.m.RadioButtonGroup({
columns: 2,
ariaLabelledBy: oLabel });
oRadioButtonGroup.addButton(oRadioButton);
oRadioButtonGroup.addButton(oRadioButton2);
oRadioButtonGroup.placeAt("content3");
new sap.m.Label("rbg2Label", {
text: "Do you speak JavaScript?" }).placeAt("content4");
new sap.m.RadioButtonGroup({
columns: 2,
buttons: [
new sap.m.RadioButton({ text: "Yes" }),
new sap.m.RadioButton({ text: "No" }), ],
ariaLabelledBy : "rbg2Label" }).placeAt("content5"); });
</script>
</head>
<body class='sapUiBody'>
<div id='content'></div>
<div id='content2'></div>
<div id='content3'></div>
<div id='content4'></div>
<div id='content5'></div>
</body>
</html>
1.只要聚合的基数允许多个聚合控件，将控件添加到聚合的方法将称为addAggregationName。 但是，如果基数仅为0:1，该方法将改为名为setAggregationName。
2.我们提到所有控件都从SAPUI5中的基本控件类继承。这个类又继承自ManagedObject,这意味着对于每个控件属性，getter和setter方法都来自此父级。 大多数控件还为其 properties提供了类似的getter和setter方法。
olmage. setProperty("src", "path-to-image");和
olmage. setSrc("path-to-image");
3.如果类型化方法未在控件上被覆盖，则可以使用任一方法达到相同的效果。 如果控件上的类型化方法覆盖或扩展原始getter和setter，但是，使用setProperty或getProperty会绕过额外指定的控件行为。 因此，尽可能使用在控件本身实现的方法。
4(注意事项).切勿在应用程序中使用以下划线（_）开头的控件功能部分。 以该字符为前缀的属性，聚合等被框架认为是私有的，尽管有时可能会使用它们，但您应该真正尊重它们的私有状态，因为根本没有合同可以说内部DOM或 控件的内部CSS类不会改变。 当你依赖这样的功能时，你的应用程序在更新过程中的某个时刻可能会崩溃!!
08.第七段代码写入index.html---布局
1.如果你学习过SWT/swing 等等就应知道,其实SAPUI5就我个人感觉而言,和swt/swing很像,布局就是让页面好看,指定控件放置在哪里!
2.sap.ui.layout.Grid,sap.ui.layout.GridData,sap.ui.core.LayoutData这几个控件类
<!DOCTYPE html>
<html><head>
<meta http-equiv='X-UA-Compatible' content='IE=edge' />
<title>Hello World</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,sap.ui.layout'
data-sap-ui-preload='async'>
</script>
<script>
sap.ui.getCore().attachInit(function () {
var oImage = new sap.m.Image({
src: "img/UI5_logo.png",
decorative: false,
alt: "SAPUI5 Logo"
});
oImage.ontap = function(oEvent) {
alert("Hello UI5 World!");
};
// defining the event handler on instantiation:
var onPressImage = function(oEvent){
alert("Hello UI5!");
}
var oImage2 = new sap.m.Image({
src: "img/UI5_logo.png",
decorative: false,
alt: "SAPUI5 Logo",
press: onPressImage
});
var oLabel = new sap.m.Label("rbgLabel",{
text: "Which logo do you like better?",
layoutData: new sap.ui.layout.GridData({
span: 'XL12 L12 M12 S12'
})
});
var oRadioButton = new sap.m.RadioButton({
text: "Left Logo"
});
var oRadioButton2 = new sap.m.RadioButton({
text: "Right Logo"
});
var oRadioButtonGroup = new sap.m.RadioButtonGroup({
columns: 2,
layoutData: new sap.ui.layout.GridData({
span: 'XL12 L12 M12 S12'
}),
ariaLabelledBy: oLabel
});
oRadioButtonGroup.addButton(oRadioButton);
oRadioButtonGroup.addButton(oRadioButton2);
var oLabel2 = new sap.m.Label("rbg2Label", {
text: "Do you speak JavaScript?",
layoutData: new sap.ui.layout.GridData({
span: 'XL12 L12 M12 S12'//对控件进行详细设置.... 会覆盖Grid中的设置,要知道页面分成12格子,L12表示在大页面的时候占用12格子这个控件
})
layoutData: new sap.ui.layout.GridData({
span: 'XL12 L12 M12 S12'//对控件进行详细设置.... 会覆盖Grid中的设置,要知道页面分成12格子,L12表示在大页面的时候占用12格子这个控件
})
});
var oRadioButtonGroup2 = new sap.m.RadioButtonGroup({
columns: 2,
buttons: [
new sap.m.RadioButton({
text: "Yes"
}),
new sap.m.RadioButton({
text: "No"
}),
],
ariaLabelledBy : "rbg2Label"
});
new sap.ui.layout.Grid({//布局控件装入其他控件
content: [
oImage,
oImage2,
oLabel ,
oRadioButtonGroup,
oLabel2,
oRadioButtonGroup2
]
}).placeAt("content");
});
</script>
</head>
<body id="content" class=" sapUi Body sapUiResponsiveMargin">
</body>
</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://sapui5.hana.ondemand.com/resources/sap-ui-core.js'
data-sap-ui-theme='sap_bluecrystal'
data-sap-ui-libs='sap.m,sap.ui.layout'
data-sap-ui-preload='async'>
</script>
<script>
sap.ui.getCore().attachInit(function () {
var oImage = new sap.m.Image({ src: "img/UI5_logo.png", decorative: false, alt: "SAPUI5 Logo" });
oImage.ontap = function(oEvent) {alert("Hello UI5 World!"); };
// defining the event handler on instantiation:
var onPressImage = function(oEvent){ alert("Hello UI5!"); }
var oImage2 = new sap.m.Image({ src: "img/UI5_logo.png", decorative: false, alt: "SAPUI5 Logo", press: onPressImage });
var oLabel = new sap.m.Label("rbgLabel",{ text: "Which logo do you like better?" });
var oRadioButton = new sap.m.RadioButton({ text: "Left Logo" });
var oRadioButton2 = new sap.m.RadioButton({ text: "Right Logo" });
var oRadioButtonGroup = new sap.m.RadioButtonGroup({ columns: 2, ariaLabelledBy: oLabel });
oRadioButtonGroup.addButton(oRadioButton);
oRadioButtonGroup.addButton(oRadioButton2);
var oLabel2 = new sap.m.Label("rbg2Label", { text: "Do you speak JavaScript?" });
var oRadioButtonGroup2 = new sap.m.RadioButtonGroup({
columns: 2,
buttons: [ new sap.m.RadioButton({ text: "Yes" }),
new sap.m.RadioButton({ text: "No" }), ],
ariaLabelledBy : "rbg2Label" });
new sap.ui.layout.VerticalLayout({ content: [ oImage, oImage2, oLabel, oRadioButtonGroup, oLabel2, oRadioButtonGroup2 ] }).placeAt("content"); });
</script>
</head>
<body class='sapUiBody'>
<div id='content'></div>
</body>
</html>
08.需要学会chrome浏览器开发者工具的使用
https://blog.csdn.net/garfielder007/article/details/54670703 这博客不错!!
最好参考网:https://developer.chrome.com/devtools
写博客好累!!!不过有人说坚持就会有收获!!---emmmmmmm--把SAPUI5,Eclipse plugin,大数据,Hana,外挂(不知道给不给发布!),渗透,破解!!写完估计我都30岁了!!
过2天写SAPUI5中的MVC模式!!!