microsoft / ace Goto Github PK

I really liked the idea of having native UI using cordova. I've never used XAML before.
And I was a bit disappointed about not being able to use it on Linux.
So the only option is to have all the UI generated with JS.
But I find the documentation a bit confusing.

For example I need to make a button. I need to position it, to change style and content. But the docs here have nothing on those methods. And there are some examples here in styling section.

Did I look in the right place? =)
Is there a better way getting to know ace?

how to invoke javascript function from native code ?

or how to “fire event” from native code, and listen it from native code ?

Hi, I added the Ace plugin to my Ionic 1 android project by using vs2015 plugin method and try to test Ace by following the sample of showing the battery level. However it hit the native error.

My code and error as below :-

controller :-

.controller('AccountCtrl', function($scope) {
$scope.battery = function() {
  if (ace.platform == "iOS") {
      // Objective-C code:
      // UIDevice* device = [UIDevice currentDevice];
      // [device setBatteryMonitoringEnabled:true];
      // double capacity = [device batteryLevel] * 100;
  // Invoke a static currentDevice method on UIDevice
      ace.NativeObject.invoke("UIDevice", "currentDevice", function (device) {
          // On the returned instance, call an instance method with no return value
          device.invoke("setBatteryMonitoringEnabled", true);
          // Call another instance method that returns a double
          device.invoke("batteryLevel", function (level) {
              alert("capacity = " + (level * 100) + "%");
          });
      });
  }
  else if (ace.platform == "Android") {
      // Java code:
      // BatteryManager batteryManager = getContext().getSystemService(Context.BATTERY_SERVICE);
      // int capacity = batteryManager.getIntProperty(BatteryManager.BATTERY_PROPERTY_CAPACITY);

      // Get the value of the string constant Context.BATTERY_SERVICE
      ace.NativeObject.getField("android.content.Context", "BATTERY_SERVICE", function (constant) {
          // Invoke an instance method on the Android context object to get a BatteryManager instance
          ace.android.getContext().invoke("getSystemService", constant, function (batteryManager) {
              ace.NativeObject.getField("android.os.BatteryManager", "BATTERY_PROPERTY_CAPACITY", function (constant) {
                  batteryManager.invoke("getIntProperty", constant, function (value) {
                      alert("capacity = " + value + "%");
                  });
              });
          });
      });
      }
  }
  });

Error msg :-

Error in Error callbackId: NativeHost1968659433 : Error: Native error: java.lang.RuntimeException: Context does not have a BATTERY_SERVICE field
at run.ace.Utils.getField(Utils.java:99)
at run.ace.IncomingMessages.staticFieldGet(IncomingMessages.java:259)
at run.ace.NativeHost$2.run(NativeHost.java:260)
at android.os.Handler.handleCallback(Handler.java:808)
at android.os.Handler.dispatchMessage(Handler.java:103)
at android.os.Looper.loop(Looper.java:193)
at android.app.ActivityThread.main(ActivityThread.java:5349)
at java.lang.reflect.Method.invokeNative(Native Method)
at java.lang.reflect.Method.invoke(Method.java:515)
at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:835)
at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:651)
at dalvik.system.NativeStart.main(Native Method)

See http://ace.run/docs/errors for help.
cordova.js (312,47)
Uncaught Error: Native error: java.lang.RuntimeException: Context does not have a BATTERY_SERVICE field
at run.ace.Utils.getField(Utils.java:99)
at run.ace.IncomingMessages.staticFieldGet(IncomingMessages.java:259)
at run.ace.NativeHost$2.run(NativeHost.java:260)
at android.os.Handler.handleCallback(Handler.java:808)
at android.os.Handler.dispatchMessage(Handler.java:103)
at android.os.Looper.loop(Looper.java:193)
at android.app.ActivityThread.main(ActivityThread.java:5349)
at java.lang.reflect.Method.invokeNative(Native Method)
at java.lang.reflect.Method.invoke(Method.java:515)
at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:835)
at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:651)
at dalvik.system.NativeStart.main(Native Method)

See http://ace.run/docs/errors for help.
ToNative.js (60,11)

Appreciate if you can advice and guide me on the issue above. Thanks

Hi Adam,
I am working on Win7 and it seems like the XAML compilation isn't working.
I was wondering if Ace currently supports creating a UI like in docked-tabs.xaml in JS without XAML?
If so, are there any examples?

Thank you!

Hello
We're developing X-platform app using your plugin.
But we have faced a problem in iOS:

Initially, our app disallowed lanscape mode. User could only use it in portrait mode.
But after adding cordova-plugin-ace this restriction was somehow bypassed....

So, we want to somehow get this restriction back to work. (This happens only in iOS, Android works as before)

Thank You in advance

Some details about usage of your plugin: we have a Popup with AceWebView inside. (Something like internal browser in facebook app)

Hi Guys,

your site is unavailable because of redirects loop.

