B4A Library [B4X] [BETA] BCTextEngine / BBCodeView - Text engine + BBCode parser + Rich Text View

Discussion in 'Additional libraries, classes and official updates' started by Erel, May 28, 2019.

  1. Erel

    Erel Administrator Staff Member Licensed User

    Be open minded.

    [​IMG]

    This is a cross platform library with several features:

    - Text drawing engine.
    - Text layout engine.
    - BBCode parser.
    - A custom view that connects everything.

    The library and the code inside can be used for all kinds of things related to text. You can for example use it as an alternative to CSBuilder where you have more control over the text drawing.

    I will explain the main use case of BBCodeView.
    Our layout is usually made of boxes. The boxes positions and sizes can change, however no matter what, the content is split into boxes.

    With BBCodeView, text is the king. The text layout engine builds the layout based on the text. This is similar to html code. However, unlike html where you need to run a monstrous engine (WebView) inside your app, here there is no additional engine. BBCodeView is made of a ScrollView with an ImageView and additional views that you can add.
    This means that you don't need to anything special to interact with the internal views and you can add any view you like inside the text.

    Lets start with a simple example:
    1. Create a layout with BBCodeView.
    2. Initialize a BCTextEngine object.
    3. Set the BBCodeView TextEngine property. Multiple BBCodeViews can share the same engine.
    Code:
    TextEngine.Initialize
    BBCodeView1.TextEngine = TextEngine
    BBCodeView1.Text = 
    $"Hello world!"$
    You can use all kinds of BBCode tags to format the text and add non-text elements inside.
    Code:
    BBCodeView1.Text = $"[b]Hello[/b] [url]world![/url]"$
    [​IMG]

    The supported tags are:

    [b] - Bold.
    [u] - Underline.
    [Url] - Clickable link. The LinkClicked event is raised when the content is clicked. Examples:
    [url]world![/url]
    [url="https://www.b4x.com"]hello[/url]
    [Plain] - prevents the internal text from being parsed.
    [Color] - Changes the text color. Example:
    [color=#ff00ff]Hello[/color]
    [Img] - Adds an image. Can be local or remote. Examples:

    [img dir="${File.DirInternal}" FileName="logo.png" width=50/] 'width and height are optional for local images. Omit the dir parameter for assets files.
    [img url="https://...s/l/42/42649.jpg?1432374732" width=60 height=60/] 'width and height are required for remote images.
    [Vertical] - Changes the vertical offset. Example:
    [Vertical=30]aaa[/Vertical]
    [TextSize] - Changes the text size. Example: [TextSize=25]asdasd[/TextSize]
    [Alignment] - Changes the horizontal alignment. One of the following values: Left, Right or Center.
    Example: [Alignment=Center]Title[/Alignment]
    [View] - Adds a custom view. Example:
    [View=Btn1/]

    [Span] - Creates an unbreakable section. Supports the following keys: MinWidth and Alignment. You can use it to create columns (see the example).
    - Indention level. Example

    • - Creates an ordered or unordered list. See the attached examples.

      View and Img tags should end with /].
      You can also use vertical as a key inside View and Img tags.

      Adding views is done in two steps:
      1. Create a view and add it to BBCodeView.Views map.
      2. Add it with the View tag.

      Code:
      Dim btn As Button
      btn.Initialize(
      "btn")
      btn.Text = 
      "Click!"
      btn.SetLayoutAnimated(
      000100dip40dip)
      BBCodeView1.Views.Put(
      "btn", btn)
      BBCodeView1.Text = 
      $"Lets add a button here [View=btn Vertical=10/]. Do you see it?"$
      [​IMG]

      The cross platform b4xlib is attached. Note that it depends on jBitmapCreator v4.71+ which is available in B4J v7.50 and B4i v5.80.
      B4A library: https://www.b4x.com/android/forum/attachments/bitmapcreator-zip.81067/ (copy to the internal folder).
      It is recommended to use Java 9+ on B4J. You will get better results on high DPI screens.

      (The example adds a CustomListView to the layout. This can cause an issue in B4A if the layout becomes scrollable.)



      Updates

      1.06 - New Indent and List tags.

      [​IMG]

      See the examples.

      1.05 - New Span tag. The Span tag creates an unbreakable content. It supports the following keys: MinWidth and Alignment.
      You can use it to create tables:

      [​IMG]

      Width dimensions can be set with %x units. The percentage is relative to BBCodeView width.

      1.03 - Fixes a drawing issue.
      1.02 - New BBCodeView.Padding field. Can be used to change the padding. Default value is:
      Code:
      'left, top, right, bottom
      If xui.IsB4J Then
         Padding.Initialize(
      5dip5dip20dip5dip'leaves space for the scroll bar.
      Else
         Padding.Initialize(
      5dip5dip5dip5dip)
      End If
      1.01 - Fixes a compilation issue in release mode.
      The Img.Dir parameter is not needed when loading files from the assets folder.

      Another example with a bit more logic is available here: https://www.b4x.com/android/forum/t...rser-rich-text-view.106207/page-2#post-665369
     

    Attached Files:

    Last edited: Jun 10, 2019 at 3:34 PM
    Almora, Jack Cole, hibrid0 and 29 others like this.
  2. mcqueccu

    mcqueccu Active Member Licensed User

    Wow, B4X Keeps getting better and better. This wil fit right into some projects of mine. Thanks
     
    Erel likes this.
  3. somed3v3loper

    somed3v3loper Well-Known Member Licensed User

    As Donmanfred's avatar appears here we should start a thread for each question :D but I should ask here why asking to be open minded ?
     
    peacemaker, ThRuST, SJQ and 1 other person like this.
  4. MarcoRome

    MarcoRome Expert Licensed User

    A word... Fantastic
     
  5. Erel

    Erel Administrator Staff Member Licensed User

    This is a different approach to layouts. It requires a different way of thinking.
     
    DonManfred, jimmyF and somed3v3loper like this.
  6. jimmyF

    jimmyF Active Member Licensed User

    This is very,very interesting.

    I was fooling around with this:
    Code:
    ImageView1.Bitmap = BBCodeView1.mBase.Snapshot
    Works!
    Nice!
    -j
     
  7. Erel

    Erel Administrator Staff Member Licensed User

    Version 1.01 released.
    Fixes a compilation issue in release mode.
    The Img.Dir parameter is not needed when loading files from the assets folder.
     
  8. imbault

    imbault Well-Known Member Licensed User

    I checkbox would be very interesting in it, possible?
     
  9. Erel

    Erel Administrator Staff Member Licensed User

    Sure. You can add any view you like.
     
    fredo, Peter Simpson and SJQ like this.
  10. Alexander Stolte

    Alexander Stolte Well-Known Member Licensed User

    Time for nice easter egs in the apps :D
     
  11. Sandman

    Sandman Well-Known Member Licensed User

    I'm trying to figure out a use-case for my app and need to clarify something:

    The "main" view isn't editable by the end user. However, as one can add other views inside it, those embedded views can be editable.

    Have I understood this correctly?
     
  12. jimmyF

    jimmyF Active Member Licensed User

    Are there other Tags available?

    Code:
    I tried [i] and [p] and it crashed.
    (Had to enter the i Tag in a code box. Otherwise it changed my response to italic :D)
     
  13. DonManfred

    DonManfred Expert Licensed User

    The available Tags are listed in #1.
     
    jimmyF likes this.
  14. asales

    asales Well-Known Member Licensed User

    I'm thinking in interactive e-books and tutorials.
     
  15. Erel

    Erel Administrator Staff Member Licensed User

    That's true. You can add any views you like inside the layout. The text engine just leaves place holders for those views (that includes panels with complex layouts inside).
     
  16. jimmyF

    jimmyF Active Member Licensed User

    The CustomListView does not scroll in this update.
     
  17. HAH

    HAH Active Member Licensed User

    Why I got this error:
    Code:
    java.lang.RuntimeException: java.lang.RuntimeException: Field bbcodeview1 was declared with the wrong type.
     
  18. Erel

    Erel Administrator Staff Member Licensed User

    See the note at the end of the first post. It is not a good idea to add a CustomListView in B4A if the layout is too tall. The main layout will become scrollable and other scrollable elements will not work.
     
    jimmyF likes this.
  19. Erel

    Erel Administrator Staff Member Licensed User

    Please start a new thread and provide more information.
     
  20. Sandman

    Sandman Well-Known Member Licensed User

    This view might be bit of a game-changer. All of a sudden it's possible to generate the UI on the server (just like html) and let the client render it. Which all of a sudden gives us the benefit of being able to update the app by simply updating the server, and not having to force out a new update of the app. I look forward finding time to actually test this.

    I believe Apple dislikes developers wrapping webpages and publish that as an app. In a way this could be considered doing just that. Do we think there's a risk that Apple might dislike this solution?
     
    fredo and xulihang like 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