Before you start shooting me down i have checked for answers and i have googled till my fingers bled but i havent been able to find a simple, concise answer. So im asking again for all those that might have this problem.
Question: how to open a new window with a formpanel in side.
Context: i have an app that lists lots of items, i want someone to edit an entry, i want a new window to open so they can edit properties then hit save. A standard thing you find in a lot of applications.
Architecture:
I have one client module called UI, it has a dozen classes that draw widgets and fill a main area when selected from a menu. I have a single html page called UI.html which has the tag in the head. Thats it.
Options Ive Seen
Call Window.Open() but you need to define a html file. I dont have one. I can create an empty one but how do you inject a widget in to it ?
use jsni $wnd to create a new window and get a reference to it. But how do i inject a form panel into it ??
use a popuppanel. They look sucky - plus if opening a window through JS is quite simple i would expect it to be in gwt.
Maybe im miss understanding how to use GWT i dont know.
Any help would be appreciated
Thanks
The way i got this to work is as follows:
i wrote a jsni method to open a new window
public static native BodyElement getBodyElement() /*-{
var win = window.open("", "win", "width=940,height=400,status=1,resizeable=1,scrollbars=1"); // a window object
win.document.open("text/html", "replace");
i added a basic body to the new window and returned the body element
win.document.write("<HTML><HEAD>"+css1+css2+"</HEAD><BODY><div class=\"mainpanel\"><div style=\"width: 100%; height: 54px;\"><div id=\"mainbody\"class=\"mainbody\" style=\"width: 100%;\"></div></div></div></BODY></HTML>");
win.document.close();
win.focus();
return win.document.body;
}-*/;
i then called this method from my main java method
BodyElement bdElement = getBodyElement();
I then injected my panel which has lots of widgets into the returned body element
SystemConfiguration config = new SystemConfiguration(); bdElement.getOwnerDocument().getElementById("mainbody").appendChild(config.getElement());
I agree with Bogdan: Use a DialogBox.
If you can't, you Window.open() as you mentioned in option 1:
Create another GWT module, and form.html that will load it
Window.open("form.html?entry=54")
Have the form gwt module read from the URL, load the entry, allow it to be edited, and provide Save and Cancel buttons
Close the popup when Save or Cancel is clicked
Can't you just use a DialogBox?
Example
Related
The object is to Show-Hide text located under their respective Titles, so a User reads the title and shows or hides text belonging to that title if the User wants to read more.
I tried whatever I could find so far on here, we're talking dynamically setting text coming from a spreadsheet, can't use IDs, must work with .class, must be missing something, I have this piece of code:
... html.push('<div class="comments">' + comment + '</div></div></div>');
but when I try this Show-Hide code nothing happens, even if the error console shows nothing. Basically I want to Show-Hide the .comments class divs with a show-hide toggle link located under each of them. I say them because the .comments divs are reproduced dynamically while extracting text coming from Google spreadsheet cells/row (one .comments div per spreadsheet row). I tried .next, child and parent but they all divorced me so I dunno looks like a dynamic issue. So far I only managed to globally toggle all divs to a visible or hidden state but I need to toggle independantly individual divs.
I prefer a jQuery solution but whatever worked so far was achieved with native javascript.
Note: If a cross-browser truncate function which would append a more-less link after a number of words (var) in each .comments divs would be easier to implement then I would gladly take that option. Thx for any help, remember I am still learning lol!
I have been working on an entirely JS UI project and have brought myself to using $('', { properties }).appendTo(BaseElement) to work best for adding HTML elements because it appropriately manipulates the DOM every time.
If you are having good luck with push elsewhere, however, breakpointing on the line where you do your $('.class').hide() and see what $('.class').length is. Alternately, you can just add alert($('.class').length) to your code if you are unable to breakpoint the code. If it is 0, then your elements have not been properly added to the DOM. Changing to append will ensure they are part of the DOM and therefore targetable via JQuery.
We use MVP with custom EventBus to navigate across the views. One of our GWT module loads an ebook within a view. We have a button named "Expand", which upon clicked, loads the ebook in expanded mode thereby hiding the header, footer, etc.
Let us say the view (UiBinder) with "Expand" button is named as "ShowEbookView". Upon clicking "Expand" button, the ClickEvent is captured and fired to the EventBus. The logic onExpand(final ExpandEvent expandEvent) is written in the same "ShowExpandedMod" class.
Everything is okay, but we have a button named "Popout" in the expanded mode, which when clicked, should open the Ebook in a NEW page! We need to abstract the "ShowExpandedMod" class so that it can operate with the EbookId and can be used in the new page.
We have created a new Module with EntryPoint class, HTML page and UiBinder page for this new popout window. I am not sure how to proceed now with the abstraction and to use EventBus across different modules to load the same content ... (with re-usability ofcourse)
I've explained to my best, but perhaps not very clear! Please let me know if you want more details.
Thanks!
When you open a new window in browser you basically get a new instance of your GWT app. You can not use EventBus across different browser windows, i.e. across different GWT module instances.
What you can do is:
Add an argument to the Popout page URL. This is easies done via "history tokens" (fragment identifiers), like this http://yourdomain.com/popout.html#theIdOfTheDocument. Then you can retrieve the token via History.getToken()
Use DOM to communicate between browser windows: window.open() in javascript opens a new window and returns a reference to DOM of the new window. You can then access properties and functions of the new window. This is all javascript, in order to make this work in GWT you'll need to wrap it in JSNI.
Try and use MVP4G, in specific - take a look at their multi-modules feature (which utilizes GWT's code splitting capabilities).
This should make things like multiple EventBus's and cross-module event triggers a lot easier to handle.
I intend to build a web application where users can enter their time every week and have been struggling to get my head around the concept of a single page in GWT that gets repainted with data depending on the user actions. After researching a lot on this site and google, I found one link that I would like to emulate but dont know how to go about doing it in GWT. Although their source code is available, I dont think it is full and complete. I got some idea from this link - Multiple pages tutorial in Google Web Toolkit (GWT) but again dont know how to implement it into a working version. One small working sample would be great to help me understand and get started.
Could anyone please guide me as to how to achieve the look and feel of the screen with the link below and how the content can be repainted with data from the server ? Would I need to put all the logic in one EntryPoint class ? I would like to have the hyperlinks in the left navigation panel and show the content in the right panel. I seem to be completely lost after a few hours of research.
http://gwt.google.com/samples/Showcase/Showcase.html#!CwHyperlink
Thanks a lot for your help.
Regards,
Sonu.
A single page application layout is actually quite easy to achieve.
The first thing you do is define the general layout, using GWTs layout panels. For your layout, I'd suggest using a DockLayoutPanel.
Content content = new Content();
Button switchContent = new Button(content);
Navigation navigation = new Navigation();
navigation.add(switchContent);
DockLayoutPanel pageLayout = new DockLayoutPanel(Unit.EM);
p.addWest(new HTML(navigation), 7.5);
p.add(new HTML(content));
Here, the width of the navigation panel will be fixed, whereas the content will take the remaining space. You have to pass a reference of the button (or some other widget) which does the switch of the content area, add the button to the navigation area, and so on.
Put this into a class, e.g. called MasterPageFactory:
public class MasterPageFactory {
private MasterPageFactory() {}
public static MasterPage newInstance() {
Content content = new Content();
Button switchContent = new Button(content);
Navigation navigation = new Navigation();
navigation.add(switchContent);
DockLayoutPanel masterPage = new DockLayoutPanel(Unit.EM);
masterPage.addWest(new HTML(navigation), 7.5);
masterPage.add(new HTML(content));
return masterPage;
}
}
Now, in your EntryPoint class, call the factory:
RootLayoutPanel.get().add(MasterPageFactory.newInstance());
This example should get you an idea. Other options would be using a DI framework like Guice or the Command pattern.
Your question is mixing up a couple of concepts. If you want the user to click something that looks like a link, and in reponse the application sends a request to the server and shows a page that looks different than the page they're on, and that page has fresh data that just came from the server, then you want a perfectly normal anchor or form submit button. You don't need anything special or weird from GWT.
The showcase example you referenced lets the user click something that looks like a link, and looks like it loads a new page, even to the point of letting the back button work as expected, but does not actually hit the server to get a new page or new data.
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.
how to open a pop up window in code behind(C#) without using javascript.
Besides the fact that popups piss off a lot of people, it is not really possible to do so (if you don't consider target="_blank") without using javascript. Code written in code behind only generates client side code (which can include javascript) or executes some serverside stuff.
There might be other workarounds using flash or silverlight but I'm not sure about that. Maybe if you clarify your goal a little bit more I can give a better solution to your problem.
That is impossible because of "The code behind runs on the server; you need the popup to appear on the client machine. Therefore your code behind can't trigger a popup".
Alternatively, you can show a panel in the page as pop-up window, by seting it's z-index and giving absolute position.
The code behind runs on the server; you need the popup to appear on the client machine. Therefore your code behind can't trigger a popup.
Also, if you use javascript you'll probably find that the client's popup blocker prevents the new window from appearing (unless the popup happens as a direct response to a click - without posting back - in which case you can use <a target="_blank"...> if you really don't like javascript).
I do not think that is possible . what you can do offcourse is to open a new window with defined small width/height and all menus are stripped...
Just add attributes to a link button or to a button in code behind. Try this code to page load or to the button event handler.
Button1.Attributes.Add("onclick","javascript: SP.UI.ModalDialog.showModalDialog
({ url: 'PopUp.aspx', title: 'Pop Up Window', width: 600, height: 500 }); return false;");