➜  ~ curl -IL http://microsoft.github.io/ace/
HTTP/1.1 301 Moved Permanently
Server: GitHub.com
Content-Type: text/html
Location: http://www.ace.run/
X-GitHub-Request-Id: 17EB2B16:2310:5B248B:573AE031
Content-Length: 178
Accept-Ranges: bytes
Date: Tue, 17 May 2016 09:13:38 GMT
Via: 1.1 varnish
Age: 144
Connection: keep-alive
X-Served-By: cache-ams4139-AMS
X-Cache: HIT
X-Cache-Hits: 1
Vary: Accept-Encoding
X-Fastly-Request-ID: 85c1ea1413c0bb6d0b858cccc392092c029c4599

HTTP/1.1 301 Moved Permanently
Cache-Control: max-age=900
Content-Length: 0
Content-Type: text/html
Location: http://ace.run
Server: Microsoft-IIS/7.5
X-AspNet-Version: 4.0.30319
X-Powered-By: ASP.NET
Date: Tue, 17 May 2016 09:13:38 GMT
Age: 1
Connection: keep-alive

HTTP/1.1 301 Moved Permanently
Cache-Control: max-age=900
Content-Length: 0
Content-Type: text/html
Location: http://microsoft.github.io/ace
Server: Microsoft-IIS/7.5
X-AspNet-Version: 4.0.30319
X-Powered-By: ASP.NET
Date: Tue, 17 May 2016 09:13:39 GMT
Age: 0
Connection: keep-alive

HTTP/1.1 301 Moved Permanently
Server: GitHub.com
Content-Type: text/html
Location: http://www.ace.run
X-GitHub-Request-Id: 17EB2B16:2309:470D23:573AE031
Content-Length: 178
Accept-Ranges: bytes
Date: Tue, 17 May 2016 09:13:39 GMT
Via: 1.1 varnish
Age: 145
Connection: keep-alive
X-Served-By: cache-ams4139-AMS
X-Cache: HIT
X-Cache-Hits: 1
Vary: Accept-Encoding
X-Fastly-Request-ID: 5d464d8bfa968a82c7f400ce2e01c650c1beb41e

In the meantime can i find documentation somewhere else?

Regards,
Piotr

Hello @adnathan,

It will be wonderful If you add tags to some of your commits. (To prevent unexpected build failures caused by some new changes in plugin)
If you do this, we'll be able to stick to the specified version of your plugin.

Thank You very much.

Hello I think this is amazing what you guys are working on here. A dream come true for me. I just want to see if Ace will work with cordova 6.2. I tried opening the examples but they are old in terms of cordova, and my Visual Studio 2015 w/ Cordova Update 10 can't open the solutions. I just want to check before I took a deep dive in. Thanks all!

Now that I can add a TopAppBar to my page via PR #38, I would like the buttons to render when certain criteria are fulfilled. These criteria are contextual to what happens inside the webview.

However, I cannot update the list of buttons in the CommandBar component after rendering. So after setting the top bar to the page, I cannot change the buttons inside the collection any more.

The example below renders one button, and calls after setting the top app bar seem to have no effect.

var commandBar = new ace.CommandBar();
var button = new ace.AppBarButton();
button.setLabel('Button');
commandBar.getPrimaryCommands().add(button);
page.setTopAppBar(commandBar);

// some time passes, add additional button to the commandBar
var button2 = new ace.AppBarButton();
button2.setLabel('Button 2');
commandBar.getPrimaryCommands().add(button2);

// or remove one from the list
commandBar.getPrimaryCommands().remove(button);

Furthermore, changing the label of the button after setting the top app bar also has no effect. That is what I tried as hack for the failing previous example. It seems that one can only render a new page, which is what I do not want. Because, changing the page is affecting my webview. I just want to add/remove buttons from the top app bar dynamically.

<!DOCTYPE html>
<html>
<head>
   <title>Page Title</title>
</head>

<body onload="xx();">
   <p>Hello</p>
    <script type="text/javascript" src="cordova.js"></script>

    <script type="text/javascript">

         function xx(){
            document.addEventListener("deviceready", onDeviceReady, false);
         }

         function onDeviceReady(){

         ace.load("native://app.xaml", function (page) {
                  ace.getHostPage().setContent(page);
                  page.setContent(ace.getHostWebView());      
                  });

         }   
        </script>
</body>
</html>

Above is my simple html. I am using app.xmal from example folder, which is native tab bar. it shows the page with native tabbar, but it is unresponsive ( i.e. can't scroll up down ). Why?

Trying to deploy the AceExamples project against the VS emulator running KitKat (4.4) causes an error when you click any of the example links.

Here is the error when you click on the tabbar example:

I/chromium( 1338): [INFO:CONSOLE(310)] "Error in Error callbackId: NativeHost1222076338 : Error: Native error: java.lang.RuntimeException: Unable to find a class named 'run.ace.TabBar'
I/chromium( 1338): at run.ace.IncomingMessages.create(IncomingMessages.java:49)
I/chromium( 1338): at run.ace.NativeHost$2.run(NativeHost.java:223)
I/chromium( 1338): at android.os.Handler.handleCallback(Handler.java:733)
I/chromium( 1338): at android.os.Handler.dispatchMessage(Handler.java:95)
I/chromium( 1338): at android.os.Looper.loop(Looper.java:136)
I/chromium( 1338): at android.app.ActivityThread.main(ActivityThread.java:5001)
I/chromium( 1338): at java.lang.reflect.Method.invokeNative(Native Method)
I/chromium( 1338): at java.lang.reflect.Method.invoke(Method.java:515)
I/chromium( 1338): at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:785)
I/chromium( 1338): at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:601)
I/chromium( 1338): at dalvik.system.NativeStart.main(Native Method)

