Blackberry Field alignment in a VerticalFieldManager - java

I want to add two fields in a vertical field manager. I want the first one to be align on the left and the second one (on the second line) on the right.

You can use the style argument of the field constructor to specify alignment, both horizontal and vertical.
VerticalFieldManager titlevfm = new VerticalFieldManager();
LabelField leftField = new LabelField("my label", Field.FIELD_LEFT);
LabelField rightField = new LabelField("right field", Field.FIELD_RIGHT);
titlevfm.add(leftField);
titlevfm.add(rightField);

You can also create a class that extends Manager class
Override the sublayout method and place contents as per your choice

Related

Is it possible to get a component from layout in Vaadin by labeling it?

I have a question. Is it possible to get a component from a layout in Vaadin by labeling it with a specific name or something?
Asume that we have this code.
NumberField totalSamples = new NumberField();
totalSamples.setValue(0d);
totalSamples.setEnabled(false);
Label label = new Label("Total samples:");
Button start = new Button("Start");
row = new HorizontalLayout();
row.add(start, label, totalSamples);
layout.add(row);
If I want to get the label object from layout and first need to get the row object and if I don't know the index of all of them. Is there some way to get these objects by setting a specific number or name to them?
Button start = layout.getComponentAt(index)
Use a collection.
Vaadin objects are simply Java objects. So, as you instantiate the widgets, add them to a List or other collection that fits your needs.
Your collection can be stored as a member variable on your outer layout class.
In your specific case of needing to track dynamically-created rows where each has three widgets across, create a class. That class should extend HorizontalLayout. The class would have three member variables, each named so you can later access them individually.
class Row extends HorizontalLayout {
NumberField totalSamples ;
Label label ;
Button start ;
// Constructor
public Row ( … ) {
totalSamples = … ;
label = … ;
start = … ;
this.add( label , totalSamples , start ) ;
}
}
You could add other member variables to this Row class besides Vaadin widgets. If each row represents a particular product made by your company, the add a productId field. Or perhaps you you want to track each row individually for logging, debugging, or audit trail. If so, add a UUID field to the class.
That Row class could be nested within the outer layout class, as you’ll not need it anywhere else in your app.
On your outer layout, instantiate, collect, and place the rows.

GWT getElementbyId to equivalent widget / Panel

I'm trying to build a dynamic web app in GWT, when widgets are added to the screen I remember their 'name' by setting the Widget.setId, when I want to replace part of the page, I can find the element in question via DOM.getElementById('name'), and its parent using DOM.getParentElement(), and then remove its children.
Now I have a com.google.gwt.dom.client.Element object (the parent). What I want to do is turn this back into a GWT object - in fact it'll be something derived from Panel, so I can add additional Widgets.
How do I go from the Element object back to a Panel object ?
I totally accept I could be going about this the wrong way, in which case is there a better way?
I think your approach to remove widgets from the DOM using DOM.getElementById('name') is not the proper one.
On your case (I am just figuring out what you do), I would keep Java Objects references instead of accessing to them using the DOM.
For instance:
HorizontalPanel panel = new HorizontalPanel();
Widget w = new Widget();
//We add the one widget to the panel
panel.add(w);
//One more widget added
w = new Widget();
panel.add(w);
//Now we remove all the widgets from the panel
for(int i = 0; i < panel.getWidgetCount(); i++){
panel.remove(panel.getWidget(i));
}
UPDATE
Based on your comments, I would propose the following solution.
I suppose that you are storing widgets on HorizontalPanel, just apply this solution to your concrete case.
I propose to use customized class which inherits from HorizontalPanel and add a Map there to store relationship between names and widgets.
public class MyHorizontalPanel extends HorizontalPanel {
private Map<String, Widget> widgetsMap;
public MyHorizontalPanel(){
super();
widgetsMap = new HashMap<String, Widget>();
}
//We use Map to store the relationship between widget and name
public void aadWidget(Widget w, String name){
this.add(w);
widgetsMap.put(name, w);
}
//When we want to delete and just have the name, we can search the key on the map.
//It is important to remove all references to the widget (panel and map)
public void removeWidget(String name){
this.remove(widgetsMap.get(name));
widgetsMap.remove(name);
}
}

Codename One Get component reference in a List

Well, I have another doubt. Every row of my list have those components
Label - Button(-) - Button(+) - Label(0) when I clicked on Button(+) I need to get Label(0) value and increase one unit. So I need to get Label(0) reference to set new values. I am trying to find this component with:
Label l = (Label)findByName("lblVal", c.getParent());
Label l = findLblVal();
Label l = findLblVal(c);
Label l = findLblVal(c.getPrent());
My code in List Action Listener is:
List list = (List)c;
Button b = ((GenericListCellRenderer)list.getRenderer()).extractLastClickedComponent();
if(b != null)
{
//lblVal is the name of my component in the renderer
//MY PROBLEM IS HERE, I GET NULL REFERENCE
Label l = findLblVal(c);
}
but I always get a null reference. How can I get reference to this component?
Renderer's are stateless. I suggest reading the developer guide or following the How Do I? videos.
You need to edit your model so that it includes a field matching the name of the label with the proper string that you want.

Moving an image of a TitleAreaDialog to the left

I'm working on a SWT/Jface project based on Java SE, i want to move the image of a TitleAreaDialog to the left. is it possible ? if not is there anyway ?
Thanks,
There is no way to configure it using API, the layout is hard-coded. One way is to hack into the dialog controls and change their layout data, but it is likely easier to implement your own class (using TitleAreaDialog as an example).
If you subclass TitleAreaDialog you have to override createContents(Composite) method, otherwise the TitleAreaDialog will create its own title area by calling createTitleArea(). I suggest that at first you just copy the code from TitleAreaDialog.createContents() and start replacing stuff that you need to be done differently. I don't know exactly what needs to be done without actually doing everything.
You can modify the layout data of the image label as follows:
TitleAreaDialog tad = new TitleAreaDialog(getShell()) {
#Override
protected Control createContents(Composite parent) {
Control control = super.createContents(parent);
Label label = getTitleImageLabel();
FormData data = (FormData) label.getLayoutData();
data.left = new FormAttachment(0, 0);
data.right = null;
return control;
}
};
tad.setTitle("title");
tad.setTitleImage(Activator.imageDescriptorFromPlugin(
Activator.PLUGIN_ID, "image.gif").createImage());
tad.open();

How to remove previous attributeModifier when new attributeModifier is added?

I have two columns which are orderbyborder links. When i click one column i changed the color of column by adding attributeModifier in the following way
add(new AttributeModifier("style", true, new Model<String>("background-color:#80b6ed;")));
This works fine. But when i click on second column, the first column remains the changed color. But I expect only the column which i click should hold this attributeModifier!
You shouldn't change the modifier.
The trick is to have your model return the correct value. So instead of using new Model<String>("background-color:#80b6ed;"), which always returns the same constant value, you'd have something like:
new Model<String>() {
#Override
public String getObject() {
if( columnName.equals( selectedColumn ) { //or something along these lines, to check if the current column is the selected one
return "background-color:#80b6ed;";
}
return "background-color:white;";
}
}
And of course this also means you can add an attribute modifier to every column when you create them and don't have to worry about them later on.
Another way to achieve what you want is to add a css class to the selected line via Javascript (removing the class from old one).

Categories