SAPUI5 Beginners tutorial part 2

Lets go thru the next tutorial folks..

where to start?? Lets do start with explanation of part1

First and foremost thing after inclusion of meta tags is..”Including libraries and themes(data-sap-ui-libs= “sap.m” data-sap-ui-theme= “sap_mvi”)”. Lets begin with this for now..

What are libraries and why we should include?

A class library is a collection of prewritten class es or coded templates, any of which can be specified and used by a programmer when developing an application program. Once we include this library, then we can access those functions,methods etc that are defined in the library class.

Libraries in SAPUI5:

Most used libraries are sap.ui and sap.m

sap.ui : Lets exlpore the sap.ui here

sap.m : Exlpore sap.m here

The sap.ui namespace is the central OpenAjax compliant entry point for UI related JavaScript functionality provided by SAP.

Namespaces & Classes
base SAPUI5 base classes
***commons SAPUI5 library with most common controls. 
***core The SAPUI5 Core Runtime.
Device Device and Feature Detection API of the SAP UI5 Library.
layout SAPUI5 library with layout controls.
model The SAPUI5 Data Binding API.
richtexteditor SAPUI5 library with rich text editor.
***table SAPUI5 library with table controls.
unified SAPUI5 unified library
***ux3 SAPUI5 library with controls that implement the SAP User Experience (UX) Guidelines 3.0
vbm SAP UI library: sap.ui.vbm
Note: *** are important classes that used frequently in sapui5.
For controls in sapui5 clickhere

Explore themes..

