BlockUI

Share your advanced knowledge/code with the community.
User avatar
Peter
Posts: 1086
Joined: Mon Feb 24, 2014 10:17 pm
Location: 127.0.0.1:9080
Contact:

BlockUI

Post by Peter »

Hello,

if you want to block your UI (because you have a long running background process like HttpRequest or something else) you can use the $.blockUI() - Command (in JavaScript mode).

Here is a sample code how to use it:

Code: Select all

Enumeration
  #Window
  #Button
  #Timer
EndEnumeration

Procedure BlockUI(Message.s)
  ! $.blockUI({ message: v_message });
EndProcedure

Procedure UnblockUI()
  ! $.unblockUI();
EndProcedure

Procedure TimerEvent()
  
  UnblockUI()
  
  RemoveWindowTimer(#Window, #Timer)  
  
EndProcedure

Procedure ButtonEvent()
  
  BlockUI("<h1>Waiting 3 seconds...</h1>")
  
  AddWindowTimer(#Window, #Timer, 3000) ; Wait 3 Seconds...
  
  BindEvent(#PB_Event_Timer, @TimerEvent(), #Window)
  
EndProcedure

OpenWindow(#Window, 0, 0, 300, 100, "BlockUI example", #PB_Window_SystemMenu | #PB_Window_SizeGadget | #PB_Window_ScreenCentered)

ButtonGadget(#Button, 10, 10, 200, 30, "Block UI for 3 seconds")

BindGadgetEvent(#Button, @ButtonEvent())
You can get further informations here: http://malsup.com/jquery/block/

Greetings ... Peter
User avatar
SparrowhawkMMU
Posts: 281
Joined: Wed Aug 19, 2015 3:02 pm
Location: United Kingdom

Re: BlockUI

Post by SparrowhawkMMU »

+1 very useful and cleaner than what I am currently using.
bbanelli
Posts: 107
Joined: Mon Jul 13, 2015 7:40 am

Re: BlockUI

Post by bbanelli »

Fantastic trick n' tip, Peter, as always!!!
"If you lie to the compiler, it will get its revenge."
Henry Spencer
http://www.pci-z.com/
munfraid
Posts: 102
Joined: Sat Mar 24, 2018 1:33 pm

Re: BlockUI

Post by munfraid »

Thanks very much for this great Tip, Peter! It's so easy and works like charme. I put a spinner using this code:

Code: Select all

BlockUI("<p><i class='fa fa-spinner fa-spin fa-4x' aria-hidden='true'></i></p>") 
The spinner is shown, but any idea how I can remove the white box in the background? Would like to show just the spinner itself.
User avatar
Peter
Posts: 1086
Joined: Mon Feb 24, 2014 10:17 pm
Location: 127.0.0.1:9080
Contact:

Re: BlockUI

Post by Peter »

Hallo,

besides the possibility to block the entire screen, you can also block individual windows or gadgets.

The following code shows how to do this:

Code: Select all

Procedure BlockUI(Message.s)
  ! $.blockUI({ message: v_message });
EndProcedure

Procedure UnblockUI()
  ! $.unblockUI();
EndProcedure

Procedure BlockWindow(Window, Message.s)
  
  If IsWindow(Window)
    Protected WID = WindowID(Window)
    ! $(v_wid.content.parentElement.parentElement).block({ message: v_message });
  EndIf
  
EndProcedure

Procedure UnblockWindow(Window)
  
  If IsWindow(Window)
    Protected WID = WindowID(Window)
    ! $(v_wid.content.parentElement.parentElement).unblock();
  EndIf
  
EndProcedure

Procedure BlockGadget(Gadget, Message.s)
  
  If IsGadget(Gadget)
    Protected GID = GadgetID(Gadget)
    ! $(v_gid.div).block({ message: v_message });
  EndIf
  
EndProcedure

Procedure UnblockGadget(Gadget)
  
  If IsGadget(Gadget)
    Protected GID = GadgetID(Gadget)
    ! $(v_gid.div).unblock();
  EndIf
  
EndProcedure

; Demo

CompilerIf #PB_Compiler_IsMainFile
  
  Enumeration
    #Window
    #btnBlockScreen
    #btnBlockWindow
    #btnBlockGadget
    #Gadget
  EndEnumeration
  
  Enumeration 
    #timBlock
  EndEnumeration
  
  Global BlockType.s
  
  Procedure timBlockEvent()
    
    Select BlockType
        
      Case "Screen"
        UnblockUI()
        
      Case "Window"
        UnblockWindow(#Window)
        
      Case "Gadget"
        UnblockGadget(#Gadget)
        
    EndSelect
    
    RemoveWindowTimer(#Window, #timBlock)
    
    DisableGadget(#btnBlockScreen, #False)
    DisableGadget(#btnBlockWindow, #False)
    DisableGadget(#btnBlockGadget, #False)
    
  EndProcedure
  
  Procedure BlockIt()
    
    Select BlockType
        
      Case "Screen"
        BlockUI("<h1>Waiting 2 seconds....</h1>")
        
      Case "Window"
        BlockWindow(#Window, "<h2>Waiting 2 seconds....</h2>")
        
      Case "Gadget"
        BlockGadget(#Gadget, "<h3>Waiting 2 seconds....</h3>")
        
    EndSelect
    
    AddWindowTimer(#Window, #timBlock, 2000)
    BindEvent(#PB_Event_Timer, @timBlockEvent(), #Window, #timBlock)
    
    DisableGadget(#btnBlockScreen, #True)
    DisableGadget(#btnBlockWindow, #True)
    DisableGadget(#btnBlockGadget, #True)
    
  EndProcedure
  
  ; --
  
  Procedure btnBlockScreenEvent()
    BlockType = "Screen"
    BlockIt()
  EndProcedure
  
  Procedure btnBlockWindowEvent()
    BlockType = "Window"
    BlockIt()
  EndProcedure
  
  Procedure btnBlockGadgetEvent()
    BlockType = "Gadget"
    BlockIt()
  EndProcedure
  
  ; --
  
  OpenWindow(#Window, #PB_Ignore, #PB_Ignore, 420, 400, "BlockUI-Demo", #PB_Window_ScreenCentered)
  
  ButtonGadget(#btnBlockScreen, 10,  10, 400, 50, "Block screen")
  ButtonGadget(#btnBlockWindow, 10,  70, 400, 50, "Block window")
  ButtonGadget(#btnBlockGadget, 10, 130, 400, 50, "Block gadget")
  
  ListIconGadget(#Gadget, 10, 190, 400, 200, "Col1", 100, #PB_ListIcon_GridLines)
  AddGadgetColumn(#Gadget, 1, "Col2", 100)
  
  AddGadgetItem(#Gadget, -1, "Foo" + #LF$ + "Bar")
  
  BindGadgetEvent(#btnBlockScreen, @btnBlockScreenEvent())
  BindGadgetEvent(#btnBlockWindow, @btnBlockWindowEvent())
  BindGadgetEvent(#btnBlockGadget, @btnBlockGadgetEvent())
  
CompilerEndIf
Greetings ... Peter
Dirk Geppert
Posts: 281
Joined: Fri Sep 22, 2017 7:02 am

Re: BlockUI

Post by Dirk Geppert »

Hi guys,

does anyone know how to design the BlockUI message?
I would prefer to just display the spinner, with no border and transparent background.
It seems defined inside jquery.blockUI.min.js under e.blockUI.defaults = {} ... but I have no clue :oops:

Code: Select all

BlockGadget(#Gadget, "<p><i class='fa fa-spinner fa-spin fa-4x' aria-hidden='true'></i></p>")
User avatar
Peter
Posts: 1086
Joined: Mon Feb 24, 2014 10:17 pm
Location: 127.0.0.1:9080
Contact:

Re: BlockUI

Post by Peter »

You can overwrite the default options like this:

Code: Select all

! $.blockUI.defaults.css.backgroundColor = 'transparent'; 
! $.blockUI.defaults.css.border = 'none';
! $.blockUI.defaults.css.color = 'lightgreen';
For the full list of options see: https://malsup.com/jquery/block/#options
Dirk Geppert
Posts: 281
Joined: Fri Sep 22, 2017 7:02 am

Re: BlockUI

Post by Dirk Geppert »

Thank you, Peter!
Post Reply