I am developping a mobile Codename One app (targeting Android for now, iOS then) that uses advanced camera features. Thus I need to use the native interface and implementation.
During the app lifecycle there is a need to release the camera (eg when the user switches from my app to another) which refers to onPause() in the Android world and to initialize the camera back again (eg when the user starts or goes back to my app) which referst to onCreate() in the ANdroid world.
So far when "pausing" and "resuming" my app I've used CN1 stop() and start() method from the main class where there I call a method from the native interface. But if you read the native GoogleMaps demo you'll see that they directly use onPause() and onResume() in the native implementation after adding a LifecycleListener during initialization.
Consequently which approach should be used for my next projects involving native interfaces ?
Any hint appreaciated!
Since this will probably apply to native implementations in other OS's I would just use stop()/start() and offer a method within my native implementation for pause/resume.
This will allow you to test that in the simulator, the more code you have on the Codename One side (as opposed to native) the easier it will be.
Related
I have this project where I have to code a website and ios and android apps.
I have to do this with a very limited team (basically myself). So I want to share as much code between those platforms, to avoid maintaining different codebases as much as possible.
I have come to consider flutter : the logic (and interaction with the backend) in dart can be compiled to both ios and android, and to javascript for the web site to call. I also like how the UI is built using flutter.
For the web site, I know there is flutter web that can be used to do a web app, but I want my website to feel like a web site more than a single page app. I have thought about using React+Gatsby to do the website's ui, while calling the dart compiled js for the logic. That would enable high page loading speed, good seo, while keeping the interactivity of a react app and the single codebase logic through dart to js compilation.
I am wondering if this seems like a good approach to you, and if not, how you would do it.
In this approach, I am wondering if it would be possible to embedded flutter web widgets inside of react js components, always in a concern of maintaining as low platform specific code as possible. I have not found any other way of doing this than embedding them into iframes, which does not seem like a good idea, or does it ?
Update
Flutter Web is now available in a stable version for production.
Below answer is relevant back to the time when question was asked.
Flutter Web not recommended
At the current date, I would recommend not to use Flutter Web for production as it's in Beta. The Flutter Team is still working on improving quality, performance and browser compatibility. You must be cautious about using it as you may run into bugs and some other complications.
Also, I believe that the community support for Flutter Web might be on a lower side as it's pretty new.
Limited browser support
Another factor which bugs me is that the Flutter web apps can run on limited browsers as of now which would affect the reach to your user base:
Chrome (mobile & desktop)
Safari (mobile & desktop)
Edge (mobile & desktop)
Firefox (desktop)
What would I prefer?
Well, although it might be a hassle to handle different codebases for mobile and web platforms, I would still prefer to stick with React JS as it's much stable with better browser & community support as opposed to Flutter Web.
Good luck with your app! :)
I am unaware of how to use Flutter widgets inside a React app. But to address your other concerns,
So I want to share as much code between those platforms, to avoid maintaining different codebases as much as possible.
Given no other restrictions, this leads to a single Flutter app for both web and native. For a team as small as three we still found it easier than having multiple projects.
The key factor in merging our initial projects to one was the notion of mobile browsers. In a mobile browser you website should reduce itself to the look of your mobile app, unless they have different purposes. And this automatically happens with Flutter projects if you derive your layout breakpoints from screen size. Otherwise you would code your same narrow design twice: in Flutter for native apps and in React for web.
Same goes for native apps for tablets in landscape mode. They call for a layout that resembles your desktop browser version, and you automatically get it with Flutter.
Also in web version you may have more tools than in a native app, just because your screen allows it. Naturally, you would code this logic in JS. But then you get an order to migrate this to native apps. Would you then replace your JS logic with Dart logic compiled to JS and embedded into frames? This is a messy road.
Lastly, think of Mac, Linux and Windows platforms that will come to Flutter soon. Should you ever need a desktop native app, you would want the same layout as with web.
I want my website to feel like a web site more than a single page app.
The difference in feeling between a website and a single page app lies mostly in state management and URL handling. You may do the following to reduce it:
Introduce URLs for your pages. By default, in Flutter every piece of action can happen under a single URL of example.com/#/. The window then feels fragile as there is no URL to copy and get back to. Flutter's Router API, released in Oct 2020, allows you to generate URLs on any change in your app's state and parse the state back from URL. If you do it right, then everything on your screen becomes a function of the URL, just like in traditional websites.
Use url_stragegy package for your URLs to be example.com/path rather than example.com/#/path which immediately feels fake.
I have not found any other way of doing this than embedding them into iframes, which does not seem like a good idea, or does it ?
No, it does not. Mostly because you get too narrow a channel of communication of messages between JS windows. How would you listen to Flutter's BLoC's stream in another frame? It would take too much boilerplate code. Also I cannot think of easy debugging process.
To me, Flutter Web still has drawbacks:
It takes awhile to load.
Many specific JS APIs are not implemented yet.
Many services you integrate with may not have Dart SDK, while having JS SDK. For instance, I struggled to get Ably working.
No search engine optimization.
You cannot use em as a screen unit, so scaling elements may get tricky.
Still with limited resources a single codebase outweights everything else.
To be clear, my team has been working on a web+native project the whole 2021. It now has passed most of the testing, but not yet released. For a sense of scale, it is a marketplace of 40+ screens.
I have an angular app currently in Electron. (It was built by someone else) I would like to run this in my browser (possibly converting it to a Progressive Web App). Is this possible? If so how?
A short summary from some of my own experience doing something similar. In my case it was possible but this might not always be true. Hope this helps.
Find and assess the app's dependencies on the Electron api - try searching for require('electron') or more likely in Angular, ngxElectron or another Angular Electron api wrapper, fixing or changing the app so that it no longer depends on Electron.
Do a search for Electron API keywords and usages and decide how to handle them. Examples where the app might use Electron - the Electron menu, clipboard, BrowserView, or more behind-the-scenes the app might use IPC.
The app might reference the Node api since Node is relatively easy to mix in to your app in Electron, and this will be a problem that needs to be fixed. Search for Node api references.
Some apps have native dependencies outside of Electron, you'll need to find any such API's and decide how to handle them.
The size of work (and even if it's possible at all) will depend on the functionality the app itself provides and the extent of native features required, the extent of dependency on Electron features, dependencies on Node.
For example, within Electron, developers have more control over the browser than usual, and can choose to switch off normal web security features. Cross site scripting (CORS, etc) or other security issues might crop up when you move the app to the browser. Take a look at the options passed when BrowserWindows are created. If the app has exotic settings these might necessitate architecture changes.
You need to decide whether the app still needs to work in Electron after porting (this might be possible but can make things complicated)
If the app should still run in Electron, you'll need to decide a strategy for how to handle this (for example, if statements checking for Electron, or another strategy).
I am using the MapContainer class to display a google map on android.
How can I stop the user from dragging/swiping the map to a new location ? ie. want the map to remain fixed at the coords I have set.
I have tried using MapContainer.setEnabled(false) but this only seems to work in the simulator and has no effect when deployed on a real android device.
TIA.
The panning is handled in the native map which handles its own events. Since those events happen on the Android UI thread Codename One can't intercept them without introducing a performance penalty.
You have two options:
Intercept the events in the native Android code
Fix the position after the fact
The second is much easier, just use a map listener to detect changes then pan the map using the API back to the original location. This might create undesirable UX though, in that case your only option is to use the native code.
You can do that by changing the cn1lib code and you can even contribute a feature back using a pull request. This should be relatively easy to implement in the native map as it should probably map to a setter/getter pair in the API e.g. setPanEnabled.
1st question:
I am trying to use the map component from codename one Theme. However, every time i put longitude and lattitude, it resets to 0.0. How can i change that from inside the theme?
2nd question, if possible: How do i show permissions, in order to enable using your own location? It is automatic when I use the map component, but not for other components.
When i try to use web view with google map, it does not let me put my own location.
You are using the old GUI builder which is no longer maintained. I would recommend switching to the new GUI builder or using handcoding. Notice you might be better off starting a new project as the new GUI builder is VERY different.
MapComponent is also deprecated in favor of native maps those are accessible from code and are far superior on the device... The Uber clone app was built using native maps.
Location prompts are automatic when you use the LocationManager API. You can enable them in the simulator to see how it feels on the device. You can then use the JavaScript interop to pass your location to embedded HTML.
I work on a team that supports a mobile web site. It's a typical web app in that it's pages of forms that submit and retrieve data from a server. Back end currently JSF.
It's working fine but there's a strong want to start leveraging more of the native device's components and features (namely messaging/alerts and UI widgets). Given the number of platforms we're trying to support (iOS, Android, BlackBerry, Symbian [yuck] and potentially Windows 7) PhoneGap seems to be the first thing I should spend some time looking at.
I think I have a good grasp on how it works (broadly speaking) in that it allows you to use HTML CSS and JS then builds a native app that 'wraps' around your code and offers up a JS API into the device's native widgets and features as needed.
What I'm not so clear on is how one would use it in a client/server type of interaction. Could we use PhoneGap to create a front end UI that would still talk live to our servers? If so, could we leverage standard AJAX/JSON/XML type technologies to send and receive the data or are there hidden hurdles I'm not aware of in doing that with a solution like PhoneGap? In otherwords, does the webview within the PhoneGap app work just as WebKit would in that we can make an AJAX call, get some data, and update the DOM?
Or is there a different type of framework I should be looking at?
A example summary explanation of what we're looking for would be: We'd like our current web application to be able to launch a native date picker on the device and receive alerts but still interact with our servers as our current mobile web site does.
As user731077 says, yes, PhoneGap can do all of that. There's a number of potential methods you could use to do so in the Javascript code of your PhoneGap app. Here's a few to check out.
XMLHttpRequest object, but I'd suggest one of the below choices that handles cross browser inconsistencies
jQuery ajax()
xui.js xhr() (my choice)
zepto.js ajax()
xui.js and zepto.js are my suggestions as they are basically stripped down versions of jQuery optimized for mobile web development. I'm partial to xui.js because its the framework commonly used by the PhoneGap guys themselves.
your every question has a YES answer :)