{"id":671,"date":"2016-02-18T07:00:00","date_gmt":"2016-02-18T07:00:00","guid":{"rendered":"https:\/\/blogs.msdn.microsoft.com\/premier_developer\/2016\/02\/18\/leveraging-native-ui-in-apache-cordova-apps-using-project-ace\/"},"modified":"2019-03-07T13:04:57","modified_gmt":"2019-03-07T20:04:57","slug":"leveraging-native-ui-in-apache-cordova-apps-using-project-ace","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/premier-developer\/leveraging-native-ui-in-apache-cordova-apps-using-project-ace\/","title":{"rendered":"Leveraging Native UI in Apache Cordova Apps Using Project Ace"},"content":{"rendered":"

This article comes to us from Premier Developer consultant <\/em>Wael Kdouh<\/em><\/a>.<\/em><\/p>\n

When it comes to Cross Platform Mobile Development there are two options that stand out today. The first option is Xamarin<\/a> which allows users to use C# and XAML<\/a> to develop once and deploy everywhere natively. The second option is Apache Cordova<\/a> which allows users to use their web skills (JS, CSS, and HTML) to develop once and deploy a native shell everywhere that hosts a WebView.<\/p>\n

The Need for Native UI<\/h4>\n

Whereas Apache Cordova resonates a lot with teams that utilize their web skills to build Cross Platform Mobile Development, there are many instances where people desire to mix native UI controls with the Cordova WebView capabilities. Some typical scenarios for using Native UI include:<\/p>\n

Case 1<\/b>: Utilizing an existing UI component that the development team doesn\u2019t want to rewrite in HMTL\/CSS\/JS.<\/p>\n

Case2<\/b>: Using a specific UI animation that is created with a tool like Xcode<\/a> interface builder which the team wants to integrate with the rest of the Apache Cordova application.<\/p>\n

Project Ace<\/h4>\n

Ace<\/a> is a prototype to enable mixing native UI with Cordova. It can be included in Apache Cordova project as a plugin which means it can easily be integrated into your existing Ionic or Cordova app development workflow. Things like attaching debuggers to the WebView, or live-reload continue to work like before.<\/p>\n

What can you do with Project Ace?<\/h5>\n

The following combinations are possible with Ace:<\/p>\n

\"\"<\/p>\n

 <\/p>\n

\"\"<\/p>\n

\n

 <\/p>\n

\"\"<\/p>\n

\n

\"\"<\/p>\n

\n

 <\/p>\n

\"\"<\/p>\n

\n

\"\"<\/p>\n

 <\/p>\n

Ace also supports Android specific capabilities like floating and widgets.<\/p>\n

\"\"\"\"<\/p>\n

\n

Ace exposes different ways of building raw native controls directly:<\/p>\n

\"\"<\/p>\n

In addition to native UI, Ace also enables calling native APIs using JavaScript without having to write a plugin to do the job. The code could be your code, third party code, as well as platform APIs. In addition, you can directly add Java, Objective-C, and Android resources to your Cordova project ( by adding a native folder which includes platform specific code) so you can easily leverage them. Ace provides a reflection-like API to achieve this.<\/p>\n

\"\"<\/p>\n

\"\"<\/p>\n

\"\"<\/p>\n

\"\"<\/p>\n

 <\/p>\n

Next Steps<\/h4>\n

Ace is still a prototype and will be refined based on the feedback from developers. If you think this is an interesting scenario for your app or have questions about the idea, you can get in touch with the product team at panarasi@microsoft.com<\/a> or open issues on the github page of Project Ace<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"

This article comes to us from Premier Developer consultant Wael Kdouh. When it comes to Cross Platform Mobile Development there are two options that stand out today. The first option is Xamarin which allows users to use C# and XAML to develop once and deploy everywhere natively. The second option is Apache Cordova which allows […]<\/p>\n","protected":false},"author":581,"featured_media":37840,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[185,190,71,311,98,88],"class_list":["post-671","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-permierdev","tag-cordova","tag-cross-platform","tag-mobile-development","tag-project-ace","tag-wael-kdouh","tag-xamarin"],"acf":[],"blog_post_summary":"

This article comes to us from Premier Developer consultant Wael Kdouh. When it comes to Cross Platform Mobile Development there are two options that stand out today. The first option is Xamarin which allows users to use C# and XAML to develop once and deploy everywhere natively. The second option is Apache Cordova which allows […]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/posts\/671","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/users\/581"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/comments?post=671"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/posts\/671\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/media\/37840"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/media?parent=671"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/categories?post=671"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/tags?post=671"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}