Nativescript IOS 13 ui-listview component not rendered - nativescript

Hi guys I'm having problem with listview component on IOS13
I tried updating to the latest version but that doesn't work
I fixed it by patching listview.ios.js, directly in node_modules
Like suggested from comment here:
https://github.com/NativeScript/nativescript-ui-feedback/issues/1160#issuecomment-542039004
And that is working fine but is there any to patch it differently ?
For example:
I tried creating new file app-platform.ios.js
and attaching missing methods to listview directly like:
const listview = require('nativescript-ui-listview');
listview.ListViewCell.prototype.systemLayoutSizeFittingSizeWithHorizontalFittingPriorityVerticalFittingPriority = function (targetSize, horizontalFittingPriority, verticalFittingPriority) {
if (this.view && this.view.itemView && this.view.itemView.parent) {
var owner = this.view.itemView.parent;
owner._preparingCell = true;
var dimensions = owner.layoutCell(this, undefined);
owner._preparingCell = false;
return CGSizeMake(view_1.layout.toDeviceIndependentPixels(dimensions.measuredWidth), view_1.layout.toDeviceIndependentPixels(dimensions.measuredHeight));
}
return targetSize;
};
But that creashes my app, I get cannot call method on undefined :/

If someone still needs this, managed to solve it in you main.js path listview with this.
const application = require('application');
if (application.ios) {
const view_1 = require("tns-core-modules/ui/core/view");
const listView = require('nativescript-ui-listview');
listView.ExtendedListViewCell.prototype.systemLayoutSizeFittingSizeWithHorizontalFittingPriorityVerticalFittingPriority = function (targetSize, horizontalFittingPriority, verticalFittingPriority) {
if (this.view && this.view.itemView && this.view.itemView.parent) {
var owner = this.view.itemView.parent;
owner._preparingCell = true;
var dimensions = owner.layoutCell(this, undefined);
owner._preparingCell = false;
return CGSizeMake(
view_1.layout.toDeviceIndependentPixels(dimensions.measuredWidth),
view_1.layout.toDeviceIndependentPixels(dimensions.measuredHeight)
);
}
return targetSize;
};
}

Related

Can ZXing be stopped or dispose so i can use it again?

im using ZXing.Net.Mobile for Forms like this
var scanPage = new ZXingScannerPage();
scanPage.OnScanResult += (result) => {
// Stop scanning
scanPage.IsScanning = false;
// Pop the page and show the result
Device.BeginInvokeOnMainThread(async () => {
// await Navigation.PopAsync();
await Navigation.PushModalAsync(new Pages.DataGridPage(PladsId));
});
};
from https://components.xamarin.com/gettingstarted/zxing.net.mobile.forms
but after i have scanned once the carmera is frozen when i try again
i have tried to Dispose/stop the scanner but without success
can ZXing be stopped or dispose so i can use it again ?
im using visual studio 2015 community, xamarin.Forms 2.3.3.168, Syncfusion 14.4.0.15 and ZXing.Net.Mobile 2.1.47. running it on a sony xperia z3 with Android version 6.0.1 and using API 23
Any help is deeply appreciated
Found the solution....
Use IsScanning=true only once... In ScannerView Constructor or in OnAppearing of the Page..
_zxing = new ZXingScannerView
{
VerticalOptions = LayoutOptions.Center,
HorizontalOptions = LayoutOptions.Center,
HeightRequest = 250,
WidthRequest = 250,
IsAnalyzing = true,
IsScanning = true,
};
Don't write anything in OnDisappearing...
protected override void OnDisappearing()
{
// _zxing.IsScanning = false;
base.OnDisappearing();
}
IsAnalysing to be set false once scanning complete and should be set true in OnAppearing...
_zxing.OnScanResult += (result) =>
Device.BeginInvokeOnMainThread(async () =>
{
if (!string.IsNullOrWhiteSpace(result.Text))
{
_zxing.IsAnalyzing = false;
await OnGettingResult(result.Text);
}
});
protected override void OnAppearing()
{
base.OnAppearing();
_zxing.IsAnalyzing = true;
//Not required if already set while intialization
//_zxing.IsScanning = true;
}
Why don't you use it with async? After its done scanning, it returns me back in the navigation stack. It looks like your using the generic Scanner Page so the following solution would work.
var scanner = new ZXing.Mobile.MobileBarcodeScanner();
var result = await scanner.Scan();
if (result != null)
{
variableToAssign = result.Text;
}
If like me, you wanted the scanner to not switch off after one scan, or only scan the same code once, then you want to check if you have already scanned a particular qr code.
var options = new MobileBarcodeScanningOptions();
var scans = new HashSet<string>();
options.PossibleFormats.Add(ZXing.BarcodeFormat.QR_CODE);
ZXingScannerPage scanPage = new ZXingScannerPage(options);
scanPage.Title = "Scan QR Code";
scanPage.OnScanResult += (result) =>
{
//Only scan a particular QR code once
if (!scans.Contains(result.Text))
{
scans.Add(result.Text);
//etc
}
}
there's a workaround that should be work at start of your page and start of your action you will unsubscribe
scanPage.OnScanResult -= YourAction();
after-action finished you should subscribe again for scanning
scanPage.OnScanResult += YourAction();

