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

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

You can enable the Drag feature (B4A,B4I and B4J) only on Topbar or only on body

Code Example (B4X):

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

 

[Alexander Stolte]

reserved

 

[Swissmade]

Nice Job

 

[Harris]

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.

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:

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.

 

[Alexander Stolte]

I spent the past few days studying / modifying your class to suit my needs.

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

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).

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]

I have no idea why.. i have tryed to use mbase.BringToFront

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]

I found the issue to be the z-order of components added to the panel / activity.

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.

 

[Harris]

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]

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

 

[Harris]

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.

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(0, 0, 0, 300dip, 300dip)
   p.LoadLayout("Dialog")
   DialogCLV.DefaultTextBackgroundColor = xui.Color_Transparent
   DialogCLV.sv.Color = xui.Color_Transparent
   p.SetColorAndBorder(0xaa111111, 2dip, 0xFFFFFFFF, 5dip)
   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

 

[Harris]

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

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).

 

[ThRuST]

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

 

[Alexander Stolte]

just add the width and height values in the "InitalizeWithoutDesigner"
Like so:

ASMsgBox1.InitializeWithoutDesigner(MainForm.RootPane,0xFF2F343A,True,True,False,300dip,300dip)

Since Version 1.1 is this needed, but the examples are not updatet.

 

[ThRuST]

@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

 

[ThRuST]

Hmm a challenge

ASMsgBox1.InitializeBottom("Button1","Button2","Button3","Button4","Button5")

 

[ThRuST]

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

 

[Alexander Stolte]

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.

 

[ThRuST]

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

 

[ThRuST]

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

 

[Alexander Stolte]

record the small videoclip

Captura