B4J Question [SOLVED] BCTextEngine Example (BCTextExample)

mmieher

Active Member
Licensed User
Longtime User
What is the purpose of the B4XView pnl?

B4X:
'B4i - don't miss the inline OBJC code in the main module.
Private Sub B4XPage_Created (Root1 As B4XView)
    Root = Root1
    Root.LoadLayout("1")
    TextEngine.Initialize(Root)
    BBCodeView1.TextEngine = TextEngine
    Dim btn As Button
    #if B4i
    btn.Initialize("btn", btn.STYLE_SYSTEM)
    #Else If B4J or B4A
    btn.Initialize("btn")
    #End If
    Dim xbtn As B4XView = btn
    If xui.IsB4i Then xbtn.SetColorAndBorder(xui.Color_Transparent, 1dip, xui.Color_Black, 2dip)
    xbtn.Text = "Click!"
    xbtn.SetLayoutAnimated(0, 0, 0, 100dip, 40dip)
    
    '    ----------------------------------------------------------------------------
    '    What is the purpose of this B4XView?  How is it referenced?
    Dim pnl As B4XView = xui.CreatePanel("")
    pnl.SetLayoutAnimated(0, 0, 0, 200dip, 120dip)
    '    ----------------------------------------------------------------------------
    
    BBCodeView1.Views.Put("btn", btn)
    BBCodeView1.Text = $"[Alignment=Center][TextSize=20][b][u]This is the title$"$
    
End Sub
 
Solution
This was perplexing, because each XLV panel had its own ScrollBar. Not one big bar for the height of the xlv.

Turned out this was about the ScrollBar in the xCustomListView. Not ScrollBars in the BBCodeViews.
Turning off the xlv scrollbar fixed it. SB was only needed during development in B4j anyway.

Absolutely nothing to do with my Drawers. No B4XPages side-effect either.

Finally, I could just swear that I have seen lots of people post examples of working code in here? Next time I do that, I will Report myself.

[Just read again from beginning. I did a terrible job of stating my issue right at the beginning. Will try not to repeat that.]

TILogistic

Expert
Licensed User
Longtime User
put customlistview

BBCodeView1.Views.Put("clv", pnl)
Do you wonder whether it is possible to add more complex views?
Sure: [vertical=30][view=clv/][/vertical]
B4X:
    Dim xbtn As B4XView = btn
    If xui.IsB4i Then xbtn.SetColorAndBorder(xui.Color_Transparent, 1dip, xui.Color_Black, 2dip)
    xbtn.Text = "Click!"
    xbtn.SetLayoutAnimated(0, 0, 0, 100dip, 40dip)
    
    Dim pnl As B4XView = xui.CreatePanel("")
    pnl.SetLayoutAnimated(0, 0, 0, 200dip, 120dip)
    pnl.LoadLayout("CustomListView")
    
    For i = 1 To 50
        CustomListView1.AddTextItem($"Item ${i}"$, "")
    Next
    
    BBCodeView1.Views.Put("clv", pnl)
    BBCodeView1.Views.Put("btn", btn)

    BBCodeView1.Text = _
