How to vary the width of TextBox views using Rikulo Anchor Layout

Question

I am new to Dart and Rikulo.

class NameView extends Section
{
  View parentVu;

  // the inputs
  DropDownList titleDdl, suffixDdl; 
  TextBox firstNameTBox, middleNameTBox, lastNameTBox;

  // the labels
  TextView titleLbl, firstNameLbl, middleNameLbl, lastNameLbl, suffixLbl;

  List<String> titles = [ 'Dr', 'Hon', 'Miss', 'Mr', 'Mrs', 'Prof', 'Sir' ];
  List<String> suffixes = ['I', 'II', 'III', 'IV', 'Junior', 'Senior'];

  NameView()
  {
     parentVu = new View()
     ..style.background = 'cyan'
     ..addToDocument();

     titleLbl = new TextView( 'Title' );
     parentVu.addChild( titleLbl );

     titleDdl = new DropDownList( model : new DefaultListModel( titles ) )
       ..profile.anchorView = titleLbl
       ..profile.location = 'east center';
     parentVu.addChild( titleDdl );

     firstNameLbl = new TextView( 'First' )
       ..profile.anchorView = titleDdl
       ..profile.location = 'east center';
     parentVu.addChild(firstNameLbl );

     firstNameTBox = new TextBox( null, 'text' )
      ..profile.anchorView = firstNameLbl
      ..profile.location = 'east center';
      //..profile.width = 'flex';
     parentVu.addChild( firstNameTBox );
}

The program renders. However, it does not uses the entire width of the browser (FireFox). I have tried for the TextBoxes profile.width = 'flex'

but it does not work.

Any help is appreciated.

Tom Yeh · Answer 1 · 2013-04-28T06:09:29.010

0

Firefox? Did you test it with Dartium? Notice that you have to compile it to JS before you can test it with browsers other than Dartium.

BTW, from your implementation, NameView seems not related to parentVu at all. If it is just a controller, it needs not to extend from Section (i.e., it doesn't have to be a view).

edited Apr 28 '13 at 06:09

answered Apr 28 '13 at 05:55

Tom Yeh

1,987
2
15
23

Hello tomyeh, thanks for the reply. The app is executed in Dartium, NOT Firefox. How do I relate ParentVu to NameView. I attempted using this.addChild( view ) but it does not work. NameView is a view. I extended Section to get the benefits of an idspace. Please refactor my example to reflect the changes you think are required. Thanks – st.clair.clarke Apr 28 '13 at 11:52
It depends. If NameView is the parent, you just need to call this.addChild(parentVu) (and you shall NOT call parentVU.addToDocument, since it is no longer the root view). Then, NameView is just a normal view. Please refer to [here](http://docs.rikulo.org/ui/latest/View_Development/Build_with_Composite_of_Views.html) – Tom Yeh Apr 29 '13 at 01:21
Hello Tom, I managed make the association you referred to in your answer. If I use linear layout, everything works perfect and the TextBox size varies with the size of the browser. I would like this to do the same with my experiments with the Anchor layout as it seems more widely applicable. In the above code of my question the TextBox assumes its default size with anchor layout being used. If I uncomment the line that sets width layout to flex, the size of the TextBox is reduced significantly, and I cannot get it to vary with the browser's size. Any help is appreciated. Thanks – st.clair.clarke Apr 29 '13 at 02:52

score 0 · Answer 2 · answered Apr 29 '13 at 11:36

0

If a view is anchored to another, both location and size will depend on the view it anchors. In your case, if specifying flex to TextBox, its width will be the same as FirstNameLb1. It is why it is so small.

You can listen to the layout event such as:

 firstNameTBox.on.layout.listen((_) {
    firstNameTBox.width = parentVu.width;
 });

Note: You need to do some calculation to get the right width.

See also Layout Overview

answered Apr 29 '13 at 11:36

Tom Yeh

1,987
2
15
23

Thanks for your help. Are there plans to remove the custom calculations you suggested for the UI to render as required? I have used some Drag-n-Drop UI generators eg WindowBuilder pro by Google that I don't have to do any calculations at all. I know Dart/Rikulo are new ideas, but it is the ease of use that will make them stand the test of time. Maybe Rikulo's anchor algorithm should be revisited. For instance, for what you said above, if B is anchored to A, B mirrors the size of A if 'flex' is used. I think these properties should be disaggregated. Only anchor point should be relevant-not size – st.clair.clarke Apr 29 '13 at 19:23
Currently Rikulo UI provides Linear Layout and Free Layout (aka., anchor layout). It definitely doesn't cover everything. You can develop your own layout. Please refer to [here](http://docs.rikulo.org/ui/latest/Layouts/Fundamentals/Layout_Lifecycle_and_Customization.html) and the source code. – Tom Yeh Apr 30 '13 at 01:09
In your response example in answer #2, how would I approach the parentVu.width should vary with the size of the browser's width ie 'flex' like it its behaviour – st.clair.clarke May 01 '13 at 11:34

How to vary the width of TextBox views using Rikulo Anchor Layout

2 Answers2