I am new to GWT and can not find an answer to this: I have got a nice UIBinder for a TextBox, it works, I have UIHandler working with it, ok. But what if I want to show a value from this TextBox all over my HTML? Is there a way to declare one variable to reuse this value all over HTML, or should i declare new Label with new ui:field name every time I want to show the value on one html page, and fill every such a Label with UIHandler (wich I could do right away, but this seems really boring)?
<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder' xmlns:g="urn:import:com.google.gwt.user.client.ui">
<g:HTMLPanel>
<g:TextBox ui:field="myField"/><br/>
<div>
<p>
What do I need to put here if i want to see **myField.getValue()** in html, may be even multiple times?
And **here**?
I want to avoid creation of new and new objects in back-end class for just one value, multiple labels here are ok. How to push one value in all of them, when myField content is changed?
</p>
</div>
</g:HTMLPanel>
There are two approaches to designing GUI in code in MVC (whatever that means) way:
GUI is smart and pulls data from model, usually when certain events happen (data binding falls into this category),
GUI is stupid, so the data is pushed into view by a controller (it is sometimes called a passive view).
Both have their pros and their cons, but the important thing is: when you try to combine them, the pros cancel each other, and cons - accumulate. That is you end up with disadvantages of each pattern and a big mess.
UIbinder is a tool that helps you build a stupid view, as used in MVP pattern. It helps you easily create a bunch of objects that will redraw parts of view when you push data into them. They are not supposed to be intelligent entities. So the boring way seems to be the way to go.
Not wanting to use a label is, btw, a little strange: you need an object to update parts of the ui (it's Java, using objects is what we do!). It just so happens that such type of object exists and is called Label. Would you like it more if the very same class was called AnAutomaticHtmlUpdaterThatRequiresNoLabelWhatsoever?
Related
I'm working on a game (in Unity3D) which consists of a dozen menus and no real 2d/3d game world. From a programmer's perspective it is just a bunch of buttons, labels and images.
To not have everything inside of one big menu class, I decided to split the code in parts for every menu. The result is that I've got a dozen classes which themselves have all the references to their gameobjects and e.g. the button methods.
My problem is that almost everything in my project is static by now, because these menus do not get instantiated multiple times and I have to access variables and methods from one menu with the script of another menu.
Thus my question is what the best practice would be for this situation. I've got a couple of ideas, how I could do it, but unfortunately I didn't get to learn what to do in such a situation.
So if you straight up want to suggest something, feel free to do so. :)
My ideas:
1) Make a controller which has static instances of all menus. A button-method in class 'A' could then call Controller.B.x. This does work, but I dislike putting "Controller" everywhere so often, because most classes access methods and variables from other classes so often, that it's just ugly.
2) Make these menus all be singletons. Afaik are singletons "ok" for something like this, but aren't they just shifting the static instance to their own class instead of one controller? When I switched from option 1) to this with one class, basically Controller.A.x became A.instance.x, where "instance" is the static instance of the class inside the class.
3) Keeping everything the way it is, having variables and method being static whenever I need to access them statically from another class, otherwise make them private.
The game is probably not a "bunch of buttons, labels and images".
I suggest to forget about the menus for a second, focus on the model of your game, create classes strictly for that. You don't put things like "how much of a currency does the player have" in any menu, it should exist in a Player class or similar (the model).
Once you can manipulate your model from a single test controller class, and simply log the results in debug console, you're ready to do the same with menus.
After that, you can much easily create user interfaces to read /display (creating labels and images on the fly) and write (hook button events into) the model beneath. These UI classes will probably have so much in common after that.
You can use UnityEvent class for communication between UI and model, they are nicely shown in the Inspector (the same events used in UI Events and Event Triggers).
Fore more general info, Google on some design patterns like MVC, MVP, MVVM, or VIPER.
My recommendation is to strongly consider why you have statics. I understand your reasoning that they are singletons but I don't think that is a good enough reason.
I hope you are using the Unity GUI features properly.
I would just write a base "Menu" component. Then you can add references into the sub classes. For example.
You have a "StartMenu" class derived from "Menu" which is derived from "MonoBehavior". In "StartMenu" you write a method "ShowCharacterCreationMenu()". Then add a button component and hook the method up to that button press. StartMenu will have to have a reference to Character menu. This is the classical OOP approach.
I would do this a little differently though. Unity's strength lies in component based design so I would lean towards that. I would probably create a "Transition" component class that listens for a button press. When that button is pressed it goes to the next menu.
Hope that makes some sense.
I am trying to find out if anyone has an approach to automated UI testing on Material UI components.
Material UI elements are rendered as nested divs with very little unique id information, for example:
<div data-reactroot style="...">
<div style="...">
<div style="...">
</div>
</div>
</div>
The nested div structure makes using traditional location methods difficult if not impossible - (Selenium and Watir), id, name, class, etc.
Using react devtools, one can see a much clearer picture of how the page is structured, but I am not yet able to access the React "DOM" to locate elements.
Any ideas or help would be appreciated.
Added example:
Sliders
I can't come up with an example that is more descriptive than the one above, could literally be 10 layers of nested divs without any text.
There is no general method I'm aware of, unfortunately.
Some of the components already have ids, which allows you to use a css selector like #my-component input (which is usually enough to get an exact field), others have custom class names to be added (like AutoComplete - popoverProps) which allows you to use a similar selector.
Good news is that every MaterialUI component provides className, which can be used to locate elements (at least partially) - details can be found at http://www.material-ui.com/#/customization/styles
Also id field works quite often, even when not documented.
At the last resort (if detection by class + other css selector parts is not sufficient) you can fall back to XPath expression using element text - for example, I use //span[#class="menu-item"][.//div[contains(text(),"${itemName}")]] for matching menu items. It matches things declared as <MenuItem primaryText={itemName} className="menu-item">
My application is designed to load up an XML file and display an error(s) (if any).
The problem I have is how to display both (the XML and Errors) on screen without coupling (my application does currently work).
My application currently looks like (no laughing or comments about me going on a Photoshop\UI course please):
The brown colour is a different view called XmlView.
The red box is where I want errors to be displayed.
So, the user clicks File->Open, selects the file and the .XML content is displayed in my XmlView (brown) and my error messages are shown in red. This works but, I have a horrible feeling my design is poor as I have totally coupled my MainWindow and XmlView.
The way I have this working is, when the user selects a valid XML file (from File->Open), I create an instance of my XmlView and bind it to my Views property of my MainWindow class. My XmlView takes 1 parameter which is the MainWindow type.
So, within my XmlView, to update my ErrorList, I would write code similar to
_mainWindow.ErrorList.Add(//newError)
But this now means my XmlView knows about my MainWindow which I thought was undesired.
So, finally, my question! Is my design poor or is this OK?
You should consider using an MVVM framework if you are doing MVVM.
It would depend on whose responsibility it was to load the XML, but I would suggest the XmlViewModel, not the MainViewModel.
In that case the MainViewModel should just be a conductor of other view models. In your first case, it would instantiate the XmlViewModel, passing the file path and set it as its current view.
The XmlViewModel would be responsible for loading and validating the XML. It too could have a child view model which displays the validation errors. It should load the XML asynchronously, with some form of busy notification.
The MainViewModel is likely to want to conduct many view models, so if you were going to use a framework such as Caliburn.Micro, this would be a conductor type.
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.
Zend_Form:: When should be form created in view and not in controller?
option 1 - form created in controller and passed to view (usually used)
controller:
$form=new MyForm();
$this->view->form=$form;
view:
echo $this->form;
option 2 - form created in view directly (looks better to me because form its subpart of view)
view:
$form=new MyForm();
echo $this->form;
Thanks
In short: newer in view.
You may eventually:
create view helper for complex tasks (and call the helper in view $this->getForm()),
or use Model::getForm()
or service::getForm() when you need cross-action forms.
Further explanation:
Because in the ideal case, views contain only HTML, to separate logic from presentation (MVC).
When using TDD, you write tests for logic, never for view scripts, which are only clothes for the variables.
Displaying the form, is not only the form itself, but also checking whether it was submitted or not, checking for validation errors, setting flash messenger variables and much more.
These are too complex tasks for putting them to view scripts.
As a good exercise on separating logic and presentation, I recommend you to take a look at PHPTAL template language, which is a nice alternative to native PHP as a template language used in ZF.
If a form appears in, say, the sidebar of a layout - like a "Subscribe to our mailing list" form - it seems reasonable to allow the view to create/render it on its own, though I'd probably do it within a view helper rather than have any new My_Form() calls in a view script. Why force every controller to deal with it?
As Padraic Brady notes in his online ZF book Surviving the Deep End: "Controllers Are Not The Data Police".
I think the only first variant is correct, because Zend_Form is not presentation entity, but business logic entity. So it's wrong to try to instantiate it in the view. If you want simply display some form just mark up it directly in HTML - this will be much more easier for coder at least.
Think about your team mates, are your designers( or graphical integrators ) programmers too? that approach will break down re-usability, and tasks separation.