$"[Alignment=Center][TextSize=30][b][u][Font=MyFont Size=50]This is the title [/Font][FontAwesome=0xF034/] [FontAwesome=0xF035/][/u][/b][/TextSize][/Alignment]
Emoji made of multiple "characters": 👨‍💻 and a flag: [TextSize=30][e=🇺🇳/][/TextSize]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc fermentum elit vitae nisi faucibus, vitae lacinia turpis mattis.
Lets add a [Color=#ff0000][b]button:[/b][/color] [View=btn Vertical=10/]  and more text here...

We can also add links, for example: [url]https://www.google.com[/url]. You can click on the link. The title will be updated.
Here is a nice logo: [img FileName="logo.png" width=50/]

Do you wonder whether it is possible to add more complex views?
Sure: [vertical=30][view=clv/][/vertical]

1657946323053.png
 
Upvote 0

mmieher

Active Member
Licensed User
Longtime User
put customlistview



B4X:
    Dim xbtn As B4XView = btn
    If xui.IsB4i Then xbtn.SetColorAndBorder(xui.Color_Transparent, 1dip, xui.Color_Black, 2dip)
    xbtn.Text = "Click!"
    xbtn.SetLayoutAnimated(0, 0, 0, 100dip, 40dip)
   
    Dim pnl As B4XView = xui.CreatePanel("")
    pnl.SetLayoutAnimated(0, 0, 0, 200dip, 120dip)
    pnl.LoadLayout("CustomListView")
   
    For i = 1 To 50
        CustomListView1.AddTextItem($"Item ${i}"$, "")
    Next
   
    BBCodeView1.Views.Put("clv", pnl)
    BBCodeView1.Views.Put("btn", btn)

    BBCodeView1.Text = _
$"[Alignment=Center][TextSize=30][b][u][Font=MyFont Size=50]This is the title [/Font][FontAwesome=0xF034/] [FontAwesome=0xF035/][/u][/b][/TextSize][/Alignment]
Emoji made of multiple "characters": 👨‍💻 and a flag: [TextSize=30][e=🇺🇳/][/TextSize]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc fermentum elit vitae nisi faucibus, vitae lacinia turpis mattis.
Lets add a [Color=#ff0000][b]button:[/b][/color] [View=btn Vertical=10/]  and more text here...

We can also add links, for example: [url]https://www.google.com[/url]. You can click on the link. The title will be updated.
Here is a nice logo: [img FileName="logo.png" width=50/]

Do you wonder whether it is possible to add more complex views?
Sure: [vertical=30][view=clv/][/vertical]

View attachment 131458
Thank you. The example never does anything with pnl (as near as I can tell).
 
Upvote 0

mmieher

Active Member
Licensed User
Longtime User
I am feebling on doing the opposite. I want to load a BBCodeView into a CLV. Not enough time spent yet, but you are listening.

That Navy thing on the right-side is the Divider Color (?). The Khaki view is a BBCodeView. I just want it to fill the panel width which is the xlv width.

1657980735717.png


B4X:
Private Sub AnimatePanelText(xlv As CustomListView, _
                         WaitAfter As Int, _
                         Content As String, _
                         Height As Int, _
                         Color As Int) As ResumableSub

    LogSub("AnimatePanel:  Content = " & Content)
 
    Dim p As B4XView = xui.CreatePanel("")
    p.SetLayoutAnimated(0,0,0, xlv.AsView.Width, Height)
    p.SetColorAnimated(0, xui.Color_Transparent, Color)
 
    '    1. Create a layout with BBCodeView.
    '    2. Initialize a BCTextEngine object. This should be called after the BBCodeViews And BBLabels were added.
    p.LoadLayout("pnlBCEngine")
 
    ''BBCodeView1.mBase.SetLayoutAnimated(0,0,0,320,Height)    '    nope

    Dim sp As ScrollPane = BBCodeView1.sv
    sp.SetVScrollVisibility("NEVER")
    ''sp.SetLayoutAnimated(0,0,0,B4M.xDevWidth,Height)
    sp.SetLayoutAnimated(0,0,0,320,Height)    '    nope
    ''sp.FitToWidth = True        '    nope
 
    TextEngine.Initialize(p)
    BBCodeView1.Text = Content

    ''BBCodeView1.Base_Resize(B4M.xDevWidth, Height)    '    nope

    xlv.Add(p, xlv.Size)    '     unique at least
 
    p = xlv.GetPanel(xlv.Size-1)
    p.Visible = False
    p.SetVisibleAnimated(WaitAfter, True)
 
    If xui.IsB4J Then
        Sleep(0)
    Else
        Sleep(WaitAfter)
    End If
 
    Return True
 
End Sub

I am determined to get to something like this (sry not my ad): Star Wars Crawl
 
Last edited:
Upvote 0

mmieher

Active Member
Licensed User
Longtime User
Ok, Omar. Thank you. It is embarrassing to expose my primitive coding and lack of general knowledge, but here it is. See AnimatePanelText in B4XTimeline.

[moments later] The Export to Zip file is too large? Here is just the one B4XPage. Using B4J right now.


You mean a "small example". (Doh!)
 
Last edited:
Upvote 0

TILogistic

Expert
Licensed User
Longtime User
??
I am determined to get to something like this (sry not my ad): Star Wars Crawl
use:
 
Upvote 0

mmieher

Active Member
Licensed User
Longtime User
[GMT -8]

Morning, @Omar Parra A. !
Here is a small B4J project. This must have something to do with the scroll bar?
@mmieher

B4X:
#Region Project Attributes
    #MainFormWidth: 600
    #MainFormHeight: 600
#End Region

Sub Process_Globals
    Private fx As JFX
    Private MainForm As Form
    Private xui As XUI

    Private BBCodeView1 As BBCodeView
    Private TextEngine As BCTextEngine
    Private xlvText As CustomListView

End Sub

Sub AppStart (Form1 As Form, Args() As String)
    MainForm = Form1
    MainForm.RootPane.LoadLayout("Layout1")
    MainForm.Show
   
    '    works perfectly by itself
''    TextEngine.Initialize(MainForm.RootPane)
''    BBCodeView1.Text = "[Alignment=Center][TextSize=24][color=#f9a11b][Vertical=30]I am TEXT.[/Vertical][/color]"
''    Dim sp As ScrollPane = BBCodeView1.sv
''    sp.SetVScrollVisibility("NEVER")

    xlvText.Clear

    For i = 0 To 1
       
        '    strange void at right of p panel -- color is background of Layout1
       
        Dim p As B4XView = xui.CreatePanel("")
        p.SetLayoutAnimated(0,0,0, 320, 100)
        p.LoadLayout("pnlBCEngine")
       
        TextEngine.Initialize(p)
       
        BBCodeView1.Text = "[Alignment=Center][TextSize=24][color=#f9a11b][Vertical=30]I am TEXT.[/Vertical][/color]"
        Dim sp As ScrollPane = BBCodeView1.sv
        sp.SetVScrollVisibility("NEVER")
       
        xlvText.Add(p,i)
       
    Next
   
End Sub
 

Attachments

  • SmallProject.zip
    3.6 KB · Views: 70
Upvote 0

MicroDrie

Well-Known Member
Licensed User
In your example program, the width and height of an element are set to a fixed width <- instead of automatic adjustment <-> which means that there are gaps and overlaps, as it were. A rule of thumb is that you usually set a panel you add to automatic width-justification to prevent this. As for the height, usually the last element on a panel is set to autofill the height.

What is the goal?:
sp.SetVScrollVisibility("NEVER")

Apart from the fact that the displayed text length also depends on the screen on which it is displayed, why take the risk of not displaying a piece of text that does not fit on the screen? In other words, there is a specific goal and there are one or more means to achieve that one specific goal. In your example, scrolling is only a means to be able to display the text that is not displayed as yet, the goal you want to achieve with it is not clear to me.
 
Upvote 0

mmieher

Active Member
Licensed User
Longtime User
In your example program, the width and height of an element are set to a fixed width <- instead of automatic adjustment <-> which means that there are gaps and overlaps, as it were. A rule of thumb is that you usually set a panel you add to automatic width-justification to prevent this. As for the height, usually the last element on a panel is set to autofill the height.

What is the goal?:
sp.SetVScrollVisibility("NEVER")

Apart from the fact that the displayed text length also depends on the screen on which it is displayed, why take the risk of not displaying a piece of text that does not fit on the screen? In other words, there is a specific goal and there are one or more means to achieve that one specific goal. In your example, scrolling is only a means to be able to display the text that is not displayed as yet, the goal you want to achieve with it is not clear to me.
I started with anchors, scripts, etc. Needed to simplify by just putting 320 for the width everywhere.

My goal is to place a BBCodeView into an XLV item. The BBCodeView should fill the entire width of the XLV. No scrollbar for BBCodeView. Yes scrollbar for XLV.

"Type mismatch" when XLV.Add(BBCodeView1, 0)
I use Designer layout to have "panel" with BBCodeView child.
I load layout, mess with it, then XLV.add(pnl,0).

Result is what you see. Why is BBCodeView not spanning the entire 320 units?
 
Upvote 0

MicroDrie

Well-Known Member
Licensed User
As I wrote before the first reason is this:
1658069798801.png

When changed it is smaller and the second reason is the reservation for space of the scrollbar for access to the overflow text.
1658070567056.png

My advice is to study the drawer menu how to use a small part of the screen.
 
Upvote 0

mmieher

Active Member
Licensed User
Longtime User
As I wrote before the first reason is this:
View attachment 131513
When changed it is smaller and the second reason is the reservation for space of the scrollbar for access to the overflow text.
View attachment 131515
My advice is to study the drawer menu how to use a small part of the screen.
My non-working example does not touch B4XPages or B4XDrawers.

Please upload a working example of BBCodeView spanning entire item panel in xlv. No scrollbar. Use scrollbar space.
 
Upvote 0

MicroDrie

Well-Known Member
Licensed User
Please upload a working example of BBCodeView spanning entire item panel in xlv. No scrollbar. Use scrollbar space.
In this forum we help each other by seeing if and if so how we can advise someone to improve the program code, not to write program examples for others.
 
Upvote 0

mmieher

Active Member
Licensed User
Longtime User
This was perplexing, because each XLV panel had its own ScrollBar. Not one big bar for the height of the xlv.

Turned out this was about the ScrollBar in the xCustomListView. Not ScrollBars in the BBCodeViews.
Turning off the xlv scrollbar fixed it. SB was only needed during development in B4j anyway.

Absolutely nothing to do with my Drawers. No B4XPages side-effect either.

Finally, I could just swear that I have seen lots of people post examples of working code in here? Next time I do that, I will Report myself.

[Just read again from beginning. I did a terrible job of stating my issue right at the beginning. Will try not to repeat that.]
 
Upvote 0
Solution
Top