Im trying to get some simple javascript working in gwt but keep failing.
The code:
public static native void createWindow() /*-{
var wndRef = $wnd.open('','edit');
var divTag = document.createElement("div");
divTag.id = "div1";
divTag.setAttribute("align","center");
divTag.style.margin = "0px auto";
divTag.innerHTML = "blah blah blah";
wndRef.document.body.appendChild(divTag);
}-*/;
I am trying to open a new window and write content to it
The problem:
Currently this code opens a new window but its empty.
How do i write content to it ? am i doing something wrong or am i expecting too much from gwt?
Context: My end goal is to open a new Window and have my form panel and various widgets inserted in to it via java methods.
GWT is compiled to Javascript, so GWT can do what JS can do.
If you want to open a new window and inject some content to it then this is the right way:
var win = window.open("", "win", "width=300,height=200"); // a window object
win.document.open("text/html", "replace");
win.document.write("<HTML><HEAD><TITLE>New Document</TITLE></HEAD><BODY>Hello, world!</BODY></HTML>");
win.document.close();
Related
I am newbie using Winium and installed a sample test - steps are only to open Notepad and click on the File button/menu item. The launching of the application (Notepad) works but it seems it can not locate the button. I have tried to locate using both name and id attributes without any luck. I am running on Windows 10 so my guess is it has something to do with this..Any tips or workarounds highly appriciated - i will pase my simple code below
Thanks!
public static void main(String[] args) throws MalformedURLException, InterruptedException {
DesktopOptions option = new DesktopOptions();
option.setApplicationPath("C:\\Windows\\System32\\notepad.exe");
WiniumDriver driver = new WiniumDriver(new URL("http://localhost:9999"), option);
Thread.sleep(2000);
WebElement el = driver.findElement(By.name("File"));
el.click();
}
You could try getting a reference to the window first, and then looking within that for an element called 'File'.
This works for me.
var window = driver.FindElementByClassName("Notepad");
var fileMenuHeader = window.FindElement(By.Name("File"));
fileMenuHeader.Click();
I'm not sure how you get the next level of menus though - it doesn't appear to be part of the window.
Try catching the menu-bar first with its ID.
Then with that element try catching the menu options like file, edit,etc.
Below code works fine on Windows 10.
var menubar = Driver.FindElementById("MenuBar");
var editMenu = menubar.FindElement(By.Name("Edit"));
var FileMenu = menubar.FindElement(By.Name("File");
editMenu.Click();
I'm trying to create a customized button to appear on a pop up which generates a dynamic link (a URL). I don't seem to be able to do this via the .setHTML because of the timing, can't bind a button to a function at runtime. So I thought I'd try the newish .setDOMContent
There's zero information online as to how this feature works. I'm wondering if anyone has an example of this where a button is added to the popup that can run a function and send data.
Here's my very poor attempt at setting this up.
This function creates the popup
function GameObjectPopup(myObject) {
var features = map.queryRenderedFeatures(myObject.point, {
layers: ['seed']
});
if (!features.length) {
return;
}
var feature = features[0];
// Populate the popup and set its coordinates
// based on the feature found.
var popup = new mapboxgl.Popup()
.setLngLat(feature.geometry.coordinates)
.setHTML(ClickedGameObject(feature))
.setDOMContent(ClickedGameObject2(feature))
.addTo(map);
};
This function adds the html via the .setHTML
function ClickedGameObject(feature){
console.log("clicked on button");
var html = '';
html += "<div id='mapboxgl-popup'>";
html += "<h2>" + feature.properties.title + "</h2>";
html += "<p>" + feature.properties.description + "</p>";
html += "<button class='content' id='btn-collectobj' value='Collect'>";
html += "</div>";
return html;
}
This function wants to add the DOM content via the .setDOMContent
function ClickedGameObject2(feature){
document.getElementById('btn-collectobj').addEventListener('click', function()
{
console.log("clicked a button");
AddGameObjectToInventory(feature.geometry.coordinates);
});
}
I'm trying to pipe the variable from features.geometry.coordinates into the function AddGameObjectToInventory()
the error I'm getting when clicking on an object (so as popup is being generated)
Uncaught TypeError: Cannot read property 'addEventListener' of null
Popup#setHTML takes a string that represents some HTML content:
var str = "<h1>Hello, World!</h1>"
popup.setHTML(str);
while Popup#setDOMContent takes actual HTML nodes. i.e:
var h1 = document.createElement('h1');
h1.innerHTML="Hello, World";
popup.setDOMContent(h1);
both of those code snippets would result in identical Popup HTML contents. You wouldn't want to use both methods on a single popup because they are two different ways to do the same thing.
The problem in the code you shared is that you're trying to use the setDOMContent to add an event listener to your button, but you don't need to access the Popup object to add the event listener once the popup DOM content has been added to the map. Here is a working version of what I think you're trying to do: https://jsfiddle.net/h4j554sk/
I'm writing an Eclipseplugin, which has to create a new project. This works so far, but i need to copy an external file into the projectfolder. I intend to have a 'Browse' button on one of my WizardPages, which opens a filedialog, where the user can browse to the file and after closing the dialog i can use the path to this file for various actions. My problem is that the dialog window never opens. Right now i'm trying it that way (snippet from my wizardpage):
public void createControl(Composite composite) {
this.container = new Composite(composite, SWT.NONE);
GridLayout layout = new GridLayout();
this.container.setLayout(layout);
layout.numColumns = 2;
Button browseButton = new Button(this.container, SWT.PUSH);
browseButton.setText("Browse");
browseButton.addSelectionListener(new SelectionListener() {
#Override
public void widgetDefaultSelected(SelectionEvent arg0) {
FileDialog fileDialog = new FileDialog(DataPage.this.container.getShell(), SWT.OPEN);
fileDialog.setText("JZOS created File");
String path = fileDialog.open();
DataPage.this.setJzosCreatedName(path);
}
});
I tried several implementations, that i have seen in examples and tutorials but nothing did work. I'm assuming a problem with the Shell that i give to the filedialog. I tried to open a new Shell within the widgetDefaultSelected function but it didn't work either. Any Suggestions?
You should be using the widgetSelected method of SelectionListener not widgetDefaultSelected
I have a question regarding the integration of CodeMirror UI in a smartGWT tab.
Basically, I can't display the CodeMirror-UI editor inside the textarea element I attached to a smartGWT tab. Here's what I did:
I installed CodeMirror-UI as described on its page, correcting the paths to match my project's directory hierarchy
I wrote a js script in my project's main html (at head) :
<head>
...
<script>
function fireEditor()
{
var textarea = window.document.getElementById('tab_editor' );
var uiOptions = { path : 'codemirror-ui/js/', searchMode : 'inline' };
var codeMirrorOptions = { mode: 'javascript' };
var editor = new CodeMirrorUI(textarea,uiOptions,codeMirrorOptions);
}
</script>
</head>
I invoked the script while opening a (smartGWT) tab:
// create a smartGWT tab
Tab tab = new Tab("tab");
tab.setID("tab");
tab.setCanClose(true);
// put the CodeMirror UI inside the smartGWT tab
// create a smartGWT canvas
Canvas tabContent = new Canvas();
tabContent.setID("tabc");
tabContent.setWidth100();
tabContent.setHeight100();
// use a GWT HTMLPanel to attach new html elements to the smartGWT canvas
// and invoke the fireEditor() function to load the CodeMirror UI
HTMLPanel editorContainer = new HTMLPanel(
"<div id=\"editor_container\">"
+ "<textarea id=\"tab_editor\" style=\"width:100%;height:100%\" onload=\"fireEditor()\">"
+ "</textarea>"
+ "</div>");
editorContainer.setWidth("100%");
editorContainer.setHeight("100%");
running from a browser (I'm using firefox - iceweasel 10.0.10), this results in a smartGWT tab that shows an empty textarea element.
Checking with firebug, the area within the smartGWT tab contains the HTML I specified in the HTMLPanel, but no CodeMirror UI is shown.
What am I missing?
I'm using Eclipse Indigo, with gwt 2.4.0, smartgwt 3.0p, and codemirror ui 0.0.19 from its git repo (which itself uses CodeMirror 2.3).
Thank you
Found the solution.
First of all, there is no "onload" event for an html textarea element, so the code
HTMLPanel editorContainer = new HTMLPanel(
"<div id=\"editor_container\">"
+ "<textarea id=\"tab_editor\" style=\"width:100%;height:100%\" onload=\"fireEditor()\">"
+ "</textarea>"
+ "</div>");
will just place a textarea in the HTMLPanel, without calling "fireEditor()".
Replacing "onload" with "onclick" does the trick: once the textarea element shows up, click on it, and the CodeMirrorUI will show up as well.
Problem: I need to visualize the CodeMirrorUI interface automatically, ergo the "onclick" approach is useless.
To accomplish this task, I need to somehow modify the DOM of the smartGWT tab, replacing its inner html with CodeMirrorUI's html.
I found this documentation very helpful: http://www.smartclient.com/smartgwtee-latest/javadoc/com/smartgwt/client/docs/DomIntegration.html
this is the resulting code:
1) I kept the js script in my project's main html (at head) :
<head>
...
<script>
function fireEditor()
{
var textarea = window.document.getElementById('tab_editor' );
var uiOptions = { path : 'codemirror-ui/js/', searchMode : 'inline' };
var codeMirrorOptions = { mode: 'javascript' };
var editor = new CodeMirrorUI(textarea,uiOptions,codeMirrorOptions);
}
</script>
</head>
2) I created a new class -"MyEditor", following the example found in the documentation link I mentioned above :
public class MyEditor extends Canvas {
private String editor_id = null;
private static native void replace(String editor) /*-{
$wnd.fireEditor(editor);
}-*/;
public MyEditor(Integer num) {
editor_id = "editor_" + num;
setRedrawOnResize(false);
}
#Override
public String getInnerHTML() {
return "<textarea id=\"" + editor_id + "\"" + "style=\"width:100%;height:100%\"></textarea>";
}
#Override
protected void onDraw() {
MyEditor.replace(editor_id);
}
}
3) finally, I filled the smartGWT tab with an instance of MyEditor:
// create a smartGWT tab
Tab tab = new Tab("tab");
tab.setID("tab");
tab.setCanClose(true);
MyEditor editor = new MyEditor(tabNumber); // an integer number
tab.setPane(editor);
Tested. Working.
I'm looking for simple code that adds a popup in my Google Apps Script Ui that comes up when I hit a submit button. The popup box would display a message and have a button to close the popup.
I've looked all over the place - everything seems so complicated and does way more than I need it to do.
This is the current code I have for the submit button.
function doGet() {
var app = UiApp.createApplication();
app.setTitle("My Logbook");
var hPanel_01 = app.createHorizontalPanel();
var vPanel_01 = app.createVerticalPanel();
var vPanel_02 = app.createVerticalPanel();
var vPanel_03 = app.createVerticalPanel();
var submitButton = app.createButton("Submit");
//Create click handler
var clickHandler = app.createServerHandler("submitData");
submitButton.addClickHandler(clickHandler);
clickHandler.addCallbackElement(hPanel_01);
////Test PopUp Panel
var app = UiApp.getActiveApplication();
var app = UiApp.createApplication;
var dialog = app.createDialogBox();
var closeHandler = app.createClientHandler().forTargets(dialog).setVisible(false);
submitButton.addClickHandler(closeHandler);
var button= app.createButton('Close').addClickHandler(closeHandler);
dialog.add(button);
app.add(dialog);
//////
return app;
}
Since UiApp is depreciated, HTMLService should be used to create custom user interfaces.
To prompt simple popup to display a message, use alert method of Ui class
var ui = DocumentApp.getUi();
ui.alert('Hello world');
will prompt simple popup with hello world and an ok button.
To display customized html template in Dialog, use HTMLService to create template and then pass it to showModalDialog method of Ui Class
var html = HtmlService.createHtmlOutput("<div>Hello world</div>").setSandboxMode(HtmlService.SandboxMode.IFRAME);
DocumentApp.getUi().showModalDialog(html, "My Dialog");
HtmlService.createHtmlOutputFromFile allows you to display html that is in a separate file. see the documentation
Have you tried using zIndex? It places the panel above all of your other panels...
var popupPanel = app.createVerticalPanel().setId('popupPanel')
.setVisible(false)
.setStyleAttribute('left', x)
.setStyleAttribute('top', y)
.setStyleAttribute('zIndex', '1')
.setStyleAttribute('position', 'fixed');
x = panel position from the left portion of your app
y = panel position from the top portion of your app
zIndex = the 'layer' your panel will appear on. You can stack panels using '1', '2', '3' etc.
position = your panel will be in a fixed position denoted by (x,y)
Visibility is set to false until you click submit, then have a client handler for your submit button make the popupPanel visible. When you click the button on your popupPanel, have the client handler set visibility to false once again and it will disappear.
One more thing, I noticed you get the active app and then create a new app. You do not need to create a new app...just new panels inside your app.
Hope this helps!
You can use a dialogbox to popup.
Add a button to the dialog-box. Add a client handler that sets the dialog box invisible,once you click the button.
var app = UiApp.createApplication;
var dialog = app.createDialogBox();
var closeHandler = app.createClientHandler().forTargets(dialog).setVisible(false);
var button= app.createButton('Close').addClickHandler(closeHandler);
dialog.add(button);
app.add(dialog);
This should help.
EDIT
Added "()" after .createClientHandler. That should remove issues related to TypeError: Cannot find function createDialogBox in object function createApplication() {/* */}
Popup - use something like this:
var table = app.createFlexTable();
table.setStyleAttribute("position", "absolute");
table.setStyleAttribute("background", "white");
add items to the table and hide and show as needed.