Using GWT MVP on a single screen application - gwt

I apologize in advance as this is one of those "how does this work" type questions. I am a newbie to GWT MVP and I am trying to create a project similar to this one here:
where basically I have a menu of widgets/components that I can drag and drop onto a panel and doing so changes the properties shown in the Property disclosurepanel.
I have been reading about the official GWT MVP framework and they its described it seems like it expects each application state to represented by a whole new page (a View with an associated Place).
I am confused as to how this would work this type of application. That is, an application that has 1 basic screen that never entirely changes (i.e. user never navigates to a whole new screen) with sections that need to communicate to each other (i.e. dropping a widget loads a different set of properties).
I am sure I am misunderstanding something about MVP so if someone can just offer some advice on how to wrap my brain around this that would be great.

It's not impossible to utilize the MVP paradigm with more than one on-screen regions.
You can read about a possible solution in this article. It's the last post of a four-part series. I suggest reading also the preceeding posts from the author with the same tags.

Related

Is my thinking about mvvm right?

I'm having a little bit of a hard time getting into mvvm. I'm writing a simple app, Notebook. I have one viewmodel, it's name is actually ViewModel. It has an ObservableCollection of Notes inside and methods to save and load those from Isolated Storage. My only Model is Note.cs, it implements INotifyPropertyChanged and I'm of course RaisingPropertyChanged.
I've also got two view, both of them are user controls. One to display list of notes and one to edit the one chosen from the list.
My questions are:
Where do I create an instance of my vievmodel?
How should I implement going from the page with list of notes to the page with detailed view after choosing one Note to edit? At the
moment I'm saving the index of Note in App.xaml.cs, going to the next page and setting
the DetailedView DataContext to the right Note in OnNavigatedTo, but
I don't think it's actually the perfect solution.
Where should I save my Notes? I guess Application_Closing in App.xaml.cs is the right place to do it, but I'd have to have my viewmodel as a global object there, is this the right approach?
Additional question:
I have to add possibility to group notes. I guess that class Group with dictionary (GroupName, howManyNotes) is going to be allright since I don't have to be able to for example write all notes from selected group. Do you think there's a better approach I should think about?
Thanks for respones,
MichaƂ.
I would suggest you take a look at Calibrun.Micro which is a great framework for MVVM. You can get some sample from the CodePlex.
I have used that in a bunch of Project, and will give you flexibility in case if your project grows in size.
Google for Caliburn.Micro sample and you will find a number of sample for all technologies like WPF, Silverlight, Windows Store, Windows Mobile.
Caliburn.Micro CodePlex

Page Navigation in GWT Application

