B4J Library B4j ToggleSwitch

Discussion in 'B4J Libraries & Classes' started by stevel05, Nov 6, 2018.

  1. stevel05

    stevel05 Expert Licensed User

    This is a simple start for a Toggleswitch Customview for B4j. It is deliberately not a B4X Customview as I wanted it to be styleable via CSS.

    upload_2018-11-6_22-42-44.png
    The animation duration is set, but you could very easily add a designer property to allow changing it in the Designer. The 3 components can be styled in the css file included in the project.

    Don't forget to add the Stylesheet to an appropriate place.
     

    Attached Files:

    Last edited: Nov 7, 2018
    Erel, xulihang, BPak and 2 others like this.
  2. ThRuST

    ThRuST Well-Known Member Licensed User

    Well done Steve. The CSS support makes it a winner no doubt. Throw in a method so it can be accessed and put on a form.
    It doesn't have to use 20+ properties just a few for the basic functionality then turn it into a library. Then I can spice it up with some CSS themes.
    Here we go again :)
     
  3. ThRuST

    ThRuST Well-Known Member Licensed User

    Something like

    Code:
    ToggleSwitch.Initialize(xpos,ypos,height,width)
    Log(ToggleSwitch.State)
    showing 0 or 1
     
  4. ThRuST

    ThRuST Well-Known Member Licensed User

    Can it perhaps be added to the components in the internal designer? That would be great.
     
  5. stevel05

    stevel05 Expert Licensed User

    It is already a custom view, you can add it with the designer. You can get the selected state with the Selected method.

    Code:
    Log(ToggleSwitch1.Selected)
    If you want to add it in code add this sub to the class:

    Code:
    Public Sub Create(Selected As Boolean, Width As Double, Height As Double)
        
    Dim P As Pane
        P.Initialize(
    "Base")
        P.SetSize(Width,Height)
        
    Dim Lbl As Label
        Lbl.Initialize(
    "")
        Lbl.Font = fx.DefaultFont(
    13)
        Lbl.Alignment = 
    "CENTER"
      
        
    Dim M As Map = CreateMap("Selected":Selected)
        DesignerCreateView(P,Lbl,M)
      
    End Sub
    And Initialize and call the create Sub and add it to a pane in your layout :
    Code:
    ToggleSwitch2.Initialize(Me,"ToggleSwitch2")
        ToggleSwitch2.Create(
    True,100,40)
      
        MainForm.RootPane.AddNode(ToggleSwitch2.GetBase,
    10,200,ToggleSwitch2.GetBase.PrefWidth,ToggleSwitch2.GetBase.PrefHeight)
    You can compile it to a library if you wish.
     
  6. ThRuST

    ThRuST Well-Known Member Licensed User

    I made some changes to your first version. This is what my version looks like

    ToggleSwitch_OFF.JPG ToggleSwitch_On.JPG

    And the source code is attached. Let me know what you think of it.
    You might work on it from there :)
     

    Attached Files:

    Johan Hormaza likes this.
  7. ThRuST

    ThRuST Well-Known Member Licensed User

    I used the Bevel Grey button design. You can find it here
     
  8. ThRuST

    ThRuST Well-Known Member Licensed User

    The iphone design for the background might look good with the Glass grey design for the circle. There's many options since it supports CSS :)
     
  9. ThRuST

    ThRuST Well-Known Member Licensed User

    I made a final change to this. You can improve it from this one, it's the best so far. I hope you agree Steve :)

    off.JPG on.JPG
     

    Attached Files:

    Johan Hormaza likes this.
  10. ThRuST

    ThRuST Well-Known Member Licensed User

    And here's the magic formula

     
  11. stevel05

    stevel05 Expert Licensed User

    Yes, looks good.
     
  12. ThRuST

    ThRuST Well-Known Member Licensed User

    Thanks, well done on the code. Seems like we can do magic together. Athena is a good example on that. I'll use this one since it turned out so well. I bid you a good night oh you master of allmightyness :)
     
  13. ThRuST

    ThRuST Well-Known Member Licensed User

    Steve, one more thing, I just noticed that I had to click two times on it when it starts before it triggers. Can you please correct that. Tomorrow, now we'll sleep :)
     
  14. stevel05

    stevel05 Expert Licensed User

    It doesn't happen for me.
     
  15. ThRuST

    ThRuST Well-Known Member Licensed User

    Now this is interesting. When I run it in Debug mode the text "Off" flashes one time. The text dissapears very quickly just to show again. The next time I click it work like it should. When I run it in release mode it works as it should, but it moves from Off to On automatically when the application is started.
    I am using JDK v9.0.4. Will try with v1.8.0 191 real quick.
     
  16. ThRuST

    ThRuST Well-Known Member Licensed User

    Tested to change to JDK v1.8.0 191 and it behaves the same like with JDK v9.0.4. I hope this helps you find what's causing this. I use B4J v6.51.
     
  17. ThRuST

    ThRuST Well-Known Member Licensed User

    It works as it should in Release mode when this is added

    Code:
    Sub AppStart (Form1 As Form, Args() As String)
        MainForm = Form1
        MainForm.RootPane.LoadLayout(
    "1"'Load the layout file.
        MainForm.Stylesheets.Add(File.GetUri(File.DirAssets,"ToggleSwitch.css"))
        MainForm.Title = 
    "ToggleSwitch by Steve05 CSS by ThRuST"
        MainForm.Show
        
        ToggleSwitch1.Selected = 
    True 'or False
        Log("Button is in state : " & ToggleSwitch1.Selected)
    End Sub
    Mission completed. Over and out. Goodnight :)
     
  18. stevel05

    stevel05 Expert Licensed User

    This is because it is set to Selected in the Designer, the default is False, so it moves to the selected state once it is loaded.
     
    Last edited: Nov 7, 2018
  19. ThRuST

    ThRuST Well-Known Member Licensed User

    Hi Steve, I've updated your code to turn it into an official library that starts with v1.0. Please make the neccessary changes and attach this in the first post so everybody can see it. Take a look and let me know what you think :)

    UPDATE
    I made some modification to Steve's code and updated it to v1.3.
    Here's the changes I've made

    v1.3 changelog
    v1.0 Had a type definition bug that were corrected
    v1.1 Removed a log in the class and in my own sub that looked confusing
    v1.2 Some fixes
    v1.3 Added a new sub called MoveSpeed

     

    Attached Files:

    Last edited: Nov 7, 2018
  20. ThRuST

    ThRuST Well-Known Member Licensed User

    Ops just change the line 24 ToggleSwitch1.Selected = False ' or False into True or False and add your changes if you want, then put it up on the first post.
     
Loading...
  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