How to use nativescript javascript extend? - nativescript

I follow this guide to inherit a class, but i get crash with dalvik.system.NativeStart.main(native method) error
var MyDatePicker = android.widget.DatePicker.extend({
init: function() {
var isConstructor = arguments[arguments.length - 1];
if (isConstructor) {
// we are called from Java constructor
console.log('con')
} else {
// we are called from Java init method
console.log('init');
}
}
});
var foo = new MyDatePicker();

According Android documentation (http://developer.android.com/reference/android/widget/DatePicker.html) DatePicker constructor takes at least one parameter (context). Try passing it, for example
var foo = new MyDatePicker(context);

Related

NativeScript: Accessing native Android API

There is still something i don't get in accessing native Platform stuff with nativescript. Here is a simple snippet where i try to access a native gui element and add it to a page:
var PagesModule = require('ui/page');
var Application = require('application');
var StackLayout = require('ui/layouts/stack-layout').StackLayout;
exports.createPage = function createPage(args) {
var page = new PagesModule.Page;
page.actionBarHidden = true;
page.backgroundColor = '#F5F5F5';
page.backgroundSpanUnderStatusBar = false;
var textView = new android.widget.TextView(Application.android.currentContext);
var stackLayout = new StackLayout();
stackLayout.addChild(textView);
page.content = stackLayout;
return page;
}
I think i am missing something in the understanding of how nativescript interacts with the native platform.
The reason it is failing is because only "view" or "view" descendants can be assigned to "view" child or children.
You are creating a direct android component; but it isn't part of the NS framework, so the framework doesn't know what to do with it. When you create a visual component you descend your component from a view (or another view descendant). The NS version of the code should be:
var PagesModule = require('ui/page');
var Application = require('application');
var StackLayout = require('ui/layouts/stack-layout').StackLayout;
vat TextView = require('ui/text-view').TextView;
exports.createPage = function createPage(args) {
var page = new PagesModule.Page;
page.actionBarHidden = true;
page.backgroundColor = '#F5F5F5';
page.backgroundSpanUnderStatusBar = false;
var textView = new TextView();
var stackLayout = new StackLayout();
stackLayout.addChild(textView);
page.content = stackLayout;
return page;
}
If you are actually wanting to create your own component I would recommend you look at the UI/Switch it is probably the simplest example; but in a nutshell you need to subclass the view, on Android use the function _createUI to actually create the native component, and so in simplest terms it would be:
var View = require('ui/core/view').View;
function MyTextView() {
View.apply(this, arguments);
}
__extends(MyTextView, View);
Object.defineProperty(MyTextView.prototype, "android", {
get: function () {
return this._android;
},
enumerable: true,
configurable: true
});
MyTextView.prototype._createUI = function () {
this._android = new android.widget.TextView(Application.android.currentContext);
};
Then you can use new MyTextView() instead of the built in new TextView() function in the first code sample.
Please note with this component, because we haven't defined any additional helper function, to set and get the text you would have to do things like
var x = page.GetViewById('myTextId').android.setText("Some Value");
and to access the native underlying control and its android properties.
Please note I have a whole blog article on some of this at http://fluentreports.com/blog/?p=167 (And many other articles on the site about NS)

how to using ArrayList in nativescript

i want ArrayList forEach in {N}
how to? help us! plz.
Code for Java
public boolean OnPressEvent(ArrayList<MarkerItem> markers){
// in code
}
Code for {N}
onPressEvent: function(markers: MarkerItem[]) {
// in code (for android)
console.log("length", markers.length) // = undefined
console.log("length", markers.size()) // = 0~n (integer)
// i want run below codes.
markers.forEach(function(marker){
// marker editing....
});
}
The easiest way is:
onPressEvent: function(markers: MarkerItem[]) {
var size = markers.size();
for (var i=0;i<size;i++) {
var aMarker = markers.get(i);
// Do whatever I need to do with this item
}
});

Famo.us - triggering event and piping