Hello, i've seen the example provided in the PhonegapDay APP, and also the example in the widget documentation but i only see how to add text to a list based widget.
Does it's possible to make more advanced widgets? I would like to add a schedules widget, showing the day name and a few images on it but i can't find any examples or methods to do this.
Thanks

index.html does not load when using Cordova Lib 4.0.1.+ in iOS

From what I can tell this is because of Cordova changes to CDVUIWebViewNavigationDelegate.m::shouldStartLoadWithRequest
https://github.com/apache/cordova-ios/blob/f75bf67438257132e739238ed579d73271b3a716/CordovaLib/Classes/Private/Plugins/CDVUIWebViewEngine/CDVUIWebViewNavigationDelegate.m

A potential fix might be to change the value returned by NativeHost.mm's shouldOverrideLoadWithRequest:navigationType method

Hello.

I want to use FMDB Library but i don't know how to include it, is this possible?.

Thanks.

Hi,

Is it possible to add a button to the title bar? I've only been able to add buttons to the bottom of the page.

var page = new ace.Page(); var commandBar = new ace.CommandBar(); var appBarButton = new ace.AppBarButton(); appBarButton.setLabel("test"); commandBar.getPrimaryCommands().add(appBarButton); page.setCommandBar(commandBar); page.setTitle("Title"); page.setContent(ace.getHostWebView()); ace.getHostPage().setContent(page);

Hi guys,

What do you think about use WebGL/Canvas with this plugin?

See my example using Ionic Framework: http://market.ionic.io/plugins/ionphaser

Regards, Nicholls

When building with Xcode 7.3 I get the following error after I add the plugin to a project:

**/Plugins/cordova-plugin-ace/WebView.mm:48:11: error: cannot initialize an exception object of type
      '<pseudo-object type>' with an rvalue of type 'NSString *'
    throw error.description;

• cordova-ios 3.9.2 or cordova-ios 4.1.1
• cordova-plugin-ace 0.0.14

First, thumbs up for this project! It looks like magic :) I also like that it can potentially make a lot of cordova plugins obsolete (thinking of the device plugin) when you can now have very simple snippets only to directly call native API.

And that brings me to the biggest issue I see at the moment when looking at the code. Since all native calls are async they need to be nested in the default nodejs callback pattern. However the Promise pattern can achieve much better read-ability (if done right).

Do you think this project could be promisified somehow?

The added functions to the array object shouldn't be enumerable as they may break other plugins that enumerates all properties in an array.

Steps to reproduce the issue:

var tempArray = [1,2,3];
for(var i in tempArray){
   console.log(tempArray[i])
}

Expected result:
[Log] 1 [Log] 2 [Log] 3

Result:

[Log] 1
[Log] 2
[Log] 3
[Log] function () {
    ...
}
[Log] function (index) {
   ...
}
[Log] function (item) {
   ...
}

Fix:
I've added this to my app to resolve this issue.

if(Array.prototype.peek){
  Object.defineProperty(Array.prototype, "peek", { 
    enumerable  : false
  });
}

if(Array.prototype.removeAt){
  Object.defineProperty(Array.prototype, "removeAt", { 
    enumerable  : false
  });
}

if(Array.prototype.remove){
  Object.defineProperty(Array.prototype, "remove", { 
    enumerable  : false
  });
}

Hi man, about the documentation... This plugin support Crosswalk project? 👯

Hi,

Does Ace work with phonegap build ? In special for the native widget.

Sorry, I haven't seen a forum where I can ask this

Hello!

I'm experimenting with Ace at the moment, specifically I'm trying to recreate the cordova in app browser. I took some inspiration from the examples/WithPlugins/InAppBrowser project. Also I saw that Ace provides its own WebView control. I'm running into problems with the latter though.

• Android 4.4 and 6.0 (Genymotion)
• cordova-android 4.1.1
• cordova-plugin-ace 0.0.14

I get the following error when trying to initialize the WebView using JavaScript:

 var webview = new ace.WebView();

