Announcement

Collapse
No announcement yet.
X
  • Filter
  • Time
Clear All
new posts

  • component to right and left of tabs

    Hello, we're looking into possibly redesigning our main application tab.

    We already have controls to the right of our tabs, but we'd also like a logo to the left. Since we want the tabs to take up 100% width, i'm not sure how to accomplish this within the tab component.

    Is there any way to do this you can help me with?

  • #2
    Why not just float an ImgButton or similar control at the top left of the TabSet? The gap before the first tab is controlled by tabBar.layoutStartMargin.

    Comment


    • #3
      You mean in a layout to the left of the tabset? I would like the tab canvas to take up the entire width of the browser?

      Or did you mean that i could add an imagebutton as a tab? If that's the case it might work, not sure how i would do it in the java code though (the "float an ImgButton" part...).

      Comment


      • #4
        Originally posted by Isomorphic View Post
        Why not just float an ImgButton or similar control at the top left of the TabSet? The gap before the first tab is controlled by tabBar.layoutStartMargin.
        I'm interested in this approach, actually I've tried it and works, but I see that layoutStartMargin is not documented, could you please add it to SmartClient docs?

        Comment


        • #5
          Cool, how would i go about adding the imgbutton to the left of the tabs with java code? Any tips?

          Comment


          • #6
            Well, it's javascript because I'm using SmartClient, not SmartGWT:
            Code:
            isc.IButton.create({ID:"aButton", title:"foobar", width:95, snapTo:"TL"})
            
            isc.TabSet.create({
                ID: "tabSet",
                tabBarProperties:{layoutStartMargin:100}, // layoutLeftMargin also seems to work
                width: 300,
                height: 200,
                children:[aButton],
                tabs: [
                    {title: "Blue", icon: "pieces/16/pawn_blue.png", iconSize:16,
                     pane: isc.Img.create({autoDraw: false, width: 48, height: 48, src: "pieces/48/pawn_blue.png"})},
                    {title: "Green", icon: "pieces/16/pawn_green.png", iconSize:16,
                     pane: isc.Img.create({autoDraw: false, width: 48, height: 48, src: "pieces/48/pawn_green.png"})}
                ]
            });
            aButton.delayCall('bringToFront')
            I don't know if it's normal that I've got to call bringToFront on the button.
            Strangely enough, I have to call it in a separated thread, otherwise it won't work.

            Also note that layoutLeftMargin seems to work as layoutStartMargin, but layoutRightMargin has no effect.

            Comment


            • #7
              I got it working throug addChild. Thanks a lot mate!

              Comment


              • #8
                layoutLeftMargin would be the right one to use here.

                The brightToFront() call is required because you are creating the Button before the various subelements of the TabSet have been created (TabBar, etc). Another approach would be to create the Button after the TabSet draws.

                Comment


                • #9
                  Originally posted by Isomorphic View Post
                  Why not just float an ImgButton or similar control at the top left of the TabSet? The gap before the first tab is controlled by tabBar.layoutStartMargin.
                  Hello, could you please document that property?

                  Comment


                  • #10
                    We have added docs for these properties which will be available as of tomorrow's builds, May 7.

                    Regards
                    Isomorphic Software

                    Comment

                    Working...
                    X