Suppose I have a TabManager class which holds tabs array. There is also a controller that needs to track this tabs property and draw tabs in the array. I have two approaches to sharing this data:
First approach is reference sharing:
controller.tabs = tabManager.tabs
There are also many variations of the statement above, for example, this one:
// getTabs() returns reference to private _tabs property
controller.tabs = tabManager.getTabs();
Second approach is to notify controller when tabs array changes:
tabManager.on("tabSetChange", function(tabs) {
// tabs here are clone of tabManager.tabs, not the same reference
// so modifying controller.tabs won't affect tabManager.tabs
controller.tabs = tabs;
});
Is there are a some rule of a thumb to decide which approach to choose? Lately, I'm inclined to use second approach to prevent accidental data change and with this approach debugging seems easier. But the second approach is also much more elaborate.
From your description it sounds like TabManager "owns" the tabs array and is responsible for making changes to it. The controller just needs a read-only view of the information in order to draw the tabs.
Presumably the controller needs to know when the tabs array changes such that the view needs to be refreshed. Simply sharing the reference doesn't give controller the ability to know when the array has changed, the TabManager would have to notify it. This leads to the event driven model you suggest being the better fit.
The event driven model allows the TabManager to emit events when there are relevant changes to the array, and for anyone who cares to be notified. This decoupling of components is a good thing. You may find another component wants to track the tabs array as well, so rather than hardcode a relationship to TabManager, it just registers an event listener.
This event based model is very much the JavaScript way.
Related
I have tried to adhere to the mvc pattern in the java code that I have written. I want to keep the view and model independant of the controller and from each other. I am also trying my best to use interfaces to keep things modular.
My view has JButtons that I want to "bind" to specific methods in the model through the controller. I have tried two approaches to still keep the view independent of controller:
Registered the controller as an ActionListener to the view-object. Pros: The void addListener(ActionListener listener) abstract method encapsulates this behaviour in the view interface, so more buttons can be added without changing the interface. It also decouples the controller from the view, since it does not know anything about the actual buttons in the view. It is also easier to add more views or more controllers, so it follows the open-closed principle well. Con: For the controller to know the nature of the ActionEvent, I have only been able to come up with using the ActionEvent.getActionCommaned() in a switch statement, so mapping each case to its' corresponding method in the model. This seem unsafe and prone to cause irritation, since it seems like bad practice to match strings like this.
I also came up with adding public addActionListener(ActionListener) methods for each button in the view, like addGasButtonListener(ActionListener). Then doing something like view.addGasListener(e -> model.gasVehicles(view.getGasAmount())) in the controller. Pro: This seems like it reduces the uncertainty of matching strings. Cons: It means I have to add these new methods to the view interface, and each time a new button is added I have to do the same, making it difficult to add new views that does not have anything to do with some of the methods.
Main question:
I prefer the first method since it seems better to me, but I still would like to find a way to avoid matching strings, and find some nice way to do it (more similar to the rigidity of the second way of binding buttons to methdods). Is there?
Follow-up (less important) question:
I should also mention that my controller contains an inner class TimerListener implements ActionListener, that contains the loop of the app that acts on ActionEvents from the Timer. It also acts on ActionEvents from buttons if approach number one is used, which is why my follow-up question is: how would I seperate this main loop that only cares about the timer, from the switch statement used to act on button events. Since the ActionEvent.getActionCommand() is null almost all the time, it would be nice to seperate the two. Is there a approach that would let me do that?
I don't really see the value of working with ActionListener instances in the first place.
From your own example:
view.addGasListener(e -> model.gasVehicles(view.getGasAmount()))
You don't do anything with the actual event
In case you decide to use a different UI element in the future that doesn't fire ActionEvents, you will have to change the type of the listener.
I would rather expose a custom listener/callback that the controller (or model) can register on the view:
void onGasAmountChange(double gasAmount);
That being said, you might be focusing too hard on having a model, view and controller. If you look at more complicated Swing components (JList, JTable, ...), they have a view component and a model (ListModel and TableModel).
You could do something similar and create your own model for your view, and let the view call the necessary methods on the model directly (just like it happens for those Swing components).
That avoids having to write a bunch of one-liner listeners that basically delegate to the model.
I am making a simple notepad application in Java and trying to use a fluid and immutable style, for the sake of trying it out. I have found it a lot of fun and am seeing lots of the great advantages that get talked about in regards to functional programming (code clarity etc.).
But I have an issue with event handling in general. I have one class TextArea that provides a Notepad-like document like you'd expect. Then I have another class ScrollBar . They are manipulated by a master class CentralController that keeps the scroll bar and text area working together (not the real class name, it's just for this example).
So if the user presses the down arrow, CentralController simply calls TextArea.withDownArrow() and that returns a new copy of the TextArea with the cursor moved down. The problem is the Scroll Bar now needs to be moved, so the CentralController needs to know whether the TextArea got scrolled by that down arrow.
My first attempt to solve it was to return an object that contained not only the new TextArea, but also a flag saying whether the scroll needs updating. That worked well but didn't feel right because I was no longer returning the TextArea whereas you really should in 'proper' functional programming (roughly speaking).
So then I tried having a flag inside TextArea that would get set if TextArea.withDownArrow() caused scrolling. That also works well but seems wrong to have a method result stored 'globally' in the class. It also has issues where you might call withDownArrow() twice and then the flag gets overwritten with a new result.
I have read a bit about Reactive Programming and it does seem interesting, but I'm not sure of it's suitable for this situation where you have a 'child' class sending a message to a sibling.
Just to add, I am under the impression normal event handling won't work in this situation. With immutable objects when you change something you create a new object. So any objects that try to send an event to a listener will be sending to an old pointer.
Am I missing an obvious way to do this because I feel like I am? Or is it actually ok to use normal Java event handling techniques and I'm worried about nothing?
Edit: I think I have worked out a good enough solution now. Even though the class that receives events (ScrollBar) is recreated all the time, the members of that class do not get recreated. Only things that change.
So I will just have an simple event receiver method in ScrollBar, and TextArea can have a list of listeners (basically the 'normal' way of doing events with listeners).
In summary my error was thinking I needed to send an event to a instance, rather than a member of that instance.
You have to differentiate between value objects and logic objects. Value objects contain nothing but values, no logic(*). They can be immutable.
But of course a text area cannot be a value object, nor can a scrollbar be a value object, because they must contain logic. Nor can they be immutable, because they contain state. So, scratch all that. It won't work.
(*) Or at least no logic that deals with external entities, or manipulates any of their own state.
I am using Sencha's GXT 3.0 to render a ListViewCustomAppearance with a custom render defined through XTemplate (html/css). It works well when things are read only or when the interaction occurs on the list-level (ie. item select, item deselect).
How do I add mouse events to elements defined in the template's markup? My end goal is to have a clickable element inside an item in the list. The event handler would be in java.
Please let me know if this is going about it the wrong way..
ListViewCustomAppearance is useful when you want to completely restructure the child dom, not just how each child gets drawn. By making one of these, you are taking over responsibility of deciding how to handle selection (see the com.sencha.gxt.widget.core.client.ListViewCustomAppearance.onSelect(XElement, boolean) method).
This is important because ListView already knows how to manage selection! You can set and configure a ListViewSelectionModel on the ListView itself to handle a variety of interactions, and can listen there for events.
Instead, consider just making a custom Cell (probably starting from the AbstractCell class) that renders your data how you want it to look. Override the render method to specify how to append new content.
One more tip - the ListViewSelectionModel idea may not work for you, depending on what kind of data you are trying to get about user interaction. Instead, consider also overriding the onBrowserEvent method - this gives you the model object of the item that was modified, a reference to the root of the rendered content (from your render method), and the event itself. Use the event object to see what happened (test the event.getType() against a string event type). When subclassing AbstractCell, you also need to pass the event you are interested in to the superclass constructor.
Check out ActionCell as a pretty good example of how to rough this out. It is designed to be abstract enough to be reusable, but that also tends to make it a poorer example.
i've started on some basic java coding with gwt, and im getting a bit concerned about the heft of my main class.
For instance - how does one compartmentalize the keyhandlers, since they trigger a number of changes to the UI, how could i move this into a separate .class file and still be able to access all the various widgets in the main class, without having to pass everything to the handler (ie. all the widgets i manipulate after the click event).
i've googled but didnt come across any particularly good examples - know of any readily legible code-bases i could read to see how it should be done? (gwt's own tuts are pretty basic, and just kitchen-sink every thing into a single file)
thanks!
I hate to say something so unimaginative, but MVC works--it's not the ultimate, but it can start getting you organized.
EDIT: While searching on a semi-related topic, I came across this which has similar ideas to mine but goes into more detail.
What that means in terms of GWT is that you should think of just laying out your GUI components in one class, put all your event handling in a second and put your object model objects separate from the other two.
One way to accomplish this is to make most or all the controls on your GUI public members. This sounds kind of lame, but their usage is encapsulated inside the controller so it's not like you have uncontrollable access--in fact your access is clearer/better defined than if all your members were private but your view code was combined with the controller.
Specific tricks:
Have listeners be their own class. You can often reuse them-- in other words, avoid anonymous inner classes. I sometimes create a listener class and instantiate a new instance for each button/control that needs to have a similar effect when pressed. If I need it to act slightly differently for a given button, I'll pass something into the constructor of the "special" handlers so that they know to act a little differently. You can also create different handler sub-classes if necessary--I'm just saying don't forget that event handlers are classes, you can use inheritance and everything if need be.
One Very Old GUI Trick I learned a long time ago, try not to have various mini-handlers modifying the GUI in different ways, instead have all the "active" buttons and controls set a state within your GUI and then call a single method that applies that state to ALL the controls on your GUI. When you get beyond a trivial GUI this can be a life-saver. If I'm not being clear, leave a comment and I'll leave an example for you.
Property sheets:
There is a special case for GUIs--the property sheet style GUI. I've done a LOT of these and they are irritating as HELL. They tend to have dozens or hundreds of controls on them, each GUI control tends to be tied to a specific field in your model and there are just hundreds of lines of copy and paste boilerplate code connecting them, each group copied and pasted with a few items changed--at minimum it's like 3 lines of code per control (Create control, copy value in and copy value out).
I always write these with a "Smart" controller--one that can intelligently bind the control to some data without any unique code. This can get tricky and if this is your problem let me know in the comments and I can give you some general advice as to some tricks you might try. I've gone from a minimal reflective solution to a full-on XML based solution. Were I to do it again, I might consider annotation-based.
Example of MVC:
Note, this is just an example, there are a MILLION ways to do MVC.
In your MAIN:
Instantiate MyView
Instantiate MyModel
Instantiate MyController(myView, myModel)
myView.setVisible(true)
in MyView
probably extends Frame
Most components are public final (public final Button b=new Button())
If public members make you nervous, use getters--same EXACT effect as public final members with a little extra syntax.
Remember that you can set final members in your constructor.
May have general methods such as reset(), but MyController may be a better place for this.
in MyController
saves references to myView and myModel
adds listeners to myView where necessary (see advice on listeners above)
configures myView based on state of myModel
when "done" button pressed, copies state from myView to myModel
notifies myModel that it's data has been updated and destroys itself.
in MyModel:
This would be a typical model class, it would contain your business logic (mostly not used as part of the GUI, that's more like GUI logic in MyController. The controller would tend to set values in your business logic then call some method like updated() to cause some business logic to take control. It should know nothing of a GUI--this is your "pure" business class.
Sometimes the GUI might call an update() or some other method to trigger some data change and then reload the GUI controls from the Model--this is a fairly good way to integrate your business logic with your GUI without your model knowing about the GUI...
Also, as I said above, I would put more work into MyController if I was working with property sheets just due to the sheer number of lines of boilerplate that you end up with if you aren't smart about it.
Note that View and Controller are nearly always paired. You can't just replace a Swing view with a web view and expect the controller to remain unmolested--but the model should not ever change for the view or controller.
You should take a look at the best practices for GWT applications first:
http://code.google.com/events/io/2009/sessions/GoogleWebToolkitBestPractices.html
One of the concepts they talk about is that of MVP (not MVC) to structure your application. There's a sample project on Google Code that you can look at to understand how to structure a GWT application in this way:
http://code.google.com/p/gwt-mvp/
As described in another question, I have a set of Model objects and an associated set of Panel objects which allow the user to access the data in the Model objects. The Panels are registered as PropertyChangeListeners for the Models, such that if something else updates a value in a Model, it fires a PropertyChangeEvent, and the Panel receives it and knows to resync its values from the Model. (Currently I'm naively just updating all the values, but this could be made more intelligent to pull only the changed property.)
All of this makes sense when a Model is updated by some arbitrary, unknown source, which does happen in my application. However, most often a Model's properties are set by the Panels themselves. In this case, now that I've hooked the Panels up as PropertyChangeListeners for the Models, my code is doing something that makes no sense: after the Panel updates the Model, the Panel receives a PropertyChangeEvent from the Model and pulls the same value from the Model that it originally sent to the Model in the first place. No update needs to occur, and it makes no design sense for this to happen.
So how do I register something as a PropertyChangeListener but then say "Don't notify me of PropertyChangeEvents when I am the source of them?" (Note that I can't answer this by calling PropertyChangeEvent.getSource(); it'll give me my Model, not the Panel that sent the value in the first place; there's no way to look at this and tell what changed the Property.)
In all reality, do you really care if you get that event fired back at you? It allows you to handle any times the Model is changed outside the Panel and there really isn't a lot of overhead involved in checking to see if you actually have to update the value.
The PropertyChangeEvent holds the property being changed as well as the old and new values. You can check each incoming event to see if the value in the Panel is the same as the new value, and if it is then discard that event. The Model should tell everyone that is listening to it for PropertyChangeEvents every time it has changed otherwise it will need to know too much about the Objects that are listening to it.
Whatever you do, DO NOT create property change event listener loops. You will end up with a situation that very easily can end in an infinite loop if you are not very careful.
I don't think that there is any measurable detriment by the unneccessary repaint during runtime. So from that point of view there's no need of changing the code. In that situation you should decide having regard to design/architecture. You say:
...and it makes no design sense for this to happen...
, but it does!
If you want to avoid the repaint, you have to add the source (the panel) to the parameters of the method(s) that change(s) the model, put it into the change event and consider that parameter when evaluating the event again, which makes your code much more complicated. Think what else you have to do, if there are two instances of the same panel, one that changes the model, one that has to be changed after receiving the event...adding object-ids to method calls...What if later changing the design of model or view the way that editing one field of the panel leads to changes of the model that are shown in another part of the panel - additional changes again...etc.
Moreover, if you would do as described, you'll break with the decoupling of model and view, which is never a good idea.
If you want to keep it simple, leave it as it is. The only reason to write complicated code is bad results during runtime and I don't think you'll get that.