I know there was in Vaadin7 (8) some methods the get / set the cursor position of the textfield from server side.
I'm using Vaadin Flow v21, but there are no such methods. How can I get/set the cursor position from server side synchronously? To set it seens to work fine using some javascript, but I cannot read the actual cursor position, since it is only going async. How to do it sync?
I try to read like this:
public int getSelectionStart() throws InterruptedException
{
Future<Integer> value = UI.getCurrent().getPage().executeJs(
"return $0.shadowRoot.querySelector('[part=\"value\"]').selectionStart;"
, getElement()).toCompletableFuture(Integer.class);
final int[] val = new int[1];
Thread t = new Thread(() ->
{
Integer result = null;
try
{
result = value.get();
}
catch (Exception e)
{
e.printStackTrace();
}
val[0] = result == null ? 0 : result;
});
t.start();
t.join();
return val[0];
};
But above method gives me exception, that the ongoing UI session request has not been closed yet, so basically it cannot execute the javascript, unless I end the request.
This is how I set cursor position, which seems to work since I don't want to get any return value back, so ending the request is going to execute the script and set the proper cursor position.
public void setSelectionStart(int pos)
{
UI.getCurrent().getPage().executeJs("$0.shadowRoot.querySelector('[part=\"value\"]').setSelectionRange($1, $1);", getElement(), pos);
}
Thanks for any help / suggestion!
I hope the documentation for RPC return values could help here: https://vaadin.com/docs/latest/flow/element-api/client-server-rpc/#return-values
Related
I want to do the ill-advised and place both an onClick and onDoubleClick on the same element with each type of event resulting in a different action. Specifically on an image, click to advance to the next image, double-click to toggle fullscreen.
Naturally I get two clicks followed by a double-click (though I understand that some browsers only fire one click before the double-click).
I had thought to make it easy on myself and place each event into a buffer (List) - or rather to add the event.type string to a list, then, after a suitable elapse of time, say 250 or 300 milliseconds examine the last item in the buffer and if doubleclick then go fullscreen else advance the length of the list.
I have found that the list only ever has one item, and I have not worked out how to get the timer to work..
Amongst my attempts was this one:
void catchClickEvents(Event e) {
var eventTypes = new List<String>();
eventTypes.add(e.type);
Duration duration = const Duration(milliseconds: 300);
var timeout = new Timer(duration, () => processEvents(eventTypes));
}
void processEvents(List eTypes) {
// just to see what is going on...
print(eTypes);
}
this results in this output printed to the console:
[click]
[click]
[dblclick]
rather than
[click, click, dblclick]
If I slow it down there is a clear delay before those three event types are printed together
So...
The bigger question is
'What is the darty way to distiguish between single and double-click and perform a different action for each?'
The other questions are:
How do I fill a buffer with successive events (and later clear it down) - or even how do I use Dart's Stream of events as a buffer...
What is the real way timeout before examining the contents of the buffer?
(and I guess the final question is 'should I abandon the effort and settle for a conventional set of buttons with glyph-icons?'!)
I'm not sure if IE still has the event sequence explained here (no 2nd click event)
https://stackoverflow.com/a/5511527/217408
If yes you can use a slightly deviated variant of Roberts solution:
library app_element;
import 'dart:html' as dom;
import 'dart:async' as async;
Duration dblClickDelay = new Duration(milliseconds: 500);
async.Timer clickTimer;
void clickHandler(dom.MouseEvent e, [bool forReal = false]) {
if(clickTimer == null) {
clickTimer = new async.Timer(dblClickDelay, () {
clickHandler(e, true);
clickTimer = null;
});
} else if(forReal){
print('click');
}
}
void dblClickHandler(dom.MouseEvent e) {
if(clickTimer != null) {
clickTimer.cancel();
clickTimer = null;
}
print('doubleClick');
}
void main() {
dom.querySelector('button')
..onClick.listen(clickHandler)
..onDoubleClick.listen(dblClickHandler);
}
or just use Roberts solution with the mouseUp event instead of the click event.
The problem is that your variable is not global.
var eventTypes = new List<String>();
void catchClickEvents(Event e) {
eventTypes.add(e.type);
Duration duration = const Duration(milliseconds: 300);
var timeout = new Timer(duration, () => processEvents(eventTypes));
}
void processEvents(List eTypes) {
print(eTypes);
}
There also is e.detail that should return the number of the click. You can use that, if you don't need the Internet Explorer. The problem with your list is that it grows and never gets cleared.
Let's take into account what we know: You get click events and at somepoint you have doubleclicks.
You could use a click counter here. (Or use e.detail) to skip the second click event. So you only have click and dblclick.
Now when you get a click event, you create a new timer like you did before and run the click action. If you get the dblclick event you simply run you action. This could like this:
DivElement div = querySelector('#div');
Timer timeout = null;
div.onClick.listen((MouseEvent e) {
if(e.detail >= 2) {
e.preventDefault();
} else {
if(timeout != null) {
timeout.cancel();
}
timeout = new Timer(new Duration(milliseconds: 150), () => print('click'));
}
});
div.onDoubleClick.listen((MouseEvent e) {
if(timeout != null) {
timeout.cancel();
timeout = null;
}
print('dblclick');
});
This is the example code that works for me. If you can't rely on e.detail just us a counter and reset it after some ms after a click event.
I hope this helps you.
Regards, Robert
Your page should react on user inputs as fast as possible. If you wait to confirm double click - your onClick will become much less responsive. You can hide the problem by changing visual state of the element(for example, playing animation) after first click but it can confuse user. And it gets even worse with handheld. Also if element has to react only on onClick event, you can "cheat" and listen to onmousedown instead - it will make your UI much more responsive.
On top of all this, double click, from client to client, may have noticeably different trigger time interval and it isn't intuitive, for user, that you can double click something. You will have to bloat your interface with unnecessary hints.
edit: Added my solution. It should be fairly extensible and future proof.
import 'dart:html';
import 'dart:async';
import 'dart:math';
//enum. Kinda... https://code.google.com/p/dart/issues/detail?id=88
class UIAction {
static const NEXT = const UIAction._(0);
static const FULLSCREEN = const UIAction._(1);
static const ERROR = const UIAction._(2);
final int value;
const UIAction._(this.value);
}
/**
*[UIEventToUIAction] transforms UIEvents into corresponding UIActions.
*/
class UIEventToUIAction implements StreamTransformer<UIEvent, UIAction> {
/**
* I use "guesstimate" value for [doubleClickInterval] but you can calculate
* comfortable value for the user from his/her previous activity.
*/
final Duration doubleClickInterval = const Duration(milliseconds: 400);
final StreamController<UIAction> st = new StreamController();
Stream<UIAction> bind(Stream<UIEvent> originalStream) {
int t1 = 0,
t2 = 0;
bool isOdd = true;
Duration deltaTime;
originalStream.timeout(doubleClickInterval, onTimeout: (_) {
if ((deltaTime != null) && (deltaTime >= doubleClickInterval)) {
st.add(UIAction.NEXT);
}
}).forEach((UIEvent uiEvent) {
isOdd ? t1 = uiEvent.timeStamp : t2 = uiEvent.timeStamp;
deltaTime = new Duration(milliseconds: (t1 - t2).abs());
if (deltaTime < doubleClickInterval) st.add(UIAction.FULLSCREEN);
isOdd = !isOdd;
});
return st.stream;
}
}
void main() {
//Eagerly perform time consuming tasks to decrease the input latency.
Future NextImageLoaded;
Future LargeImageLoaded;
element.onMouseDown.forEach((_) {
NextImageLoaded = asyncActionStub(
"load next image. Returns completed future if already loaded");
LargeImageLoaded = asyncActionStub(
"load large version of active image to show in fullscreen mode."
"Returns completed future if already loaded");
});
Stream<UIEvent> userInputs = element.onClick as Stream<UIEvent>;
userInputs.transform(new UIEventToUIAction()).forEach((action) {
switch (action) {
case UIAction.FULLSCREEN:
LargeImageLoaded.then( (_) =>asyncActionStub("fullscreen mode") )
.then((_) => print("'full screen' finished"));
break;
case UIAction.NEXT:
NextImageLoaded.then( (_) =>asyncActionStub("next image") )
.then((_) => print("'next image' finished"));
break;
default:
asyncActionStub("???");
}
});
}
final DivElement element = querySelector("#element");
final Random rng = new Random();
final Set performed = new Set();
/**
*[asyncActionStub] Pretends to asynchronously do something usefull.
* Also pretends to use cache.
*/
Future asyncActionStub(String msg) {
if (performed.contains(msg)) {
return new Future.delayed(const Duration(milliseconds: 0));
}
print(msg);
return new Future.delayed(
new Duration(milliseconds: rng.nextInt(300)),
() => performed.add(msg));
}
I am working on ListView section, in this, the user can search the content by name and directly move at the first element of List via pressing a keyboard button. Like, if you press button B from (right vertical manager) it will scroll the list and move focus to first record of B.
The code is working fine in simulator but it's not working on Touch device - I have BB 9380 Curve.
here is the code for :
LabelField a = new LabelField("A" , FOCUSABLE)
{
protected void paint(Graphics graphics)
{
graphics.setColor(0xC4C4C4);
super.paint(graphics);
}
protected boolean navigationClick(int status, int time)
{
//fieldChangeNotify(1);
injectKey(Characters.LATIN_CAPITAL_LETTER_A);
injectKey(Characters.LATIN_CAPITAL_LETTER_A);
return true;
}
};
private void injectKey(char key)
{
try
{
searchList.setFocus();
KeyEvent inject = new KeyEvent(KeyEvent.KEY_DOWN, key, 0);
inject.post();
/*inject.post();*/
} catch (Exception e) {
Log.d("In injectKey :: :: :: "+e.toString());
MessageScreen.msgDialog("In Inject Key "+e.toString());
}
}
Alternate Solution
I would recommend a different strategy for this. Instead of trying to simulate key press events, I would define one method that handles a keypress of a certain letter, or a touch click on that same letter's LabelField.
Source: blackberry.com
So, you can have code that handles key presses by using
protected boolean keyChar( char character, int status, int time )
{
// you might only want to do this for the FIRST letter entered,
// but it sounds like you already have the keypress handling
// the way you want it ...
if( CharacterUtilities.isLetter(character) )
{
selectLetter(character);
return true;
}
return super.keyChar( character, status, time );
}
and then also handle touch events:
LabelField a = new LabelField("A" , FOCUSABLE)
{
protected void paint(Graphics graphics)
{
graphics.setColor(0xC4C4C4);
super.paint(graphics);
}
protected boolean navigationClick(int status, int time)
{
char letter = getText().charAt(0);
selectLetter(letter);
return true;
}
};
then, simply define a method that takes in one character, and scrolls to the start of that part of the list:
private void selectLetter(char letter);
Key Injection
If you really, really want to simulate key presses, though, you might try changing the code so that it injects two events: key down, and then key up (you're currently injecting two key down events). This might be causing problems.
injectKey(Characters.LATIN_CAPITAL_LETTER_A, true);
injectKey(Characters.LATIN_CAPITAL_LETTER_A, false);
with
private void injectKey(char key, boolean down)
{
try
{
searchList.setFocus();
int event = down ? KeyEvent.KEY_DOWN : KeyEvent.KEY_UP;
KeyEvent inject = new KeyEvent(event, key, 0);
inject.post();
} catch (Exception e) { /** code removed for clarity **/
}
}
Additional Note
For UIs, I like to trigger events on the key up, or unclick events. I think this makes a better experience for the user. So, you could replace keyChar() with keyUp() and navigationClick() with navigationUnclick() if you want to do this.
yesterday i asked one question and got the answer from our friend here, and i ran successfully, also it have one problem with it. "Yester day My question is, when we selecting the drop down list then it should be shown by a label as "1" at very first time, again it'll be increas by selection", this is what the answer i got..,
static int count = 0;
private void bind()
{
ArrayList ar = new ArrayList();
ar.Add("first");
ar.Add("Second");
ar.Add("Third");
ar.Add("Four");
ar.Add("Five");
ar.Add("Six");
ar.Add("Seven");
CCddl.DataSource = ar;
CCddl.DataBind();
}
protected void CCddl_SelectedIndexChanged(object sender, EventArgs e)
{
if (count == 0) count = 1;
Label12.Text = count++.ToString();
}
this code worked, but once the running window getting closed, then it lose the continuation, i mean again application getting run it'll shown again "1". But exactly what i want is, the number continuation should be end when the system day has change.
Try using the Application Settings feature. I added two user settings CountDate and Count in the Project->Property's->Settings and changed your SelectedIndexChangedEvent to
protected void CCddl_SelectedIndexChanged(object sender, EventArgs e)
{
if (count == 0) count = 1;
Label12.Text = count++.ToString();
Properties.Settings.Default.CountDate = DateTime.Now.Date;
Properties.Settings.Default.Count = count;
Properties.Settings.Default.Save();
}
And right before you call your Bind Method during your form initialization put something like this.
if(Properties.Settings.Default.CountDate.Date != DateTime.Now.Date)
{
Properties.Settings.Default.Count = 0;
Properties.Settings.Default.CountDate = DateTime.Now.Date;
Properties.Settings.Default.Save();
}
else
count = Properties.Settings.Default.Count;
bind();
Added the Property Settings Image
You should somehow store the value in a database or something. With the date value. Then when the datechanges you just reset the value.
i am trying to embed twitter posting feature in my application.
i am using twitter api_me-1.8
i am able to reach the login screen(though most of the text is displayed as boxes- i am guessing that the text is in hindi/tamil as i am in india...), but as soon as i enter my credentials,i get taken to another page with some text in the top in boxes...
and more text in english below that(you can revoke access to any application...) ...then i get an illeagalArguementException after a minute...
i tried to debug the application,
public TwitterUiScreen(String wallMsg) {
System.out.println("Twitter UI BEGINS!");
setTitle("Twitter");
this.wallMsg = wallMsg;
BrowserContentManager browserMngr = new BrowserContentManager(0);
RenderingOptions rendOptions = browserMngr.getRenderingSession()
.getRenderingOptions();
rendOptions.setProperty(RenderingOptions.CORE_OPTIONS_GUID,
RenderingOptions.SHOW_IMAGES_IN_HTML, false);
rendOptions.setProperty(RenderingOptions.CORE_OPTIONS_GUID,
RenderingOptions.ENABLE_EMBEDDED_RICH_CONTENT, true);
rendOptions.setProperty(RenderingOptions.CORE_OPTIONS_GUID,
RenderingOptions.DEFAULT_FONT_FACE, true);
rendOptions.setProperty(RenderingOptions.CORE_OPTIONS_GUID,
RenderingOptions.DEFAULT_CHARSET_VALUE, true);
rendOptions.setProperty(RenderingOptions.CORE_OPTIONS_GUID,
RenderingOptions.JAVASCRIPT_ENABLED, true);
/*
* browserMngr.getRenderingSession().getRenderingOptions().setProperty(
* RenderingOptions.CORE_OPTIONS_GUID,
* RenderingOptions.DEFAULT_FONT_FACE, Font.getDefaultFont());
*/
add(browserMngr);
OAuthDialogWrapper pageWrapper = new BrowserContentManagerOAuthDialogWrapper(browserMngr);
pageWrapper.setConsumerKey(CONSUMER_KEY);
pageWrapper.setConsumerSecret(CONSUMER_SECRET);
pageWrapper.setCallbackUrl(CALLBACK_URL);
pageWrapper.setOAuthListener(this);
pageWrapper.login();
}
i had breakpoints upto the last line, and all of them were hit, with no problems...
but as soon as i logged in, i hit the exception.( i think it was in this page:-
BrowserContentManagerOAuthDialogWrapper.java (version 1.1 : 45.3, super bit)
after which i get to a third screen.
the comment was barely legible- so i thought i might as well add the code over here:
public static final String OAUTH_CALLBACK_SCHEME = "x-oauthflow-twitter";
public static final String OAUTH_CALLBACK_HOST = "callback";
public static final String OAUTH_CALLBACK_URL = OAUTH_CALLBACK_SCHEME+ "://" + OAUTH_CALLBACK_HOST;
private final String CALLBACK_URL = OAUTH_CALLBACK_URL;
i managed to get the source and attach it to the jar file. the exception that the BrowserContentManagerOAuthDialogWrapper.java throws is:: Protocol not found: net.rim.device.cldc.io.x-oauthflow-twitter.Protocol
in this method::
protected void loadUrl(final String url, final byte[] postData,
final Event event) {
new Thread() {
public void run() {
try {
HttpConnection conn = getConnection(url);
//
if (postData != null) {
conn.setRequestMethod(HttpConnection.POST);
conn.setRequestProperty(
"Content-Type",
"application/x-www-form-urlencoded");
conn.setRequestProperty(
"Content-Length", String.valueOf(postData.length));
//
OutputStream out = conn.openOutputStream();
out.write(postData);
out.close();
}
//
browserManager.setContent(
conn, renderingListenerOAuth, event);
} catch (IOException e) {
throw new IllegalArgumentException(e.getMessage());
}
}
}.start();
}
feel like hitting myself.
my clients had told us that the twitter posting was not working...
so i assumed that it did not work.
for some reason, it does not work in the simulator- but seems to work fine on the device.
the clients have assumed that it does not work, as after we try logging in, it takes too long to post, and displays the third screen for about 20 seconds, and they seem to have clicked back early, deciding that posting did not work.
now i need to figure out a way to post a message on the third screen asking the user to wait for the post to be successful.
I am working on an application for blackberry that will be downloading a file. I would like to show a progress bar during this download. I have tried every combination of GaugeField and ProgressIndicatorView that I can come up with but I am getting nothing. My download is going but the progress bar is never getting updated on the screen. In fact before I started trying for the progress bar I was trying to simply use a TextField and update it with the current percentage completed of the download, and I had no luck that way either.
This is inside my Screen:
view = new ProgressIndicatorView(0);
model = new ProgressIndicatorModel(0, 100, 0);
controller = new ProgressIndicatorController();
model.setController(controller);
view.setModel(model);
view.setController(controller);
controller.setModel(model);
controller.setView(view);
view.setLabel("Percent completion");
view.createProgressBar(Field.FIELD_HCENTER);
add(view);
UiApplication.getUiApplication().invokeLater(new Runnable()
{
public void run()
{
downloadVideo();
initializeMedia();
// If initialization was successful...
if(_videoField != null)
{
createUI();
updateVideoSize();
try {
_player.start();
} catch (MediaException e) {
// TODO Auto-generated catch block
e.printStackTrace();
ScreenSaverActivity.errorDialog("MEDIA EXCEPTION: "+e.toString());
}
}
else
{
_statusField.setText("Error: Could not load media");
}
}
});
downloadVideo() method:
private void downloadVideo(){
DownloadThread _dlThread = new DownloadThread();
_dlThread.start();
}
DownloadThread class:
class DownloadThread extends Thread {
public void run(){
try {
HttpConnection httpConn;
httpConn = (HttpConnection)Connector.open("http://url/to/myMovie.mp4");
InputStream is = httpConn.openInputStream();
String fName = "file:///store/BlackBerry/videos/myMovie.mp4";
FileConnection fconn = (FileConnection) Connector.open(fName, Connector.READ_WRITE);
if (!fconn.exists())
fconn.create();
OutputStream os = fconn.openOutputStream();
long lengthOfFile = httpConn.getLength();
int total = 0;
int count;
byte data[] = new byte[1024];
while ((count = is.read(data)) != -1) {
//I have tried this line outside of synchronized too, with no luck
synchronized(Application.getEventLock()) {
EmbeddedMediaScreen.this.model.setValue((int)(total*100/lengthOfFile));
}
total += count;
//write this chunk
os.write(data, 0, count);
}
os.flush();
os.close();
} catch (IOException e) {
ScreenSaverActivity.errorDialog(e.toString());
e.printStackTrace();
}
}
}
While my application is doing the download the device becomes unresponsive, so I am guess that my trouble is the download work is happing on the main(UI) thread for some reason and that this has something to do with why I can't get the screen to update with the progress. Any help would be greatly appreciated.
P.S. Android is generally my home, not blackberry, sorry if I have overlooked something that should be obvious =/
I see a few issues. It looks like the code after 'downloadVideo()' assumes the download happened synchronously. Since you want the download to happen in the background, you need to setup a separate method to handle the completion of the download. Right now your video playback code executes just after the download thread is started.
Also, you are acquiring the UI event lock every 1k of download. Since this is a video, I'm assuming a multi-megabyte download, meaning you are acquiring and releasing that lock thousands of times. This doesn't make much sense, in part because the download meter only has 100 different values, so you are mostly updating it with the same value. The easiest fix is to keep track of the last value sent to the model. if it is unchanged, then don't acquire or update the value.
In general, I don't like to acquire the UI lock directly, because there is no queue management. So I use invokeLater for all code that needs to update the UI. This has the nice property that the invokeLater code happens sequentially. You can overrun the queue, as this code would do if you directly change it to invokeLater. To avoid that problem, you have to setup another variable to track whether you've got a progress meter update queued. If so, don't queue any more work.