SAPUI5 with IntelliJ IDEA 11

Setting up SAPUI5 with IntelliJ IDEA 11 - Tutorial

Steps

1. Click File -> New Project.. 

2. Use the wizard to create a new Maven Project. So far SAPUI5 is not available through a maven repository. How ever, i use maven for further purposes and aditional libraries.

3. Then select the project root element, right click and select Add Framework Support..

4. Select "Web" and continue. Now a "web" folder will be added to your project.

5. Right click the project root and create new folder. Name it "lib". Here we'll store all SAPUI5 related libraries.

Okay.. how to get the SAPUI5 jars? I suggest you download SAPUI5 from sap's SCN homepage. See here: http://scn.sap.com/community/developer-center/front-end

5.1 Extract the zip file called HTML5Evaluation_complete.zip. After that, you ll find a folder called "tools-updatesite". Within the folder there is another one, called "plugsins".

5.2 Copy all .jar files starting with "com.sap.ui5" into your recently created "lib" folder.

6. Open the Project Settings within IntelliJ and open "Libraries". Then pres the [+] button and add all SAPUI5 related .jar files to your project. I know... myself wasnt able to select all items at once and add them.. i think we have to go the hard way and have to add every single .jar...

Done this, your libraries settings should look like this:

7. Then switch to "Artifacts", select all available elements, right click -> Put into WEB-INF\lib

Then you should see something like this:

Caution!  Dont add "com.sap.ui5.ressource.osgi_1.4.3.jar to your Web-Inf\lib folder. The .jar has a dependency to osgi 1.4.3 (this is an mistake in the above screenshot). If you add this library you end up with an missing dependency (osgi 4.3).

8. Edit your web.xml file and copy the following snippet into your own web.xml file.

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
                             http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
         version="2.5"
         xmlns="http://java.sun.com/xml/ns/javaee">

    <display-name>testSAPViews</display-name>

    <!-- ============================================================== -->
    <!-- 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>


    <!-- ============================================================== -->
    <!-- Welcome file list                                              -->
    <!-- ============================================================== -->

    <welcome-file-list>
        <welcome-file>index.html</welcome-file>
    </welcome-file-list>


</web-app>

9. Within the project folder "web" you ll find the file "index.jsp". Delete this file and create a new file named "index.html". As you can see the "welcome-file" within web.xml is set to index.hml.  Otherwise change this setting.


You're done with setting up SAPUI5 for IntelliJ IDEA 11. Now its time to continue coding...

Bye the way.. if you reading this lines and you are working for SAP, i have to state my full respect for SAPU5 and your development guys. Its a planet shaking product... its soooo made in germany;)