I have created editable grid in which I am adding all the cell widgets. Now I want to check for some condition and replace a cell or column with another cell widget. For example if I have defined a column of EditTextCell, based on a boolean condition I have to change that column to have selectioncells(combo box). How to achieve this?
There are three ways to do that:
Use a CompositeCell with an EditTextCell and a SelectionCell and override the render method of the CompositeCell to render either the EditTextCell or the SelectionCell based on a boolean flag that you store in your DTOthat is bound to the Cell.
Create a custom cell extending AbstractEditableCell for example (see this tutorial) and implement the functionality yourself. You can check out the code for SelectionCell and EditTextCell and copy most of it. In the render method you have to either display a dropdownlist or just a text based on the boolean flag.
Extend either EditTextCell or SelectionCell and implement the missing functionality. The advantage is that you can probably re-use some of the render methods and you don't have to write the complete render code yourself.
Related
I would like my toggle buttons to be layout in a table, and not as a single row.
The number of toggle buttons is not static -
that is upon init I load a resource which contains a list of all the texts that should become the toggle buttons.
Looked at a number of approaches, each has its issues:
Create a list of ToggleButtons and a list of lists of bools to store the appropriate selected state as a data structure to divide the toggle buttons into a number of rows. The problem with this approach is in the implementation of the onPressed method - how to get a reference to the appropriate element in the list of lists of bools? Or in other words - how to get a reference to ToggleButtons object from within the onPressed method?
Use key property to pass the index of the current ToggleButtons. It is not intended for this purpose, so it is a bad practice, also again, there seems to be no straightforward way to access the key property from the onPressed method.
Extend the ToggleButtons class, and specifically override its build method. This is considered an anti-pattern in Flutter in general. Specifically In this approach, as we want all the functionality to remain the same, and change only the internal Row -> Table widget generation in the build method, it looks like we would have to duplicate all the code of this method, which is a bad idea as it might brake things as it changes in future versions of this widget
Create a table of checkbox / switch widgets as an alternative, which should work easily, but I want the look & feel of toggle buttons, not checkboxes or switches :)
I must be missing something simple!
After posting this I have a new idea :)
A table of FlatButtons! Will be probably possible to achieve similar UI to ToggleButtons. Will try it in a bit.
I would still love to hear other suggestions regarding ToggleButtons.
Try using SwitchListTile.
The entire list tile is interactive: tapping anywhere in the tile toggles the switch. Tapping and dragging the Switch also triggers the onChanged callback.
To ensure that onChanged correctly triggers, the state passed into value must be properly managed. This is typically done by invoking State.setState in onChanged to toggle the state value.
The value, onChanged, activeColor, activeThumbImage, and inactiveThumbImage properties of this widget are identical to the similarly-named properties on the Switch widget.
The title, subtitle, isThreeLine, and dense properties are like those of the same name on ListTile.
The selected property on this widget is similar to the ListTile.selected property, but the color used is that described by activeColor, if any, defaulting to the accent color of the current Theme. No effort is made to coordinate the selected state and the value state; to have the list tile appear selected when the switch is on, pass the same value to both.
The switch is shown on the right by default in left-to-right languages (i.e. in the ListTile.trailing slot) which can be changed using controlAffinity. The secondary widget is placed in the ListTile.leading slot.
To show the SwitchListTile as disabled, pass null as the onChanged callback.
In my application I want to change the editable var at once for 3 nstextfields in a custom NSView. Is it possible to do that using only one line of code (turning something on and of in the NSView perhaps?) or do I have to change it for every object individually? Again all the nstextfields are 'grouped' in one NSView. Hiding the nsview is no option, because it will seem like the entire program is nearly empty.
I have (for example) 3 NSTextFields in a custom NSView and I want to change their edibility option for all of them at once (if that is possible). So that I don't have to do: 'textfield1.editable=false' three times
Use Cocoa Bindings:
Create a dynamic variable editable in the target class
dynamic var editable = true
In Interface Builder bind Editable of each text field to the target class , Model Key Path editable.
Now changing the value of the variable affects all text fields simultaneously.
I am using GWT's CellTable for a non-editable number cell, and it works fine. Is there a standard approach for an editable number cell?
If so, please provide some sample code.
Take a look at the HasCell interface. You could implement this interface and plumb it with a TextInputCell overriding the getCell, getValue and/or getFieldUpdater methods.
If your payload is a data transfer object with a Number field like BigDecimal then in the getValue method you'd just use String.valueOf(bd.doubleValue()), where bd is the BigDecimal instance. You might also consider using Google's NumberFormat to format the String. As for updating the DTO's field value , implement the getFieldUpdater method.
A complex example of what I'm talking about can be found here: Why are there no decent examples of CompositeCell in use within a CellTable?
Can one iterate over all the textbox controls defined in a composite widget?
As in I need to extract values of all textboxes to check if they exist - the textboxes should have some data in them.
So I was hoping to have a method like:
for(Widget w: this.getChildren)
{
//if widget is a textbox - check value
}
Composite class does not have a method like getChildren neither a method where I can get elements of a given class - or name and if I get all the elements using NodeList then I need to recursively go until I find a textbox. Is there a more appropriate way to do this?
As the author of the Composite subclass, you can enable this kind of behavior by implementing HasWidgets (or, more specifically, something like getWidgetIterator()).
There's no way to do this for an arbitrary Composite.
I want to add style classes to elements in a cell (or the td itself) that will change depending on the state of the data in the cell. For example, the cell might have color: red when the data is unsaved, color: blue while the data is being saved, and color: black once the save completes successfully. Code external to the Cell will need access to change the class names, once callbacks are fired, etc.
I have achieved something like this with a hack in my Cell that gets the Element from onBrowserEvent and adds attributes there. I can set the initial style in render and then change it as needed in onBrowserEvent, and even keep track of that element so that external code can use it. This is incomplete, because I can't get the element until onBrowserEvent is called, and annoyingly hacky because I have to set the style in two different places.
What's a better way to achieve this effect without re-rendering the entire table whenever the state of a cell changes?
I found something like
table.setRowStyles(new RowStyles() {
#Override
public String getStyleNames(Contact row, int rowIndex) {
if (row.name.startsWith("J")) {
return "bold";
}
return null;
}
});
which should work in GWT 2.4 to resolve your matter.
The disappointing answer here is that you can't have the best of both worlds - static, all-at-once-rendering, AND dynamic, change-one-element-updating. The only way to change the style of a single cell, within the methods provided by CellTable et al, is to rerender the whole table.
In my own code I've kind of formalized the hacks I made to update single cells at a time, by setting the DOM id of a div rendered to each table cell. Then I can use getElementById and proceed from there. I still avoid the overhead of a full widget. It's a little clunky, but hidden behind a nice interface it's not too bad.