0

I'm writing a simple WebBrowser application and i would like to have a search bar at the top of the window. The root of my stage is a TabPane that currently has only one tab. 

stage = new PrimaryStage{
  scene = new Scene{
    minHeight = 600
    minWidth = 600
    root = tabPane
  }
}

with its content set to a BorderPane returned by a method initBrowser:

def initBrowser: BorderPane = new BorderPane{
  top = initToolBar
  center = new StackPane()
}

And then i define ToolBar in initToolBar

def initToolBar: ToolBar = new ToolBar{
  prefHeight = 10
  prefWidth = 10
  val buttonContainer = new HBox{
    padding = Insets(2, 2, 2, 2)
    val b = new Button{
      text = "Search"
    }
    children.add(b)
  }
  val queryTextContainer = new HBox{
    padding = Insets(2, 2, 2, 2)
    val querytext = new TextArea{
      maxHeight = 10
    }
    children.add(querytext)
  }
  items.addAll(
    buttonContainer,
    new Separator(),
    queryTextContainer
  )
}

This is the result that i am getting

And this is without the TextArea(but looks better)

When exclude the TextArea I the ToolBar looks fine but as soon as I Add the TextArea I run into sizing problems. I am very new to Javafx and I am hoping to improve the look of my Toolbar. I have tried setting prefHeight, maxHeight, etc. but so far this has not worked. So Specifically what i am asking is how can i make my Toolbar look like the one in the second image i posted but still contain a TextArea, creating a web browser address bar? I am using Scala and ScalaFX. I would appreciate any help or direction on this. Thank you.

I've updated the code for my initToolBar method:

def initToolBar: ToolBar = new ToolBar{
  prefHeight = 40
  maxHeight = 40
  padding = Insets(10, 10, 10, 10)
  val b = new Button{
  text = "Search"
  prefHeight = 20
  margin = Insets(10, 0, 10, 0)
}
val t = new TextArea{
  prefHeight = 10
  maxHeight = 10
  margin = Insets(10, 0, 10, 0)
}
items.addAll(b, new Separator(), t)
}

And here is a photo of current results: doesn't fit toolbar

mox_mox
  • 111
  • 2
  • 10
  • I don't see where you actually add the `TextField` to the `Toolbar`. I only see where you add the `Button`. – SedJ601 Feb 24 '18 at 19:29
  • I added the HBoxes inside of `items.addall()` the button is wrapped in hbox and the textarea is wrapped in separate hbox. – mox_mox Feb 24 '18 at 19:37
  • 1
    The `Toolbar` has it's own `HBox` like container. All you have to do is add the `Button ` and the `TextField` to the `Toolbar`. – SedJ601 Feb 24 '18 at 19:40
  • 1
    @ Sedrick I Tried that but it also didn't work. Wrapping the HBoxes around those components was an effort to have more control over them. Guess it didn't really make much sense though. However i did find the problem, posting an answer now. – mox_mox Feb 24 '18 at 19:56
  • @Sedrick, i take it back. Its not fixed. but maybe closer. instead posting an edit now. – mox_mox Feb 24 '18 at 20:13

0 Answers0