Let's say I have three Views. AppView, MenuView and StripView. MenuView contains multiple StripViews and AppView contains one MenuView. How can I trigger event from StripView and listen on that event on AppView.
EDIT
Let's say I want to click on ImageSurface on StripView and reigster that event on AppView, and then do some transitionig.
MY SOLUTION
Everything is based on Timbre app, created in Famou.us Starter Kit Reference Tutorials
// StripView.js (_setListeners() is called in StripView constructor and bodySurface is defined in code)
function _setListeners() {
var eventScope = this._eventOutput;
this.backgroundSurface.on('click',function(){
eventScope.emit('test', { somedata:'some value'} );
}.bind(this));
}
// MenuView.js (_createStripViews() is called in MenuView constructor)
function _createStripViews() {
this.stripModifiers = [];
var yOffset = this.options.topOffset;
for (var i = 0; i < this.options.stripData.length; i++) {
var stripView = new StripView({
iconUrl: this.options.stripData[i].iconUrl,
title: this.options.stripData[i].title
});
var stripModifier = new StateModifier({
transform: Transform.translate(0, yOffset, 0)
});
this.stripModifiers.push(stripModifier);
this.add(stripModifier).add(stripView);
yOffset += this.options.stripOffset;
stripView.pipe(this._eventOutput);
}
}
//AppView.js (menuView is defined in code and _setListeners() is called in AppView constructor)
function _setListeners() {
this.menuView.on('test',function(){
console.log("IT WORKS");
}.bind(this));
}
You want to use Views built in handlers to achieve this. These are _eventInput and _eventOutput.. Here is an example using an ImageSurface in StripView and responding to a click in AppView..
Hope it helps!
// In StripView.js
var imageSurface = new ImageSurface();
imageSurface.on('click',function(){
this._eventOutput.trigger('image-click', { somedata:'some value'} );
}.bind(this));
// In AppView.js
var stripView = new StripView();
this.subscribe(stripView);
this._eventInput.on('image-click',function(data){
// Do Something
});

Node module imported via require has no methods

I'm having a problem with node modules that I cannot resolve. I have the following three files. I've included the basic methods of interest but have excluded the rest of the methods and the actual guts of the methods.
The problem that I'm struggling with is that when the publish_event method is called on the event_queue object from events.js node crashes with the following error:
FATAL TypeError: Object # has no method 'publish_event', stack:
TypeError: Object # has no method 'publish_event'
at Events.publish_event (/Users/mburbidg/stormcloud/ccapi/cloud_pipes/node_modules/f5/server/services/event/events.js:137:15)
I cannot figure this out, you can see that I can use methods of the EventQueue object from index.js, another module, in our system just fine. I've checked names other obvious things several times.
Any suggestions as to how to proceed?
File 1 - f5/server/notifications/sqs_event_queue.js
function EventQueue() {
this.queue_name = 'notification_queue';
this.queue_url = null;
this.sqs = null;
}
EventQueue.prototype.publish_event = function(event_data, registration_id, log, callback) {
...
}
EventQueue.prototype.start = function(callback) {
...
}
module.exports = new EventQueue();
File 2 - f5/server/index.js
var event_queue = require('f5/server/notifications/sqs_event_queue');
var start_notifications = function()
{
event_queue.start(on_start);
function on_start(error)
{
}
}
File 3 - f5/server/services/event/events.js
var event_queue = require('f5/server/notifications/sqs_event_queue');
function Events () {
}
Events.prototype.publish_event = function(event_data, registration_id, log, callback) {
event_queue.publish_event(event_data, registration_id, log, callback);
};
module.exports = new Events();

Why does this Ti.UI.WebView.fireEvent() call throw an exception when a listener is present?

I create a new window with
var win = Ti.UI.createWindow({url:'page.js'});
win.listeners = {
'type': function(e){ alert('test'); }
}
win.open();
Inside page.js, I add the specified listeners to a Ti.UI.WebView inside the window.
for (var type in win.listeners) {
Ti.API.info(win.listeners[type])
webView.addEventListener(type, win.listeners[type]);
}
Ti.API.info(win.listeners['type']) prints the function as "<KrollCallback: 0xb272160>"
A call to webView.fireEvent('type') executes fine if there are no listeners. But if I add listeners to the webView as above, the call to fireEvent throws an exception.
What is KrollCallback and why does fireEvent crash if there are listeners present?
The problem is that using url:'page.js' with createWindow() starts a new context. This type of setup will work if page.js is like this:
exports.getWindow(config) {
var webView = Ti.UI.createWebView({});
for (var type in config.listeners) {
webView.addEventListener(type, config.listeners[type]);
}
}
Then, use the window like this:
var win = require('page').getWindow({
listeners = {
'event_type': function(e){ alert('event_type test'); }
}
});
win.open();

Resources