Skip to Content

Develop your mobile app on Eclipse

Here is the third part of my journey (also known as “How-to create a simple mobile app for newbies”):

Part    I: Make sure your phone can access SAP Gateway

Part   II: Create your first service with SAP Gateway

Part  III: Develop your mobile app on Eclipse

Part IV: Test your mobile app on your phone

Part  V: Troubleshooting… and finally make it work!

Useful links:

Consume NetWeaver Gateway services via SAPUI5 – Part 1

End-to-End How-to Guide: Building SAPUI5 Applications Consuming Gateway OData Services

How to Write Online Mobile Apps Consuming SAP Back End Systems

Step 1: Install Eclipse

As mentioned in Part I of this blog series, I’m more a functional consultant, so not familiar with Eclipse at all. And it took me a while to understand that I wouldn’t be able to create my application via SAP Netweaver workbench like I’m used to (nowadays with SAP CRM7.01 it’s a matter of 4 clicks to create a complete BSP application based on a GENIL model)…

Then I realized that Eclipse is delivered through myriads of flavors and you have to pick up one of them.

But… as in the end I’m planning to use SAPUI5 to develop my application (because they say it’s cool), I chose Eclipse IDE for Java EE Developers as mentioned in the corresponding installation guide (after wasting my time on a few other versions, of course). By the way it is also mentioned in the very same document that Java Runtime Environment 1.6 should also be installed.

That’s why I ran through those steps:

  1. Download and Install the java runtime environment (version 6 = 1.6?) jre-6u43-windows-x64.exe (16,4 Mo)
  2. Download eclipse-jee-juno-SR2-win32-x86_64.zip (228 Mo)
  3. Extract content of eclipse-jee-juno-SR2-win32-x86_64.zip to C:\
    (apparently Eclipse is ready to go without the need for any further installation)

Step 2: Install SAP plug-ins for Eclipse

As far as I understand you have many options to develop mobile applications, but the first choice you have to make is whether you’re willing to create “native apps” or “web apps”. I decided to go for web apps to make it easier to distribute among many device types. And I wanted to test SAPUI5, so I ran through the following steps:

  1. Download UI Development toolkit for HTML5 (I found this link in the second comment of blog SAPUI5 version 1.8 is available but I guess for a “production use” you should always download the latest version from SMP, see Note 1747308 – Installation Guide UI development toolkit for HTML5 (SAPUI5))
  2. Extract content to C:\sapui5
  3. Open Eclipse (I let the system choose the default workspace location)
  4. Go to Help >> Install new software
  5. Click on Add >> Local >> C:\sapui5\tools-updatesite. Select everything displayed as below:
    /wp-content/uploads/2013/04/1_200812.png
  6. Click Next, accept Terms of use, then Finish.
  7. Click OK for all security warning, and restart Eclipse.

At this stage I was able to create a very simple “Hello World” application using SAPUI5 libraries following this article:How to Build a SAP HTML5 Application Using MVC with the SAPUI5 Application Development Tool. However, in order to benefit from some wizards related to SAP Gateway when creating my “a-little-more-complex” application (to search for existing services for example, let the system generate views for me, etc.) I installed SAP Netweaver Gateway Plug-in for Eclipse too:

  1. Download SAP NetWeaver Gateway plug-in for Eclipse (7,88 MB)
  2. Copy the zip file to C:\sapui5
  3. Open Eclipse and go to Help >> Install new software
  4. Click on Add >> Archive >> C:\sapui5\SAPNetWeaverGatewayPluginForEclipse_2.6.400.zip. Select items as follows:
    /wp-content/uploads/2013/04/2_200832.png
  5. Click Next, accept Terms of use, then Finish.
  6. Click OK for all security warning, and restart Eclipse.
  7. Then go to Window >> Preferences >> SAP Netweaver Gateway >> Connection
  8. Click the “Add” button and fill-in the relevant connection settings (I unflagged the “Use HTTPS” checkbox in order not to maintain any certificate stuff):
    /wp-content/uploads/2013/04/14_200858.png

