how to set AlignStart for Box and Entry widgets?

[ITwrx]

In the custom_dialog example, the Entries' input fields align to the right side of the boxes. Both the containing box and the Property's Entry widget appear to use AlignFill. This looks fine in the example, because the window is small, and all the input fields are the same size. This is not so great when the window needs to be wider due to longer fields, but some fields are still short.

My reading of the owlkettle docs says i can set AlignStart for both the box and the property's Entry, but i'm not sure how. I haven't run across an example yet, and i've tried every unholy abomination i can think of, to no avail. :) Any tips appreciated.

[can-lehmann]

The entries in custom_dialog are right aligned because the labels are set to expand: true, while the entries use expand: false. This causes the labels to take up any remaining space in the rows.

Box:
  orient = OrientY
  margin = 12
  spacing = 6
  
  Box {.expand: false.}:
    orient = OrientX
    spacing = 6
    
    Label:
      text = "Some Entry"
      xAlign = 0
    
    Entry() {.expand: false.}
  
  Box {.expand: false.}:
    orient = OrientX
    spacing = 6
    
    Label:
      text = "Entry 2"
      xAlign = 0
    
    Entry() {.expand: false.}

You could set the entries to expand: true instead, while using expand: false for the labels. This will cause the entries to dynamically take up any remaining space in the rows. However, they are no longer vertically aligned:

This is probably not what you want though. To me this problem seems like a classic use case for a Grid:

Grid:
  margin = 12
  spacing = 6
  
  Label {.x: 0, y: 0.}:
    text = "Some Entry"
    xAlign = 0
  
  Entry() {.x: 1, y: 0, hExpand: true.}
  
  Label {.x: 0, y: 1.}:
    text = "Entry 2"
    xAlign = 0
  
  Entry() {.x: 1, y: 1, hExpand: true.}

The result now looks like this:

Here it is applied to a case similar to your example, where one entry is wider than the other:

Grid:
  margin = 12
  spacing = 6
  
  Label {.x: 0, y: 0, hExpand: true.}:
    text = "Some Entry"
    xAlign = 0
  
  Entry(width=50) {.x: 1, y: 0.}
  
  Label {.x: 0, y: 1, hExpand: true.}:
    text = "Entry 2"
    xAlign = 0
  
  Entry() {.x: 1, y: 1.}

If you use this in a larger application, note that you might want to abstract this usage of Grid as a "From widget" into a custom viewable.

[ITwrx]

no problem. i caught that. thanks though.

[ITwrx]

I use the new adder syntax here, instead of defining the adder as a proc

Saboteur!!! j/k
Is that supported in 2.2.0, because i'm just getting undeclared identifier: adder if i blindly copy/paste your adder to try this out. :) I haven't figured out how to add a property to a proc adder... :(

[can-lehmann]

I am pretty sure that it is supported in 2.2.0. Here is the entire code I used to test the adder (based on the code you provided). Note again that as I don't currently see where you want to actually use the hAlign: AlignStart, this version does not fix the original issue:

import std/strutils

import owlkettle

#import ../../models/loan_model

viewable AddLoanDialog:
  discard #loan: Loan

viewable Property:
  name: string
  child: (Align, Widget)
  
  adder add {.hAlign: AlignFill.}:
    widget.hasChild = true
    widget.valChild = (hAlign, child)

method view(property: PropertyState): Widget =
  result = gui:
    Box:
      orient = OrientX
      spacing = 6
      
      Label:
        text = property.name
        xAlign = 0
      
      insert(property.child[1]) {.expand: false, hAlign: property.child[0].}

method view(dialog: AddLoanDialogState): Widget =
  result = gui:
    Dialog:
      title = "New Loan"
      defaultSize = (400, 0)
      
      DialogButton {.addButton.}:
        text = "Create"
        style = [ButtonSuggested]
        res = DialogAccept
      
      DialogButton {.addButton.}:
        text = "Cancel"
        res = DialogCancel
      
      Box:
        orient = OrientY
        spacing = 6
        margin = 12
        
        Property:
          name = "Purchase Item Name:"
          Entry:
            text = ""
            width = 50
            #text = dialog.loan.purchaseItemName
            #proc changed(purchaseItemName: string) =
            #  dialog.loan.purchaseItemName = purchaseItemName

        Property:
          name = "Purchase Item SKU:"
          Entry {.hAlign: AlignStart.}:
            text = ""
            #text = dialog.loan.purchaseItemSku
            #proc changed(purchaseItemSku: string) =
            #  dialog.loan.purchaseItemSku = purchaseItemSku

        Property:
          name = "Principle:"
          Entry:
            text = ""
            #text = $dialog.loan.principle
            #proc changed(principle: string) =
            #  dialog.loan.principle = parseFloat(principle)

        Property:
          name = "Interest Rate:"
          Entry:
            text = ""
            #text = $dialog.loan.interestRate
            #proc changed(interestRate: string) =
            #  dialog.loan.interestRate = parseFloat(interestRate)      

brew(gui(AddLoanDialog()))

[ITwrx]

thanks a lot. i'll check it all out later/tomorrow and report back.

[ITwrx]

Re-reading your answers, i just changed the Label: to {.expand: false.} which gives me this:

which is good enough for my purposes right now. I'm really just trying to build a somewhat realistic CRUD POC to learn and work from going forward.

Note again that as I don't currently see where you want to actually use the hAlign: AlignStart, this version does not fix the original issue:

I wanted to add it to every Property's Entry and to the containing box, but since gtk won't let me add a property to the first widget in a gui tree, i was going to add a second box. I thought i had tried expand: false on the label before, so AlignStart was my next attempt at just getting the entries over by the labels. I'm not too worried about vertical alignment right now.

Thanks for showing me how to add properties to adders. I didn't get it working immediately, and gave up on that for now, but I'm sure i'll need that soon enough and will try again then, but with this info, and a maybe re-read of the owlkettle book section on adders.