Can native UI controls be accessed directly from Nativescript - android

Am I able to access UIKit through Nativescript or what ever the equivalent would be in Android directly from NativeScript code? For example, if I wanted to add a drop shadow to a UIView and add this view to the screen, would I be able to create a new UIView and programmatically add a drop-shadow if it's not supported in the XML and CSS implementations? I know they are supposed to have a 100% parody of the Native API's so it should be possible but just want to make sure as I'm having trouble finding examples in the docs.

Yes, you have full access to native objects for both iOS and android.
For example (taken from http://docs.nativescript.org/runtimes/ios/Overview.html):
Obj-C
UIView *view1 = [[UIView alloc] init];
// Or with the short-cut
UIView *view2 = [UIView new];
JS equivalent
var view1 = UIView.alloc().init();
// Or with the short-cut
var view2 = UIView.new();
Look around the runtime references in the docs as there are other examples of how do you operate with native objects for iOS/Android

Related

What is the equivalent of IOS [application.window makeKeyAndVisible] in Android?

In IOS, the application window can render another UIViewController through the following.
application.viewController = (a new UIViewController)
application.window.rootViewController = application.viewController;
[application.window makeKeyAndVisible];
What is the equivalent in Android? I know that intents are used for firing new activities. Are intents right way to get the above IOS behavior in Android?

Using Cordova, is there a way to reference native icons?

I'm using Cordova 3.5 to build an app which contains a menu with pretty standard items in the list (home, contacts, etc.), and I want to use the native menu icons whenever possible. I believe those icons are already on the device as part of the OS, but I don't know if Cordova gives me a way to reference them.
I suppose I'd need to write a Javascript function to choose the right file name based on the platform, e.g.:
// this is pseudocode
var icon = '';
if (platform === 'android') {
icon = 'some/path/home.png';
} else {
icon = 'other/path/icon.home.png';
// or maybe a function such as the following exists:
// icon = cordova.getNativeIcon('icon.home.png');
}
$('.selector').css('background-image', icon);
Alternatively, I may be able to make do by referencing the files in CSS, e.g.:
.android .home-icon {
background-image: url('some/path/home.png');
}
.ios .home-icon {
background-image: url('other/path/icon.home.png');
}
So, how do folks handle this sort of thing in Cordova? Is there a function I can use to access native icons? Are folks just copying them into their projects? What's the best practice?
If you're working with Cordova, then you'll be working inside a web view provided by the host OS and you won't have direct access to any artwork. I've found that using icon fonts and CSS "themes" to work well enough, but that approach will replicate artwork already provided. There's extra work involved with theming for iOS 6 vs iOS 7 or 8, for example, but it's not as bad as it sounds.
IBM does have an article on partitioning your view between native and web controls, but it sounds a bit cumbersome. More details here: https://www.ibm.com/developerworks/community/blogs/worklight/entry/ios_combining_native_and_web_controls_in_cordova_based_applications

disable css animation on mobile devices

I am working on a horizontal scrolling site and to add to it it has a couple of CSS animations that totally crash all the browsers on the ipad i am testing on, so I am wondering if there is a way for the code to detect mobile devices (iOs, Android..) over and above screen sizes, to just disable animation for it?
Thanks for all your help in advance.
I haven't attached any code to it because, I really do not know what I would use to detect the Os, I am aware of using media queries but as I said window size is not what I am looking for its the Mobile OS that I want to target.
You can use the navigator.platform property to check the device type, then use some javascript to add the stylesheet containing your CSS animations if it's not one of the excluded platforms.
For example, to load the animations for all devices besides iPads, you could do:
if(navigator.platform != 'iPad')
{
var link = document.createElement('link');
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = 'animations.css';
document.getElementsByTagName('head')[0].appendChild(link);
}
For a list of platform values, refer here:
What is the list of possible values for navigator.platform as of today?
For more info on loading a stylesheet with JS, look here:
How to load up CSS files using Javascript?

Same Titanium code base for Android & Iphone

I have been trying to create a single codebase for both Iphone & Android for a intermediate level app. ( 4 tabs, multiple windows, maps etc.) using itanium 2.1 API.
However, I have found that things on Android platform dont work as smoothly or willingly as on Iphone epsecially tableviews & UI elemnts. The UI responsiveness on Android is also sluggish.
The kitchen sink examples are pretty straightforward. I am looking at an enterprise ready app which has to be maintained for atleast next couple of years.
Has anybody worked on similar lines with platform quirks and been successful in creating fully functional iOS & Android apps from SAME codebase?
I'm having a lot of success using the compile-time CommonJS mechanism for having a root view that then has os-specific capabilities.
For instance, my os-independent view might be ui/MyView.js :
var createAddButton = require("ui/MyView.AddButton");
var MyView = function() {
var self = Ti.UI.createWindow();
createAddButton(self, function() { alert('ADD!'); });
return self;
};
module.exports = MyView;
Then, I create os-specific functions to handle it:
iphone/ui/MyView.AddButton.js
module.exports = function(view, addHandler) {
var addButton = Titanium.UI.createButton({
systemButton: Titanium.UI.iPhone.SystemButton.ADD
});
addButton.addEventListener("click", addHandler);
view.rightNavButton = addButton;
};
android/ui/MyView.AddButton.js
module.exports = function(view, addHandler) {
view.activity.onCreateOptionsMenu = function(e){
var menuItem = e.menu.add({ title: "Add" });
menuItem.addEventListener("click", addHandler);
};
};
The CommonJS system they have implemented will pick the appropriate version of MyView.AddButton.js so that the button is added to the right place. It allows for the majority of the view to be the same, but the os-specific things to be separated properly.
Titanium is not meant for 1 codebase for all. You do need to rewrite stuff for every OS. However, some app developers claim to have reused 95% of its code. So only 5% of the code is OS specific. But I am sure their code is full with if-elses.
What I recommend doing, to be able to maintain it properly, without thousands of if-else constructions, is build a single backend core, and write code specifically for UI related matters per OS. This way, you have some UI related code for Android, UI related code for iOS and 1 core working for both.
Since Android and iOS differ a lot, writing a single codebase will make sure you can never use OS specific features (like android hardware menu button, or iOS NavigationGroup), and will let the UI look non-intuitive.

Android PhoneGap with Native Controls

I am trying to build an Android application with PhoneGap.
I need to be able to use the PhoneGap WebView (super.appView) and all of its javascript magic but I also need to display some native UI controls around the WebView.
This post goes part way to providing a solution Android PhoneGap Plugin, UI tabbar, resize WebView
Has anyone managed to implement PhoneGap with a native UI?
I will also be using a GestureOverlayView but thats another story ;)
Answer:
super.onCreate(savedInstanceState);
//creates super.appView and calls setContentView(root) in DroidGap.java
init();
//just an empty LinearLayout
layoutId = R.layout.blank;
view = new LinearLayout(this);
setContentView(layoutId);
view.addView(your_component_here);
view.addView((View) appView.getParent()); //adds the PhoneGap browser at index 1
//accesses the browser at index 1. Tells browser to not fill view
view.getChildAt(1).setLayoutParams(new LinearLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT, 1));
setContentView(view);
I would struggle to tell you how this works, all I can tell you is that it does and it is all my own work.
Setting the view to a different colour can help you to see what is going on too....
view.setBackgroundColor(Color.BLUE);
Working with PhoneGap-1.0.0.jar the latest release so far.
A more cleaner approach:
super.onCreate(savedInstanceState);
// Create native view with UI controls.
View header = View.inflate(getContext(), R.layout.header, null);
// PhoneGaps WebView is located inside a LinearLayout.
// The protected (and therefore inherited) variable root
// references this LinearLayout. Add your native Views
// to this variable.
root.addView(header);
// Create WebView and add it automatically to the LinearLayout.
super.loadUrl("file:///android_asset/www/index.html");
Yes, you can embed native controls within HTML by using the plugin.
Call the native method which contains your native view from HTML page using plugin.
e.g. window.plugins.anatomyPlugin.showAudio();
I use this for showing audio player design in native.
This guide from PhoneGap may be helpful.

Categories

Resources