Step 3: Create your SAPUI5 mobile app

Select “NEW >> Other” to be presented the following popup where you can choose “SAP Netweaver Gateway >> Starter Application Project”:

/wp-content/uploads/2013/04/10_200846.png

Then follow the wizard to give your project a name, a type (HTML5), a template (List/Detail based on SAPUI5).

Click the “Catalog…” button to search for the Gateway service created in Part II.

/wp-content/uploads/2013/04/15_200859.png

And if you followed exactly the same steps as mine, you’ll be facing this error “There are no addressable collections in the service”:

/wp-content/uploads/2013/04/16_200860.png

Step 4: troubleshooting

It is not possible to complete the wizard without solving the above problem. So after some research, I found out that when creating your entity set (see Part II step 2), you should flag the “Addressable” checkbox. But, when I did this and tried to re-generate my service, I faced the exact same issue as in Part II step 5: the system kept telling me that everything was correctly generated, but nothing was changed at all (I’m wondering if this is because I’m creating LOCAL objects — I don’t know really). [Update: Sebastien BENOIT added a comment to part II of this blog series explaining that to regenerate your service after a change, you need first to delete the assignment to a system, then delete the service itself, only then will your changes be taken into account so that’s worth giving it a try instead of recreating the service from scratch like I did below]

The problem is: this time I couldn’t find any workaround (deleting the generated classes to force the system to create new ones seems to have no effect), so I had to create a new service from scratch. And to avoid any more surprises (even if the “Addressable” flag is probably the only one missing) I flagged almost every checkboxes:

/wp-content/uploads/2013/04/1_200812.png

I saved my new service, activated it, etc. (see Part II step 3 and 4).

Once done, I was able to complete the Eclipse’s wizard in order to create my SAPUI5 mobile app with two views:

/wp-content/uploads/2013/04/2_200832.png

However I couldn’t test it: when selecting the index.html page that had been generated for me, and choosing “Run as >> Web App Preview” in the context menu, only a blank page was displayed. I spent a lot of time trying to understand the reason behind this failure. In the end I gave up. As far as I understand, this problem could be related to some “Cross-domain-origin” policy… and you need to install/configure a reverse proxy to by-pass this limitation (which is above my current skills). So let’s cross our fingers and see if we can still deploy this app on our mobile, and use it.

Conclusion

When you don’t know anything about the Eclipse world it is not that easy to come up and build your first app… and even after a few tries and errors I wasn’t able to figure out how to test my application (I spent an entire day trying to understand what was wrong). And now I’m crossing every fingers hoping that this mobile app will work once it is installed on my own phone (an old HTC Desire running Android 2.3). Go to Part IV.

To report this post you need to login first.

21 Comments