D/Ace     ( 2818): Caught exception: java.lang.RuntimeException: Unable to find a class named 'Windows.UI.Xaml.Controls.WebView'
D/Ace     ( 2818):  at run.ace.IncomingMessages.create(IncomingMessages.java:50)
D/Ace     ( 2818):  at run.ace.NativeHost$2.run(NativeHost.java:234)
D/Ace     ( 2818):  at android.os.Handler.handleCallback(Handler.java:733)
D/Ace     ( 2818):  at android.os.Handler.dispatchMessage(Handler.java:95)
D/Ace     ( 2818):  at android.os.Looper.loop(Looper.java:136)
D/Ace     ( 2818):  at android.app.ActivityThread.main(ActivityThread.java:5001)
D/Ace     ( 2818):  at java.lang.reflect.Method.invokeNative(Native Method)
D/Ace     ( 2818):  at java.lang.reflect.Method.invoke(Method.java:515)
D/Ace     ( 2818):  at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:785)
D/Ace     ( 2818):  at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:601)
D/Ace     ( 2818):  at dalvik.system.NativeStart.main(Native Method)
I/chromium( 2818): [INFO:CONSOLE(310)] "Error in Error callbackId: NativeHost1388986910 : Error: Native error: java.lang.RuntimeException: Unable to find a class named 'Windows.UI.Xaml.Controls.WebView'

I am trying to call the public void onCreate(Bundle savedInstanceState) method using plugin cordova-plugin-ace but I am getting the run time exceptions..
cordova.js:314 Uncaught Error: Native error: java.lang.RuntimeException: Error in FullscreenVlcPlayer.onCreate: java.lang.NullPointerException: Attempt to invoke virtual method 'android.content.Context android.content.Context.getApplicationContext()' on a null object reference at run.ace.Utils.invokeMethodWithBestParameterMatch(Utils.java:378) at run.ace.Utils.invokeMethod(Utils.java:253) at run.ace.IncomingMessages.invoke(IncomingMessages.java:214) at run.ace.NativeHost$2.run(NativeHost.java:242) at android.os.Handler.handleCallback(Handler.java:739) at android.os.Handler.dispatchMessage(Handler.java:95) at android.os.Looper.loop(Looper.java:135) at android.app.ActivityThread.main(ActivityThread.java:5930) at java.lang.reflect.Method.invoke(Native Method) at java.lang.reflect.Method.invoke(Method.java:372) at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:1405) at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:1200)

