I have been writing some basic code for an application I am designing. I have learned the basics and gotten some simple database connection working with RPC calls etc. What I need to do now and am completely lost (as I am traditionally a c# developer with windows forms).
In c# if I wanted a new form I would just create it, and then call the show method.
How does one create multiple pages in GWT, and switch between them?
Thanks in advance,
Chris
The simplest way would be to
Make a new java class (GwtHome.java, GwtHelp.java etc)
Extend these classes by using the Composite class
Make the equivalent of a Master Page and add it to the rootPanel as a class with the appropriate headers, menu, footer and Content Placeholder (Could be any of the AbsolutePanel, VerticalPanel, HorizontalPanel objects provided by the GWT Framework)
By clicking on the menu clear the Placeholder and add the appropriate object of GwtHome, GwtHelp etc.
After getting aquanted with the above procedure, you might want to break up the code in many files using a design pattern as suggested by Andrei.
Simply clear the root panel (RootPanel.get().clear()) and add the widget for your new "page", the same way you added your first one.
If you're using LayoutPanels, do RootLayoutPanel.get().clear() instead.
Look at Activities and Places design pattern: https://developers.google.com/web-toolkit/doc/latest/DevGuideMvpActivitiesAndPlaces
I highly recommend it for a multipage GWT app. It explains pretty well how you create different "views", that are driven by their "activities", and tied to specific "places" (pages) that users can navigate.
Typically you use a LayoutPanel as your "page" container that occupies the entire available browser window. You split this LayoutPanel into 2-3 layers (zones), like top menu, side menu, main area. Each area contains one widget, usually a ScrollPanel, FlowPanel, or HtmlPanel. Then you use different widgets or HTML inside each of these widgets to display whatever you need. You may also create your own composite widgets that you can reuse in different pages.
Related
I want to make an app, which will work as interface to several servers.
Why: In web iface provided by default (and we cannot change it) are few things we miss, few could be done better and for sure automation of some stuff would make the job easier.
What do I have: almost finished classes for communication with web interface of a server app.
GUI description:
For some kind of version 0.1: text field for username, radio button to select server and one "go" button. Then several (4-12) action buttons to operate on data, 2x text area with results, one label with some text data - I can manage this.
Then I need to view the data - grid MxN which will load the data, expected size: 7-15 columns, usually 10 rows or less, but rarely it can go over 1k (or even more, but I don't need all to be visible to the user in that case).
What I need: simply an advice.
I wish to start with a simple version (and I'm working on that already, but I'm stuck on too many things - 95% cos and absolutely new to GUI and 5% cos I'm new to java).
I've checked many tutorials, but they're all simple.
Real questions:
1) Verify. In MVC controller should handle all user actions - is it done by view's method which is something like button.addActionListener(param); anotherButton.addActionListener(paramp; ...?
1b) I've seen all implemented via one (nested) class, which was then checking source or smth - is that ok? There will be a lots of buttons etc.
2) How to implement the data grid, when I need to take actions on click / dbl click?
4) First row is header, the rest should be scroll able - should it be in the grid or outside (its own grid):
4a) How to make sure header's size (width) will be the same as in data (I don't want to set up straight size)
4b) I failed to create anything scrollable so far, but thats my bad I guess. How to ensure header will hold on a place and the rest can be scrolled?
5) How should be "data update" implemented? I've got JPanel from which I remove grid component and then I make new one and add data into it (simple, but perhapss there is another way). One of first enhancements will be sorting - use the same way I used for new content?
Thanks a lot for any answer, I know this is not very specific, but example I've found are too simple.
I plan a lots of enhancements, but thats in the future and I don't mind to rework GUI/Controller several times, at least, I'll practise, but I don't want to finish one part of the code and realise I've got to rewrite half of a controller and 1/4 of a view to make it possible.
Note: I plan to use this at work as my tool (if things go right, I could make 25-50% of my work by few clicks :-)
So I really mean this).
Note#2: I'm not new to programing, but I've never created GUI (which is why I've got GUI with menu bar with 2 items and 3 components and almost done web-iface connections).
Note#:3 dragable data header, tabbed data view - thats the plan for the future :-)
MVC in Swing is examined here; use nested classes for ease in prototyping and creating an mcve for future questions; as the need arises, nested classes can be promoted to separate classes having package-private access.
Use JTable; its flyweight implementation of renderers is good for organizing data by row and column.
Item three does not exist, but "always remember to translate cell coordinates" if you plan to drag columns or sort rows.
Use a JScrollPane to keep the table header stationary.
Update the TableModel, and the listening view will update itself in response.
If you are interested not only from the event/messaging architecture, but also on handling mouse/keyboard input, hovering detection, widgets, temporary menus, form re-sizing with widget alignment, dragging and dropping etc. I can advice you to look at this question and my answer with helpful resources.
I've been tasked with making a GUI that essentially takes a bit of user input and does some folder/file manipulation on various drives accessible by the machine the program is being run on. While designing this GUI, I'm starting to realize that MVC will make my life much easier and anyone else who decides to modify code, but I can't really see how this can be done via NetBeans.
I've done a bit of reading up on this topic, and I can't really see any clear cut answers as to whether or not this can be done on NetBeans. Surely it can be done if I programmatically build the GUI, but that somewhat defeats the purpose of why I chose to use NetBeans.
Netbeans is fine to do this.
The key thing to realize is that while all of the basic Swing components are MVC, for the most part you don't interact with them that way. A simple text field has it internal model, but that model isn't your model, the text field is more a primitive.
Your model deals with higher level events (button actions and what not), rather than button presses and arrow moves and mouse clicks.
So, for high level MVC, the primary mechanism of communication is through PropertyChangeListeners. And the basic task of building your app up is wiring the PCLs of the assorted data elements along with their GUI components together.
For example, a simple case is you have a list of items. And that list is rendered on the screen via a JTable, and that table is on a JPanel.
Your list has it's own model, i.e. it's not simply a Java List. It's not a List because standard Java Lists don't support PCL notifications. But your Model would obviously wrap such a List.
Now, the next question is how do you wire up JTable to be associated with your List model.
One, you could subclass JTable and bind it to your Model. Or, more simply, you use the JTable as a primitive, and let the enclosing JPanel manage the interaction between your Model and the JTable.
That means having your JPanel implement PropertyChangeListener, and then, when wiring everything up, you do something like this:
ListModel myModel = new ListModel();
ListPanel myPanel = new ListPanel();
myModel.addPropertyChangeListener(myPanel);
Now, whenever your ListModel is changed, is will notify the ListPanel.
On your ListPanel you can having something like:
#Override
public void propertyChange(PropertyChangeEvent evt) {
if (evt.getPropertyName().equals(ListModel.CHANGED)) {
ListModel model = (ListModel) evt.getSource();
DefaultTableModel tm = (DefaultTableModel) listTable.getModel();
tm.setRowCount(0);
for (String s : model.getList()) {
tm.addRow(new Object[]{s});
}
}
}
Now, you can see this simply reloads the entire table model, but you can make your property changes as fine grained as you want. You can also see that if this was some other model (like a Person or something) you can populate individual text fields and whatnot on the panel.
This is a pretty simple GUI, but it shows the fundamentals of how this all wires together. I think a bit of this is lost in the Swing examples which are great for one panel screens but don't scale at all when you start adding other views.
Your JPanels basically become combined VC, as your GUI gains complexity you can factor those kinds of things out, but its works pretty well for reasonable amounts of screens and such.
There are two ways in which Netbeans can help you leverage its codebase: GUI Builder (1) and NB Platform (2).
(1) Netbeans had for a while one of the better drag-n-drop GUI builders in the Java world, codenamed Matisse.
That said, it's been a long time since I worked with it - and I never really liked the generated code, it wasn't very comprehensible (which of course is not the purpose of auto-generated code). For more complex UIs we hand-wrote the layout and the work was bearable, even if not the most pleasant. For simple UIs, I'd try GUI Builder again, for complex UIs with a lot of wired logic, I'd probably still would write it by hand.
To see how the GUI Builder works, take a look at one of the many tutorial videos, e.g. this one:
NetBeans GUI Builder: Adding Components
(2) Netbeans Platform is to Netbeans, what RCP is to Eclipse. A rich set of components developed for an IDE, that can be reused. I briefly looked into NB Platform and we would have used it, if the project didn't change course. Maybe this SO question can shed more light on this aspect: Which Rich Client Platform to use?.
Concerning MVC. There was JSR 296, a generic Swing Application Framework, that looked somewhat promising, but was withdrawn in 2011. That did not stop people to fork it and work on it, as this project shows: Better Swing Application Framework, with a release in mid 2012. Even if you do not use such a framework, please do not put all code in one class (as you mention in you comment), but create a simple model/controller and keep the UI components separate. It does not need to be fancy for a simple app, a minimal MVC-ish separation of concerns might suffice.
I also hit this problem and i found a link which gives a good example how to seperate the controller from the view using the NetBeans GUI builder.
Here is the link.
I have a fairly complicated JTable subclass (WidgetTable and its WidgetTableModel) that works fine when I add it to a dummy JPanel for testing purposes.
Since I am absolutely horrid at working with LayoutManagers, I like to use the NetBeans built-in GUI Builder for all my layout work. Then I usually just code-around the autogenerated (GUI builder) code and that has always worked for me. It is the best of both worlds: I get my presentation looking exactly the way I want it, and I also get fine-grained control over the componentry.
However, I have never used the GUI Builder tool to make tables. After tinkering around with it for a while last night, it looks as though it is only good for making pretty basic (fixed # of rows, fixed # of columns, etc.) JTables.
My WidgetTable actually has a dynamic number of both rows and columns, special editors/renderers and many other bells and whistles.
My problem:
I have two conflicting constraints: (1) I need to use the GUI builder to position and size the table exactly where I want it in the container, but, (2) The table component available through the GUI builder is too basic to handle my WidgetTable.
I need a way to design a "table placeholder" into my container with the GUI builder, such that, once NetBeans autogenerates that placeholder code, I tweak the code and instruct it to dynamically instantiate one of my WidgetTables instead, consuming the location and size that I defined the placeholder component to take up.
This way I can have my cake, and eat it too. The only problem is, I don't think the GUI builder supports this ability to drag-n-drop abstract JComponents, position and size them, and then plug subclasses into them elsewhere in the codebase.
Anybody ever have this problem before or have any interesting recommendations? I imagine the best thing to do would be for me to just roll up my sleeves and learn LayoutManagers, but I'm mostly a server-side developer and only come over to the client-side every once in a blue moon; and honestly, don't have the energy to learn the intricacies and nastiness of GroupLayout and its sinister cousins.
Thanks for any help!
Insert a JTable using the GUI builder, reset its model property to the default value, and tweak the construction code so that it looks like
jTable1 = new WidgetTable(this.widgetTableModel);
You may tweak the creation code by right-clicking on the JTable, selecting "Customize code", choosing "custom creation" instead of "default code" in the first combo box, and typing the code for the constructor call.
If you need your jTable1 variable to be of type WidgetTable rather than JTable, edit the "Variable declaration code" in the same dialog box.
NetBeans also allows you to create custom components for building UIs. This may be more work than you want to put into your WidgetTable, but if you think you're going to have to build more UIs with custom components, it could be worth learning.
I do this all the time. I have an subclassed JTable that I use with the GUI editor and it is Dynamic.
Add a JTable to your project using the GUI editor and the layout of your choice.
Once the table is added, right click on it and click on custom code.
In the constructor of the JTable, change it to say new WidgetTable(new WidgetModel()) instead of new JTable(new DefaultTableModel()).
Create a global variable for you WidgetTable. Something like private WidgetTable widgetTable;
In you constructor, after the call to initComponents(), cast your JTable to a Widget table and use that from now on.
`widgetTable = (WidgetTable)jTable1;
I intend to write a XSL-FO designer in java for which i need to write an UI. The basic idea is to give the user a work pane wherein he/she can draw rectangles and these rectangles would in turn be associated to field containers in the underlying XSL-FO generator. Once the field container are done, the user should also be able to select any of the rectangles(field containers) created and add components into it. These will in turn be translated into field blocks that fall under the chosen field container.
Till now I have created a simple UI using JFames with mouseListeners hooked to them so that i can have users draw the rectangles on the work area.
Im stuck at the point on how to implement the part where the user selects one of the rectangles created in the previous steps.
Given the intent of the designer, is it possible to accomplish this using Jframes ?
Any pointers/suggestions on how i can achieve the motive of this designer would be of great help !
Please excuse me if any part of this post is noobish. I am one when it comes to UI.
JInternalFrame might be a starting point. You can connect them, as shown here, and add arbitrary components as required.
I want to implement list like "stackoverflow question list" (where each row has multiple items, text, tags, user, time etc) in GWT. What should be most appropriate approach?
I tried using FlowPanel and inside that "HTML elements" so result will be DIVs inside DIV.
But, then CSS is pain.. (unable to set right aligned multiple rows and left aligned user profile image etc)
If I use table then, it GWT does not support row rendering. Need to work on cell, it is again pain.
so, Any suggestions?
(Please exclude GXT or SmartGWT like other heavy weight frameworks, just want to use core GWT. )
Cheers,
The major answer here is 'it depends'.
The general way I try to approach anything with GWT is to come up with an HTML mockup. Once you have a static version of the layout you want, complete with CSS, it's actually quite straightforward to convert this into GWT code. See this article on 'tags first gwt' for well written example.
The point to keep in mind with GWT is that ultimately, the browser is going to have to deal with a DOM structure you build up, so if you can make it correct without GWT, it is far easier to then make it correct with GWT.
Use DockPanel for contents like multiple items, text, tags, user, time etc...Then add the dockpanel to FlexTable.FlexTable will support to add rows.
How About gwt Grid? even that supports text and table.