SAPUI5 provides a number of themes. The theme used in this example is called ‘sap_platinum’. You can find other themes in the /resource/sap/ui/*/themes folders. Here are screenshots of the same page using the other themes (click the images to enlarge):

imageTheme: sap_goldreflection imageTheme: sap_ux
imageTheme: sap_hcb imageTheme: base

From: http://allthatjs.com/2012/02/23/getting-started-with-sapui5/

Explore screenshots of ui5 runtime folder now..For download clickhere

10-05-2014 14-34-04

ui5->resources

10-05-2014 14-34-25

ui5->resources->sap

10-05-2014 14-34-36

ui5->resources->sap->m

10-05-2014 14-35-09

ui5->resources->sap->m->themes

10-05-2014 14-35-23

Here you can see 4 themes that can be used in data-sap-ui-theme= “***”

ui5->resources->sap->ui

10-05-2014 14-35-39

SAPUI5 Tutorial for beginners

Guys,

Today we will learn basics on sapui5 implementation for beginners. In market there are multiple websites like w3schools.com etc for basics learning on php,javascript,jquery etc. In those websites its clearly explaining where to start with and continues with concept wise explanation with examples. Unfortunately our SAPUI5 doesn’t have this kind of tutorial websites for now as its a infant bee now ;).

So lets startup with one by one concept.

1. Create a HTML page something like xyz.html

2. Add the HTML5 doctype definition: <!DOCTYPE html>” in the first line and the Internet Explorer-specific meta tag :<meta http-equiv=”X-UA-Compatible” content=”IE=edge” />” are the beginning of <head> element.
This ensures that all browsers use the latest version of their rendering engine. Although Microsoft Internet Explorer is not really used widely on mobile devices and not yet supported by the SAPUI5 mobile library, this meta tag makes the page more future-proof.

3. Add a second meta tag: <meta http-equiv=”Content-Type” content=”text/html;charset=UTF-8″/>.
This lets all browsers treat the file as UTF-8 encoded (assuming that you use this encoding when editing/saving the file)

4. Add a <div> element to <body>.

5. The “sapUiBody” class should always be added to the <body> tag to initialize font and colors for the whole page:
<body class=”sapUiBody”> <!– This is where the App will live: –> <div id=”content”></div></body>

6. To load the SAPUI5 JavaScript file, that contains the library, add the following script tag in the <head>:
<script src= “http://<http://<server&gt;:<port>/sapui5/resources/sap-ui-core.js” id= “sap-ui-bootstrap” data-sap-ui-libs= “sap.m” data-sap-ui-theme= “sap_mvi”> </script>
Note that you are only loading the “sap.m” control library and the “sap_mvi” theme. mvi stands for Mobile Visual Identity and is the name of the SAP Mobile design.

7. Replace <server> and <port> with your local SAPUI5 installation or point to the SAPUI5 libraries on SAP HANA Cloud Platform: https://sapui5.hana.ondemand.com/resources/sap-ui-core.js

Continue my next tutorial SAPUI5 Beginners tutorial part 2

My First SAPUI5 application

Pals,

I hope you are aware of configuring sapui5 in eclipse with my previous post. If not pls check here

Now just create a new project in SAPUI5 Application Development – >Application Project

Create a mobile.html file in it.

Paste the following code and run in tomcat server.

Code:

<!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>Mobile App in 23 Seconds Example</title>

<script src=”https://sapui5.hana.ondemand.com/resources/sap-ui-core.js&#8221; id=”sap-ui-bootstrap” data-sap-ui-libs=”sap.m” data-sap-ui-theme=”sap_mvi”> </script>
<!– only load the mobile lib “sap.m” and the “sap_mvi” theme –>
<script>
// create a mobile App
// it initializes the HTML page for mobile use and provides animated page handling
var app = new sap.m.App(“myApp”, {initialPage:”page1″}); // page1 should be displayed first
// create the first page of your application
var page1 = new sap.m.Page(“page1”, {
title: “Initial Page”,
content : new sap.m.Button({ // content is just one Button
text : “Go to Page 2”,
tap : function() {
app.to(“page2”); // when tapped, it triggers drilldown to page 2
}
})
});
// create the second page of your application
var page2 = new sap.m.Page(“page2”, {
title: “Page 2”, showNavButton: true, // page 2 should display a back button
navButtonTap: function(){
// when tapped, the back button should navigate back up to page 1
app.back();
},
icon: “http://www.sap.com/global/ui/images/global/sap-logo.png&#8221;,
content : new sap.m.Text({text:”Hello Mobile World!”})
});
app.addPage(page1).addPage(page2); // add both pages to the App
// place the App into the HTML document
app.placeAt(“content”);
</script>
</head>
<body class=”sapUiBody”>
<div id=”content”></div>
</body>
</html>

Output:

10-05-2014 12-28-11

10-05-2014 12-28-32

 

Note: To play around with the app in your desktop browser, add the following URL parameter to the file URL: sap-ui-xx-fakeOS=ios, so that the URL reads : “mobile.html?sap-ui-xx-fakeOS=ios”. This enables the simulation of touch events on desktop PCs. This also enables the iPhone/iPad styling; if you want to see the Android styling, use sap-ui-xx-fakeOS=android instead.

 

Sample Program to run in 5 secs:

A first test

Now we have the documentation up and running, we create our first test to see if we have all the required files.

To run this test, setup a new project or website in VS. Copy the ‘resources’ folder from sapui5-static into the site and create the following test.html file:

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv='X-UA-Compatible' content='IE=edge'>
        <title>SAPUI5 test</title>
        <script id="sap-ui-bootstrap"
           src="resources/sap-ui-core.js"
           data-sap-ui-theme="sap_platinum"
           data-sap-ui-libs="sap.ui.commons"&gt;&lt;/script&gt;
        <script>
            $(function () {
                // show an SAPUI5 alert box
                sap.ui.commons.MessageBox.alert("SAPUI5 ready for action.");
            })
        </script>
    </head>
    <body>
    </body>
</html>

The test.html file instructs the browser to load the sap-ui-core.js file which contains jQuery and also a dynamic loader which will load further required js and css files. To show that everything loads correctly, we simply create an alert box (one of the SAPUI5 controls) when the DOM is ready.

View the test.html file in the browser and you see:

SNAGHTML7a1fad9

Source: http://allthatjs.com/2012/02/23/getting-started-with-sapui5/

Mobile UI Design made easy with AppBuilder

Folks,

A Stunning news.. 😀

Just now i saw this post in blogspot..we can create a mobile UI design through appbuilder itseems :). Follow this

Download appbuilder from this link

Appbuilder documentation is here

Install appbuilder

Prerequisites
• You must have the latest version of the Google Chrome browser, or Apple Safari installed.
• AppBuilder is packaged using the NodeJS package module. Therefore, you must install
NodeJS onto your workstation to run AppBuilder:
1. Download the NodeJS installer for your system from http://nodejs.org/download/.
2. Run the NodeJS installer, and follow the prompts in the Install Wizard.
3. Verify that the node.js folder is in your System Environment PATH.
4. Open a command prompt, and enter npm to verify the NodeJS package manager is
installed properly.

Installing AppBuilder on Windows
1. Extract the appbuilder-1.0.zip file to the directory of your choice.
2. From the directory where you extracted the contents of the zip file, double-click the
run.bat file to launch AppBuilder.
3. AppBuilder opens in a browser with the URL: http://127.0.0.1:9009/ide/ares/index.html.

To Kickstart easily..follow this

 

Getting error in creating a new project for UI5

Folks,

After installing sapui5 in eclipse..did you find the below error?

Screenshot_1

Then you need to install ADT plugin in eclipse. Its nothing but android development tool. Kindly install that by steps:

  1. Start Eclipse, then select Help > Install New Software.
  2. Click Add, in the top-right corner.
  3. In the Add Repository dialog that appears, enter “ADT Plugin” for the Name and the following URL for the Location:
    https://dl-ssl.google.com/android/eclipse/

    Note: The Android Developer Tools update site requires a secure connection. Make sure the update site URL you enter starts with HTTPS.

  4. Click OK.
  5. In the Available Software dialog, select the checkbox next to Developer Tools and click Next.
  6. In the next window, you’ll see a list of the tools to be downloaded. Click Next.
  7. Read and accept the license agreements, then click Finish.If you get a security warning saying that the authenticity or validity of the software can’t be established, click OK.
  8. When the installation completes, restart Eclipse.

Hope your issue is solved now..

Else you may try changing windows->preferences->java->compiler version to 1.6

How to install SAPUI5 in eclipse

Folks, Lets see step by step procedure to install sapui5 in eclipse. Thanks to Michael Herzog for his post in scn

It’s all about Java

I want to show you, how you create your own development environment for SAPUI5. You will see, that we are going to use some great tools, which are normally known from Java-Development. I will use Windows 7 as operating system.

Step 1: Install Java Development Kit (JDK)

The JDK is the Java package for developers, which includes a complete Java Runtime plus tools for developing, debugging and monitoring Java applications. You can download the latest version from this site. After the download has finished, run the installer.  Update 22.03.2014: Some users reported, that JDK 1.8 causes some problems in Eclipse, UI5 Plugin and Dynamic Web Projects. To avoid such issues, please use JDK 1.7 as long as these problems exist.

Step 2: Set Up Environment Variables

After the installation of your JDK, it’s important to create a new environment variable called JAVA_HOME. To do this, open your “Run” window in Windows and type in “control sysdm.cpl”. On the Advanced tab, click Environment Variables. Then create a new System variable called JAVA_HOME. The value of this should be the path to your JDK. ev After that, you have to add this variable to the existing PATH-Variable with %JAVA_HOME%; path Finally, when you open your command prompt, following command should work. “java -version” cmd This basic configuration is very important for Java-tools like your web server. To check your environment variables quickly, you can open your console and run the “SET” command, which displays all environment variables of your system.

Step 3: Install Eclipse

Go to this site and download the latest version of Eclipse IDE for Java EE Developers. Extract the zip-file to a directory of your choice (for example “C:\Program Files\eclipse”). When you start eclipse, you have to choose a workspace. This is a specific folder, where eclipse stores your projects.

Step 4: Install a Java Web Server

You will need a Java Web Server (also known as Servlet-Container), when you want to deploy and run your applications. I recommend the Apache Tomcat, but the Jetty Server for example is also a good option. Download the current tomcat from the download section of the official site. Extract all files in a directory, for example “C:\Program Files\apache tomcat”. To test your configurations, go to the “bin” folder and try to run the startup batchfile to start server-mode. When everything is fine, you should see a window like this: tomcat If your server has problems to start, you should check your environment variables (especially JAVA_HOME and PATH) and your java installation. You can shutdown your server with the “shutdown” batchfile.

Step 5: Add Web Server to Eclipse

If you want to deploy applications directly from your eclipse, you have create a new server instance in your IDE. Open Eclipse, go to “File – New – Others” and choose “Server”. In the next window, choose Apache Tomcat (with correct version) as server type and type in following information: server After that, click finish. When you now open your Server-View (“Window – Show View – Server”), you should see your new instance. When you right-click on this entry, you can easily start and stop your server and do some configuration stuff. server_view Note: While i am following this process i didn’t find any server in eclipse :(. Got the same with u?? then relax..i do have procedure for this 😉

  1. Go to Help > Install New Software…
  2. From the Work With, select http://download.eclipse.org/releases/kepler
  3. From the list, select “Web, XML, and Java EE Development”
  4. Then select “JST Server Adapters”

After installed this, you can find server in showview->server.when I add New Server, I can see Tomcat available for selection. Then you can download tomcat and install it 🙂

Step 6: Install SAPUI5 Plugin

First, download the evaluation package from scn. After download, extract everything. Now go to your eclipse under “Help – Install New Software…”. Click “Add” and in the following window “Local…”. Navigate to your directory, where you extracted your evaluation package. Choose the directory “tools-updatesite”. When everything works, you should see the following: plugin Select the entry “UI development toolkit for HTML5” and press finish. The remaining part of the installation should be no problem. Restart eclipse after you complete the installation. Then go to “File – New – Others” and type in the Wizard “SAP”. You should see this (sry, for the german text): project When you choose “Application Project” and complete the wizard, you should have a basic SAPUI5-project and some initial files in your eclipse. Note: If you have a problem in downloading package from svn?? then just follow the below steps..

To install SAPUI5 Tools, proceed as follows:

  1. In Eclipse, choose in the menu bar Help > Install New Software…
  2. In the Install dialog, enter the following update site URL in the Work with entry field:
  3. Press Enter to display the available features.
  4. Select the desired features under UI Development Toolkit for HTML5 and also ABAP Core Development Tools and choose Next.
  5. On the next wizard page, you get an overview of the features to be installed. Choose Next.
  6. Confirm the license agreements and choose Finish to start the installation.

Step 7: Run your Project

Go to your new project and open in the directory “WebContent” the index.html. Then, click on the Run-Button: run In the following window, choose “Run on Server” and press “OK”. The next window shows a listing of all available servers in your eclipse. In this case, we choose our tomcat server and activate the checkbox at the bottom. Click on finish. start

You will see, that your web server will start and an the index.html will shown in an preview window. Congratulation! Now you can start to develop your application and test it on your local machine. To start with development..clickhere

Source: http://scn.sap.com/community/developer-center/front-end/blog/2013/06/01/how-to-install-a-basic-development-environment-for-sapui5 https://tools.hana.ondemand.com/#sapui5

For eclipse with juno:

http://goodsap.blogspot.dk/2013/08/how-to-setup-sap-ui5-for-eclipse-juno.html

http://goodsap.blogspot.in/

For code completion sapui5 in eclipse:

https://help.sap.com/saphelp_nw74/helpdata/en/85/ce1edb55dd4de3beac5b6d24d36d8a/content.htm

http://www.ameyablog.com/sapui5/how-to-enable-code-completion-feature-for-sapui5-projects/

SAP UI5 and SAP HANA Reference links

 

A journey to SAPUI5

 

This post contains only reference to tutorials of SAP UI5 and SAP HANA..

How to install SAP UI5:

http://www.saptechnical.com/Tutorials/Basis/SAPUI5/Index.htm

http://scn.sap.com/community/developer-center/front-end/blog/2013/07/23/installing-and-sap-ui5-toolkit-ver-1121-in-eclipse-43-kepler

http://scn.sap.com/community/developer-center/front-end/blog/2013/06/01/how-to-install-a-basic-development-environment-for-sapui5

http://scn.sap.com/community/developer-center/front-end/blog

http://scn.sap.com/community/developer-center/front-end

SAP HANA:

http://help.sap.com/hana/SAP_HANA_Developer_Guide_en.pdf

http://saphanatutorial.com/sap-hana-studio/

http://www.saphana.com/docs/DOC-1217

 

SAP UI5 Tutorial:

https://www.mediafire.com/?y57r8d2iz66my8v

https://sapui5.hana.ondemand.com/sdk/#docs/guide/8b49fc198bf04b2d9800fc37fecbb218.html

To see SAPUI5 API reference clickhere

For libraries: Clickhere