You must be Logged on to comment or reply to a post.

  1. Andy Silvey

    Hi Nicolas,

    again great blog, ok next steps, let’s see if it runs on your phone and if not, then your next challenge is to overcome this Developer Studio testing issue.

    Don’t give up, this blog series needs a successful conclusion, we can’t be left with the cliff hanger of not knowing what happened next, and _more importantly_ not knowing why it didn’t work and why you had the problem in Dev Studio, because, for sure, others will probably run into the same issue, and this is the power of SCN, sharing solutions.

    Looking forward to the answers and the next chapter.

    All the best,

    Andy.

    (0) 
  2. Ted Castelijns

    Hi Nicolas,

    The blank page you have is caused by the SAPUI5 libraries which are not included in the project. The source of the index.html file points to the following javascript file:

    “./sapui5-1.4/resources/sap-ui-core.js”

    This file is not included in the project. If you create the folder sapui5-1.4 inside the WebContent folder and extract the “resources” folder from the sapui5-static.zip file into the sapui5-1.4 folder the correct files are there.

    After doing this the page is shown but no data is loaded… This is caused by the Cross-domain-origin policy. I am still trying to find out how to fix this…

    kind regards,

    Ted

    (0) 
    1. Nicolas Busson Post author

      Hi Ted,

      Thanks a lot for the hint!

      In fact, it seems that we can also simply remove “/sapui5-1.4″ from the folder’s name, and (don’t ask me why) the page is correctly loaded in test mode (without any data because of this cross-domain-origin policy).


      But I still had the same problem of blank page on my phone then… so I found this thread yesterday night which is confirming your thoughts: Packaging a sapui5 app with phonegap. I’m cleaning the folder right now because it’s too big for my HTC device =)

      Thanks again for taking time to take a look.

      Best regards,

      Nicolas


      (0) 
      1. Ted Castelijns

        Hi Nicolas,

        Great, that’s even better! I am also researching how to get the data into the table. I will keep you informed of any progress.

        kind regards,

        Ted

        (0) 
        1. Nicolas Busson Post author

          Hi Ted,

          For your information I finally managed to have my application working with data coming from the backend… I’ll create a new blog post to explain what I did (I think it should be useful for many of us to know how to debug this thing) but to sum it up:

          1. There seems to be a bug in the SAP Netweaver Gateway Starter application wizard. In fact if you open the javascript file that was created for you at WebContent/<your_app_name>/Listcontroller.js : go to line 76. In my case the system wrote line “oTable.bindRows(“PartnerSet”);” instead of “oTable.bindRows(“/PartnerSet”);” (there is a missing slash).
          2. And to solve the cross-origin-domain stuff, you can change the URL that was included in WebContent/<your_app_name>/resources/utils/connectivity.js. On my system I had:
            var serviceUrl = “http://192.168.0.9:8000/sap/opu/odata/sap/Z_PARTNER_SRV_SRV/“;
            which I changed into:
            var serviceUrl = “proxy/http/192.168.0.9:8000/sap/opu/odata/sap/Z_PARTNER_SRV_SRV/”;

            Now everything is working fine!

            Cheers,

            Nicolas.

          (0) 
    1. Nicolas Busson Post author

      Thanks JC!

      As I answered to Ted, I’ve finally found it myself via some intensive debugging =)

      Part V will be ready in a few hours from now.

      (0) 
  3. Juergen Wahlmann

    I have issues installing the SAP UI 5 and Gateway plugins into eclipse. It won’t let me because of a PermGenSpace error. I already upped the parameter -Xmx768m from 512, but to no avail.

    My Android Development Tool is running fine with these settings, but the separate Juno instance won’t. Any idea how to solve this?

    (0) 
    1. Nicolas Busson Post author

      Hi Juergen,

      I’m sorry but as far as I’m concerned I’ve got no clue at all. I didn’t face this issue, and if you’re downloading/installing the exact same versions as I did, you shouldn’t face this issue either. Maybe you can post your question in the SCN forum space describing which software you’ve already installed?

      Cheers,

      Nicolas.

      (0) 
      1. Juergen Wahlmann

        Hi Nicolas!

        Java SDK V6 build .43 I already had installed, then I’d took followed the download for the eclipse you posted. After extracting this I started and installed the UI 5 plugins. That worked after I increased the Xmx parameter.

        But I’m unable to install the Gateway plugins. As soon as the review licences page comes up, eclipse stalls and not long after presents me an OutOfMemory Error with a tag “Computing size, PermGen Space”.

        Here’s the Log:

        !SESSION 2013-04-16 15:25:54.707 ———————————————–

        eclipse.buildId=M20130204-1200

        java.version=1.6.0_16

        java.vendor=Sun Microsystems Inc.

        BootLoader constants: OS=win32, ARCH=x86_64, WS=win32, NL=de_DE

        Command-line arguments:  -os win32 -ws win32 -arch x86_64

        !ENTRY org.eclipse.egit.ui 2 0 2013-04-16 15:26:18.754

        !MESSAGE Warning: EGit couldn’t detect the installation path “gitPrefix” of native Git. Hence EGit can’t respect system level

        Git settings which might be configured in ${gitPrefix}/etc/gitconfig under the native Git installation directory.

        The most important of these settings is core.autocrlf. Git for Windows by default sets this parameter to true in

        this system level configuration. The Git installation location can be configured on the

        Team > Git > Configuration preference page’s ‘System Settings’ tab.

        This warning can be switched off on the Team > Git > Confirmations and Warnings preference page.

        !ENTRY org.eclipse.egit.ui 2 0 2013-04-16 15:26:18.762

        !MESSAGE Warning: The environment variable HOME is not set. The following directory will be used to store the Git

        user global configuration and to define the default location to store repositories: ‘C:\Users\jwahlmann’. If this is

        not correct please set the HOME environment variable and restart Eclipse. Otherwise Git for Windows and

        EGit might behave differently since they see different configuration options.

        This warning can be switched off on the Team > Git > Confirmations and Warnings preference page.

        !ENTRY com.sap.ide.ui5.services 2 2 2013-04-16 15:26:25.703

        !MESSAGE Internal Warning

           Plugin Name: SAPUI5-Services

           Plugin ID  : com.sap.ide.ui5.services

           Class      : com.sap.ide.ui5.services.templates.UI5PrepareControlTemplates

           Method     : earlyStartup

           Message    : Missing Templates in: themelib_sap_goldreflection

           Exception  :

        !ENTRY com.sap.ide.ui5.services 2 2 2013-04-16 15:26:25.795

        !MESSAGE Internal Warning

           Plugin Name: SAPUI5-Services

           Plugin ID  : com.sap.ide.ui5.services

           Class      : com.sap.ide.ui5.services.templates.UI5PrepareControlTemplates

           Method     : earlyStartup

           Message    : Missing Templates in: themelib_sap_ux

           Exception  :

        !ENTRY com.sap.ide.ui5.services 2 2 2013-04-16 15:26:25.830

        !MESSAGE Internal Warning

           Plugin Name: SAPUI5-Services

           Plugin ID  : com.sap.ide.ui5.services

           Class      : com.sap.ide.ui5.services.templates.UI5PrepareControlTemplates

           Method     : earlyStartup

           Message    : Missing Templates in: themelibext_sap_mvi

           Exception  :

        !ENTRY org.eclipse.equinox.p2.operations 4 0 2013-04-16 15:56:53.774

        !MESSAGE Operation details

        !SUBENTRY 1 org.eclipse.equinox.p2.operations 4 10050 2013-04-16 15:56:53.774

        !MESSAGE Cannot complete the request.  See the error log for details.

        !SUBENTRY 1 org.eclipse.equinox.p2.operations 2 10005 2013-04-16 15:56:53.774

        !MESSAGE “Language files for SAPUI5 Application Development” will be ignored because it is already installed.

        !SUBENTRY 1 org.eclipse.equinox.p2.operations 2 10005 2013-04-16 15:56:53.774

        !MESSAGE “SAPUI5 Application Development” will be ignored because it is already installed.

        !SUBENTRY 1 org.eclipse.equinox.p2.operations 2 10005 2013-04-16 15:56:53.774

        !MESSAGE “SAPUI5 Runtime (Client-side Components)” will be ignored because it is already installed.

        !SUBENTRY 1 org.eclipse.equinox.p2.operations 2 10005 2013-04-16 15:56:53.774

        !MESSAGE “SAPUI5 Runtime (Server-side Components)” will be ignored because it is already installed.

        !ENTRY org.eclipse.equinox.p2.operations 4 0 2013-04-16 15:56:53.786

        !MESSAGE Operation details

        !SUBENTRY 1 org.eclipse.equinox.p2.operations 4 10050 2013-04-16 15:56:53.786

        !MESSAGE Cannot complete the request.  See the error log for details.

        !SUBENTRY 1 org.eclipse.equinox.p2.operations 2 10005 2013-04-16 15:56:53.786

        !MESSAGE “Language files for SAPUI5 Application Development” will be ignored because it is already installed.

        !SUBENTRY 1 org.eclipse.equinox.p2.operations 2 10005 2013-04-16 15:56:53.787

        !MESSAGE “SAPUI5 Application Development” will be ignored because it is already installed.

        !SUBENTRY 1 org.eclipse.equinox.p2.operations 2 10005 2013-04-16 15:56:53.787

        !MESSAGE “SAPUI5 Runtime (Client-side Components)” will be ignored because it is already installed.

        !SUBENTRY 1 org.eclipse.equinox.p2.operations 2 10005 2013-04-16 15:56:53.787

        !MESSAGE “SAPUI5 Runtime (Server-side Components)” will be ignored because it is already installed.

        !ENTRY org.eclipse.core.jobs 4 2 2013-04-16 16:01:20.484

        !MESSAGE An internal error occurred during: “Computing size”.

        !STACK 0

        java.lang.OutOfMemoryError: PermGen space

            at java.lang.String.intern(Native Method)

            at org.eclipse.equinox.internal.p2.persistence.XMLParser$AbstractHandler.parseAttributes(XMLParser.java:314)

            at org.eclipse.equinox.internal.p2.persistence.XMLParser$AbstractHandler.parseRequiredAttributes(XMLParser.java:295)

            at org.eclipse.equinox.internal.p2.persistence.XMLParser$PropertyHandler.parseProperty(XMLParser.java:422)

            at org.eclipse.equinox.internal.p2.persistence.XMLParser$PropertyHandler.<init>(XMLParser.java:411)

            at org.eclipse.equinox.internal.p2.persistence.XMLParser$PropertiesHandler.startElement(XMLParser.java:396)

            at org.eclipse.equinox.internal.p2.persistence.XMLParser$AbstractHandler.startElement(XMLParser.java:165)

            at com.sun.org.apache.xerces.internal.parsers.AbstractSAXParser.startElement(Unknown Source)

            at com.sun.org.apache.xerces.internal.parsers.AbstractXMLDocumentParser.emptyElement(Unknown Source)

            at com.sun.org.apache.xerces.internal.impl.XMLNSDocumentScannerImpl.scanStartElement(Unknown Source)

            at com.sun.org.apache.xerces.internal.impl.XMLDocumentFragmentScannerImpl$FragmentContentDriver.next(Unknown Source)

            at com.sun.org.apache.xerces.internal.impl.XMLDocumentScannerImpl.next(Unknown Source)

            at com.sun.org.apache.xerces.internal.impl.XMLNSDocumentScannerImpl.next(Unknown Source)

            at com.sun.org.apache.xerces.internal.impl.XMLDocumentFragmentScannerImpl.scanDocument(Unknown Source)

            at com.sun.org.apache.xerces.internal.parsers.XML11Configuration.parse(Unknown Source)

            at com.sun.org.apache.xerces.internal.parsers.XML11Configuration.parse(Unknown Source)

            at com.sun.org.apache.xerces.internal.parsers.XMLParser.parse(Unknown Source)

            at com.sun.org.apache.xerces.internal.parsers.AbstractSAXParser.parse(Unknown Source)

            at com.sun.org.apache.xerces.internal.jaxp.SAXParserImpl$JAXPSAXParser.parse(Unknown Source)

            at org.eclipse.equinox.internal.p2.artifact.repository.simple.SimpleArtifactRepositoryIO$Parser.parse(SimpleArtifactRepositoryIO.java:311)

            at org.eclipse.equinox.internal.p2.artifact.repository.simple.SimpleArtifactRepositoryIO.read(SimpleArtifactRepositoryIO.java:101)

            at org.eclipse.equinox.internal.p2.artifact.repository.simple.SimpleArtifactRepositoryFactory.load(SimpleArtifactRepositoryFactory.java:108)

            at org.eclipse.equinox.internal.p2.artifact.repository.simple.SimpleArtifactRepositoryFactory.load(SimpleArtifactRepositoryFactory.java:76)

            at org.eclipse.equinox.internal.p2.artifact.repository.ArtifactRepositoryManager.factoryLoad(ArtifactRepositoryManager.java:73)

            at org.eclipse.equinox.internal.p2.repository.helpers.AbstractRepositoryManager.loadRepository(AbstractRepositoryManager.java:758)

            at org.eclipse.equinox.internal.p2.repository.helpers.AbstractRepositoryManager.loadRepository(AbstractRepositoryManager.java:651)

            at org.eclipse.equinox.internal.p2.artifact.repository.ArtifactRepositoryManager.loadRepository(ArtifactRepositoryManager.java:104)

            at org.eclipse.equinox.internal.p2.artifact.repository.ArtifactRepositoryManager.loadRepository(ArtifactRepositoryManager.java:100)

            at org.eclipse.equinox.p2.engine.ProvisioningContext.getLoadedArtifactRepositories(ProvisioningContext.java:160)

            at org.eclipse.equinox.p2.engine.ProvisioningContext.getArtifactRepositories(ProvisioningContext.java:143)

            at org.eclipse.equinox.internal.p2.engine.phases.Sizing.completePhase(Sizing.java:91)

            at org.eclipse.equinox.internal.p2.engine.Phase.postPerform(Phase.java:241)

        (0) 
  4. Atul Agrawal

    Hi Nicolas,

    Can you please help me with your step 2 where you set up your connection?

    I am using Tomcat Apache server and have added the same under Window> preferences> server> Runtime environment.

    Do I still need to do the connection settings as you mentioned in your step 2?

    Actually I am using the Flight Sample demo services provided by SAP on ES Workplace. It is just showing the blank page as I run the application. I also tried your solution on cross origin domain, but nothing helped. So I was just wondering if I am missing some connection settings in Eclipse. But when I try to put in the tomcat server details, it is unable to save and gives the “connection error”.

    Please advise.

    Thanks,

    Atul

    (0) 
    1. Nicolas Busson Post author

      Hi,

      Sorry but step 2 is showing how to setup a connection to your netweaver gateway system, so I’m not sure to understand the link with your tomcat server.

      I’d suggest to take a look at the last part of this blog series where I explain how to debug your application. That might help. 

      Cheers

      Nicolas.

      (0) 
  5. Juergen Wahlmann

    Would be nice to state in the first part that one should read all five parts before starting to follow it. I find it quite annoying to run into all the problems you did only to find out that in the next part the workaround/solution is shown, which here is to recreate the service from scratch.

    (0) 
    1. Nicolas Busson Post author

      Hello Juergen,

      That’s indeed a valid point. But instead of adding a disclaimer, I’m jut gonna add another workaround provided by Sebastien BENOIT in Part II of this blog series. This way you won’t have to recreate the service from scratch.

      Regards,

      Nicolas.

      (0) 
      1. Vijay Vegesana

        Hi Nicolas,

        no words,simply superb……its working, but only in Internet explorer, but not in latest versions…chrome, Mozilla….can you guide me..steps need to be followed…

        Thanks,

        Vijay Vegesana

        (0) 
        1. Nicolas Busson Post author

          Hello Vijay,

          Thanks a lot for the kind words. And sorry but I have no clue regarding your browser issue. I’d recommend to search/post your question in the corresponding forum instead… you’ll have a better chance to get an answer.

          Cheers,

          Nicolas.

          (0) 
  6. msap sdn

    Hello,

    When I try this in eclipse, I get following error “Metadata document could not be retrieved”.

    Any idea’s on how to solve this ?

    Found it, when filling in the service URL it’s just “http://…_SRV/“, so nothing behind ‘/’.

    Regards

    (0) 

Leave a Reply