1. *** New version of B4J is available ***
    B4J v7.8
    Dismiss Notice

B4A Class [B4X] [XUI] AS MsgBox/Dialog

Discussion in 'Additional libraries, classes and official updates' started by Alexander Stolte, Nov 9, 2018.

  1. Alexander Stolte

    Alexander Stolte Well-Known Member Licensed User

    First, i spend a lot of time in creating views, some views i need by my self, but some views not and to create a high quality view cost a lot of time. If you want to support me, then you can do it here by Paypal. :)

    Hello, I needed a cross platform msgbox and dialog, that I can modify to 100% and here is it!

    If you miss a Feature, then let me know! The Class is easy to use with less code.
    You can create this view with the designer or with code.

    Features:
    -Fully Customizable
    -Top and Bottom bar can be hidden
    -A Close Button can be visible
    -Show an Icon (Left , Middle or Right to text)
    -Set Title
    -You can Create your own dialog if you hide the top and bottom bar
    -LoadLayout from Layoutfile or with code
    -Customize the Bottom Buttons
    -Dragable
    -asynchronous with wait for
    -show the dialog with text (no layout required)

    B4a,B4I and B4J
    AS MsgBox B4A.jpg AS MsgBox B4I.jpg AS MsgBox B4J.png

    You can enable the Drag feature (B4A,B4I and B4J) only on Topbar or only on body
    AS MsgBox Moving.gif
    Code Example (B4X):
    Code:
    Private ASMsgBox1 As ASMsgBox
     
        ASMsgBox1.Initialize(Me,
    "ASMsgBox1")
        ASMsgBox1.InitializeWithoutDesigner(
    Activity,0xFF2F343A,True,True,False)
        ASMsgBox1.InitializeBottom(
    "Button1","Button2","Button3")
     
        ASMsgBox1.EnableDrag = ASMsgBox1.DragableTop
        ASMsgBox1.icon_set_icon(xui.LoadBitmap(
    File.DirAssets,"b4x.png"))
        ASMsgBox1.CenterDialog(
    Activity)
        ASMsgBox1.CloseButtonVisible = 
    True
        ASMsgBox1.ShowWithText(
    "Hello B4X!",True)
     
        
    Wait For ASMsgBox1_result(res As Int)
     

        
    If res = ASMsgBox1.POSITIVE  Then
     
            
    Log("Postive")
            
    Msgbox("test","title")
        
    End If
     
        
    Wait For (ASMsgBox1.Close(True)) Complete (Closed As Boolean)
    AS MSGBox
    Author: Alexander Stolte
    Version: 1.1

    • ASMsgBox
      • Events:
        • IconClick
        • IconLongClick
        • result (res As Int)
      • Functions:
        • CenterDialog (Parent As B4XView) As String
        • Class_Globals As String
        • Close (animated As Boolean) As ResumableSub
        • DesignerCreateView (Base As Object, lbl As Label, Props As Map) As String
          Base type must be Object
        • getBase As B4XView
          gets the base
        • getBottomColor As Int
        • getBottomTop As Int
          gets the Bottom of the header
        • getButton1 As B4XView
          Gets the Action Button1 to modify the visual part
        • getButton2 As B4XView
          Gets the Action Button2 to modify the visual part
        • getButton3 As B4XView
          Gets the Action Button3 to modify the visual part
        • getCANCEL As Int
          button1 left
        • getCloseButtonVisible As Boolean
          gets or sets close button visible state
        • getContentHeight As Int
          gets the height of the content area
        • getDragableContent As Int
        • getDragableDisable As Int
        • getDragableTop As Int
        • getEnableDrag As Int
        • getHeader_Font_Size As Int
          gets or set the Header Font Size
        • getHeader_Text As String
          gets or sets the header text
        • getHeaderBottom As Int
          gets the Bottom of the header
        • getHeaderColor As Int
        • getIcon_direction As String
          gets or sets the icon direction
          Possible: LEFT, RIGHT and MIDDLE
        • getNEGATIVE As Int
          button2 middle
        • getPOSITIVE As Int
          button3 right
        • icon_border_width (border As Int) As String
          possible: 0-5
        • icon_set_icon (icon As B4XBitmap) As String
        • icon_visible (visible As Boolean) As String
        • Initialize (Callback As Object, EventName As String) As String
        • InitializeBottom (button1 As String, button2 As String, button3 As String) As String
          button1 = negative button2 = close button3 = positive
        • InitializeWithoutDesigner (parent As B4XView, backgroundcolor As Int, show_header As Boolean, show_bottom As Boolean, show_close_button As Boolean) As String
          is only needed, if you not use the designer to show this dialog
          dont forget to set the header and bottom properties if you show the header or bottom
        • IsInitialized As Boolean
          Tests whether the object has been initialized.
        • LoadLayout (layout As String) As String
          set the layout for designer
        • LoadLayout2 (p As B4XView) As String
          set a panel as layout
        • setBottomColor (color As Int) As String
        • setCloseButtonVisible (visible As Boolean) As String
          gets or sets close button visible state
        • setEnableDrag (enable As Int) As String
        • setHeader_Font_Size (fontsize As Int) As String
          gets or set the Header Font Size
        • setHeader_Text (text As String) As String
          gets or sets the header text
        • setHeaderColor (color As Int) As String
        • setIcon_direction (direction As String) As String
          gets or sets the icon direction
          Possible: LEFT, RIGHT and MIDDLE
        • Show (animated As Boolean) As String
        • ShowWithText (text As String, animated As Boolean) As String
          show the dialog with centered text instead of a panel or layout.
      • Properties:
        • Base As B4XView [read only]
          gets the base
        • BottomColor As Int
        • BottomTop As Int [read only]
          gets the Bottom of the header
        • Button1 As B4XView [read only]
          Gets the Action Button1 to modify the visual part
        • Button2 As B4XView [read only]
          Gets the Action Button2 to modify the visual part
        • Button3 As B4XView [read only]
          Gets the Action Button3 to modify the visual part
        • CANCEL As Int [read only]
          button1 left
        • CloseButtonVisible As Boolean
          gets or sets close button visible state
        • ContentHeight As Int [read only]
          gets the height of the content area
        • DragableContent As Int [read only]
        • DragableDisable As Int [read only]
        • DragableTop As Int [read only]
        • EnableDrag As Int
        • Header_Font_Size As Int
          gets or set the Header Font Size
        • Header_Text As String
          gets or sets the header text
        • HeaderBottom As Int [read only]
          gets the Bottom of the header
        • HeaderColor As Int
        • Icon_direction As String
          gets or sets the icon direction
          Possible: LEFT, RIGHT and MIDDLE
        • NEGATIVE As Int [read only]
          button2 middle
        • POSITIVE As Int [read only]
          button3 right
    In the attachment are 3 examples. (B4A,B4I and B4J)

    Notes:
    -B4A: Reflection library and xui
    -B4I: iXUI
    -B4J: jXUI and JavaObject

    Have Fun.

    Change log:
    - V1.0
    • Release
    - V1.1
    • Bug Fixes
    • you can now set the height and width, if you "InitializeWithoutDesigner"

    Have Fun!
    If you like my work, then spend me a coffe or two :)
    [​IMG]
     

    Attached Files:

    Last edited: Apr 29, 2019
  2. Alexander Stolte

    Alexander Stolte Well-Known Member Licensed User

    reserved
     
    Almora and Star-Dust like this.
  3. swissmade

    swissmade Active Member Licensed User

    Nice Job
     
    Alexander Stolte likes this.
  4. Harris

    Harris Well-Known Member Licensed User

    Yes, great job!

    So this is how it is done - when coded properly...

    We all know that standard Message Dialogs are a frustration, from a users perspective (small - hard to read, harder to select the desired option).
    I tried to accomplish the same before - but this is a great learning tool / example.
    I spent the past few days studying / modifying your class to suit my needs.

    With B4A - works great - yet to try with B4i / J, but shall soon.

    ASdiag.jpg


    Some of my mods are:

    Top, content and bottom are FONTAWESOME font (show font and plain text).

    Shows either 1, 2, 3 bottom buttons - formatted to dialog width as required. Each button tag conforms to standard return values ( Dialog.Positive (-1), Dialog.Negative (-2), Dialog.Cancel (-3) - Top return button = 0 )
    Buttons are larger - easier to select / press...
    Button text size is adjusted to accommodate text length. Less than 4 - textsize is 40, else 20 - which wraps because it is a label... (ie. longer button text labels when needed).

    The dialog is modal - added a background panel (mBasePnl) and action to eat unwanted touches outside the dialog (dims the background of parent form - simulating modal).

    Adjusts dialog size accordingly when shown as either Portrait or Landscape.

    Simple to call and return result:

    Code:
    Sub msg2_Click
       
        
    Dim res As ResumableSub  =  msg.showmsg("Options: Cancel / Positive or Bail >>> ","Review the Help Document Before Continuing?"&CRLF&CRLF&"Highly Recommended!",Chr(0xF00D) ,""Chr(0xF00C), Activity)
        
    Wait For(res) Complete (Result As Int)
     
         
    Log(" got this result value: "&Result)
       
    End Sub
    I can post when all tested and completed - if any are interested...

    Thanks for teaching us the B4X method.
     
    Last edited: Nov 16, 2018
    inakigarm and Alexander Stolte like this.
  5. Alexander Stolte

    Alexander Stolte Well-Known Member Licensed User

    This is the reason why i share a class instead of a library, because every user can modify it.

    This is a thing that i want to add soon.


    I'm integrating the class in a project of mine, there I have found a few mistakes.
    For example i use the BlurredDialog to show options, if i click on a option then i want to show my dialog, the bug is, that the dialog is not on front, if i show it. I have no idea why.. i have tryed to use mbase.BringToFront, but the dialog is still in the background.


    Once you understand how to program Cross Platform, you have so many options. If i need something, then i make a B4X class, i want to give the user the same feeling on Android and IOS. :)
     
    Harris likes this.
  6. Harris

    Harris Well-Known Member Licensed User

    I had this issue in the past when using the designer. I found the issue to be the z-order of components added to the panel / activity.
     
    Alexander Stolte likes this.
  7. Alexander Stolte

    Alexander Stolte Well-Known Member Licensed User

    and how did you solve it?
    I found it strange, because i add the dialog after i add the BlurredDialog, the z order should be right.
     
  8. Harris

    Harris Well-Known Member Licensed User

    upload_2018-11-16_1-9-4.png

    In the views tree of the designer, I re-arranged the the order of components.
    clv1 is the last to be loaded here. If it needed to be loaded first - drag it above ACToolBar and drop it - for example...

    Hard to understand your issue without seeing it in action / code...
     
    Alexander Stolte likes this.
  9. Alexander Stolte

    Alexander Stolte Well-Known Member Licensed User

    Thanks, i make a example project and open a new thread for it.
     
  10. Harris

    Harris Well-Known Member Licensed User

    Ok, I see what you mean when using the BlurredDialog class example...
    It is the BlurredDialog BasePanel that is hiding (won't allowed to be shown - for some reason) the ASMsgBox.

    In BlurredDialog Class - Make BasePanel Public. Now it can be accessed from any other module.

    Here is my example which works - allows ASMsgBox to be shown.

    Code:
    Sub msg3_Click

        ShowBlurredDialog_Example   
    ' show the list for user choice...
        
        
    '    Dim res As ResumableSub  =  msg.showmsg("Show 1 button - OK ","Review the Help Document Before Continuing?"&CRLF&CRLF&"Highly Recommended!","" , "","Ok", Activity)
    '     Wait For(res) Complete (Result As Int)
    '     Log(" got this message: "&Result)
        
    End Sub

    Sub ShowBlurredDialog_Example
      
    Dim p As B4XView  = xui.CreatePanel("")
       p.SetLayoutAnimated(
    000300dip300dip)
       p.LoadLayout(
    "Dialog")
       DialogCLV.DefaultTextBackgroundColor = xui.Color_Transparent
       DialogCLV.sv.Color = xui.Color_Transparent
       p.SetColorAndBorder(
    0xaa1111112dip0xFFFFFFFF5dip)
       
    For i = 1 To 30
           DialogCLV.AddTextItem(
    "Item #" & i, i)
       
    Next
       BlurredDialog1.Show(  pi.Parent, p)
       
    Wait For DialogCLV_ItemClick (Index As Int, Value As Object)  ' this will be used again in msg2_click()
       Log("Selected value: " & Value)
       msg2_Click   
    End Sub


    Sub msg2_Click
        
    Log(" msg2 click ")
     
        BlurredDialog1.BasePanel.Visible = 
    False   ' set basepanel visible to false...  Now our message box will show.
     
        
    Dim res As ResumableSub  =  msg.showmsg("Options: Cancel / Positive or Bail >>> ","Review the Help Document Before Continuing?"&CRLF&CRLF&"Highly Recommended!",Chr(0xF00D) ,""Chr(0xF00C), Activity)
     
        
    Wait For(res) Complete (Result As Int)
        
    If Result = -3 Then  ' cancel this item selection.... and select another from list
          BlurredDialog1.BasePanel.Visible = True  ' show basepanel again - which contains list.
          Wait For DialogCLV_ItemClick (Index As Int, Value As Object)  '  wait for another item selection...
          Log(" wait here until next item selected: "&Index&" value: "&Value)
          msg2_Click   
    ' call THIS sub again!  and wait....
        End If
        
        
    If Result = -1 Then  ' accept item selection...
          BlurredDialog1.BasePanel.Visible = True ' show again - or not - really doesn't matter at this point...
          Wait For (BlurredDialog1.Close) Complete (Closed As Boolean) ' close the blurreddiag since a valid selection was made...
              
        
    End If 
        
    Log(" got this result value: "&Result)
        
    End Sub
     
    Alexander Stolte likes this.
  11. Harris

    Harris Well-Known Member Licensed User

    Yes, libs are too restrictive.

    First: you are at the mercy and time priority of the creator for error corrections and version updates...
    Second: you don't learn much...
    Third: difficult - if not impossible to mod anything you may need.
    Forth: may contain conflicts (other included classes / libs)

    For these reasons, I don't consider libs (any longer) as a valid choice for progressive dev.
    Thankfully, most of the fantastic and helpful community (and B4X creator) share the same philosophy - when ever possible.

    Also, you can always roll your own lib for your purposes that includes whatever, if you desire!
    However, even this approach may find your next project requiring a mod / update - which forces you to re-roll...

    I also learned something very important during this exercise - Pass all params to your methods / functions as a single Map. Now you can include any new params without a major restructure. Live and learn... the oh so obvious (when shown).
     
    Alexander Stolte likes this.
  12. ThRuST

    ThRuST Well-Known Member Licensed User

    B4J example was tested with B4J v6.51 and JDK v9.0.4 this is the result. Anyone else who experienced this?

    Capture.JPG
     
  13. Alexander Stolte

    Alexander Stolte Well-Known Member Licensed User

    just add the width and height values in the "InitalizeWithoutDesigner"
    Like so:
    Code:
    ASMsgBox1.InitializeWithoutDesigner(MainForm.RootPane,0xFF2F343A,True,True,False,300dip,300dip)
    Since Version 1.1 is this needed, but the examples are not updatet.
     
  14. ThRuST

    ThRuST Well-Known Member Licensed User

    @Alexander Stolte I like it alot :) However I need an option to use 3, 4 and up to 5 buttons in the dialog. Where to change that? Nice work man
     
  15. ThRuST

    ThRuST Well-Known Member Licensed User

    Hmm a challenge :)

    Code:
    ASMsgBox1.InitializeBottom("Button1","Button2","Button3","Button4","Button5")
    upload_2018-11-20_12-24-22.png
     
  16. ThRuST

    ThRuST Well-Known Member Licensed User

    Do you mind updating this cool lib to v1.2? An option to set functionality between 1,2,3,4,5 buttons. Also add in predefined comments and blocks for each option sub. Cheers
     
  17. Alexander Stolte

    Alexander Stolte Well-Known Member Licensed User

    This class has a maximum button count of 3. If you want more, then hide the bottom bar and make it your own, you can modify this class to 100%.
    You can hide the top bar and bottom bar, the layout resizes automatically to fit it. Just load a layoufile or a panel to the content area.
     
  18. ThRuST

    ThRuST Well-Known Member Licensed User

    Thanks, but since you're the masterchef I wouldn't want to ruin your lovely recipie :D Your lib would end up as burned burgers!!!
     
  19. ThRuST

    ThRuST Well-Known Member Licensed User

    btw how did you record the small videoclip? it's nice. Everyone could use that as well :)
     
  20. Alexander Stolte

    Alexander Stolte Well-Known Member Licensed User

    Captura
     
    ThRuST likes this.
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