Android has a clipChildren method for allowing the contents of a view to overflow the view's containing area. I'd like to set this to false since it seems to be set to true by default. I'm trying to access the native android view and set this using the following in nativescript:
var view = topmost().currentPage.content.getViewById('viewname');
view.android.setClipChildren(false);
But this doesn't seem to be working.
I have tested your case and to make it work I have just changed the way I am calling my current page
var page = args.object;
var grid = page.getViewById('viewname');
grid.android.setClipChildren(false);
console.log('grid clipChildren: ' + grid.android.getClipChildren()); // returns false
Related
In NativeScript, how can I get the value of a textfield using JavaScript (not TypeScript/Angular)?
XML:
I've tried various combinations of "getViewByID()" but nothing is working (perhaps I didn't "require" right libraries?). Not looking to do 2-way binding; just get the value (print to the console).
Just as a reminder, it's usually a good idea to share some code with your question to show what you have already tried.
In this example you could have shared some xml markup for instance.
Anyways to get the value of a textfield you would have something like this.
var view = require("ui/core/view");
function pageLoaded(args) {
var page = args.object;
var textfield= view.getViewById(page, "textfieldID");
}
After this you should be able to do :
var text = textField.text;
Anyone got a tip how to add a View over the current view (modal)? I'm creating an app with a video recorder, and the video screen is presented modally on the screen. I want some text to show up above the video modal, and I think I've tried any approach I can think of atm.
Currently im stuck with something like:
var topMost = frameModule.topmost();
var View = new ViewModule.View(questionHolder);
topMost.currentPage._addView(View, 0);
But with no success. questionHolder is a view I fetch with
currentpage.getViewById
Edit:
From the answer of #davecoffin where I understood you could not mix native views and nativescripts views, I was able to solve this in my case by accessing the native view directly and adding a subview to it. In my case:
var sharedApplication = utils.ios.getter(UIApplication, UIApplication.sharedApplication);
var overlay = UIView.alloc().initWithFrame({
origin : {
x: 0,
y: 44,
},
size: {
height: 100,
width: platform.screen.mainScreen.widthPixels
}
});
overlay.backgroundColor = UIColor.blackColor;
overlay.alpha = .6;
sharedApplication.keyWindow.rootViewController.presentedViewController.cameraOverlayView = overlay;
You can directly create and use modal pages as described in this article.
If I am understanding your approach correctly...
You cant add Nativescript views on top of native views.
Check out this forum question: https://discourse.nativescript.org/t/appending-nativescript-views-to-a-native-ui-view/1412
Basically once you have appended a native view (not a nativescript layout or ui view), then every view you append after that must be a native view. For iOS you use addSubview, not sure about android atm.
I can't figure out how to programatically add a view into a layout or page.
I need to add views at runtime without using static xml declaration since i need to fetch them from an http requested object... . I didn't find useful informations in the docs.
Anyone knows how to do?
I think you meant to dynamically add some view / controls to the page rather than to navigate into another page.
If so, you just need to add some controls into one of the layouts in your page (only containers [=layouts] can have multiple children.
so, your code (viewmodel/page controller) would look something like:
var layout = page.getViewById("Mycontainer");
// create dynamic content
var label = new Label();
label.text = "dynamic";
// connect to live view
layout.addChild(label)
In addition to having a page included inside your app (normal); you download the xml, css, & js to another directory and then navigate to it by then doing something like page.navigate('downloaded/page-name');
you can also do
var factoryFunc = function () {
var label = new labelModule.Label();
label.text = "Hello, world!";
var page = new pagesModule.Page();
page.content = label;
return page;
};
topmost.navigate(factoryFunc);
https://docs.nativescript.org/navigation#navigate-with-factory-function
You should check out this thread on the {N} forum.
The question is about dynamically loading a page and module from a remote server. The (possible) solution is given in this thread.
I'm working on a Kendo Mobile project with a number of:
Kendo Views (external to root html)
Modal Views (in the root html).
The external files load on demand and everything works fine. But i'd like to have the same load on demand behavior for some of the modal views, because the root/based html file is becoming too large and not manageable.
Is there a way to either:
Store a modal view in an external file? If so is it possible to load via javascript syntax (app.navigate()) rather than the declarative syntax (href='externalmodal').
Manually pre-load an external view without navigating to it first.
This code lets you manually create a view:
var viewUrl = 'blahblahblah';
var element = $.parseHTML('<div data-role=view>test</div>')[0];
element.style.display = 'none';
$(document.body).append(element);
var options = $.extend({}, kendo.parseOptions(element, kendo.mobile.ui.View.fn.options));
var view = new kendo.mobile.ui.View(element, options);
view.element[0].setAttribute('data-url', viewUrl);
kendo.mobile.application.navigate(viewUrl, '');
Depending on what features you use, you may need to instead use code similar that that used for ModalView below so that Kendo creates the subclass (changes: substitute View for ModalView, substitute view for modalview, add data-url, remove call to show(), maybe check that view not already created by checking for element with matching data-url). We haven't tested setting roles.view this way, but we did something similar while testing this stuff out and it worked.
Don't try settings the options - Kendo got confused (at least trying to set useNativeScrolling didn't work, also don't try setting the options object on the subclass unless you really know what you are doing).
Caveat: This was using browserHistory:false (which disables routing) when the kendo.mobile.Application was created. The technique should still work when using browser history if you use a valid url fragment (same as would be created by Kendo for the pushstate/hashchange url).
This is a also way to cleanly subclass kendo.mobile.ui.View that works well - although you must still use data-role=view even though your subclass is a "different" component. Note that you can't just use you cant use your own subclassed component with its own name like role=myview to subclass a view because there are hard-coded checks specifically for data-role=view in the kendo codebase. Same if you wish to subclass: layout modalview drawer splitview page (amongst other hard-coded kendo ui component names - search kendo code for kendo.roleSelector - ugly). e.g.
MyView = kendo.mobile.ui.View.extend({
init: function(element, options) {
kendo.mobile.ui.View.prototype.init.apply(this, arguments);
...
var myView = new MyView('<div data-role=view>test</div>');
Why it works: The relevant function in the Kendo source code is _findViewElement which does element = this.container.children("[" + attr("url") + "='" + urlPath + "']"); to see if the view already exists for a url, before creating a new one. A unique init function is always required as it ends up being the constructor function.
If you want to subclass a modalview, you need to do something different due to the way kendo works:
var MyModalView = kendo.mobile.ui.ModalView.extend({
html: '<div data-role=modalview style="width:90%;display:none;">Foobar</div>',
init: function() {
kendo.mobile.ui.ModalView.prototype.init.apply(this, arguments);
}
});
function makeModalView() {
$(document.body).append($.parseHTML(MyModalView.prototype.html));
var roles = $.extend({}, kendo.mobile.ui.roles);
roles.modalview = MyModalView;
var modalView = kendo.initWidget($(element), {}, roles);
modalView.open();
return modalView;
}
Hi I am trying to make some changes to our implementation of CKEDITOR 3.6.2
by removing all but 2 options in the link target type dropdown that appears in the link dialog's target tab.
I tried to achieve this using the API but I am getting an error in the minified core ckeditor.js file in the dialog() method on this line X=S.lang.dir; where S is the editor.
The .lang property of the editor instance is undefined when doing CKEDITOR.dialog(editor, 'link'), when viewing debugging the "editor" object I don't see a lang object anywhere, so I'm not sure why this is missing? I didn't work on our original implementation but as far as I know we have only added 2 plugins and not changed the ckeditor core.
Here is my code:
for (var i in CKEDITOR.instances) {
var editor = CKEDITOR.instances[i];
var dialogObj = CKEDITOR.dialog(editor, 'link');
var linkDialogTargetField = dialogObj.getContentElement('target', 'linkTargetType');
// API didn't seem to have a more efficient approach than clearing all and re-adding the one we want
linkDialogTargetField.clear();
linkDialogTargetField.add('notSet', '<not set>');
linkDialogTargetField.add('_blank', 'New Window (_blank)');
}
I have managed to make my change without using the API properly by doing the below:
CKEDITOR.on('dialogDefinition', function (ev) {
// Take the dialog name and its definition from the event
// data.
var dialogName = ev.data.name;
var dialogDefinition = ev.data.definition;
// Check if the definition is from the dialog we're
// interested on (the "Link" dialog).
if (dialogName == 'link') {
// Get a reference to the "Link target" tab.
var targetTab = dialogDefinition.getContents('target');
var targetField = targetTab.get('linkTargetType');
// removing everything except the 1st (none set) & 3rd (new window) options from the dropdown
targetField['items'].splice(1, 2);
targetField['items'].splice(2, 3); // the array is reduced by splice, so we have to splice from [2] onwards not from [4]
}
});
but I don't like this approach, does anyone have any ideas? or other ways to achieve the same result using the API?
Using second approach and overwritten the dropdown items instead of splicing.