I switched to Nativescript 6.3 and after that I have begun to get
JS: topmost() is deprecated. Use Frame.topmost() instead. warning. And HMR does not to seem to make the instant changes as well. For navigation among pages I use the following
code:
function onTap_StartPage() {
var navigationEntry = {
moduleName: "views/Sep-page/Sep-page",
context:{trans:language,trans2:wordGroup},
transition: {
name: "fade",
duration: 200,
}
};
frames.topmost().navigate(navigationEntry);
}
exports.onTap_StartPage= onTap_StartPage;
What changes am I supposed to make? Just adding Frame before topmost() is not working as well.
frames.Frame.topmost().navigate(navigationEntry);// is not working.
Then I tried navigation without topmost() and used the following:
const getFrameById = require("tns-core modules/ui/frame").Frame.getFrameById;
const frame=getFrameById("myFrame" );
function onTap_StartPage() {
var navigationEntry = {
moduleName: "views/Sep-page/Sep-page",
context:{trans:language,
trans2:wordGroup,},
transition: {
name: "fade",
duration: 200,
}
};
frame.navigate(navigationEntry);
}
exports.onTap_StartPage= onTap_StartPage;
Although navigation works I still get JS: topmost() is deprecated. Use Frame.topmost() instead. warning. and HMR is not working as well.
Related
Currently I make myself familiar with nativescript and trying to figure out what you can do with it. One thing that I find very interesting and for which I am more interested in is how I can use native Android functions.
As challenge for understanding and learning I have picked out the possibility in apps fill in text fields with specific values like some password managers apps do. If I understand it right, it shouldn't big voodoo.
How, I found two examples. The first one is the autofill feature from the keepass2android app. Sources: https://keepass2android.codeplex.com/SourceControl/changeset/view/9ddc142d987880118be38ee1d69943f2809738d3#src/java/KP2ASoftkeyboard_AS/app/src/main/java/keepass2android/autofill/AutoFillService.java
Other sample I found here: AccessibilityNodeInfo - send text
First quick and dirty I hack the app.js, find out how the android native functions works in nativescript. So I want trigger somehow the different events but only init is triggered (so far I also understand it also).
var applicationModule = require("application");
var platform = require("platform");
var context = applicationModule.android.context;
android.accessibilityservice.AccessibilityService;
var aa = android.accessibilityservice.AccessibilityService.extend({
init: function() {
console.log("init()");
},
onInit: function() {
console.log("onInit()");
},
create: function() {
console.log("create()");
},
onCreate: function() {
console.log("onCreate()");
},
destroy: function() {
console.log("destroy()");
},
onDestroy: function() {
console.log("onDestroy()");
},
accessibilityEvent: function(event) {
console.log("accessibilityEvent");
},
onAccessibilityEvent: function(event) {
console.log("onAccessibilityEvent");
},
interrupt: function() {
console.log("interrupt");
},
onInterrupt: function() {
console.log("interrupt");
},
serviceConnected: function() {
console.log("serviceConnected");
},
onServiceConnected: function() {
console.log("onServiceConnected");
}
});
var a = new aa();
Probably android.accessibilityservice.AccessibilityService must somehow be extended in a different way, get it working. But how?
It would be a big deal if the onAccessibilityEvent function would be triggered in nativescript.
Edit:
I made some progress. Found some other nativescript sources and samples and modified my code. Now:
var applicationModule = require("application");
var platform = require("platform");
var utils = require("utils/utils");
var context = android.content.Context;
var ad = utils.ad.getApplicationContext();
var aa = ad.getSystemService(context.ACCESSIBILITY_SERVICE);
But the way, I can register onAccessibilityEvent is currently not clear for me.
You need to register your service (the class from your first code block) similar to this example:
http://developer.android.com/training/accessibility/service.html
and place your logic in onAccessibilityEvent override.
I've used elixir & browserify before. However, I want to start using Vueify so I can have all my component's parts (HTML/CSS/JS) in 1 file.
It seems something has changed with laravel-browserify
The commonly (that I have found) answer is the following:
var elixir = require('laravel-elixir');
var vueify = require('laravel-elixir-browserify').init("vueify");
elixir(function(mix) {
// resources/assets/js/main.js
mix.vueify('main.js', {insertGlobals: true, transform: "vueify", output: "public/js"});
});
This throws the error:
Error: Cannot find module 'laravel-elixir/ingredients/commands/Utilities'
//...//
at Object.<anonymous> (C:\Users\BLANKED\Code\Project\node_modules\laravel-elixir-browserify\index.js:5:17)
So, some more searching around, and I find
https://github.com/laravel/elixir/issues/203
elixir.config.js.browserify.transformers.push({
name: 'vueify'
});
elixir(function(mix) {
mix.browserify('main.js');
});
JeffreyWay's method will now gulp, however it doesn't seem to include any of the *.vue files, and instead replaces them with a vue-hot-reload-api function to presumably retrieve it.
Which seems great, and something that - no doubt - I will find very useful.
But it's not working, and I cannot figure out how to disable it.
And a very basic Vue App is not working.
Or what I am doing wrong.
Edit:
To make it clear, I would be happy to gulp *.vue files without the hot reload working.
Perhaps this is something that just works when using homestead, but I'm hoping to do some quick & dirty testing without having to run up homestead.
Final edit:
//gulpfile.js
var elixir = require('laravel-elixir');
elixir.config.js.browserify.transformers.push({
name: 'vueify'
});
elixir(function(mix) {
mix.browserify('main.js');
});
// main.js
var Vue = require('vue')
var App = require('./app.vue')
new Vue({
el: 'body',
components: {
app: App
}
})
// app.vue
<style>
.red {
color: #f00;
}
</style>
<template>
<h1 class="red">{{msg}}</h1>
</template>
<script>
module.exports = {
data: function () {
return {
msg: 'Hello world!'
}
}
}
</script>
As of this commit Vueify is now included within Laravel Elixr. I found that when including the Vueify transformer manually it is run twice causing the template to not properly be created, leaving just the hot-reload code.
To fix the issue I just removed the following lines from my gulpfile.js.
elixir.config.js.browserify.transformers.push({
name: 'vueify'
});
You may also have to ensure your version of laravel-elixr is over version 3.4.0.
I'm making a Marionette app for uploading files and I'm at the very beginning of it. To start things off, I will show you the files I'm working with:
upload_view.js
AppManager.module("PrimaryApp.Upload", function(Upload, AppManager, Backbone, Marionette, $, _){
Upload.UploadPage = Marionette.ItemView.extend({
template: "#upload-template"
});
});
upload_controller.js
AppManager.module("PrimaryApp.Upload", function(Upload, AppManager, Backbone, Marionette, $, _){
Upload.Controller = {
show: function(){
var uploadView = new Upload.UploadPage();
AppManager.regions.primary.show(uploadView);
},
};
});
app.js
var AppManager = new Marionette.Application();
AppManager.on("before:start", function() {
var RegionContainer = Marionette.LayoutView.extend({
el: "#app-container",
regions: {
primary: "#primary-region",
secondary: "#secondary-region",
header: "#header-region"
}
});
AppManager.regions = new RegionContainer();
});
AppManager.on("start", function(){
console.log(AppManager);
AppManager.PrimaryApp.Upload.Controller.show();
})
AppManager.start();
When running this application in a browser I get this error:
Uncaught TypeError: Cannot read property 'Upload' of undefined
For this line of code in app.js:
AppManager.PrimaryApp.Upload.Controller.show();
However, when I output AppManager to the console I get this:
Which shows that AppManager.PrimaryApp is indeed defined and contains all the submodules needed. Any ideas why my AppManager.PrimaryApp is undefined when called as a function, but then is defined when outputted to the console?
Figured out what was wrong!
AppManager.start();
Was in the wrong place and tried to run before AppManager.PrimaryApp was defined. However,
console.log(AppManager);
was somehow called after AppManager.PrimaryApp was defined resulting in a correct output. A simple move of my start() function fixed the order of things.
I'm spent days trying to work out how to use the kendo-ui component with Durandal but to no avail.
I've managed to add a kendo-ui component declaratively on the page i.e. . This has no problems.
However, I would like to do some animations based on page events. Coding directly in the javascript viewmodel makes it easier to manipulate afterwards.
I've added my code below (which doesn't work), and I'm not sure that I'm taking the right approach. Actually, I'm sure I'm not. Anyone who can point me in the right direction I would appreciate it.
Any help or suggestions are welcome
Main.js
requirejs.config({
paths: {
'text': '../lib/require/text',
'durandal':'../lib/durandal/js',
'plugins': '../lib/durandal/js/plugins',
'transitions' : '../lib/durandal/js/transitions',
'jquery': '../lib/jquery/jquery-1.9.1',
'kendo': '../lib/kendo/kendo.ui.core.min',
'knockout': '../lib/knockout/knockout-3.1.0',
'bootstrap': '../lib/bootstrap/js/bootstrap',
'toastr': '../lib/toastr/toastr',
'lib': '../lib'
},
shim: {
'kendo': { deps: ['jquery'], exports: 'kendo' },
'bootstrap': {deps: ['jquery'],exports: 'jQuery'}
}
});
define(['durandal/system', 'durandal/app', 'durandal/viewLocator', 'durandal/binder', 'kendo'], function (system, app, viewLocator, binder, kendo) {
app.title = 'My Jumpstart';
//specify which plugins to install and their configuration
app.configurePlugins({
router:true,
dialog: true,
widget: {
kinds: ['expander']
}
});
kendo.ns = "kendo-";
binder.binding = function (obj, view) {
kendo.bind(view, obj.viewModel || obj);
};
app.start().then(function () {
viewLocator.useConvention();
app.setRoot('shell');
});
});
index.js
define(['durandal/app', 'durandal/system', 'knockout', 'toastr', 'kendo'],
function (app, system, ko, toastr, kendo) {
var myButton = function () {
var kbutton = $("#myButton").kendoButton();
};
var vm = {
myButton: myButton
};
return vm;
});
index.html
<section>
<div id="myButton">My Kendo Button</div>
</section>
Instead of shimming, add the Kendo libraries via the <script> tag on your index.html page. Be sure to add it after jQuery.
Also, are you using the knockout-kendo library from Ryan Niemeyer? That would affect my answer.
I use the Mozilla's Add-on Builder. I am looking for a way to remove an event listener in a contentScript. I use the port way to communicate between add-on script code and the content script code.
The problem is the callback on event "response" is called more than once. I want it to be called once and declared in the callback of the event show.
Can someone help me with that?
main.js code:
var Panel = require("panel").Panel;
var popup_panel = Panel({
width: 286,
height: 340,
contentURL: require("self").data.url("popup.html"),
allow: { script: true },
contentScriptWhen: "end",
contentScriptFile : [
require("self").data.url("test.js")
],
onShow: function(){
this.port.emit("show");
var pan = this;
this.port.on("hide", function(){pan.hide();});
}
});
var Widget = require("widget").Widget;
var widget = Widget({
id: "mozilla-icon",
label: "My Mozilla Widget",
contentURL: "http://www.mozilla.org/favicon.ico",
panel: popup_panel
});
popup_panel.port.on("get", function(){
popup_panel.port.emit("response");
});
Content script (test.js):
self.port.on("show", function(){
console.log("show");
function response(){
console.log("reponse called");
}
self.port.emit("get");
self.port.once("response", response);
self.port.removeListener("response", response);
});
full source code
Finally I found the problem. It is a bug in the add-on kit. In the file api-utils/lib/content/content-worker.js in the function removeListener the index is always -1.
The parameter given in the indexOf is the name of the event and it search a function. It is incorrect.
So to solve the problem I replace the line let index = listeners[name].indexOf(name); by let index = listeners[name].indexOf(callback);.
EDIT
The bug has been fixed. It will publish in the version 1.10 see here