wkWebview Navigator Hangs on a simple page on IOS13 - codenameone

Since I updated to IOS13 our App hangs, the page and de Menu don't work, on IOS12 works fine.
I attach a simple code to try, simple press some times for example on zoom in/out and alternate with click on map, and the App hangs.
Form hi = new Form("form2");
Toolbar tb = hi.getToolbar();
Image icon = theme.getImage("icon.png");
Container topBar = BorderLayout.east(new Label(icon));
topBar.add(BorderLayout.SOUTH, new Label("Cool App Tagline...", "SidemenuTagline"));
topBar.setUIID("SideCommand");
tb.addComponentToSideMenu(topBar);
tb.addMaterialCommandToSideMenu("Home", FontImage.MATERIAL_HOME, e -> {});
hi.setLayout(new BorderLayout());
BrowserComponent browserComponent = new BrowserComponent();
browserComponent.setURL("https://leafletjs.com/examples/quick-start/example.html");
hi.add(BorderLayout.CENTER, browserComponent);
hi.show();

The problem was in the leaflet.js, in this commit https://github.com/Leaflet/Leaflet/pull/6855/files/862d3f600ce0f40795149a32bf980ff6000bf132 makes the library 1.6.0 hangs on codenameOne and IOS13.
The solution for me, was use the oficial 1.5.1 library (http://cdn.leafletjs.com/leaflet/v1.5.1/leaflet.zip) and make a function to emulate an doubleclick, based on this post: leaflet: don't fire click event function on doubleclick
This is part of code:
// Create a Global variable
var clicked = 0;
//on map declaration disable tap and doubleClickZomm
mapid = new L.map("mapid",{ attributionControl: false, zoomControl: false, doubleClickZoom: false, tap : false});
// Map click event
mapid.on('click', function(e) {
// Calling the new function
controlClick();
});
// Map DoubleClick event
mapid.on('dblclick', function(e) {
// Calling the new function
controlClick();
});
/*
* Declare an Emmulated doubleClickZoom function
*/
function controlClick(){
clicked = clicked +1;
setTimeout(function(){
if(clicked > 0){
clicked = 0;
}
}, 500);
if (clicked > 1 ){
mapid.zoomIn();
clicked = 0;
}
}

Related

Command handling in Qooxdoo multi window application

I want to create a Qooxdoo application that consists of a Desktop with multiple Windows. The Desktop (and not each Window) also has a (common) ToolBar.
Now I want to have a command to "save" the document of the active window. This command can be triggered by the keyboard shortcut "Ctrl+S" as well as a button on the toolbar.
To handle the "Ctrl+S" to reach the currently active window the qx.ui.command.GroupManager (as described by https://qooxdoo.org/documentation/v7.5/#/desktop/gui/interaction?id=working-with-commands and https://qooxdoo.org/qxl.demobrowser/#ui~CommandGroupManager.html) is supposed to be the best solution. And I could easily implement that in my code.
But now I'm struggling to make the toolbar save button also call the save command of the currently active window as I don't know how to bind it correctly to the GroupManager.
An example code to get started in the playground https://qooxdoo.org/qxl.playground/:
// NOTE: run this script only once. Before running it again you need to reload
// the page as it seems that the commands are accumulation and not reset.
// I guess that this is a bug in the Playground
const root = this.getRoot();
qx.Class.define('test.Application',
{
extend : qx.application.Standalone,
members: {
main: function() {
const layout = new qx.ui.layout.VBox(5);
const container = new qx.ui.container.Composite(layout);
root.add(container, {edge: 0});
const windowManager = new qx.ui.window.Manager();
const desktop = new qx.ui.window.Desktop(windowManager);
this._manager = new qx.ui.command.GroupManager();
const menuBar = new qx.ui.menubar.MenuBar();
let menu = new qx.ui.menu.Menu();
///////////////////////////
// TODO: Call _doSave() of the active window!
let saveMenuButton = new qx.ui.menu.Button('Save','#MaterialIcons/save/16');
///////////////////////////
menu.add(saveMenuButton);
var fileMenu = new qx.ui.menubar.Button('File', null, menu);
menuBar.add(fileMenu);
const toolBar = new qx.ui.toolbar.ToolBar();
///////////////////////////
// TODO: Call _doSave() of the active window!
let saveToolBarButton = new qx.ui.toolbar.Button('Save','#MaterialIcons/save/16');
///////////////////////////
toolBar.add(saveToolBarButton);
container.add(menuBar,{flex:0});
container.add(toolBar,{flex:0});
container.add(desktop,{flex:1});
this._foo1 = new test.Window('foo1', this);
desktop.add(this._foo1);
this._foo1.open();
this._foo1.moveTo(100,20);
this._foo2 = new test.Window('foo2', this);
desktop.add(this._foo2);
this._foo2.open();
this._foo2.moveTo(200,100);
this._foo3 = new test.Window('foo3', this);
desktop.add(this._foo3);
this._foo3.open();
this._foo3.moveTo(300,180);
},
getGroupManager() {
return this._manager;
}
}
});
qx.Class.define('test.Window', {
extend: qx.ui.window.Window,
construct(windowName, controller) {
this.base(arguments, windowName);
this._name = windowName;
let commandGroup = new qx.ui.command.Group();
const cmd = new qx.ui.command.Command("Ctrl+S");
cmd.addListener('execute', this._doSave, this);
commandGroup.add('save', cmd);
controller.getGroupManager().add(commandGroup);
this.addListener('changeActive', () => {
if (this.isActive()) {
controller.getGroupManager().setActive(commandGroup);
}
}, this);
},
members: {
_doSave() {
alert("save " + this._name);
}
}
});
a = new test.Application();
How should the saveMenuButton.setCommand() and saveToolBarButton.setCommand() should look like to always call the command of the active window?
You can control a current active window via Desktop class:
let saveToolBarButton = new qx.ui.toolbar.Button('Save');
saveToolBarButton.addListener("click", function(){
desktop.getActiveWindow()._doSave();
}, this);
Would be great for your solution imo is to create a separate command and add this command to buttons:
const saveActiveWindowCommand = new qx.ui.command.Command();
saveActiveWindowCommand.addListener("execute", function(){
desktop.getActiveWindow()._doSave();
}, this);
let saveMenuButton = new qx.ui.menu.Button('Save');
saveMenuButton.setCommand(saveActiveWindowCommand);
let saveToolBarButton = new qx.ui.toolbar.Button('Save');
saveToolBarButton.setCommand(saveActiveWindowCommand);
EDIT:
You could set commands dynamically for "Main Panel" menu buttons. Because there is only one instance of command pressing "Ctrl+S" will trigger only one command but maybe you would like that main bar save buttons have extra logic.
You have in application class next method which will be called from window class when changeActive event happens.
setSaveCommand(command){
this.saveMenuButton.setCommand(command);
this.saveToolBarButton.setCommand(command);
},
and in your Window class:
if (this.isActive()) {
controller.setSaveCommand(cmd);
controller.getGroupManager().setActive(commandGroup);
}

how to add an event that fires after scrolling the scrollbar to the end

I am working with standalone (not mobile) and I think it is _getScroll method for reaching it.
how to implement it here qooxdoo selectbox example
I found similar for mobile implementing virtual scrolling list console.log says container._getScroll is not a function.
The idea is to get scrollbar from a widget, the scrollbar you are needed is NativeScrollbar of the widget qx.ui.list.List. Then add event handler for a "scroll" event. In handler u have to compare current position of scroll and maximum.
Try the code below (eg copy and paste into the Qooxdoo playground).
qx.Class.define("SelectBoxWithScrollEndEvent", {
extend: qx.ui.form.SelectBox,
construct: function(){
this.base(arguments);
this.__setupScroll();
},
events: {
"scrollEndHappened": "qx.event.type.Event"
},
members: {
__setupScroll: function(){
const list = this.getChildControl("list");
const scrollbar = list.getChildControl("scrollbar-y");
scrollbar.addListener("scroll", function(e){
if (scrollbar.getMaximum() === scrollbar.getPosition()){
this.fireEvent("scrollEndHappened");
}}, this);
}
}
});
const box = new SelectBoxWithScrollEndEvent();
const data = new qx.data.Array([1,2,3,4,5,1,2,3,4,5,1,2,3,4,5,1,2,3,4,5,1,2,3,4,5]);
const controller = new qx.data.controller.List(data, box);
box.addListener("scrollEndHappened", function(){
alert("SCROLL HAPPENED ALERT");
}, this);
this.getRoot().add(box);

mobiscroll image list with .click() handler

When I bind a
$(document).on("click", '.dw-sel', function(e) { opens modal box });
on click, it fires each time, even when there is a drag. I want to get the click function called, only when there is a click without any draging of the wheel. Is there any of such event provided already? Or how to achieve differenciating click from drag?
EDIT:
ok, found a solution line 929 in mobiscroll.core.js
if (!dist && !moved) { // this is a "tap"
istap = true;
tindex = Math.floor((stop - ttop) / h);
var li = $('.dw-li', target).eq(tindex)
li.addClass('dw-hl'); // Highlight
setTimeout(function() {
li.removeClass('dw-hl');
}, 200);
} else {
tindex = Math.round(pos - dist / h);
istap = false;
}
I set the variable istap, and on that I based my click event.

Sencha Touch 2.0 - How to set scrolling inside a textarea for Mobile Safari?

In my mobile safari project, i need to create a message posting feature. it is requires scrolling inside a textarea when lines of texts exceed the max rows of the text area. i couldn't find 'scrollable' property in Ext.field.textarea, any idea how?
Cheers!
There is a bug in touch 2.0.x such that the framework explicitly prevents the scroll action. Supposedly a fix will be in 2.1, though I didn't see that officially, just from a guy on a forum.
Until then, there is kind of a solution for touch1 here http://www.sencha.com/forum/showthread.php?180207-TextArea-scroll-on-iOS-not-working that you can port to V2. It basically involves adding an eventlistener to the actual textarea field (not the sencha object) and then calling preventdefault if it's a valid scrollevent.
The full code is at that link, but the salient bits are here.
Grab the <textarea> field (not the Sencha Touch object) directly and use addListener to apply
'handleTouch' on touchstart and 'handleMove' on touchmove
handleTouch: function(e) {
this.lastY = e.pageY;
},
handleMove: function(e) {
var textArea = e.target;
var top = textArea.scrollTop <= 0;
var bottom = textArea.scrollTop + textArea.clientHeight >= textArea.scrollHeight;
var up = e.pageY > this.lastY;
var down = e.pageY < this.lastY;
this.lastY = e.pageY;
// default (mobile safari) action when dragging past the top or bottom of a scrollable
// textarea is to scroll the containing div, so prevent that.
if((top && up) || (bottom && down)) {
e.preventDefault();
e.stopPropagation(); // this tops scroll going to parent
}
// Sencha disables textarea scrolling on iOS by default,
// so stop propagating the event to delegate to iOS.
if(!(top && bottom)) {
e.stopPropagation(); // this tops scroll going to parent
}
}
Ext.define('Aspen.util.TextArea', {
override: 'Ext.form.TextArea',
adjustHeight: Ext.Function.createBuffered(function (textarea) {
var textAreaEl = textarea.getComponent().input;
if (textAreaEl) {
textAreaEl.dom.style.height = 'auto';
textAreaEl.dom.style.height = textAreaEl.dom.scrollHeight + "px";
}
}, 200, this),
constructor: function () {
this.callParent(arguments);
this.on({
scope: this,
keyup: function (textarea) {
textarea.adjustHeight(textarea);
},
change: function (textarea, newValue) {
textarea.adjustHeight(textarea);
}
});
}
});

Hyperlink.Click not being executed

I'm writing a Windows Phone Mango app. I have a hyperlink that contains email addresses. I want it to show a message box on tap:
Hyperlink href = new Hyperlink();
href.Click += (s, r) =>
{
MessageBox.Show("href clicked");
};
// add href to RichTextBox
When I click on the hyperlink in the emulator, nothing happens. The click += line is hit in a debugger, but the new EmailComposeTask() line isn't.
What am I doing wrong? Is Click not the event I want?
Update: I switched EmailComposeTask to MessageBox to verify that this issue isn't related to the email compose task not running on the emulator. I've reproduced this issue on my device.
The following code works:
GestureService.GetGestureListener(href); // adding this makes it work
href.Click += (s, r) =>
{
MessageBox.Show("href clicked");
new EmailComposeTask() { To = entireLink.Value }.Show();
};
href.Inlines.Add(new Run() { Text = entireLink.Value });
GetGestureListener creates a gesture listener if it doesn't already exist.
You should use HyperlinkButton Class, Hyperlink is a class used with rich text document rendering.
Following code is runs on device. text is RichTextBox object.
var linkText = new Run() { Text = "Link text" };
var link = new Hyperlink();
link.Inlines.Add(linkText);
link.Click += (o, e) =>
{
MessageBox.Show("Link clicked");
};
var paragraph = new Paragraph();
paragraph.Inlines.Add(link);
text.Blocks.Add(paragraph);

Resources