javauser-interfaceblackberryblackberry-eclipse-pluginblackberry-editfield

Side By Side Edit Fields


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);

Solution

  • 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

    enter image description here