Example 11 with Span
use of com.codename1.ui.TextSelection.Span in project CodenameOne by codenameone.
the class BrowserComponentPostMessageSample method start.
public void start() {
if (current != null) {
current.show();
return;
}
Form hi = new Form("Hi World", new BorderLayout());
BrowserComponent bc = new BrowserComponent();
/* A test page to demonstrate posting messages cross-domain. The source of this page is:
<?php
// This header is really just meant to break the X-Frame-Options sameorigin header
// that is sent by default by Amazon Lightsail.
// In order ot display a page in an iFrame, you may need to fuss with
// the X-Frame-Options header.
// More at https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options
header('X-Frame-Options: allow-from http://localhost:58494');
?>
<!DOCTYPE html>
<html>
<head>
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<script>
window.addEventListener("message", function(event) {
var div = jQuery('<div></div>');
jQuery(div).text(event.data);
jQuery('body').append(div);
}, false);
function postToCN1(msg) {
if (window.cn1PostMessage) {
window.cn1PostMessage(msg);
} else {
window.parent.postMessage(msg, '*');
}
}
</script>
</head>
<body>
<h1>Listening to Messages...</h1>
<p><input id='msg' type="text" value="Message To CN1"/></p>
<p><button onclick="jQuery('body').append(jQuery('<span>foo</span>')); postToCN1(jQuery('#msg').val(), '*')">Send</p>
</body>
</html>
*/
bc.setURL("https://weblite.ca/cn1tests/post_message_test.php");
// Register a listener to receive messages sent from the BrowserComponent's webpage.
// A simple javascript function to send a message to this handler from within your page
// is:
// function postToCN1(msg) {
// if (window.cn1PostMessage) {
// // Case 1: We are running in a native app in a WebView.
// window.cn1PostMessage(msg);
// } else {
// // Case 2: We are running in a Javascript app in an iframe
// window.parent.postMessage(msg, '*');
// }
// }
bc.addWebEventListener(BrowserComponent.onMessage, e -> {
CN.callSerially(() -> {
Log.p("Message: " + e.getSource());
Dialog.show("Here", (String) e.getSource(), "OK", null);
});
});
TextField message = new TextField("A sample message");
Button b = new Button("Send Message");
b.addActionListener(e -> {
// Send a message to the webpage.
// This can be received in the webpage using the 'message' event.
// E.g.
/*
window.addEventListener("message", function(event) {
var div = jQuery('<div></div>');
jQuery(div).text(event.data);
jQuery('body').append(div);
}, false);
*/
bc.postMessage(message.getText(), "https://weblite.ca");
// IMPORTANT: 2nd argument should be either '*' to target any origin
// or the origin of the web page in the BrowserComponent.
// See https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage for more information.
});
hi.add(CENTER, bc);
hi.add(BorderLayout.SOUTH, BoxLayout.encloseY(message, b));
hi.show();
}
Also used :
BorderLayout(com.codename1.ui.layouts.BorderLayout)
Form(com.codename1.ui.Form)
BrowserComponent(com.codename1.ui.BrowserComponent)
Button(com.codename1.ui.Button)
TextField(com.codename1.ui.TextField)
Aggregations
Font (com.codename1.ui.Font)5
SpanLabel (com.codename1.components.SpanLabel)4
BorderLayout (com.codename1.ui.layouts.BorderLayout)4
Form (com.codename1.ui.Form)3
Span (com.codename1.ui.TextSelection.Span)3
SpanButton (com.codename1.components.SpanButton)2
Button (com.codename1.ui.Button)2
Container (com.codename1.ui.Container)2
Char (com.codename1.ui.TextSelection.Char)2
Spans (com.codename1.ui.TextSelection.Spans)2
LayeredLayout (com.codename1.ui.layouts.LayeredLayout)2
BrowserComponent (com.codename1.ui.BrowserComponent)1
CN.getCurrentForm (com.codename1.ui.CN.getCurrentForm)1
FontImage (com.codename1.ui.FontImage)1
Image (com.codename1.ui.Image)1
Label (com.codename1.ui.Label)1
SwipeableContainer (com.codename1.ui.SwipeableContainer)1
TextField (com.codename1.ui.TextField)1
Dimension (com.codename1.ui.geom.Dimension)1
BoxLayout (com.codename1.ui.layouts.BoxLayout)1