Following is my angularJs code for invoking the Oncreate method.

 if (window.ace.platform == "Android"){
                var canvas = new window.ace.Canvas();
                var bundle = new ace.NativeObject("android.os.Bundle");
                var obj = new ace.NativeObject("FullscreenVlcPlayer");
                obj.invoke("onCreate",bundle );
                canvas.getChildren().add(obj);


```     var popup = new ace.Popup();
                popup.setPosition(50, 20);
                popup.setRect({x: 50, y: 20, width: 200, height: 200});
                popup.setContent(obj);

       }

`
Following is my java class.
FullscreenVlcPlayer.java
`

public class FullscreenVlcPlayer extends Activity implements  SurfaceHolder.Callback, IVideoPlayer {
        private  String              urlToStream;
        private LinearLayout        vlcContainer;
        private SurfaceView         mSurface;
        private SurfaceHolder       holder;
        private FrameLayout         vlcOverlay;
        private ImageView           vlcButtonPlayPause;
        private Handler             handlerOverlay;
        private Runnable            runnableOverlay;
        private Handler             handlerSeekbar;
        private Runnable            runnableSeekbar;
        private SeekBar             vlcSeekbar;
        private TextView            vlcDuration;
        private TextView            overlayTitle;
        private LibVLC              libvlc;
        private int                 mVideoWidth;
        private int                 mVideoHeight;
        private final static int    VideoSizeChanged = -1;   
        @Override
        public void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);

            urlToStream = "rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mov";// b.getString("url", null);

        getActionBar().hide();

            // SETUP THE UI
            try{
                getActionBar().hide();
                setContentView(R.layout.activity_fullscreen_vlc_player);
                }catch(Exception e){
                Log.d("TAG", "error");
            }

            // VLC
                vlcContainer = (LinearLayout) findViewById(R.id.vlc_container);
                mSurface = (SurfaceView) findViewById(R.id.vlc_surface);


            // OVERLAY / CONTROLS
                vlcOverlay = (FrameLayout) findViewById(R.id.vlc_overlay);
                vlcButtonPlayPause = (ImageView) findViewById(R.id.vlc_button_play_pause);
                vlcSeekbar = (SeekBar) findViewById(R.id.vlc_seekbar);
                vlcDuration = (TextView) findViewById(R.id.vlc_duration);

                overlayTitle = (TextView) findViewById(R.id.vlc_overlay_title);
          //  overlayTitle.setText("rtsp://172.22.68.96:21212/Stream-2");

            // AUTOSTART
                playMovie();

        }
    }


This is not full code there are my more method but I cant put all.
Please give me some Idea How to call any Class onCreate method from plugin In angular Js.

Sorry if I totally missed something fundamental of Ace and have done something really wrong here. But as far I can't see that the DatePicker nor the TimePicker UI component works as expected on iOS?

Problem 1:
No time/date is reported back when time is changed.

Steps to reproduce:
Run the following code:

var p = new ace.Popup();
var stackPanel = new ace.StackPanel()
var dt = new ace.DatePicker();
stackPanel.getChildren().add(dt);
p.setContent(stackPanel)
p.show();

Then change the the date in the date picker.

Result:
dt.getDate() now returns "Invalid date".

After trying to figure out why i think this may be because no date is reported back from the native component.

In src/ios/DatePicker.mm it seams to me like nil is sent back to the JavaScript and not the actual date as it is in src/android/framework/DatePicker.java

src/ios/DatePicker.mm

    if (_dateChangedHandlers > 0) {
        [OutgoingMessages raiseEvent:@"datechanged" handle:_handle eventData:nil];
    }

src/android/framework/DatePicker.java

 void raiseDateChangedEvent(String dateString) {
    if (_dateChangedHandlers > 0) {
      OutgoingMessages.raiseEvent("datechanged", _dateChangedHandle, dateString);
    }
  }

Problem 2
As far as I can see the .setDate/.setTime doesn't work either.

Steps to reproduce:
Run the following code:

var p = new ace.Popup();
var stackPanel = new ace.StackPanel()
var dt = new ace.DatePicker();
stackPanel.getChildren().add(dt);
p.setContent(stackPanel)
p.show();
var d = new Date();
d.setDate(d.getDate()+10)
dt.setDate(d)

Result:
The date in the date picker is showing wrong date.

Don't have a clue why this doesn't work.

Hi guys!

Is possible integrate Xamarin with Ionic Framework using this plugin? 🌊

Regards, Nicholls

Hello,

i want to use aceplugin to acces the java files in ionic1. I have added the plugin this way: ionic plugin add cordova-plugin-ace. But how can i use now ace?
Hier is my controller:

.controller('MyCtrl', function ($scope, $ionicPlatform) {
        $ionicPlatform.ready(function () {
            $scope.a = 'a';
            // Vary the string based on the current platform
            var className = ace.valueOn({
                android: "ForAce"
                , ios: "MyAlgorithm"
            });
            // Create an instance of the native class
            var obj = new ace.NativeObject(className);
            $scope.my_var = obj.invoke("foo");

        });

after running ionic serve --lab i see in the browser's console error:ReferenceError: ace is not defined. Do i need to inject somewhere the ace plugin ?

thank you!

ex. Android 4.0

I really like the platform and how it's a cordova plugin so one can add it to an already existing app.

However, the logo really does Ace a huge injustice!

You need something more appealing. I do logo designs and I'm willing to do one for Ace. Let me know.

P.S. I know this is not the best place to raise this. But I think it's important and it is a contribution.

It appears the correct path is Classes/Public/CDVViewController.h

However, even after making this switch, project fails to initialize (using Ionic + Cordova native 4.0.1)

05-06 20:18:14.995 12707 12707 I chromium: [INFO:CONSOLE(310)] "Error in Error callbackId: NativeHost1158829928 : Error: Native error: java.lang.RuntimeException: Error setting FrameLayout's UserControl.Content to Windows.UI.Xaml.Controls.Page{d535279 V.E...... ......I. 0,0-0,0}
05-06 20:18:14.995 12707 12707 I chromium:      at run.ace.IncomingMessages.set(IncomingMessages.java:206)
05-06 20:18:14.995 12707 12707 I chromium:      at run.ace.NativeHost$2.run(NativeHost.java:239)
05-06 20:18:14.995 12707 12707 I chromium:      at android.os.Handler.handleCallback(Handler.java:739)
05-06 20:18:14.995 12707 12707 I chromium:      at android.os.Handler.dispatchMessage(Handler.java:95)
05-06 20:18:14.995 12707 12707 I chromium:      at android.os.Looper.loop(Looper.java:148)
05-06 20:18:14.995 12707 12707 I chromium:      at android.app.ActivityThread.main(ActivityThread.java:5422)
05-06 20:18:14.995 12707 12707 I chromium:      at java.lang.reflect.Method.invoke(Native Method)
05-06 20:18:14.995 12707 12707 I chromium:      at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:726)
05-06 20:18:14.995 12707 12707 I chromium:      at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:616)
05-06 20:18:14.995 12707 12707 I chromium: Caused by: java.lang.RuntimeException: Cannot set title on the main page in Android unless you set <preference name="ShowTitle" value="true"/> in config.xml.
05-06 20:18:14.995 12707 12707 I chromium:      at run.ace.TabBar.setTitle(TabBar.java:39)
05-06 20:18:14.995 12707 12707 I chromium:      at Windows.UI.Xaml.Controls.Page.updateTitle(Page.java:67)
05-06 20:18:14.995 12707 12707 I chromium:      at Windows.UI.Xaml.Controls.Page.processBars(Page.java:75)
05-06 20:18:14.995 12707 12707 I chromium:      at Windows.UI.Xaml.Controls.ViewGroupHelper.setProperty(ViewGroupHelper.java:51)
05-06 20:18:14.995 12707 12707 I chromium:      at run.ace.IncomingMessages.set(IncomingMessages.java:191)
05-06 20:18:14.995 12707 12707 I chromium:      ... 8 more

Already found this thread on StackOverflow but that does not help me finding the solution. I tried uppercase/lowercase ShowTitle in the config.xml, both in android specific config and global config. It just won't work. Do you have any idea?

Is it possible to start my custom android activity through Ace?
If yes, how do we achieve it?

I've tried several days but can't achieve that.

Thanks.

Hi guys,

Hope you are doing all well !

I was testing your great repo, and I was wondering if there is any example integrating ACE+Unity3D in a native view. That would be awesome.

More widely, I was wondering if the Ace Plugin would be suitable to mix such kind of integration without having too much memory leaks due to the bridging.

But definitely, it would be great to get more advanced examples for ACE.

Thanks in advance for your reply or point of view :-).

Cheers,
Luc

Hi! I'm trying to integrate this into a Meteor application. I'm using a beta of their new 1.3 release which has upgraded their implementation to only support the versions of Cordova listed in the description.

When I try to add this plugin to a Meteor 1.3 app, I get a fatal error:

$ meteor run ios --port 4000
[[[[[ ~/dev/meteor/test-app ]]]]]

=> Started proxy.
% Failed to install 'cordova-plugin-ace':TypeError: Uh oh!
Object [object Object] has no method 'parse'
    at handlers.js-module.install (/home/dir/dev/meteor/test-app/.meteor/local/cordova-build/platforms/android/cordova/lib/pluginHandlers.js:142:66)
    at Object.ActionStack.process (/home/dir/dev/meteor/test-app/.meteor/local/cordova-build/platforms/android/cordova/node_modules/cordova-common/src/ActionStack.js:56:25)
    at Api.addPlugin (/home/dir/dev/meteor/test-app/.meteor/local/cordova-build/platforms/android/cordova/Api.js:205:20)
    at handleInstall (/home/dir/.meteor/packages/meteor-tool/.1.1.13-beta.11.1dw6vym++os.osx.x86_64+web.browser+web.cordova/mt-os.osx.x86_64/dev_bundle/lib/node_modules/cordova-lib/src/plugman/install.js:601:6)
    at /home/dir/.meteor/packages/meteor-tool/.1.1.13-beta.11.1dw6vym++os.osx.x86_64+web.browser+web.cordova/mt-os.osx.x86_64/dev_bundle/lib/node_modules/cordova-lib/src/plugman/install.js:385:28
    at _fulfilled (/home/dir/.meteor/packages/meteor-tool/.1.1.13-beta.11.1dw6vym++os.osx.x86_64+web.browser+web.cordova/mt-os.osx.x86_64/dev_bundle/lib/node_modules/q/q.js:787:54)
    at self.promiseDispatch.done (/home/dir/.meteor/packages/meteor-tool/.1.1.13-beta.11.1dw6vym++os.osx.x86_64+web.browser+web.cordova/mt-os.osx.x86_64/dev_bundle/lib/node_modules/q/q.js:816:30)
    at Promise.promise.promiseDispatch (/home/dir/.meteor/packages/meteor-tool/.1.1.13-beta.11.1dw6vym++os.osx.x86_64+web.browser+web.cordova/mt-os.osx.x86_64/dev_bundle/lib/node_modules/q/q.js:749:13)
    at /home/dir/.meteor/packages/meteor-tool/.1.1.13-beta.11.1dw6vym++os.osx.x86_64+web.browser+web.cordova/mt-os.osx.x86_64/dev_bundle/lib/node_modules/q/q.js:509:49
    at flush (/home/dir/.meteor/packages/meteor-tool/.1.1.13-beta.11.1dw6vym++os.osx.x86_64+web.browser+web.cordova/mt-os.osx.x86_64/dev_bundle/lib/node_modules/q/q.js:108:17)
    at process._tickCallback (node.js:448:13)
=> Errors executing Cordova commands:

   While adding plugin [email protected] to Cordova project:
   TypeError: Uh oh!
   Object [object Object] has no method 'parse'
   at handlers.js-module.install
   (/home/dir/dev/meteor/test-app/.meteor/local/cordova-build/platforms/android/cordova/lib/pluginHandlers.js:142:66)
   at Object.ActionStack.process
   (/home/dir/dev/meteor/test-app/.meteor/local/cordova-build/platforms/android/cordova/node_modules/cordova-common/src/ActionStack.js:56:25)
   at Api.addPlugin
   (/home/dir/dev/meteor/test-app/.meteor/local/cordova-build/platforms/android/cordova/Api.js:205:20)
   at handleInstall
   (/home/dir/.meteor/packages/meteor-tool/.1.1.13-beta.11.1dw6vym++os.osx.x86_64+web.browser+web.cordova/mt-os.osx.x86_64/dev_bundle/lib/node_modules/cordova-lib/src/plugman/install.js:601:6)
   at
   /home/dir/.meteor/packages/meteor-tool/.1.1.13-beta.11.1dw6vym++os.osx.x86_64+web.browser+web.cordova/mt-os.osx.x86_64/dev_bundle/lib/node_modules/cordova-lib/src/plugman/install.js:385:28
   at _fulfilled
   (/home/dir/.meteor/packages/meteor-tool/.1.1.13-beta.11.1dw6vym++os.osx.x86_64+web.browser+web.cordova/mt-os.osx.x86_64/dev_bundle/lib/node_modules/q/q.js:787:54)
   at self.promiseDispatch.done
   (/home/dir/.meteor/packages/meteor-tool/.1.1.13-beta.11.1dw6vym++os.osx.x86_64+web.browser+web.cordova/mt-os.osx.x86_64/dev_bundle/lib/node_modules/q/q.js:816:30)
   at Promise.promise.promiseDispatch
   (/home/dir/.meteor/packages/meteor-tool/.1.1.13-beta.11.1dw6vym++os.osx.x86_64+web.browser+web.cordova/mt-os.osx.x86_64/dev_bundle/lib/node_modules/q/q.js:749:13)
   at
   /home/dir/.meteor/packages/meteor-tool/.1.1.13-beta.11.1dw6vym++os.osx.x86_64+web.browser+web.cordova/mt-os.osx.x86_64/dev_bundle/lib/node_modules/q/q.js:509:49
   at flush
   (/home/dir/.meteor/packages/meteor-tool/.1.1.13-beta.11.1dw6vym++os.osx.x86_64+web.browser+web.cordova/mt-os.osx.x86_64/dev_bundle/lib/node_modules/q/q.js:108:17)
   at process._tickCallback (node.js:448:13)

Are these versions of Cordova unsupported right now?

Hey there, I'm sorry if this isn't the right place to post these types of questions, but didn't know how else to get in touch and am wanting to do some things that aren't yet in the docs.

1. In the styling doc page (http://microsoft.github.io/ace/docs/styling/) you mention some of the “common visual properties”. I was wondering if there was a comprehensive list anywhere? We’re interested in being able to implement common CSS styling, things like: apply background images to containers, rounded-edges (border-radius), add padding to backgrounds, apply borders, etc.
2. Is it possible to add dynamic content to the page - for example, a timer element which continuously counts up? This is the one we’re using currently in HTML, but seek to implement a similar on in Ace: https://siddii.github.io/angular-timer/

Thanks for the great work you’ve done on Project Ace! Looking forward to hearing from you.

Hello,

Ace is pretty cool!! I try to use it to build an customized hybrid app,but when I and add an widget that defined in external jar into xaml

<StackPanel
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:ace="using:run.ace"
    xmlns:adx="using:android.support.design.widget" >

    <adx:TabLayout ></adx:TabLayout>

</StackPanel>

and android_sample.xml

<android.support.design.widget.TabLayout android:layout_width="match_parent" android:layout_height="60px">
        <android.support.design.widget.TabItem
            android:layout_width="40px"
            android:layout_height="match_parent"
            android:text="aaaa"/>
        <android.support.design.widget.TabItem
            android:layout_width="40px"
            android:layout_height="match_parent"
            android:text="bbbbb"/>
        <android.support.design.widget.TabItem
            android:layout_width="40px"
            android:layout_height="match_parent"
            android:text="cccc"/>
    </android.support.design.widget.TabLayout>

and add dependencies into build.gradle

dependencies {
    // SUB-PROJECT DEPENDENCIES START
    debugCompile project(path: 'CordovaLib', configuration: 'debug')
    releaseCompile project(path: 'CordovaLib', configuration: 'release')
    // SUB-PROJECT DEPENDENCIES END
    compile 'com.android.support:appcompat-v7:24.1.1'
    compile 'com.android.support:support-v4:24.1.1'
    compile 'com.android.support:design:24.1.1'
}

but in both file, I get the runtime error:

Exception: Native error: java.lang.RuntimeException: Error in android.support.design.widget.TabLayout constructor: java.lang.RuntimeException: Failed to resolve attribute at index 0

    at run.ace.IncomingMessages.create(IncomingMessages.java:75)

    at run.ace.NativeHost$2.run(NativeHost.java:235)

    at android.os.Handler.handleCallback(Handler.java:739)

    at android.os.Handler.dispatchMessage(Handler.java:95)

    at android.os.Looper.loop(Looper.java:135)

    at android.app.ActivityThread.main(ActivityThread.java:5327)

    at java.lang.reflect.Method.invoke(Native Method)

    at java.lang.reflect.Method.invoke(Method.java:372)

    at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:1125)

    at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:809)


See http://ace.run/docs/errors for help.

does ace supports external library and how to do it?

Thanks!

Make sure the experience for the TypeScript developer is good.

For programmatically defining rows and columns.

An attempt to do this:

new ace.WebView();

throws an error:

 java.lang.RuntimeException: Unable to find a class named 'Windows.UI.Xaml.Controls.WebView'
                                                           at run.ace.IncomingMessages.create(IncomingMessages.java:50)
                                                           at run.ace.NativeHost$2.run(NativeHost.java:234)
                                                           at android.os.Handler.handleCallback(Handler.java:739)
                                                           at android.os.Handler.dispatchMessage(Handler.java:95)
                                                           at android.os.Looper.loop(Looper.java:148)
                                                           at android.app.ActivityThread.main(ActivityThread.java:5417)
                                                           at java.lang.reflect.Method.invoke(Native Method)
                                                           at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:726)
                                                           at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:616)

min sdk level is 19
target sdk is 22
cordova version is 5.4.0

(My goal is to make a native WebView, insert it somewhere, and use it in the app)

Thank you for your attention!

Just started a new Cordova project to test Ace and had issues building the project for iOS.

• cordova create hello
• cordova platform add ios
• cordova plugin add cordova-plugin-ace
• cordova build ios

Error: Error code 65 for command: xcodebuild...

Then I tried to run the project directly from xcode and noticed the following error.

I then changed the import from:

#import "../../../CordovaLib/Classes/CDVViewController.h"

to:

#import "../../../CordovaLib/Classes/Public/CDVViewController.h"

This fixed the build.

How would I go about accessing the cordova object that is typically provided when you create a cordova plugin? Is there any way to access that or the running activity via native android code?

Semi unrelated, but is the native code executed on its own thread or the UI thread?

I tried to use this plugin (with zero custom configuration and out of the box) with a cordova app I already have, it breaks the app and Cordova can only opens about:blank and index.html is not accessable. I see no error messages in system log for the device. As soon as i remove this plugin the app starts working. This is specific ONLY to iOS.

Is anyone else facing this issue ?

EDIT : Confirmed on fresh cordova starter app too. Adding this plugin leads to cordova opening up about:blank instead of the url to index.html

Edits to list solutions found online which did not work :

EDIT : Adding <allow-navigation href="*" /> to config.xml did not work

EDIT : Fixed in version 0.0.16

There is an issue in the ace framework code when using the raiseEvent() function. If one of the event handlers makes a call back into removeEventListener() (a common pattern when using one-time event triggers), the next event handler will be skipped due to the way raiseEvent is looping through the list.

Here's an example that shows the issue:

    // An event handler that should trigger only on the first navigate
    var oneTimeCallback = function () {
        console.log("Remove me from the event handlers now that I've been called")
        ace.removeEventListener("navigated", oneTimeCallback);
    };
    ace.addEventListener("navigated", oneTimeCallback);

    // Also add an event handler that should trigger on *every* navigate
    ace.addEventListener("navigated", function () {
        console.log("This will not be hit on the first navigate!");
    });

Hi guys,

Do you want add some examples using my Ionic 1.x starter template with ACE?

Market: http://market.ionic.io/starters/ionic-starter-template
GitHub repo: https://github.com/jdnichollsc/Ionic-Starter-Template

Thanks in advance, Nicholls

Hello @adnathan,
I believe your plugin is good at native objects manipulation (That is the reason I'm using it).
So, I'm curious if there is a way to say that some native object is not needed and can be garbage collected.

My situation (iOS):
I instancinate a Popup object, add AceWebView as his child, then I place a Popup object somewhere with show method on Popup object. When the user is done, he/she clicks 'close' button, then I invoke hide method on Popup object.

So that, if user does all this stuff several times (over 15 times), I have too many allocated WebViews. Then my app is killed... Likely, the link to AceWebView is stored somewhere in plugin, thus, Automatic reference counting mechanism can't deallocate memory for these unused WebViews

I'd be glad if there is a way to solve my problem.

Thank You in advance!

(I solved similar problem in Android by invoking some android.webkit.WebView methods to destroy its internal state and stuff like that)

Hello!

First off - let me thank everyone involved in this project. It's amazing! The universal native bridge portion alone is a golden egg.

I'm building cordova apps with Ember, and was seeing some strange breakages that are being caused by the javascript prototype extensions that ace uses colliding with some behavior of Ember. I was able to temporarily work around them for now by simply dropping Extensions.js from the cordova_plugins.js manifest (not using any features that depend on the extensions)

Now, I realize that this problem is not a fault of ace by itself - Ember's prototype extensions are ..extensive.. (wayy more evil there than in Extensions.js), and we're on the path towards removing them from our projects entirely (Ember provides alternate ways to use the utility functions).

After browsing the code, it doesn't seem like these extensions are used in many places, and in some cases might be there to simply provide a more "java-like" syntax (though I could be mistaken).

tldr;
I wanted to see how the maintainers of this project would feel about moving away from JS prototype extensions. I'd be happy to contribute a branch for review, if "no extensions" sounds like a desirable goal for maximal compatibility with various projects.

In the meantime, I'll be profiling the actual conflicts more in-depth (sorry for the lack of details!), and perhaps starting to tinker with the no-extensions refactors, but I don't want to be maintaining a personal fork if you all disagree (would probably approach it from the ember side in that case, since a supported path already exists).

Thanks for reading, and thanks again for this project!

In my item, I have assembled the cordova plugin that works a treat. Eventually I have successfully achieved the way of writing iOS code at the part of JS. However,I find a serious problem that "Call native code " does not realize the callback from native to JS. Sincerely I wish your company support us in technology.