Side By Side Edit Fields

Question

can someone please let me know why I cannot place 2 EditFields side by side with the following code? I can place 3 buttons side by side, but for some reason I cannot get the EditFields to work for me. Any help will be appreciated.

            //Bin Height
    HorizontalFieldManager hManagerBinHeight = new HorizontalFieldManager(FIELD_BOTTOM);

    LabelField lblRadiusOfBin = new LabelField("Radius of Bin: ", LabelField.FIELD_LEFT);

    EditField txtRadiusFeet = new EditField("Feet: ", "", 3, BasicEditField.FILTER_NUMERIC);
    EditField txtRadiusInches = new EditField("Inches: ", "", 2, BasicEditField.FILTER_NUMERIC);

    hManagerBinHeight.add(lblRadiusOfBin);
    hManagerBinHeight.add(txtRadiusFeet);
    hManagerBinHeight.add(txtRadiusInches);

    add(hManagerBinHeight);

Answer 1

EditFields by default consume all available width passed to them during layout. As a result, the available width left for the second EditField is 0. In order to layout them side by side, you have to either:

1. Layout them manually in parent's sublayout() method (or layout() in case of Manager).
2. Override the EditField's layout() method and make it consume a fixed width and not all width.

OPTION 1:

    HorizontalFieldManager hManagerBinHeight = new HorizontalFieldManager(FIELD_BOTTOM);

    LabelField lblRadiusOfBin = new LabelField("Radius of Bin: ", LabelField.FIELD_LEFT);

    final EditField txtRadiusFeet = new EditField("Feet: ", "", 3, BasicEditField.FILTER_NUMERIC);
    txtRadiusFeet.setBorder(BorderFactory.createRoundedBorder(new XYEdges()));
    final EditField txtRadiusInches = new EditField("Inches: ", "", 2, BasicEditField.FILTER_NUMERIC);
    txtRadiusInches.setBorder(BorderFactory.createRoundedBorder(new XYEdges()));

    HorizontalFieldManager hfm = new HorizontalFieldManager(USE_ALL_WIDTH) {
        protected void sublayout(int maxWidth, int maxHeight) {
            layoutChild(txtRadiusFeet, maxWidth/2, maxHeight);
            layoutChild(txtRadiusInches, maxWidth/2, maxHeight);
            setPositionChild(txtRadiusFeet, 0, 0);
            setPositionChild(txtRadiusInches, txtRadiusFeet.getWidth(), 0);

            setExtent(maxWidth, txtRadiusFeet.getHeight());
        };
    };
    hfm.add(txtRadiusFeet);
    hfm.add(txtRadiusInches);

    hManagerBinHeight.add(lblRadiusOfBin);
    hManagerBinHeight.add(hfm);

    add(hManagerBinHeight);

OPTION 2:

HorizontalFieldManager hManagerBinHeight = new HorizontalFieldManager(FIELD_BOTTOM);

    LabelField lblRadiusOfBin = new LabelField("Radius of Bin: ", LabelField.FIELD_LEFT);

    EditField txtRadiusFeet = new EditField("Feet: ", "", 3, BasicEditField.FILTER_NUMERIC) {
        // Limit the width of the edit field to be the half of the available width
        protected void layout(int width, int height) {
            super.layout(width/2, height);
        }
    };
    txtRadiusFeet.setBorder(BorderFactory.createRoundedBorder(new XYEdges()));

    EditField txtRadiusInches = new EditField("Inches: ", "", 2, BasicEditField.FILTER_NUMERIC);
    txtRadiusInches.setBorder(BorderFactory.createRoundedBorder(new XYEdges()));

    HorizontalFieldManager hfm = new HorizontalFieldManager(USE_ALL_WIDTH);
    hfm.add(txtRadiusFeet);
    hfm.add(txtRadiusInches);

    hManagerBinHeight.add(lblRadiusOfBin);
    hManagerBinHeight.add(hfm);

    add(hManagerBinHeight);

Result