Select all text without removing h-tags

I am using the inline shared CKEditor (version 4.5.7) in a CMS.
To simplify editing new elements in the page-builder, I use the following code if the text in the container is dummy-text:
editor.on( 'focus', function(ev) {
if(obj.isDummyText($(ev.editor.element.$))) {
ev.editor.execCommand( 'selectAll' );
}
});
The problem is, if the container has a initial styling set, like a h-tag, the h-tag gets stripped when you start typing.
I want to maintain that h-tag in the element so an initial style is already set and the UX is a bit better.
I have tried fixing this with the CKEDITOR.config:
config.enterMode = CKEDITOR.ENTER_BR;
config.shiftEnterMode = CKEDITOR.ENTER_BR;
config.forcePasteAsPlainText = false;
CKEDITOR.dtd.$removeEmpty['i'] = false;
CKEDITOR.dtd.$removeEmpty['h1'] = false;
CKEDITOR.dtd.$removeEmpty['h2'] = false;
CKEDITOR.dtd.$removeEmpty['h3'] = false;
CKEDITOR.dtd.$removeEmpty['h4'] = false;
CKEDITOR.dtd.$removeEmpty['h5'] = false;
CKEDITOR.dtd.$removeEmpty['h6'] = false;
config.allowedContent = true;
Sadly this didn't change anything, the h-tags still get stripped when you start typing:
Before selection:
While selecting:
And after I started typing:
Is there any way to fix/hack this issue?
The solution I found was to create a new selectionRange for the content of the h4 element (without the h4 element itself):
editor.on('focus', function(ev) {
setTimeout(function() {
var element = element = ev.editor.document.getElementsByTag('h4').getItem(0).$;
var textNode = element.childNodes[0];
var startIndex = 0;
var endIndex = textNode.length;
var range = document.createRange();
range.setStart(textNode, startIndex);
range.setEnd(textNode, endIndex);
var selection = window.getSelection();
selection.removeAllRanges();
selection.addRange(range);
}, 100);
})
The code worked great on all browsers but IE without the setTimeout function, so I added this.
Here is a working example:
https://jsfiddle.net/dhxpyobo/

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)

removeAllChildren is not working in createjs

I'm trying to change the bitmap image in createjs and want to remove all children in a container when reset button is clicked. But removeAllChildren is not working in me.
function drawPhoneImage() {
stage = new createjs.Stage('canvas');
container = new createjs.Container();
phone = new createjs.Bitmap(phoneImg);
phone.x = 268;
phone.y = 64;
stage.addChild(container);
container.addChild(phone);
stage.update();
phone.addEventListener("click", function() {
console.log('phone clicked');
createjs.Ticker.addEventListener("tick", movePhoneImage);
});
}
function movePhoneImage(event) {
phone.x -=10;
if(phone.x < 156) {
phone.x =156;
showPhoneSnap();
}
stage.update(event);
}
Then after clicking the phone object, I'll need to replace it with another bitmap(which works):
function showPhoneSnap() {
snap = new createjs.Bitmap(snapImg);
snap.x = 156;
snap.y = 64;
container.removeAllChildren();
container.addChild(snap);
stage.update();
}
At first, removeAllChildren is working in the first child of the container, but when i tried resetting the stage after adding another bitmap in the container..removeAllChildren() is not working.
function resetStage() {
container.removeAllChildren();
stage.update();
}
I'm having a hard time solving this issue, thanks for anyone who can help.
Make sure that "snapImg" is an image that is loaded.
snap = new createjs.Bitmap(snapImg);
The issue is that you are not updating the stage when the image is loaded.
var image = new Image();
image.src = "path";
image.onload = showPhoneSnap;
function showPhoneSnap() {
//This will ensure that the image is ready.
var bmp = new createjs.Bitmap(this);
...
stage.update();
}

dragover event is no not firing in firefox

I'm working to simulate files and directories structure ,using drag and drop,
my code is working fine in IE, Chrome but not working in Firefox ,
while i'm searching i found this fiddle .
> http://jsfiddle.net/G9mJw/20/
same problem works on IE,Chrome but not Firefox !
http://jsfiddle.net/G9mJw/140/
var dropzone = document.getElementById('dropzone');
var draggable = document.getElementById('draggable');
draggable.addEventListener('dragstart', onDragStart, false);
dropzone.ondragover = function(e){e.preventDefault(); }
dropzone.ondrop = function(e){ onDragOver(e); }
function onDragStart(event) {
event.dataTransfer.setData('text/html', null); //cannot be empty string
}
function onDragOver(event) {
var counter = document.getElementById('counter');
counter.innerHTML = parseInt(counter.innerHTML) + 1;
}

Resources