title: GWT MVP: Connecting the Dots on Presenters, Activities, Displays & Places
body: <p>I am attempting to design my first, super-simple GWT app, that takes advantages of most of GWT's major API features. I think I'm about 70 - 80% of the way there, but after pouring over the GWT docs, countless articles, and posting many other GWT-related questions here on SO, I am still having a tough time understanding the last 20 - 30% needed to put this app altogether.</p>
  
  <p>I have called this first test app <code>ClickItToWinIt</code>, and I want it to look like this:</p>
  
  <p><img src="https://i.stack.imgur.com/qIb99.png" alt="enter image description here"></p>
  
  <p>When the user clicks the "Win" button, a picture ("<code>win-pic.png</code>") pops up in the image frame on the left-hand side. When the user clicks the "Lose" button, a picture ("<code>lose-pic.png</code>") pops up in the same frame. The user can click back and forth between the buttons to make the different pictures display. This would be a single-page app, hosted locally on my machine, and would only need to contain 1 homepage, 1 module/entrypoint, etc.</p>
  
  <p><strong>Please note</strong> that the packaging/class structure proposed below is surely overkill for such a simple <code>ClickItToWinIt</code> app. However, before long I want to be moving on to bigger and better things with GWT, so it's important to me that I have an understanding of proper GWT coding before I start to tackle bigger apps with more complex UIs.</p>
  
  <p>Also, the proposed structure below is based on 3 GWT principles that Google seems to encourage tirelessly:</p>
  
  <ul>
  <li>Performance; client-side speed</li>
  <li>Security</li>
  <li>Separation of concerns (MVP, etc.) for ease of testing</li>
  </ul>
  
  <p>One last item here: normally, in my PHP webdev days, I used the concept of "themes/skins" in some of my sites by deploying the site with a different CSS file that simply applied different styling rules to the same DOM elements. Thus I might have a "<code>normal-styles.css</code>" file that makes the site look "normal", but also have a "<code>facebook-styles.css</code>" file that gives the site the look-and-feel (colors, fonts, etc.) of Facebook, etc. I'd like to accomplish the same thing here and am proposing a <code>net.bfodder.c2w.client.views.themes</code> package that will have <code>AbstractTheme</code> subclasses in it. These subclasses would somehow be injected/baked into the view/presenter at build-time and would give me a way to deploy the app with a different theme or skin. I <em>believe</em> this is the right approach because (if my understanding of <code>ClientBundle</code> and <code>CssResource</code> is correct) GWT <em>seems</em> to have object-ified CSS styles into GWT POJOs. My <code>AbstractTheme</code> subclasses would somehow tie into <code>CssResource</code> and defined styles for all my <code>Widget</code>s.</p>
  
  <p>So here is the proposed <code>src/main/java</code> structure of <code>ClickItToWinIt</code> (I'm developing in Eclipse 3.7 Indigo with the Google-Eclipse plugin):</p>
  
  <pre><code>ClickItToWinIt/
      src/main/java/
          net.bfodder.c2w
              net.bfodder.c2w.client
                  MainModule (implements EntryPoint)
                  AppController
                  ClientFactory
                  net.bfodder.c2w.client.views
                      net.bfodder.c2w.client.views.ui
                          WinButton (extends Composite implements ClickHandler; hasA TextButton)
                          LoseButton (extends Composite implements ClickHandler; hasA TextButton)
                          ImageViewer (extends Composite; hasAn Image)
                      net.bfodder.c2w.client.views.containers
                          MainContainer
                          ButtonContainer
                          ImageContainer
                      net.bfodder.c2w.client.views.displays
                          WinActivity (extends AbstractActivity implements AcceptOneWidget)
                          LoseActivity (extends AbstractActivity implements AcceptOneWidget)
                      net.bfodder.c2w.client.views.themes
                          AbstractTheme
                          NormalTheme
                          FacebookTheme --&gt; I really dont't care about FB, just using as an example of a well-known theme/skin
                  net.bfodder.c2w.client.presenters
                      IPresenter
                      ButtonPresenter (extends AbstractActivity implements IPresenter)
                      ImagePresenter (extends AbstractActivity implements IPresenter)
                  net.bfodder.c2w.client.history
                      InitialPlace (corresponds to http://localhost/clickittowinit)
                      WinPlace (corresponds to http://localhost/clickittowinit/#winning)
                      LosePlace (corresponds to http://localhost/clickittowinit/#losing)
                  net.bfodder.c2w.client.events
                      EventBus impl and GwtEvent impls
              net.bfodder.c2w.server
                  Not worried about server-side for now; I think I "get" that much!
  </code></pre>
  
  <p>The <code>AppController</code> is for any oddball app-level business logic that doesn't belong to any one particular <code>IPresenter</code> subclass. The <code>MainModule</code> is where everything kicks off (DI, starting preliminary <code>Activity</code>, etc.). The buttons get placed inside <code>ButtonContainer</code>, the <code>ImageViewer</code> gets placed inside the <code>ImageContainer</code>, and both those inner containers get placed inside <code>MainContainer</code> (which I <em>assume</em> is created up in <code>MainModule</code>). As far as layout and style of these UI components, like I said this would be up to whatever the injected/configured <code>AbstractTheme</code> defines in its rule set.</p>
  
  <p>I'm using the <code>ClientFactory</code> as recommended <a href="https://developers.google.com/web-toolkit/doc/latest/DevGuideMvpActivitiesAndPlaces#ClientFactory" rel="nofollow noreferrer">here</a> for convenient access to major parts of the app's GWT plumbing.</p>
  
  <p>As for the MVP "stuff", here's what I was thinking:</p>
  
  <pre><code>public class WinActivity extends AbstractActivity {
      private final ClientFactory clientFactory;
      private final WinPlace place;
  
      public WinActivity(ClientFactory clientFactory, WinPlace place) {
          this.clientFactory = clientFactory;
          this.place = place;
      }
  
      @Override
      public void start(AcceptsOneWidget panel, EventBus eventBus) {
          ImagePresenter presenter = clientFactory.getImagePresenter();
  
          // Inject the presenter with any stateful data here
          // presenter.setImage(getWinImageUri());
  
          presenter.go(panel);
      }
  }
  </code></pre>
  
  <h3>The Question(s)!</h3>
  
  <p>Like I said up above, I <em>believe</em> I'm almost there, I'm just having a tough time bridging the gaps on some things. So I ask:</p>
  
  <ol>
  <li>How do I wire up my <code>AbstractTheme</code> subclasses to use <code>CssResource</code> and <code>ClientBundle</code> so that my app gets injected/configured with the correct theme, and client browser download the correct CSS file (<code>normal-style.css</code> or <code>facebook-style.css</code>)?</li>
  <li>Can someone properly explain the relationship between <code>IPresenter</code> (from classic MVP), <code>AbstractActivity</code>, "display regions" (<code>AcceptsOneWidget</code>) and <code>Place</code>s? Is there a 1-to-1-to-1-to1 relation here, or is the intention with GWT to have, say, multiple display regions for every <code>AbstractActivity</code>, or some other set of ratios?</li>
  <li>How do I connect the <code>WinPlace</code> with GWT's History API? So if the user clicks <code>WinButton</code>, <code>LoseButton</code>, <code>WinButton</code>, how to have that saved in browser history so they could hit the forward/back browser buttons and recreate this usage pattern over and over again?</li>
  <li>When the <code>WinButton</code> gets clicked, it places a some click event on the Event Bus. Where and how do I wire up a handler/listener to the EventBus that will know: (a) to change the image in the <code>ImageViewer</code>, and (b) to store this state change in the History API?</li>
  <li>I got the idea for the <code>AppController</code> from <a href="http://howtogwt.blogspot.com/2010/02/event-handling-and-event-propagation.html" rel="nofollow noreferrer">this article</a>, which unfortunately never provides any code snippets for what the <code>AppController</code> might actually look like. Can anybody (who is familiar with the <code>AppController</code> pattern for GWT) shine some light as to what this would look like? Perhaps its somehow an <code>IPresenter</code> subclass with no particular <code>Activity</code> or view components?</li>
  <li>In general, and I <strong>know</strong> that these kinds of "<em>amidoinitrite?</em>"-style questions are discouraged on SO, but I have to ask any battle-worn GWT veterans out there: am I way off-base here, or am I more or less on track with GWT best practices? Any suggestions?</li>
  </ol>
  
  <p>I hate to ask such a "super-question" here, but I'd rather do this than clutter SO with 6 medium-sized questions, and just keep repeating the same problem setup over and over again. Plus, with a good code example, it's probably possible to answer all 6 in one fell swoop, so I took a chance here.</p>
  
  <p>Thanks in advance.</p>