Android Question Problem text placement in BBCodeView

R

RB Smissaert

Well-Known Member
Licensed User
Longtime User
Just started to use BBCodeView as it seems very nice and useful indeed.
Nearly all worked out now, but don't quite understand how the placement of text works.

This is the string passed to the BBCodeView:

B4X: 
    strPrompt =    $"[TextSize=18]This allows you to run quickly through
a list of patients by clicking the
[TextSize=24][Vertical=3][FontAwesome=0xF0D8/][/Vertical][TextSize=18] and [TextSize=24][Vertical=3][FontAwesome=0xF0D7/][/Vertical][TextSize=18] buttons on various pages.

Start will start this option.
Stop will stop it.
"$

The height of the final text in the BBCodeView is determined by this function:

B4X: 
Public Sub MeasureTextHeightBBCodeView(vParent As B4XView, strCodeText As String, iWidth As Int, arrPadding() As Int) As Int
    
    Dim TextEngine As BCTextEngine
    Dim iContentHeight As Int

    vParent.LoadLayout("BBCodeView")
    BBCodeView1.mBase.Width = iWidth
    BBCodeView1.Padding.Left = arrPadding(0)
    BBCodeView1.Padding.Top = arrPadding(1)
    BBCodeView1.Padding.Right = arrPadding(2)
    BBCodeView1.Padding.Bottom = arrPadding(3)
    
    TextEngine.Initialize(vParent)
    BBCodeView1.TextEngine = TextEngine

    BBCodeView1.Text = strCodeText
    
    If BBCodeView1.Paragraph.IsInitialized Then
        iContentHeight = BBCodeView1.Paragraph.Height / TextEngine.mScale + BBCodeView1.Padding.Top + BBCodeView1.Padding.Bottom
    End If
    
    BBCodeView1.mBase.RemoveViewFromParent
    
    Return iContentHeight
    
End Sub

And this is the relevant code that handles it and shows the dialog:

B4X: 
    If tDP.bPrompt Then
        'this will be the same as tDP.iPromptHeight as determined by GetDialogParams
        Log("BBCodeView content height: " & cMP.MeasureTextHeightBBCodeView(Parent, strPrompt, Parent.Width - 10dip, arrPromptPadding))
        
        TextEngine.Initialize(Parent)
        bbcvPrompt.TextEngine = TextEngine
    
        bbcvPrompt.mBase.SetColorAndBorder(iPromptColour, 1dip, iBorderColour, 2dip)
        bbcvPrompt.mBase.Height = tDP.iScrollViewHeight 'this is the visible height of the old plain prompt view
        bbcvPrompt.mBase.Top = tDP.iPromptTop
        bbcvPrompt.mBase.Width = tDP.iScrollViewWidth 'this is same as tDP.iPromptWidth
        'these next 2 lines are needed to get the text placement in bbcvPrompt OK
        bbcvPrompt.sv.Top = 4dip
        bbcvPrompt.sv.Left = 4dip
        'Private arrPromptPadding() As Int = Array As Int(4dip, 4dip, 4dip, 4dip)
        bbcvPrompt.Padding.Left = arrPromptPadding(0)
        bbcvPrompt.Padding.Top = arrPromptPadding(1)
        bbcvPrompt.Padding.Right = arrPromptPadding(2)
        bbcvPrompt.Padding.Bottom = arrPromptPadding(3)
        
        '------------------------------------------------'
        'This is the way to set the BBCodeView background'
        '------------------------------------------------'
        'bbcvPrompt.mBase.Color = iPromptColour >> set already in bbcvPrompt.mBase.SetColorAndBorder
        bbcvPrompt.sv.Color = iPromptColour
        bbcvPrompt.sv.ScrollViewInnerPanel.Color = iPromptColour
        
        If tDP.bcsPrompt Then
            bbcvPrompt.Text = csPrompt 'this won't happen
        Else
            bbcvPrompt.Text = strPrompt
        End If
        
        'get rid of the click sound as there will be nil clickable
        '---------------------------------------------------------
        Dim jo As JavaObject = bbcvPrompt.mBase
        jo.RunMethod("setSoundEffectsEnabled", Array(False))
    End If 'If tDP.bPrompt

To make the text placement OK I need the 2 lines that set the top and left of the BBCodeView scrollview.
Leaving those lines out will make the text too close to the left and to the top as shown in the attached 2 images.

Any suggestion how to improve on this and not need those 2 lines to place the scrollview?

RBS
 

Attachments

  • BBCodeViewTextPlacementOK.png
    BBCodeViewTextPlacementOK.png
    191.5 KB · Views: 61
  • BBCodeViewTextPlacementWrong.png
    BBCodeViewTextPlacementWrong.png
    191.1 KB · Views: 68
Sort by date Sort by votes
William Lancee

William Lancee

Well-Known Member
Licensed User
Longtime User
I found it hard to replicate your problem, but I hope this will help you. This is my regular popup note using BBCodeView.
It is in B4J B4XPages, but works also in B4A standard template.

popupNote.jpg

B4X: 
Sub Class_Globals
    Private Root As B4XView
    Private xui As XUI
   
    Private notePnl As B4XView
    Private BBCodeView1 As BBCodeView            'in designer fill parent, color transparent, no border
    Private TextEngine1 As BCTextEngine
End Sub

Public Sub Initialize
End Sub

Private Sub B4XPage_Created (Root1 As B4XView)
    Root = Root1
    TextEngine1.Initialize(Root)
    notePnl = xui.CreatePanel("note")
    notePnl.Visible = False
    Root.AddView(notePnl, 100, 100, 400, 600)
   
    notePnl.LoadLayout("bbcv")   'a generic view that fills the panel
    BBCodeView1.TextEngine = TextEngine1
    BBCodeView1.sv.ScrollViewInnerPanel.Color = xui.Color_Yellow
    BBCodeView1.sv.SetColorAndBorder(xui.Color_Transparent, 1, xui.Color_RGB(200, 200, 200), 3)
    BBCodeView1.mBase.Visible = False
    #If B4J
    BBCodeView1.sv.As(ScrollPane).SetVScrollVisibility("NEVER")   'only needed for B4J
    #End If
   
    Dim padding As B4XRect
    padding.Initialize(4, 4, 4, 4)
    BBCodeView1.Padding = padding        'part of this BBCodeView1 independent of text contents
   
    Sleep(2000)            'popup note after 2 seconds for testing
    popupNote($"This is the easiest part${CRLF}${CRLF}[Alignment=Center](touch here to close note)[/Alignment]"$)
End Sub

Private Sub popupNote(s As String)
    BBCodeView1.text = "[TextSize=18][Color=Blue]" & s & "[/Color][/TextSize]"
    'adjust note panel To txt height
    notePnl.Height = BBCodeView1.Paragraph.Height / TextEngine1.mScale + BBCodeView1.Padding.Top + 2 * BBCodeView1.Padding.Bottom
    BBCodeView1.mBase.Visible = True
    notePnl.Visible = True
    wait for Note_Closed
   
    'repeat for testing
    Sleep(2000)            'popup note after 2 seconds for testing
    popupNote($"This is the easiest part${CRLF}${CRLF}[Alignment=Center](touch here to close note)[/Alignment]"$)
End Sub

#If B4J
Private Sub note_MouseClicked(Ev As MouseEvent)
    notePnl.Visible = False
    CallSubDelayed(Me, "Note_Closed")
End Sub
#Else if B4A
Private Sub note_Click
    notePnl.Visible = False
    CallSubDelayed(Me, "Note_Closed")
End Sub
#End If
 
Upvote 0
R

RB Smissaert

Well-Known Member
Licensed User
Longtime User
William Lancee said:
I found it hard to replicate your problem, but I hope this will help you. This is my regular popup note using BBCodeView.
It is in B4J B4XPages, but works also in B4A standard template.

View attachment 141629
B4X: 
Sub Class_Globals
    Private Root As B4XView
    Private xui As XUI
  
    Private notePnl As B4XView
    Private BBCodeView1 As BBCodeView            'in designer fill parent, color transparent, no border
    Private TextEngine1 As BCTextEngine
End Sub

Public Sub Initialize
End Sub

Private Sub B4XPage_Created (Root1 As B4XView)
    Root = Root1
    TextEngine1.Initialize(Root)
    notePnl = xui.CreatePanel("note")
    notePnl.Visible = False
    Root.AddView(notePnl, 100, 100, 400, 600)
  
    notePnl.LoadLayout("bbcv")   'a generic view that fills the panel
    BBCodeView1.TextEngine = TextEngine1
    BBCodeView1.sv.ScrollViewInnerPanel.Color = xui.Color_Yellow
    BBCodeView1.sv.SetColorAndBorder(xui.Color_Transparent, 1, xui.Color_RGB(200, 200, 200), 3)
    BBCodeView1.mBase.Visible = False
    #If B4J
    BBCodeView1.sv.As(ScrollPane).SetVScrollVisibility("NEVER")   'only needed for B4J
    #End If
  
    Dim padding As B4XRect
    padding.Initialize(4, 4, 4, 4)
    BBCodeView1.Padding = padding        'part of this BBCodeView1 independent of text contents
  
    Sleep(2000)            'popup note after 2 seconds for testing
    popupNote($"This is the easiest part${CRLF}${CRLF}[Alignment=Center](touch here to close note)[/Alignment]"$)
End Sub

Private Sub popupNote(s As String)
    BBCodeView1.text = "[TextSize=18][Color=Blue]" & s & "[/Color][/TextSize]"
    'adjust note panel To txt height
    notePnl.Height = BBCodeView1.Paragraph.Height / TextEngine1.mScale + BBCodeView1.Padding.Top + 2 * BBCodeView1.Padding.Bottom
    BBCodeView1.mBase.Visible = True
    notePnl.Visible = True
    wait for Note_Closed
  
    'repeat for testing
    Sleep(2000)            'popup note after 2 seconds for testing
    popupNote($"This is the easiest part${CRLF}${CRLF}[Alignment=Center](touch here to close note)[/Alignment]"$)
End Sub

#If B4J
Private Sub note_MouseClicked(Ev As MouseEvent)
    notePnl.Visible = False
    CallSubDelayed(Me, "Note_Closed")
End Sub
#Else if B4A
Private Sub note_Click
    notePnl.Visible = False
    CallSubDelayed(Me, "Note_Closed")
End Sub
#End If
Click to expand...
Thanks, the problem was the way the padding of the BBCodeView was set.

It should be:

B4X: 
        Dim rectPadding As B4XRect
        rectPadding.Initialize(arrPromptPadding(0), arrPromptPadding(1), arrPromptPadding(2), arrPromptPadding(3))
        bbcvPrompt.Padding = rectPadding

And the same in the function that measures the paragraph text height.
All working fine now, without changing the position of the BBCodeView scrollview.

RBS
 
Upvote 0
You must log in or register to reply here.

Similar Threads

Erel
  • Article
Android Tutorial [B4X] BBCodeView Anchors Example
Replies
0
Views
898
Erel
Erel
Erel
  • Article
B4J Code Snippet [B4X] SMM + BBCodeView - a great pair
Replies
0
Views
2K
Erel
Erel
William Lancee
Bug? [B4X]BBCodeView Url Auto-Underline Oddities
Replies
8
Views
1K
Erel
Erel
Toky Olivier
  • Question
Android Question [Solved] Center vertically text in BBCodeView
Replies
6
Views
2K
Erel
Erel
Erel
  • Locked
  • Article
B4A Library [B4X] BCTextEngine / BBCodeView - Text engine + BBCode parser + Rich Text View
7 8 9
Replies
164
Views
76K
Erel
Erel
Top