Coming from the js/cordova based cross-platform universe, I am digging into flutter lately. So I wonder about the options to make use of the various js libraries in flutter directly. More concrete I am interested in using the openlayers library in flutter to create a versatile map view with various functions for drawing and editing. So I wonder what options are there to include it.
So far I see two major ways:
Using a webview:
Even though there is no native webview widget yet in flutter there is a plugin for this (https://github.com/dart-flitter/flutter_webview_plugin). The main advantage I see here is to use the openlayers library "as it is", however the plugin is in kinda early state and I could not see a way to establish communication between flutter and js functions in the webview yet. Futhermore (this is just my assumption) using the webview is probably slower than creating a proper widget with dart code.
Creating a custom widget:
I have seen there are ways to convert js code direcly to dart, using package js (https://pub.dartlang.org/packages/js) and for typings js_facade_gen (https://github.com/dart-lang/js_facade_gen) like it is done with the chartjs library (https://github.com/google/chartjs.dart/). So similar to this it should be possible to automatically convert the openlayers lib to dart. The main issue however is to integrate this into flutter, since openlayers is using a html5 canvas if I'm correct. Also the chartjs.dart package does not giva any hints how to include it in a flutter app. I've also seen there is a leaflet plugin (https://github.com/apptreesoftware/flutter_map) which is creating their own widget, however they seem to rewrite the code by hand (?), which is for openlyers with 20.000 lines of code not really an option atm.
I'm aware that this is not the best question format for this site, nonetheless I hope someone has some advice or hints on where to start or how to implement this, especially for the 2nd option - the first one is more straight forward. Or if you can think of a third option, go ahead please, I'm grateful for any clues.
The only way to make use of JS in Flutter is using WebView.
Dart compiles to JS only for browser applications, for Flutter it compiles to native machine code.
convert js code direcly to dart, using package js
package JS doesn't convert JS, it just creates proxies for JS functions to be able to call them from Dart, but that is also only supported in Dart web applications.
Related
I am not a mobile developer, hence please excuse me for incorrect assumptions, if any
I have a library which users want to integrate in their native mobile apps. It is written in JavaScript, but I don't want to rewrite for Android and iOS. Hence what I need is some way that this JavaScript library can be used in native apps. Following two ways look promising:
WebViews: The JS files would reside locally and webview will be used to run them
NativeScript: NativeScript allows you to create native apps from JavaScript. But I didn't find anything which suggests that I can create native library too. Can this be used in any way?
You might be looking for React Native
It is a Javascript framework, and when you write your code, most of the time, you can use the same code for iOS and Android. It is a relatively new framework, but can be very powerful for rapid cross-development, but (obviously) has its trade-offs.
Is there an easy way to get the javascript functionality out of React Native without the view portion? I looked through the source and found what seems to be the relevant pieces (namely the cxxreact package), but am having a hard time following how it fits together.
I am trying to run javascript in a native app without a webview. I've found J2V8 and AndroidJSCore, but they seem like they're going to require a lot of work to make generic enough to run arbitrary javascript.
I believe React Native already solved this (especially surrounding api calls) and would like to reuse that portion. Is there anyone who has done something similar or can point me to something more full-featured than just J2V8 or AndroidJSCore?
I want to develop an android application which is to integrate a visualization from d3.js. Is it possible? Can anyone explain how to do this.
D3 is a library geared towards manipulating data and rendering it into an html DOM –– either via SVG, or straight up divs or perhaps a canvas. Of course there also needs to be a JavaScript engine that can run the code. Browsers provide all those things; native apps provide none of them out of the box.
However, there are ways to build native apps that wrap a javascript engine and DOM. PhoneGap is a commonly used framework for doing so. It essentially lets you develop as if things are going to run in a browser, but they're packaged into a native app. There's a performance hit to that: It won't run as fast as a native app, and often not even as fast as the same code would run in a mobile browser. But from the user's perspective, it's installed and launched just like any native app.
That's AFAIK the only way to use d3 in a native app.
I am currently evaluating different approaches / solutions to call C++ functions from JavaScript code embedded in an HTML page. The application must be run on Ubuntu Server 12.04 LTS.
I am not an expert in Linux based development. This is the first time I am trying to work on something to interface between JavaScript and C++ code.
The C++ code basically resides in the .so files ( dynamic libraries) that would provide interface methods to access certain hardware and file system. The GUI needs to be in HTML and I am searching for different solutions that are possible that can call C++ from HTML. I searched and ended up deciding to try 2 approaches, both using the WebKit engine.
Approach 1: Using Qt 5.0.2 Webkit Bridge - the WebView control
The GUI framework will be on Qt framework, the main application window will contain a webview control that would run an HTML code which in turn contains the JavaScript code.
The interface between Web page and C++ is done using the addToJavaScriptWindowObject() function.
I created a sample application and tested this solution and it seems to works fine.
Approach 2: Using GTK+ WebKit WebView
I downloaded and installed the GTK 3.0 library.
I got the webkitgtk 2.0.1 and have installed it.
I have created a test application with GTK without webkit, it works well.
I am trying to create a webkit webview control using GTK.
When trying my Approach 1 with Qt, there was quite a good set of documentation and samples to do what I wanted to. But after starting with Approach 2 using GTK+, I feel am moving slower comparitively. I personally feel that the documentation part is not that straight forward for the kind of application I am trying to develop.
Other Approaches:
I also want to try to check if either using Applets (to call the .so files directly) or using the V8 JavaScript engine to interface between JavaScript and C++ are viable options(https://code.google.com/p/v8/)
I have tried the following resources:
http://webkitgtk.org/
http://www.webkit.org/
https://live.gnome.org/WebKitGtk/ProgrammingGuide/Tutorial
I want to know how exactly to do this interface part of calling a C++ functions (in .so files) when a button is clicked in a HTML web page containing JavaScript. What kind of signal am I supposed to look for. If I am using a WebkitWebview control, how do I map a button click to a c++ function?
Can someone point me to the right direction?
I would really appreciate your time and knowledge.
Regards.
Webkit GTK 2 changed significantly in terms of API's. So I am not sure if this will work with Webkit GTK 2. However this will definitely work in Webkit GTK 1.* versions. Don't know anything about QT.
For your need of connecting html view with C/C++ side of the world, you can use two approaches. Please take a look at function webkit_dom_event_target_add_event_listener. There is example at https://live.gnome.org/WebKitGtk/ProgrammingGuide/Cookbook
Another approach you can take is to use alert on click of the button and send a string as information. On C side, you can hookup the alert listener and parse the message and decide what needs to be done. I have written lot of code in python which takes this approach since call mentioned above is not exposed to python.
I agree documentation is bit sparse for webkit gtk. However if you know how you can acomplish something in javascript, usually you can map the javascript DOM management and event calls to C side. This includes generating elements dynamically, managing events such onclick etc. You just have to dig through the header files and find matching call.
If you need to use C++ code or native applications in your web application you can try to create a service over the C++ code and access it throught a REST (for example) API.
You can use a common web application framework (Spring/Java, Django/Python, etc.) to develop your web application and use Apache Thrift to interface your library.
the best solution for you is g-xml it is a good solution by GAMA but sorry it is not free.
I'm creating a single page javascript webapp. If I want to make an app like this:
What is an ui package that could get me closest there?
Look into Ext-JS. It should be possible to desing the above webpage using it. Although its basically javascript but involves a not-ignorable learning curve. Though nowadays, they provide an awsesome documentation and you can get many basic examples on the web.