Consider a scenario in which a button is defined in QML:
Page{
Container{
Button{
text:"click the button"
onclicked
{
//action performed by the button
}
}
}
}
The usual way is to handle click events inside QML with a signal handler (as done above). My question is: is it possible to handle the event in C++? In term of code, is it possible to perform something like this:
{
Button *b1 = root->findChild<Button*>("button_object");
QObject::connect(b1,SIGNAL(clicked()),this,SLOT(buttonActionToBePerformed()));
}
void buttonActionToBePerformed()
{
//button action to be performed is written here
}
Short answer is yes.
Long answer, your assumptiont hat the usual way to handle click evens in QML is incorrect. It is up to the developer how much use is made of QML, and how much use is made of C++. Each paradigm has advanages and disavantages.
Related
when i click on a button the click event handler executes a code . If by mistake(if browser hangs) i click on the button twice the code gets executed twice.i dont want that to happen.
Any suggestions to stop that?
i suppose i should use a schedular or timer but i am not sure
below is the code:
public void onSendButtonClicked() {
disableButtons();
eventBus.fireEvent(new SendEmcsDeclarationEvent(getDeclaration(), getMsgType()));
}
You can - as Abdullah mentioned - disable/enable every widget in GWT with
widget.setEnable(false)
and
widget.setEnable(true).
If you want to lock the whole screen, create a modal popup, show it, after the button is pressed and hide it, after the code has finished.
public void onSendButtonClicked() {
myProgessBar.show();
eventBus.fireEvent(new SendEmcsDeclarationEvent(getDeclaration(), getMsgType()));
myProgressBar.hide();
}
If you are using a async call, you have to hide the progessbar in the callbacks. In this case the finally command might be executed before the callback is executed. In your case it might be a good idea to create a ShowProgressBarEvent and HideProgressbarEvent, so that you can use the progressbar in your whole application.
If your are using a widget library f.e.: GXT, you will find a ProgressBar ready to use.
Hope that helps.
The best way I can think of is to enable/disable the button itself so as to make sure that the code in handler is not called again until before the previous call finishes up.
public void onSendButtonClicked()
{
try
{
disableButtons();
eventBus.fireEvent(new SendEmcsDeclarationEvent(getDeclaration(), getMsgType()));
}
catch (Exception ex)
{
throw ex;
}
finally
{
enableButtons();
}
}
When I create a button, I always also add an animating gif (ajaxloader).
When the button is clicked I make the button invisble, the ajaxloader visible.
When the action is done, I make the ajaxloader invisible, and the button visible.
This way the user has some visual feedback that something is happening (what you don't get when disabling the button), and not the entire application gets blocked (as a modal does) which is one of the plus points using ajax.
I have a hook on the beforeUnload event. If i try to click on a link, reload or close the tab or the navigator, the app ask for confirmation before leaving. That's the desired behavior.
But if click on the back button or the backspace outside an input, no confirmation.
At the beginning of the html :
window.onbeforeunload = function() {
if (confirmEnabled)
return "";
}
And i use the Gwt PlaceHistoryMapper.
What did i miss ? Where did i forgot to look ?
Thanks !
As long as you stay within your app, because it's a single-page app, it doesn't by definition unload, so there's no beforeunload event.
When using Places, the equivalent is the PlaceChangeRequestEvent dispatched by the PlaceController on the EventBus. This event is also dispatched in beforeunload BTW, and is the basis for the mayStop() handling in Activities.
Outside GWT, in the JS world, an equivalent would be hashchange and/or popstate, depending on your PlaceHistoryHandler.Historian implementation (the default one uses History.newItem(), so that would be hashchange).
As we are facing GWT performance issues in a mobile app I peeked into Google Wave code since it is developed with GWT.
I thought that all the buttons there are widgets but if you look into generated HTML with firebug you see no onclick attribute set on clickable divs. I wonder how they achieve it having an element that issues click or mousedown events and seemingly neither being a widget nor injected with onclick attribute.
Being able to create such components would surely take me one step further to optimizing performance.
Thanks.
ps: wasnt google going to open source client code too. Have not been able to find it.
You don't have to put an onclick attribute on the HTML to make it have an onclick handler. This is a very simple example:
<div id="mydiv">Regular old div</div>
Then in script:
document.getElementById('mydiv').onclick = function() {
alert('hello!');
}
They wouldn't set the onclick property directly, it would have been set in the GWT code or via another Javascript library.
The GWT documentation shows how to create handlers within a GWT Java app:
public void anonClickHandlerExample() {
Button b = new Button("Click Me");
b.addClickHandler(new ClickHandler() {
public void onClick(ClickEvent event) {
// handle the click event
}
});
}
This will generate an HTML element and bind a click handler to it. However, in practice this has the same result as using document.getElementById('element').onclick() on an existing element in your page.
You can hook functions to the onclick event using JavaScript. Here's an example using jQuery:
$(document).ready(function(){
$("#div-id").click(function(){
/* Do something */
});
});
If you're interested in optimizing performance around this, you may need to investigate event delegation, depending on your situation.
A click event is generated for every DOM element within the Body. The event travels from the Body down to the element clicked (unless you are using Internet Explorer), hits the element clicked, and then bubbles back up. The event can be captured either through DOM element attributes, event handlers in the javascript, or attributes at any of the parent levels (the bubbling or capturing event triggers this).
I'd imagine they've just set it in a .js file.
Easily done with say jQuery with $(document).ready() for example.
I'm creating a webapp for the iPhone, based in HTML/CSS/JS. I'm using forms to receive input and pass data to the script, but a problem I'm encountering is that the keyboard won't disappear. The user will enter the information, hit submit, and since it's JavaScript the page doesn't reload. The keyboard remains in place, which is a nuisance and adds another step for users (having to close it).
Is there any way to force the keyboard in Safari to go away? Essentially, I have a feeling this question is equivalent to asking how I can force an input box to lose focus or to blur. Looking online, I find plenty of examples to detect the blur event, but none to force this event to occur.
Even more simply, you can call blur() on the currently focused element. $("#inputWithFocus").blur()
document.activeElement.blur();
You could try focus()ing on a non-text element, like the submit button.
Here's a small code snippet that always hides the keyboard whenever the focus is in an input or textarea field and the user taps outside of that element (the normal behaviour in desktop browsers).
function isTextInput(node) {
return ['INPUT', 'TEXTAREA'].indexOf(node.nodeName) !== -1;
}
document.addEventListener('touchstart', function(e) {
if (!isTextInput(e.target) && isTextInput(document.activeElement)) {
document.activeElement.blur();
}
}, false);
To detect when the return button is pressed use:
$('input').bind('keypress', function(e) {
if(e.which === 13) {
document.activeElement.blur();
}
});
I came across this issue and have spent some time until getting a satisfactory solution. My issue was slightly different from the original question as I wanted to dismiss the input event upon tapping outside input element area.
The purposed answers above work but I think they are not complete so here is my attempt in case you land this page looking for the same thing I was:
jQuery solution
We append a touchstart event listener to the whole document. When the screen is touched (doesn't matter if it's a tap, hold or scroll) it will trigger the handler and then we will check:
Does the touched area represent the input?
Is the input focused?
Given these two conditions we then fire a blur() event to remove focus from the input.
ps: I was a little bit lazy so just copied the line from above response, but you can use the jQuery selector for document in case you want to keep consistency of code
$(document).on('touchstart', function (e) {
if (!$(e.target).is('.my-input') && $('.my-input').is(':focus')) {
document.activeElement.blur();
}
});
Hammer.JS solution
Alternatively you can use Hammer.JS to handle your touch gestures. Let's say that you want to dismiss that on a tap event but the keyboard should be there if the users is just scrolling the page (or let's say, hold a text selection so he can copy that and paste into your input area)
In that situation the solution would be:
var hammer = new Hammer(document.body);
hammer.on('tap', function(e) {
if (!$(e.target).is('.search-input') && $('.search-input').is(':focus')) {
document.activeElement.blur();
}
});
Hope it helps!
$('input:focus').blur();
using the CSS attribute for focused element, this blurs any input that currently has focus, removing the keyboard.
Be sure to set, in CSS:
body {
cursor: pointer;
}
otherwise, your event handler calling document.activeElement.blur() will never get fired. For more info, see: http://www.shdon.com/blog/2013/06/07/why-your-click-events-don-t-work-on-mobile-safari
For anyone using Husky's code in AngularJs here is the rewrite:
function isTextInput(node) {
return ['INPUT', 'TEXTAREA'].indexOf(node.nodeName) !== -1;
}
angular.element($document[0]).on('touchstart', function(e) {
var activeElement = angular.element($document[0].activeElement)[0];
if(!isTextInput(e.target) && isTextInput(activeElement)) {
activeElement.blur();
}
});
In my case, I have an app:
AppComponent -> ComponentWithInput
and with the html:
<div class="app-container" (click)="onClick()">
<component-with-input></component-with-input>
</div>
And everything I do is adding (click)="onClick()"
You can leave the method empty as I did:
onClick() {
// EMPTY
}
This works for me.
I want to disable/enable user interaction (mouse click more specificly) on many widgets like hyperlink, button, etc which are contained in a composite (flextable)
there are more than one click handlers, and I don't want to bother with removing and adding listeners according to mode (interaction enabled/disabled)
Any ideas would be appriciated...
You forgot to mention the version of GWT. In GWT 2.0 you can use this code snippet or something similar. This feature allows you to cancel events before they are handed over to the target widget.
Event.addNativePreviewHandler(new Event.NativePreviewHandler() {
public void onPreviewNativeEvent(NativePreviewEvent pEvent) {
final Element target = pEvent.getNativeEvent().getEventTarget().cast();
// block all events targetted at the children of the composite.
if (DOM.isOrHasChild(getElement(), target)) {
pEvent.cancel();
}
}
});
There is a GlassPanel compoent in google-web-toolkit-incubator. I am almost sure it does what you need. Either way, it is a good idea to cover a disabled component whit one of these.