- SAP Managed Tags:
What is SAP UI5?
SAP UI5 (or "UI Development Toolkit for HTML5", if you prefer calling it by its official name), is SAP's new HTML5 UI library and client-side MVC framework for building light-weight web UIs. While very flexible and open, it also supports all SAP product standards.
It is also used for new applications developed by SAP (e.g. SAP HCM).
The toolset is based on Eclipse, and can therefore be installed into the SAP NetWeaver Developer Studio (NWDS).
In this blog, I'll walk you through the exact steps, from the initial download to the first UI5 application.
Downloading the UI toolkit
First, make sure you have at SAP NetWeaver Developer Studio 7.3 or higher installed. The UI5 tools will not work with older NWDS versions.
The toolset can be downloaded from the SAP Service Marketplace (SMP).
Go to https://service.sap.com -> SAP Support Portal -> SAP Software Download Center -> Support Packages and Patches -> A - Z index -> N -> UI ADD-ON FOR SAP NETWEAVER -> UI ADD-ON 1.0 FOR NW 7.03 -> Support Package Stack Download. The file that you need is at the bottom of the list: SAPUI5 TOOLS IDE PLUGIN 1.00. Make sure you pick the latest version (currently this is SPS 02).
Once the download is finished, extract the archive content into a local directory.
Installing the plugin
In NWDS, go to Help - Install New Software...
Add a new Local Update Site (named "UI5 Tools") and point it to the folder where you have extracted the files before.
Wait for the installation to finish and then restart NWDS.
Creating a first application
Since NWDS is using Development Components instead of "plain" Eclipse projects, you can't use the standard "New UI5 Application" wizard directly.
Instead, create a new Development Component of type "Web Module".
Some small changes to the project are needed in order to prepare it for UI5. For a regular UI5 application these would normally be done by the New Project wizard, but for a DC project they need to be done manually.
Project Nature
Edit the .project file in the root folder of the project and add the UI5 nature:
...
<natures>
...
<nature>com.sap.ide.ui5.app.plugin.webappnature</nature>
</natures>
...JavaScript libraries
Next, add the JavaScript libraries to the project settings. This is needed for auto-completion while writing JavaScript code.
Open the project properties, and go to JavaScript - Libraries. If you don't see a "JavaScript" entry in the project settings, you might have to turn on "the JavaScript Toolkit" facet first under "Project Facets". Switch to the "Libraries" tab and click on "Add JavaScript Library".
Select the SAP UI5 library and finish the wizard.
Java Build path
To enable the local web app preview, we need to add the SAP UI5 libraries to the project build path.
Open the projects properties and add the SAPUI5 Core and Server Side Libraries via the "Add Library..."button.
web.xml
Add the following content to the web.xml of your Web Module project.
(Alternatively, you can also copy the web.xml from an application created by the UI5 wizard - see below).
<!-- ============================================================== -->
<!-- UI5 resource servlet used to handle application resources -->
<!-- ============================================================== -->
<servlet>
<display-name>ResourceServlet</display-name>
<servlet-name>ResourceServlet</servlet-name>
<servlet-class>com.sap.ui5.resource.ResourceServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>ResourceServlet</servlet-name>
<url-pattern>/resources/*</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>ResourceServlet</servlet-name>
<url-pattern>/test-resources/*</url-pattern>
</servlet-mapping>
<!-- BEGIN: DEV MODE -->
<context-param>
<param-name>com.sap.ui5.resource.DEV_MODE</param-name>
<param-value>true</param-value>
</context-param>
<!-- END: DEV MODE -->
<!-- ============================================================== -->
<!-- Cache Control Filter to prevent caching of any resource -->
<!-- ============================================================== -->
<filter>
<display-name>CacheControlFilter</display-name>
<filter-name>CacheControlFilter</filter-name>
<filter-class>com.sap.ui5.resource.CacheControlFilter</filter-class>
</filter>
<filter-mapping>
<filter-name>CacheControlFilter</filter-name>
<url-pattern>*.html</url-pattern>
</filter-mapping>
<filter-mapping>
<filter-name>CacheControlFilter</filter-name>
<url-pattern>*.js</url-pattern>
</filter-mapping>
<filter-mapping>
<filter-name>CacheControlFilter</filter-name>
<url-pattern>*.xml</url-pattern>
</filter-mapping>
<filter-mapping>
<filter-name>CacheControlFilter</filter-name>
<url-pattern>*.json</url-pattern>
</filter-mapping>
<filter-mapping>
<filter-name>CacheControlFilter</filter-name>
<url-pattern>*.css</url-pattern>
</filter-mapping>
<!-- ============================================================== -->
<!-- UI5 proxy servlet -->
<!-- ============================================================== -->
<servlet>
<servlet-name>SimpleProxyServlet</servlet-name>
<servlet-class>com.sap.ui5.proxy.SimpleProxyServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>SimpleProxyServlet</servlet-name>
<url-pattern>/proxy/*</url-pattern>
</servlet-mapping>Creating the view
You are now ready to create the actual application content. The easiest way to get started is create a new UI5 application using the wizard and then copy the content into your Web Module DC.
Go to File - New - Other... and select "SAP UI5 Application Development" - Application Project.
Enter a project name and a view name. Once the project is created, open it in the Project Explorer and open the WebContent folder.
You will find an index.html and a sub-folder for the application.
Copy the index.html and the whole application folder into the WebContent folder of your Web Model DC project.
Now let's create some content in the view. Open the *.view.js file and fill the createContent function with the following code:
createContent : function(oController) {
var button = new sap.ui.commons.Button({ "text": "my button" });
return button;
}Check out the code completion feature:
Running the app
Once done, you can test the application locally. Right-click on the index.html and select Run As - Web App Preview.
Summary
The SAP UI5 Toolkit works well with the SAP NetWeaver Developer Studio. Only small adjustments are needed due to the Java development component model.
In part 2, we will prepare the application for running on SAP NetWeaver Java.
20 Comments