I want to navigate to another page in my application. I don't want the page to reload(i.e.. application should be a single URL application).
I know only one way to accomplish this by changing the proper div attached in the RootPanel by whatever data I want to display. But I fell that might get cumbersome if there are many navigations(I haven't tried it though :P).
Is there any other way to accomplish this or make the above said approach better?
Thanks in advance.
I guess you need GWT Development with Activities and Places
Well ,its time to have a look on MVP
With that you can do
History.newItem(tokenOfYourPresenterScreen);
A nice single EntryPoint demo app is here : (BrowserHistoryExample.java)
http://www.gwtproject.org/doc/latest/DevGuideCodingBasicsHistory.html
I added the below to the example to demonstrate links.
vertPanel.add(new Label("Access history via Hyperlinks"));
vertPanel.add(new Hyperlink("External Page 0","page0"));
vertPanel.add(new Hyperlink("External Page 1","page1"));
vertPanel.add(new Hyperlink("External Page 2","page2"));

GWT Multipage App

I am confused about how to make a multipage app in one GWT project. I have one page with my app and would like to provide an options page.
I don't think you can use 2 onModuleLoads() or something.
So how can you achieve a multipage app in 1 module?
Thanks
Take a look at the MVP architecture -
http://code.google.com/webtoolkit/articles/mvp-architecture.html
Even though you don't actually need an MVP paradigm to create a 'Multi-page' gwt application, you will be better off following it in creating your apps.
Basic idea is, you create different view-presenters that will act like different 'pages', and the app controller activates the correct one based on the logic you provide.
EDIT - you can even create multiple html-pages with their own onModuleLoad(), You should prefer that only if - there are logically 2 different applications or you are modifying an existing webpage and cant do without it. I believe you don't have those issues based on your question. Let me know if its otherwise.

Best practices for designing GUI in GWT

I have recently started studying Google Web Toolkit. I have went through some walkthroughs, and I think I understand the basics and the idea. However, I have some questions on the overall architecture and design of the applications.
Let's start with the GUI. I want to build a "common" web application, where the user first sees a login page. After successful login, the user is redirected to some kind of index page and a menu is added. I created a new LoginComposite for the login page, and tried to design a nice looking HTML table using the GWT Designer. However, I find that really hard to do, as you cannot set any individual properties on the individual cells (TDs)? There's no way to specify colspan or rowspan, and I can't set any padding or margin on the cells themselves. In short, I know exactly how I would have written the HTML code, but I can't translate that to the designer. Is that just me?
Also, I am wondering about the best practice for code layout and design. I went through the StockWatcher tutorial, but that's really not a very realistic web application. For example, I would like to know how I should design different forms (should each be in a own class inheriting the Composite-class)? How should I switch between forms (for example, first a list view, then a form for editing a chosen item from the list, then a totally different page)? If I have one Composite for each page, and instantiate them when needed in my EntryPoint, would that mean that the client will download all the JavaScript for all those Composites at page load? Should I stick with only one HTML page, or should I have many?
These are questions not really covered by any GWT tutorial. If anyone know a good example of a "real" web application built using GWT, I would love to see it.
Thanks for your input!
There are a whole bunch of resources in Google IO talks. For example:
http://www.google.com/events/io/2011/sessions/high-performance-gwt-best-practices-for-writing-smaller-faster-apps.html
http://www.google.com/events/io/2011/sessions/highly-productive-gwt-rapid-development-with-app-engine-objectify-requestfactory-and-gwt-platform.html
http://www.google.com/events/io/2010/sessions/architecting-production-gwt.html
http://www.google.com/events/io/2010/sessions/architecting-performance-gwt.html
http://www.google.com/events/io/2010/sessions/gwt-ui-overhaul.html
http://www.google.com/events/io/2009/sessions/EffectiveGwt.html
Also, don't expect to be able to edit absolutely everything if you are using the GUI to build your GWT app. Good luck!

Developing a GUI Builder Application

I am looking for a nice framework for developing a GUI builder Application. We have an application where 100Os of custom data entry forms and their print formats are required and each client will need some modifications on these. We have a developed a product using java based open source templatnig frameworks so that the layout and field definition are stored in database and rendered dynamically to the user. We also have an appication to design these forms but cannot do visual design.
Now I am trying to make a Visual Form Designer application for generating these forms. Can any one suggest some open source frameworks than can be used? Can I use Eclipse Visual Editor? Or is it better to develop some kind of parser for HTML using AntLR and then parse the HTML output from already existing GUI builders like Dreamweaver to get the desired output?
Thanks and Regards,
-- Kannan
Oooh, great question!
I wouldn't know any readily availble framework that you can use. Depending on your needs however, I think rolling your own shouldn't be too hard.
First of all, you probably wouldn't want to give the users too much freedom. Freedom only gives them the opportunity to mess things up and make the resultant forms hard to use. I think from your description that the fields are pre-defined, so that the user only needs to customize which fields appear on a given form, and in what order. Order can be a simple thing like top-to-bottom. Some semi-intelligent automatic layouting could be used to conserve screen space. Adding a feature to group fields together would probably also be useful, and grouping would lead to some kind of standard "group" widget.
Accepting simplified functionality like this, you don't really need the flexibility of a full gui editor. A couple of listviews, maybe a property sheet and a preview window will be enough to give your users the functionality they need.
Of course, this only holds for screen forms. Print forms may be trickier to layout, as people may want to cram as many fields as possible into very little space so the entire form can fit on a single page or something. I really don't have any suggestions for you there, but maybe a similar "simplified" approach with some intelligent auto-layouting could work.
Overall, my advice would be: Keep It Simple! (S... ;)