B4J Tutorial [B4X] Custom Views with Enhanced Designer Support

Discussion in 'B4J Tutorials' started by Erel, Jan 18, 2016.

Thread Status:
Not open for further replies.
  1. Hugh Thomas

    Hugh Thomas Member Licensed User

    Thanks, but the QUOTE keyword doesn't seem to be recognized in the #DesignerProperty directive.
  2. Erel

    Erel Administrator Staff Member Licensed User

    For now it is not possible to use commas.
  3. Erel

    Erel Administrator Staff Member Licensed User

    JanPRO and DonManfred like this.
  4. rwblinn

    rwblinn Well-Known Member Licensed User


    created a simple CustomView NumericSpinner. The source code is well commented.

    Has been a good learning on how to change Properties and set the position of the CustomView.


    Attached Files:

    BPak, highflyer, Erel and 1 other person like this.
  5. Erel

    Erel Administrator Staff Member Licensed User

    The source code of ControlsFX library (B4J) was updated. All the methods now expose a BaseView property which returns the Base pane. This is important as it allows developers to move or remove the custom view.

    This property is not required in B4A as in most cases the base panel is removed when the view is created.
  6. ilan

    ilan Expert Licensed User

    this is really great, maybe we need a "CustomView Share" Section. :)
  7. Erel

    Erel Administrator Staff Member Licensed User

    Please keep this thread clean. If you have a problem then post the problem (without any other unrelated stuff) and we will help you solve it.
  8. Hugh Thomas

    Hugh Thomas Member Licensed User


    I'm writing a Custom View, and am having a problem. I want to create a custom view that has a "rotate" option that will rotate the view so that you can have vertical text.

    For example, if you wanted the custom view running down the left hand side of the screen, you would create the view with a layout of left=0,top=0,width=50dip,height=100%y. When you set the "rotate" option in the custom view it would adjust the layout values and rotate the view so that it appears in the same location as the original layout, but is rotated so the text is vertical.

    The problem I'm having is that if I create the Custom View programmatically it works fine, but if I set it up in the Designer and do the rotation in DesignerCreateView(...) it doesn't work correctly. In the designer case, the view rotates but ends up offset from where I expect it to be. It's as if it's rotating on a different pivot point.

    I've checked the layout values before the rotation in both cases and they are the same, but after the rotation the view ends up in a different position,

    I'm not sure if I'm doing something wrong, or if this isn't something you can do when using the designer.

    I'm using the reflector library to do the rotation:
    Dim Reflect As Reflector
    Reflect.Target = vw
    Attached is a simple project that demonstrates the problem.

    Any help appreciated.


    Attached Files:

  9. klaus

    klaus Expert Licensed User

    I had a look at your project, and have following comments:
    1) You should move the layout definition from Activity_Resume to Activity_Create, otherwise you could get several layouts overlayed.
    2) You must remove mBase.Initialize("") from the Initialize routine it is automatically initialized by the Designer.
    3) You cannot use progRotatedView.GetBase in this line Activity.AddView(progRotatedView.GetBase, 140dip, 90dip, 50dip, 270dip) because there is no mBase if you have none in the Designer. In your case you have one and with progRotatedView.GetBase you get a new instance of the same object.
    4) To add a custom view in the code you need to add a specific routine in your class code. I added two routines AddToParent and AddToParent2 showing two different ways to implement this.
    5) I suppose that your code is not finished because you define an innerLabel Label but you dont' use it. If you add one you must also add it in the AddToParent routine.
    6) I would leave the the Rotation routine more general with the rotation angle as parameter and set the angle depending on the requested orientation. I have not changed this.
    7) It seems that a view added in the Designer has the pivot in the top left corner whereas a view added in the code has the pivot in the center of the view. I set the pivit to the center in the Rotate routine.

    Attached a modified version of your project.

    Attached Files:

  10. Hugh Thomas

    Hugh Thomas Member Licensed User

    Hi Klaus,

    Thanks for taking the time to give such detailed feedback. I should have made it clear that this demo project doesn't use the actual CustomView I'm working on, it uses a basic CustomView class with just enough code to demonstrate the problem. Some of the problems you've highlight are only in this demo project and are the result of me being a bit hasty in putting it together.

    I'll implement those of your suggestions that relate to the actual CustomView I'm working on.

    Unfortunately, even with your corrections I've still got the same problem... if I create one custom view with designer, and one programmatically within the Main module, then after rotation they end up at different positions even though they started off in exactly the same place.

  11. klaus

    klaus Expert Licensed User

    Can you post the project?
    Without seeing what exactly you have done it's impossible to give a concrete advice.
    inakigarm likes this.
  12. Hugh Thomas

    Hugh Thomas Member Licensed User

    My apologies Klaus, I didn't realized when I ran your updated version of my project that you'd changed the layout position of the view that's created programmatically so that it was different to the view created in the designer. So when I ran it and saw that the views ended up in different positions I thought it was because the rotation problem hadn't been fixed.

    In fact you're additions to the rotation routine to set the pivot point fixed the problem.

    Thanks for your help.

  13. Cableguy

    Cableguy Expert Licensed User

    hi Erel,

    I'm trying to set a custom property to be float with a default value of 0.01, but the designer only shows integers...
    I was hoping to get decimal incrementation
  14. stevel05

    stevel05 Expert Licensed User

  15. Cableguy

    Cableguy Expert Licensed User

    as I stated, I am casting it as float.
    I can type in decimals, but using the increment/decrement arrows they only act upon the units, when I expected it to change the right most digit
  16. stevel05

    stevel05 Expert Licensed User

    I understand now.
  17. Erel

    Erel Administrator Staff Member Licensed User

    This is how it works. The arrows interval is set to 1.0.
  18. demasi

    demasi Active Member Licensed User

    Can you explain how you did to add a custom view programatically?
    I'm trying to do the same but no success.
  19. Cableguy

    Cableguy Expert Licensed User

    Create an "AddToParent(Parent as pane)" sub in your customview, and add the customview's base pane to the passed pane
  20. LucaMs

    LucaMs Expert Licensed User

    Wonderful (perhaps I have already commented this thread, I have to look at :)).

    I would add these lines to the template:
    Public Sub setTag(Tag As String)
        mBase.Tag = Tag
    End Sub
    Public Sub getTag As String
    Return mBase.Tag
    End Sub
    Last edited: Jun 16, 2016
Thread Status:
Not open for further replies.
  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice