5 Replies Latest reply on Jan 2, 2017 5:51 PM by haris hashim

    Errai 3.2 and Cordova. Problem with errai-tutorial code when generating and testing generated cordova code

    haris hashim Newbie

      Hello there,

       

      I am using the errai-tutorial code from GitHub - errai/errai-tutorial: Errai tutorial project. No additional code. Just clone, install maven dependency and build using bellow instruction as per the github readme.

       

      mvn clean package -Pmobile,jboss7 -Dplatform=android

       

      And get this error.

       

          Execution failed for task ':processDebugResources'.

          > Error: A library uses the same package as this project: io.cordova.hellocordova

          You can temporarily disable this error with android.enforceUniquePackageName=false

          However, this is temporary and will be enforced in 1.0

       

      So I open up the generated source in android studio and rename package declaration in AndroidManifest.xml for CordovaLib. The package was changed from io.cordova.hellocordova to io.cordova.hellocordovalib

       

      With this I can build the Android Studio project and run it in emulator.

       

      But it open up the App with background picture without any of the UI element. Let say if I run errai-tutorial (using Eclipse) in browser, I will see an escalator picture as the background with UI elements such as Title plus all those forms textbox and submit button. Running it in Android emulator (using Android Studio) will run the app. But I just see the escalator background picture and nothing else.

       

      In Android Studio, a lot of error like this:

       

          03-23 00:27:03.978 2184-2239/io.cordova.hellocordova E/AndroidProtocolHandler: Unable to open asset URL:

          file:///android_asset/www/out.40357-40401.erraiBus?z=0&clientId=40357-40401&phase=connection&wait=1

       

      I really need advise. Perhaps there is additional instruction that I did not perform? Or maybe renaming the package in manifest XML file is not enough, but I need to change other files too?

       

      TIA,

      Haris

        • 1. Re: Errai 3.2 and Cordova. Problem with errai-tutorial code when generating and testing generated cordova code
          Max Barkley Expert

          Hi Haris,

           

          We are in the process of removing Cordova support from Errai 4. It has not been updated for some time as the original maintainer has moved on to another project.

           

          Cheers.

          • 2. Re: Errai 3.2 and Cordova. Problem with errai-tutorial code when generating and testing generated cordova code
            haris hashim Newbie

            Thanks for the answer.

             

            I have tried again with Errai 4. This post is to document success and failure story

             

            Indeed the latest beta (6 & 7) has removed Errai Cordova. So I went down from beta 6 to beta 2.

             

            I have to follow the step to implement org.jboss.errai.bus.client.framework.Configuration as in this url

             

            Errai Cordova (Mobile Support) - Errai - Project Documentation Editor

             

            After that I have to copy config.xml from {projectdir}\target\template to {projectdir}\target\template\www. As well as configure it. (Tips: dont forget about "<content src="index.html" />". Since gwt html file need to rename to {projectname}.html).

             

            I have to install node.js as the build process need it to download additional stuff.

             

            After that found the generated apk to be still not working. For instance manifest file did not correctly specify the main activity. So I muck around by opening the project in Android Studio. A lot of problem there too, since gradle version used is quite old. Mucking around result to ability to run the app with some problem (that I can solve). Android studio upgrade gradle to newer version.

             

            However now I am stuck in the round-trip between building errai cordova in eclipse so that I can run the project in Android Studio. Basically "mvn cordova:build-project"  no longer work and stuck with this error

             

            "A problem occurred evaluating root project 'android'.

            > Failed to apply plugin [id 'android']

              > Minimum supported Gradle version is 2.14.1. Current version is 2.2.1. If using the gradle wrapper, try editing the distributionUrl in D:\Dev\workspace\Sam\ImrApp\gradle\wrapper\gradle-wrapper.properties to gradle-2.14.1-all.zip"

             

            It looks like the build process change gradle build file back to the old gradle thingy. I can sync and rebuild this back to new gradle in Android Studio (and then run the app again). To me this look like errai cordova is using old gradle and I need to change it so that it use the new one.

             

            At the moment this is a show stopper for me. Anyone can kick me in the right direction? Where I can get information on how to fix errai-cordova to use new gradle version?

             

            If I am successful with this, I can possibly look into the problem of maintaining Errai Cordova for Errai 4. Is a shame if this nice tool is not included.

             

            Best Regards,

            Haris

            • 3. Re: Errai 3.2 and Cordova. Problem with errai-tutorial code when generating and testing generated cordova code
              haris hashim Newbie

              Work around to round trip problem in my previous post.

               

              1. Do maven clean

              2. Do maven install (not sure needed to do or not).

              3. Do "mvn cordova:build-project"

              4. Open the project in Android Studio and change build.gradle (Module:android) from

               

              repositories {

                mavenCentral()

              }

               

              // Switch the Android Gradle plugin version requirement depending on the
              // installed version of Gradle. This dependency is documented at
              // http://tools.android.com/tech-docs/new-build-system/version-compatibility
              // and https://issues.apache.org/jira/browse/CB-8143
              if (gradle.gradleVersion >= "2.2") {

                dependencies {

                classpath 'com.android.tools.build:gradle:1.0.0+'
                 }

              } else if (gradle.gradleVersion >= "2.1") {

                dependencies {

                classpath 'com.android.tools.build:gradle:0.14.0+'
                 }

              } else {

                dependencies {

                classpath 'com.android.tools.build:gradle:0.12.0+'
                 }

              }

               

              to

              repositories {

                jcenter()

                mavenCentral()

              }

               

              dependencies {

                classpath 'com.android.tools.build:gradle:2.2.2'
              }

               

              5. Open manifest file and change the main activity file name to a proper one. From

               

              <activity
                 android:name="MainActivity"

              To

              <activity
                 android:name="my.domain.MainActivity"

               

              6. Redo the config.xml configuration. Basically it is the index.html that will be shown and not the gwt app html file.

               

              With the above done. My app will display but still not working (ilooks like the gwt compiled into javascript part is not working). Probably will fix that part sooner or later.

               

              Best Regards,

              Haris

              • 4. Re: Errai 3.2 and Cordova. Problem with errai-tutorial code when generating and testing generated cordova code
                haris hashim Newbie

                After troubleshooting about sometime now.

                 

                This is the error that I get in Android Studio.

                 

                I/chromium: [INFO:CONSOLE(3263)] "12:52:03 INFO [ClientMessageBus] sending handshake message to remote bus", source: imrapp-0.js (3263)

                I/chromium: [INFO:CONSOLE(3263)] "12:52:03 FINEST [HttpPollingHandler] [bus] HttpPollingHandler.transmit([CommandType=Associate, ToSubject=ServerBus, PriorityProcessing=1, RemoteServices=SSEAgent,ClientBusErrors,ClientBus])", source: imrapp-0.js (3263)

                I/chromium: [INFO:CONSOLE(3263)] "12:52:03 FINEST [HttpPollingHandler] [bus] toSend=[CommandType=Associate, ToSubject=ServerBus, PriorityProcessing=1, RemoteServices=SSEAgent,ClientBusErrors,ClientBus]", source: imrapp-0.js (3263)

                I/chromium: [INFO:CONSOLE(3263)] "12:52:03 FINEST [HttpPollingHandler] [bus] sendPollingRequest([{"CommandType":"Associate","ToSubject":"ServerBus","PriorityProcessing":"1","RemoteServices":"SSEAgent,ClientBusErrors,ClientBus"}])", source: imrapp-0.js (3263)

                I/chromium: [INFO:CONSOLE(3263)] "12:52:03 INFO [LocationAwareClientMessageBus] url end point http://192.168.0.107:8888/", source: imrapp-0.js (3263)

                I/chromium: [INFO:CONSOLE(3263)] "12:52:03 FINEST [HttpPollingHandler] [bus] TX: [{"CommandType":"Associate","ToSubject":"ServerBus","PriorityProcessing":"1","RemoteServices":"SSEAgent,ClientBusErrors,ClientBus"}]", source: imrapp-0.js (3263)

                I/chromium: [INFO:CONSOLE(3263)] "12:52:03 INFO [HttpPollingHandler] attempting Tx reconnection in 1ms -- attempt: 1", source: imrapp-0.js (3263)

                 

                I deployed the app to actual mobile phone. My notebook ip is 192.168.0.107 and I can browse in the phone to http://192.168.0.107:8888/ and chrome mobile browser will display the web app perfectly. I have google map and a button in the app UI. So this is really confirm that it work in browser but not working as android app.

                 

                Also weird thing like I can not use css and js from the web. But it works since I make a local copy of the web resources and deploy it in asset folder.

                 

                So my screen in android display the html with css styling but ui element like button is not displayed at all.

                 

                As if the android app can not reach internet and my notebook ip. I observe the same problem (html load with css styling but no ui element) earlier when the app can not reach server.

                 

                This can means CORS problem or no access to network (LAN/internet). Bellow is my permission setting:

                 

                <uses-permission android:name="android.permission.INTERNET" />
                <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
                <uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />

                 

                and config.xml

                 

                <?xml version='1.0' encoding='utf-8'?>
                <widget xmlns:cdv="http://cordova.apache.org/ns/1.0" id="my.devs.web" version="0.0.1"
                   xmlns="http://www.w3.org/ns/widgets">
                  <name>IMR App</name>
                  <description>
                   Issue And Resolution

                   </description>
                  <author email="harishashim@devs.my" href="http://www.devs.my">
                   Devs.My

                   </author>
                  <content src="ImrApp.html" />
                  <plugin name="cordova-plugin-whitelist" version="1" />

                  <access origin="*" />

                  <allow-navigation href="http://192.168.0.107:8888/*" />

                  <allow-intent href="http://*/*" />
                  <allow-intent href="https://*/*" />
                  <allow-intent href="tel:*" />
                  <allow-intent href="sms:*" />
                  <allow-intent href="mailto:*" />
                  <allow-intent href="geo:*" />
                  <platform name="android">
                  <allow-intent href="market:*" />
                  </platform>
                  <platform name="ios">
                  <allow-intent href="itms:*" />
                  <allow-intent href="itms-apps:*" />
                  </platform>
                </widget>

                 

                I have tried adding (and then remove it back) to trouble shoot CORS. But it does not fix the problem.

                 

                <meta http-equiv="Content-Security-Policy" content="default-src * 'unsafe-inline' 'unsafe-eval'">

                 

                I have 2 theory

                 

                1. I need to do something on the server side to allow CORS.

                 

                or

                 

                2.  The code generated by cordova-maven-plugin include a class called WhitelistPlugin. I need to do something with this in order to make all the allow setting in config.xml to work. This is far fetched, but it is a good question; why there is a WhitelistPlugin plugin class in the generated code?

                 

                Cheers!

                Haris

                • 5. Re: Errai 3.2 and Cordova. Problem with errai-tutorial code when generating and testing generated cordova code
                  haris hashim Newbie

                  A quick reply, it turns out i need to solve both "theory". After that the UI is working now.

                   

                  However, it is weird because Errai Cordova require server side to be up just to display UI. That means if server down, I will get empty screen (the original problem) with no Errai Ui element. Which is yet another supporting evidence about the 2 "theory" being client unable to communicate with server.

                   

                  I hope this is something that I can eventually solve. Otherwise Errai is not useful in client side in offline scenario.

                   

                  I need some feedback regarding this.

                   

                  Cheers

                  Haris