Title : Create Openui5 sample application setup from scratch using Visual Studio 2013 step by step
Introduction :
Hello everyone, in this tutorial we will learn how
to create project in openui5 using visual studio 2013, the complete project
folder setup step by step. So let's get started.
Prerequisites: Visual
Studio 2013 or any version higher than Visual Studio 2010, I am using 2013
version
Note : I am assuming that you
have prior knowledge about openui5 technology, component,manifest and mvc
pattern that is used in
this application (basics of javascript
,html and css,json and xml and visual studio)
& make sure internet is
connected because sap code library cdn is included.
Step
1 : Open
Visual Studio and select File >> New Project.
The "New
Project" window will pop up. Select ASP.NET Empty Web Application (.NET
Framework), name your project, and click OK.
Your blank project is created
then Right
click on project name and add a new folder and give it a proper name for your
application folder as shown below
I
gave SampleApp
name to the folder
Add
Index.html page to SampleApp folder
Select
ok and replace following code with existing code.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8">
<title>SAPUI5 Walkthrough</title>
<script id="sap-ui-bootstrap"
src="https://openui5.hana.ondemand.com/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-preload="async"
data-sap-ui-resourceroots='{
"sap.ui.demo.walkthrough":
"./"
}'>
</script>
<script>
sap.ui.getCore().attachInit(function () {
new sap.m.Shell({
app: new
sap.ui.core.ComponentContainer({
name: "sap.ui.demo.walkthrough",
settings: {
id: "walkthrough"
}
})
}).placeAt("content");
});
</script>
</head>
<body class="sapUiBody" id="content">
</body>
</html>
like
this :
Add Folders in the SampleApp
folder & add 2 file [Component.js and manifest.json]
1. controller
2. css
3. i18n
4. view
Add following code to
Component.js file
sap.ui.define([
"sap/ui/core/UIComponent",
"sap/ui/model/json/JSONModel",
],
function
(UIComponent, JSONModel) {
"use
strict";
return UIComponent.extend("sap.ui.demo.walkthrough.Component", {
metadata: {
manifest: "json"
},
init: function () {
//
call the init function of the parent
UIComponent.prototype.init.apply(this, arguments);
// set
data model
var oData = {
recipient: {
name: "World"
}
};
var oModel = new JSONModel(oData);
this.setModel(oModel);
//
create the views based on the url/hash
this.getRouter().initialize();
},
exit: function () {
this._helloDialog.destroy();
delete this._helloDialog;
},
openHelloDialog: function () {
this._helloDialog.open();
}
});
});
// and following code to
the manifest.json file
{
"_version": "1.8.0",
"sap.app": {
"id":
"sap.ui.demo.walkthrough",
"type":
"application",
"i18n":
"i18n/i18n.properties",
"title":
"{{appTitle}}",
"description":
"{{appDescription}}",
"applicationVersion": {
"version":
"1.0.0"
}
},
"sap.ui": {
"technology":
"UI5",
"deviceTypes": {
"desktop": true,
"tablet": true,
"phone": true
}
},
"sap.ui5": {
"rootView": {
"viewName":
"sap.ui.demo.walkthrough.view.App",
"type":
"XML",
"async": true,
"id":
"app"
},
"dependencies": {
"minUI5Version":
"1.30",
"libs": {
"sap.m": {}
}
},
"models": {
"i18n": {
"type":
"sap.ui.model.resource.ResourceModel",
"settings":
{
"bundleName":
"sap.ui.demo.walkthrough.i18n.i18n"
}
},
"invoice": {
"type":
"sap.ui.model.json.JSONModel",
"uri":
"Invoices.json"
},
"Model": {
"dataSource":
"invoiceRemote"
}
},
"resources": {
"css": [
{
"uri":
"css/style.css"
}
]
},
"routing": {
"config": {
"routerClass":
"sap.m.routing.Router",
"viewType":
"XML",
"viewPath":
"sap.ui.demo.walkthrough.view",
"controlId":
"app",
"controlAggregation":
"pages",
"async":
true
},
"routes": [
{
"pattern":
"",
"name":
"overview",
"target":
"overview"
},
{
"pattern":
"detail",
"name": "detail",
"target":
"detail"
},
{
"pattern":
"Login",
"name": "Login",
"target": "Login"
}
,
{
"pattern":
"Sample",
"name": "Sample",
"target":
"Sample"
}
],
"targets": {
"overview":
{
"viewId":
"overview",
"viewName":
"Overview"
},
"detail": {
"viewId":
"detail",
"viewName":
"Detail"
},
"Login": {
"viewId":
"Login",
"viewName":
"Login"
}
,
"Sample":
{
"viewId":
"Sample",
"viewName":
"Sample"
}
}
}
}
}
/// Add i18n.properties file and following key
values
#
App Descriptor
appTitle=Hello
World
appDescription=A
simple walkthrough app that explains the most important concepts of OpenUI5
#
Hello Panel
showHelloButtonText=Say
Hello
helloMsg=Hello
{0}
homePageTitle=Walkthrough
helloPanelTitle=Hello
World
openDialogButtonText=Say
Hello With Dialog
dialogCloseButtonText=Ok
#
Invoice List
invoiceListTitle=Invoices
invoiceStatusA=New
invoiceStatusB=In
Progress
invoiceStatusC=Done
#
Detail Page
detailPageTitle=Walkthrough
- Details
NotFound=Not
Found
NotFound.text=Sorry,
but the requested resource is not available.
NotFound.description=Please
check the URL and try again.
Now
Add App.view.xml and App.controller.js as shown below which acts as root view
for our application as shown
and place the following
code in the respected files
// App.contoller.js
sap.ui.define([
"sap/ui/core/mvc/Controller"
],
function (Controller)
{
"use
strict";
return Controller.extend("sap.ui.demo.walkthrough.controller.App", {
onOpenDialog: function () {
this.getOwnerComponent().openHelloDialog();
}
});
});
// App.view.xml
<mvc:View
controllerName="sap.ui.demo.walkthrough.controller.App"
xmlns="sap.m"
xmlns:mvc="sap.ui.core.mvc"
displayBlock="true">
<App class="myAppDemoWT" id="app"/>
</mvc:View>
// Start adding
application pages
1. Overview.view.xml
<mvc:View
controllerName="sap.ui.demo.walkthrough.controller.App"
xmlns="sap.m"
xmlns:mvc="sap.ui.core.mvc">
<Page title="{i18n>homePageTitle}">
<headerContent>
<Button
icon="sap-icon://hello-world"
press="onOpenDialog"/>
</headerContent>
<content>
<mvc:XMLView viewName="sap.ui.demo.walkthrough.view.HelloPanel"/>
</content>
</Page>
</mvc:View>
2.HelloPanel.view.xml
<mvc:View
controllerName="sap.ui.demo.walkthrough.controller.HelloPanel"
xmlns="sap.m"
xmlns:mvc="sap.ui.core.mvc">
<Panel
headerText="{i18n>helloPanelTitle}"
class="sapUiResponsiveMargin"
width="auto">
<content>
<Button
icon="sap-icon://world"
text="{i18n>openDialogButtonText}"
press="onOpenDialog"
class="sapUiSmallMarginEnd"/>
<Button
text="{i18n>showHelloButtonText}"
press="onShowHello"
class="myCustomButton"/>
<Input
value="{/recipient/name}"
valueLiveUpdate="true"
width="60%"/>
<FormattedText
htmlText="Hello
{/recipient/name}"
class="sapUiSmallMargin
sapThemeHighlight-asColor myCustomText"/>
<Button
text="Login"
press="onPress"/>
</content>
</Panel>
</mvc:View>
3. HelloPanel.controller.js
sap.ui.define([
"sap/ui/core/mvc/Controller",
"sap/m/MessageToast"
],
function
(Controller, MessageToast) {
"use
strict";
return Controller.extend("sap.ui.demo.walkthrough.controller.HelloPanel", {
onShowHello: function () {
//
read msg from i18n model
var oBundle = this.getView().getModel("i18n").getResourceBundle();
var sRecipient = this.getView().getModel().getProperty("/recipient/name");
var sMsg = oBundle.getText("helloMsg", [sRecipient]);
//
show message
MessageToast.show(sMsg);
},
onOpenDialog: function () {
this.getOwnerComponent().openHelloDialog();
},
onPress: function () {
var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
oRouter.navTo("Login");
}
});
});
the folder is now
setup just need to add 2 things in Web.config files and our openui5 apllication
folder is ready to run.
Add this to <configuration> </configuration> in config file
<system.webServer>
<staticContent>
<mimeMap fileExtension=".properties" mimeType="text/plain" />
</staticContent>
</system.webServer>
Set index.html as
start page
and run using F5 key
or as shown below
this is your first
openui5 example created from scratch in Visual Studio 2013
Please give your feedbacks
and queries in the comments section below.
thanks a lot,
Comments
Post a Comment