Currently I do this by adding a Javascript event handler to the HTML content which sets a global variable according to the clicked item:
<script>
var clicked="";
</script>
<span onmousedown="clicked='me';">me</span>
then from the main application I query the content of this variable in the webview's mouse clicked handler:
webview.setOnMouseClicked(new EventHandler[MouseEvent]{
def handle(mouseEvent:MouseEvent){
if(mouseEvent.getEventType().toString()=="MOUSE_CLICKED"){
val clicked=webview.executeScript("clicked").toString()
}}})
This happens to work but it feels like a hack. Is there a legitimate way by which the webview can request the application to refresh its content based on the element that was clicked?
As I do not know Scala, I can only provide you with an approach in Java, but you can probably figure out, how to transform it to Scala.
Register a bridge between the Java (or in your case Scala) code and JavaScript. The basics are described in this article by Oracle. The JavaScript in your page can make a call to the application, notifying it that a certain button was clicked:
public class MyBridge {
public void callbackFromJavaScript(String what) {
...
}
}
JSObject jsobj = (JSObject) webEngine.executeScript("window");
jsobj.setMember("java", new MyBridge());
Then you can make the call when an element is clicked and callbackFromJavaScript will be executed:
<span onmousedown="java.callbackFromJavaScript('me');">me</span>
From your callbackFromJavaScript you can then easily call a JavaScript function and pass along an object (e.g. JSON) and the JS function will update the page, or you can load a completely different content.
Related
I'm writing an application using Knockout. I have subviews I'm inserting via jQuery's append() function. I'm using the text plugin for RequireJS to dynamically retrieve the HTML, then I'm using append() to attach it to an element in my web page:
$("#parentElement").append(theHTML);
After that, I need to bind "theHTML" to my ViewModel:
ko.applyBindings(myViewModel, $("#subViewElement")[0]);
It seems like the jQuery onDomReady() function is only used in the initial loading of the web page. Is there a way to make sure the DOM in "theHTML" is ready before calling "applyBindings" on it?
Does anybody have an idea on how I can accomplish this using Wicket?
I want to display a Wicket odal window automatically when no user activity has been detected for a certain amount of time. I'm thinking of using an AjaxSelfUpdatingBehavior in some way, but I have no clear ideas actually.
Is this possible with Wicket?
Also, you can use some js library not to catch all ajax calls and to be sure, that your user is really afk (even does not touching his mouse).
For example, see this free framework and it's demo.
And (if you using this js framework) in wicket you must handle
ifvisible.idle(function(){
Wicket.Ajax.get({u: '${callbackUrl}'})// This code will work when page goes into idle status
});
You must set ${callbackUrl} from wicket code to let js know what action to proceed in java code. It is not hard to do this. Look here.
This approach is more tricky, but if you implement this, you don't have to worry about users actions at all (he can read site's info and don't click any ajax links, but suddenly he will see modal window).
Yes you can, I use this as autologout function
public class MyTimer extends AbstractAjaxTimerBehavior {
public MyTimer(int seconds) {
this(Duration.seconds(seconds));
}
#Override
protected void onTimer(AjaxRequestTarget target) {
// show your window magic
}
}
Add this to you page (add(new MyTimer(300));) and this will be called after the number of seconds you specify. Make sure to replace the timer with a new one when doing ajax calls, or reset it.
Is there anyway i can get the hyperlink click in webview to my c# with Hyperlink value in Metro?. I am using WebView..NavigateToString() to generate the content?.
You can call InvokeScript with some of your own Javascript to set up a listener for when the user navigates away from your page. This would look something like the following in C#:
var navigationListenerString = #"
(function() {
function leavingPage() {
window.external.notify("LEAVING PAGE");
}
window.onbeforeunload = leavingPage;
})()";
webView.InvokeScript("eval", new string[] { navigationListenerString });
Then you can use ScriptNotify to listen for your particular message to determine that the page is unloading and the user is leaving. Unfortunately you cannot detect where a user is going. Also, if the hyperlink opens in a new window and the webview does not unload, you cannot detect that either.
Since WebView in windows 8 doesn't support Navigating() events like the Silverlight WebBrowser control, thus it is not possible to get hyperlink or cancel navigation.
But since you're using NavigateToString() method, you can write some manual javascript code and achieve same with the help of WebView.ScriptNotify() event.
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.
In jqtouch and iui, what do you do if you want to follow a link like This is a FEED AND dynamically load the content of the <div id="feed-49"></div>?
I've tried bind/live a click handler onto the "a" and onto a parent "div" but it never gets fired, just the event for actually following the link. Thanks.
This is a simplified version of my other question:
jqtouch mobile app ajax loading issue
It depends whether you want the page pre-loaded or load-on-demand.
If you want it pre-loaded, you might want to fill in the page upon, say, $(document).ready:
$(document).ready(function(){
$('#feed-49').load('feed-49.html');
});
If you want it to load on-demand, you can listen to the pageAnimationStart event:
$('#feed-49').bind('pageAnimationStart', function(event, info){
if (info.direction == 'in')
$(this).load('feed-49.html');
});
You may want to read the jQTouch's documentation on callback events.
I just went through what you are going through and know exactly how to solve it. You need to turn that XML into JSON objects, which will be numbered [0],[1], etc.
This JQuery plugin works and rocks : http://www.fyneworks.com/jquery/xml-to-json/ Add that JS to your app. Your parse XML function will then convert the XML nodes you want (like item nodes within a channel) into JSON objects and then numbers the items.
So look how I then empty the current list of items, build a list of the items and add a custom CLICK function to the list items with a class of "sun" (i love jquery). That function then will add it's parent node title and desc to the divs that need it. The href will push it to the new jqtouch DIV which will handle all the detail info. Cool 'eh? Vote me up if this works. It did for me, like a charm.
function parseXml(xml)
{
$('#feedList').html('');
var rss = $.xml2json(xml);
$.each(rss.channel.item, function(i, item)
{
$('#feedList').empty().append('<li class=sun'+i'><a href=#contentDiv>'+item.title+'</a></li>');
$('.sun'+i).click(function() {
$('#titleDiv').empty().append(item.title);
$('#descDiv').empty().append(item.description);
});
});
};