sap.ui.jsview("fb2.fb2", {
getControllerName : function() {
return "fb2.fb2";
},
createContent : function(oController) {
var Vbox = new sap.m.VBox({
id:"hbox1",
items:[
new sap.m.Label({
id:"lb0",
text:"facebook"
}),
]
});
var Vbox2 = new sap.m.VBox({
id:"vbox2",
items:[
new sap.m.Label({
id:"lb1",
text:"EmailorPhone",
}),
new sap.ui.commons.TextField({
id:"tf1",
}).addStyleClass("tf1"),
]
});
var Vbox3 = new sap.m.VBox({
id:"vbox3",
items:[
new sap.m.Label({
id:"lb2",
text:"password",
}),
new sap.ui.commons.TextField({
}),
new sap.m.Link({
id:"fa",
text : "Forgotten account?",
href : "#",
}),
]
});
var Vbox4 = new sap.m.VBox({
id:"vbox4",
items:[
new sap.ui.commons.Button({
id : "loginbtn",
text : "log in",
}),
]
}) ;
var oHBox1 = new sap.m.HBox({
id:"hb",
items:[
Vbox,Vbox2,Vbox3,Vbox4
]
});
var VBox5 = new sap.m.VBox({
id:"hbox5",
items:[
new sap.m.Label({
id:"lb3",
text:"facebook helps you connect and share with the people in your life.",
}),
new sap.m.Image({
id:"fbim",
src:"https://static.xx.fbcdn.net/rsrc.php/v3/yc/r/GwFs3_KxNjS.png",
}),
]
});
var VBox10 = new sap.m.VBox({
id:"hbox10",
items:[
new sap.m.Label({
id:"lb11",
text:"Create an account",
}),
new sap.m.Label({
id:"lb22",
text:"It's free and always will be.",
}),
]
});
var VBox12 = new sap.m.HBox({
id:"hbox12",
items:[
new sap.ui.commons.TextField({
id:"fn1",
width : '9em',
placeholder: "First name",
}).addStyleClass("fn1"),
new sap.ui.commons.TextField({
id:"sur1",
width : '9em',
placeholder: "Surname",
}),
]
});
var VBox13 = new sap.m.VBox({
id:"hbox13",
items:[
new sap.ui.commons.TextField({
id:"me1",
width : '18.6em',
placeholder: "Mobile number or email address",
}),
new sap.ui.commons.TextField({
id:"np1",
width : '18.6em',
placeholder: "New password",
}),
]
});
var Hbox26 = new sap.m.VBox({
id:"hbox26",
items:[
new sap.m.Label({
id:"lb24",
text:"Birthday",
}),
]
});
var Hbox27 = new sap.m.HBox({
id:"hbox27",
items:[
new sap.ui.commons.DatePicker({
id:"dp20",
}),
new sap.m.Label({
id:"bt25",
text:" Why do I need to provide my date of birth?",
}),
]
});
var Hbox28 = new sap.m.VBox({
id:"hbox28",
items:[
new sap.ui.commons.RadioButtonGroup({
id:"rb20",
columns: 2,
items: [new sap.ui.core.Item({text: "Female" }),
new sap.ui.core.Item({text: "Male" })]
}) ,
new sap.m.Label({
id:"lb23",
text:" By clicking Sign Up, you agree to our Terms, Data Policy and Cookie Policy. You may receive SMS notifications from us and can opt out at any time.",
}),
new sap.ui.commons.Button({
id:"bt20",
width : '10em',
text : "Sign Up",
}),
]
});
var Hbox29 = new sap.m.VBox({
id:"hbox29",
items:[
Hbox26, Hbox27,Hbox28
]
});
var VBox16 = new sap.m.VBox({
id:"hbox16",
items:[
VBox10,VBox12,VBox13, Hbox29
]
});
var oHBox17 = new sap.m.HBox({
id:"oHBox17",
items:[
VBox5,VBox16
]
})
return new sap.m.Page({
title: "Title",
content: [
oHBox1, oHBox17
]
});
}
});
INDEX.HTML
sap.ui.jsview("fb2.fb2", {
getControllerName : function() {
return "fb2.fb2";
},
createContent : function(oController) {
var Vbox = new sap.m.VBox({
id:"hbox1",
items:[
new sap.m.Label({
id:"lb0",
text:"facebook"
}),
]
});
var Vbox2 = new sap.m.VBox({
id:"vbox2",
items:[
new sap.m.Label({
id:"lb1",
text:"EmailorPhone",
}),
new sap.ui.commons.TextField({
id:"tf1",
}).addStyleClass("tf1"),
]
});
var Vbox3 = new sap.m.VBox({
id:"vbox3",
items:[
new sap.m.Label({
id:"lb2",
text:"password",
}),
new sap.ui.commons.TextField({
}),
new sap.m.Link({
id:"fa",
text : "Forgotten account?",
href : "#",
}),
]
});
var Vbox4 = new sap.m.VBox({
id:"vbox4",
items:[
new sap.ui.commons.Button({
id : "loginbtn",
text : "log in",
}),
]
}) ;
var oHBox1 = new sap.m.HBox({
id:"hb",
items:[
Vbox,Vbox2,Vbox3,Vbox4
]
});
var VBox5 = new sap.m.VBox({
id:"hbox5",
items:[
new sap.m.Label({
id:"lb3",
text:"facebook helps you connect and share with the people in your life.",
}),
new sap.m.Image({
id:"fbim",
src:"https://static.xx.fbcdn.net/rsrc.php/v3/yc/r/GwFs3_KxNjS.png",
}),
]
});
var VBox10 = new sap.m.VBox({
id:"hbox10",
items:[
new sap.m.Label({
id:"lb11",
text:"Create an account",
}),
new sap.m.Label({
id:"lb22",
text:"It's free and always will be.",
}),
]
});
var VBox12 = new sap.m.HBox({
id:"hbox12",
items:[
new sap.ui.commons.TextField({
id:"fn1",
width : '9em',
placeholder: "First name",
}).addStyleClass("fn1"),
new sap.ui.commons.TextField({
id:"sur1",
width : '9em',
placeholder: "Surname",
}),
]
});
var VBox13 = new sap.m.VBox({
id:"hbox13",
items:[
new sap.ui.commons.TextField({
id:"me1",
width : '18.6em',
placeholder: "Mobile number or email address",
}),
new sap.ui.commons.TextField({
id:"np1",
width : '18.6em',
placeholder: "New password",
}),
]
});
var Hbox26 = new sap.m.VBox({
id:"hbox26",
items:[
new sap.m.Label({
id:"lb24",
text:"Birthday",
}),
]
});
var Hbox27 = new sap.m.HBox({
id:"hbox27",
items:[
new sap.ui.commons.DatePicker({
id:"dp20",
}),
new sap.m.Label({
id:"bt25",
text:" Why do I need to provide my date of birth?",
}),
]
});
var Hbox28 = new sap.m.VBox({
id:"hbox28",
items:[
new sap.ui.commons.RadioButtonGroup({
id:"rb20",
columns: 2,
items: [new sap.ui.core.Item({text: "Female" }),
new sap.ui.core.Item({text: "Male" })]
}) ,
new sap.m.Label({
id:"lb23",
text:" By clicking Sign Up, you agree to our Terms, Data Policy and Cookie Policy. You may receive SMS notifications from us and can opt out at any time.",
}),
new sap.ui.commons.Button({
id:"bt20",
width : '10em',
text : "Sign Up",
}),
]
});
var Hbox29 = new sap.m.VBox({
id:"hbox29",
items:[
Hbox26, Hbox27,Hbox28
]
});
var VBox16 = new sap.m.VBox({
id:"hbox16",
items:[
VBox10,VBox12,VBox13, Hbox29
]
});
var oHBox17 = new sap.m.HBox({
id:"oHBox17",
items:[
VBox5,VBox16
]
})
return new sap.m.Page({
title: "Title",
content: [
oHBox1, oHBox17
]
});
}
});
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,sap.ui.commons"
data-sap-ui-theme="sap_bluecrystal">
</script>
<!-- only load the mobile lib "sap.m" and the "sap_bluecrystal" theme -->
<script>
sap.ui.localResources("fb2");
var app = new sap.m.App({initialPage:"idfb21"});
var page = sap.ui.view({id:"idfb21", viewName:"fb2.fb2", type:sap.ui.core.mvc.ViewType.JS});
app.addPage(page);
app.placeAt("content");
</script>
<style>
#lb11{
font-size:35px;
font-weight:bolder;
margin-top:20px
}
#lb22{
font-size:20px;
margin-top:15px
}
#sur1{
margin-left:12px;
height: 35px;
border-radius:5px;
font-size:20px;
}
.fn1{
border-radius:5px;
height: 35px;
font-size:20px;
}
#me1{
margin-top:12px;
border-radius:5px;
font-size:20px;
height: 35px;
}
#np1{
margin-top:12px;
border-radius:5px;
font-size:20px;
height: 35px;
}
#lb3{
word-wrap: break-word;
color: #0e385f;
font-size: 23px;
font-weight: bold;
line-height: 29px;
margin-top: 40px;
width:537px;
height:60px;
word-spacing: 0px;
white-space: normal;
margin-left:200px;
}
#fbim{
width: 537px;
height: 195px;
margin-left:200px;
}
#lb0{
color:white;
font-size:40px;
font-weight:bolder;
padding-top:30px;
padding-bottom:20px;
padding-left:200px;
}
#hb{
background:#415e9b;
height:82px;
border-bottom:1px soild #133783;
}
#lb1{
color:white;
}
#lb2{
color:white;
}
#vbox2{
padding-left:500px;
padding-top:20px;
}
#vbox3{
padding-top:20px;
margin-left:15px
}
#fa{
color:#8fb1d8;
}
#loginbtn{
background:#4267b2;
border:1px solid #29487d;
border-radius:#2px;
color:#fff;
width:50px;
margin-top:40px;
margin-left:20px
}
#hbox16{
margin-left:80px;
}
#hbox12{
margin-top:15px;
}
#lb24{
margin-top:10px;
font-size: 18px;
}
#bt25{
font-size: 14px;
margin-left:15px;
white-space:normal;
font-weight: 200px;
color: #365899;
cursor: pointer;
text-decoration: none;
width:150px;
height:30px;
font-size: 11px;
}
#hbox27{
margin-top:5px
}
#rb20{
margin-top:8px;
font-size:18px;
line-height: 18px;
font-weight: normal;
font-family: inherit;
}
#lb23{
white-space:normal;
margin-top:10px;
word-wrap: break-word;
width:310px;
height:60px;
font-size: 11px;
}
#bt20{
margin-top:2px;
border-radius:5px;
height: 38px;
background-color: #79bc64;
font-size: 19px;
width:50px;
border: 1px solid;
font-weight: bold ;
color: #fff;
cursor: pointer;
display: inline-block
min-width: 150px;
padding: 7px 20px;
text-align: center;
box-shadow: inset 0 1px 1px #a4e388;
border-color: #3b6e22 #3b6e22 #2c5115;
}
#dp20{
width:155px;
}
#oHBox17{
background:linear-gradient(#fff,#d9ddeb);
}
</style>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>
</html>
OUTPUT
No comments:
Post a Comment