iOS Tutorial CSBuilder - AttributedStrings builder

Discussion in 'iOS Tutorials' started by Erel, May 4, 2017.

Similar threads

B4i Question csbuilder problem
B4i Question Change CSBuilder link color
B4i Code Snippet CSBuilder text direction
B4i Question [RESOLVED] CSBuilder
B4i Question CSBuilder Multiline Wrap Text
  1. Erel

    Erel Administrator Staff Member Licensed User

    AttributedStrings are strings with additional styling information.
    CSBuilder is a new type added in B4i v4.00 which helps with creating such strings. It is an alternative to iRichString class: https://www.b4x.com/android/forum/threads/48573/#content

    Note that unlike in B4A, where CharSequence type can be a string or a CharSequence created with CSBuilder, in B4i a String cannot be used as an AttributedString (and vice versa).

    Examples of objects that support attributed strings:
    - Label / TextField / TextView.AttributedText
    - TableCell.Text / DetailText
    - Picker items

    Code:
    Dim cs As CSBuilder
    Label1.AttributedText = cs.Initialize.Color(
    Colors.Red).Append("Hello World!").PopAll
    [​IMG]

    Almost all methods of CSBuilder return the object itself. This allows us to chain the method calls.
    Text is always appended with the Append method.
    There are various attributes that can be set. Setting an attribute marks the beginning of a style span.
    Calling Pop ends the last span that was added (and not ended yet).
    Calling PopAll ends all open spans. It is convenient to always call PopAll at the end to ensure that all spans are closed.

    Code:
    'example of explicitly popping an attribute:
    Label1.AttributedText = cs.Initialize.Color(Colors.Red).Append("Hello ").Pop.Append("World!").PopAll
    [​IMG]

    Code:
    'It doesn't matter whether the methods are chained or split into several lines:
    Dim cs As CSBuilder
    cs.Initialize.Color(
    Colors.Red).Append("Hello ")
    cs.Font(
    Font.DEFAULT_BOLD).Color(Colors.Blue).Append("Colorful ").Pop.Pop 'two pops: the first removes the green color and the second removes the bold style
    cs.Append("World!").PopAll
    Label1.AttributedText = cs
    [​IMG]

    Fonts

    By default all layouts call AutoScaleAll in the designer script. This causes the view's Font to be reset when the parent is resized. This will override the font styling set with CSBuilder.
    If you want to change the font with CSBuilder then you have two options:
    - Remove the AutoScaleAll call from the designer script.
    - Or set the AttributedText property in the parent's Resize event.

    FontAwesome / Material Icons

    Code:
    Dim cs As CSBuilder
    cs.Initialize.Alignment(
    "ALIGN_CENTER")
    cs.Append(
    "Apple: ").Font(Font.CreateFontAwesome(20)).Color(0xFF777777).Append(Chr(0xF179)).Pop.Pop.Append(CRLF)
    cs.Append(
    "Android: ").Font(Font.CreateFontAwesome(20)).Color(0xFF057916).Append(Chr(0xF17B)).Pop.Pop
    cs.PopAll
    Label1.AttributedText = cs
    [​IMG]

    Page.TitleView

    Code:
    Dim cs As CSBuilder
    Dim lbl As Label
    lbl.Initialize(
    "")
    lbl.SetLayoutAnimated(
    010010050)
    cs.Initialize.Alignment(
    "ALIGN_CENTER").Color(Colors.Red).Append("Title ").VerticalAlign(5).Font(Font.CreateMaterialIcons(25))
    cs.Append(
    Chr(0xE859)).PopAll
    lbl.AttributedText = cs
    Page1.TitleView = lbl
    [​IMG]

    TableView

    Code:
    Dim cs As CSBuilder
    For i = 1 To 100
       
    Dim tc As TableCell = TableView1.AddSingleLine("")
       tc.Text = cs.Initialize.Color(
    Rnd(0xFF000000, -1)).Alignment("ALIGN_CENTER").Append($"Item #${i}"$).PopAll
    Next
    [​IMG]

    Clickable links

    You can create clickable links with TextView. TextView.Editable must be set to False.
    Code:
    Dim cs As CSBuilder
    TextView1.Editable = 
    False
    cs.Initialize.Font(
    Font.CreateNew(25)).Append("Some ").Link("somevalue").Append("words").Pop
    cs.Append(
    " are ").Link("anothervalue").Append("clickable").PopAll
    TextView1.AttributedText = cs

    Sub TextView1_LinkClick (URL As String)
       
    Log(URL)
    End Sub
    [​IMG]

    Note that you should use StringUtils.EscapeUrl to escape the link value if it contains a space or any other value not allowed by URLs.

    Buttons

    You can use attributed strings in buttons with the ButtonSetAttributedText sub.
    Code:
    'example
    Dim cs As CSBuilder
    ButtonSetAttributedText(Button1, _
       cs.Initialize.Color(
    Colors.Red).Append("Click ").Font(Font.CreateNewBold(30)).Append("Me!!!").PopAll, _
       cs.Initialize.Color(
    Colors.Gray).Append("Click ").Font(Font.CreateNewBold(30)).Append("Me!!!").PopAll, _
       cs.Initialize.Append(
    "disabled"))

    Sub ButtonSetAttributedText(btn As Button, NormalText As AttributedString, HighlightedText As AttributedString, _
         DisabledText 
    As AttributedString)
       
    Dim no As NativeObject = btn
       no.RunMethod(
    "setAttributedTitle:forState:"Array(NormalText, 0))
       no.RunMethod(
    "setAttributedTitle:forState:"Array(HighlightedText, 1))
       no.RunMethod(
    "setAttributedTitle:forState:"Array(DisabledText, 2))
    End Sub
    [​IMG]
     
    Last edited: May 4, 2017
  2. tufanv

    tufanv Expert Licensed User

    for this code to work , we must also set the multiline to true I think .
    Code:
    Dim cs As CSBuilder
    cs.Initialize.Alignment(
    "ALIGN_CENTER")
    cs.Append(
    "Apple: ").Font(Font.CreateFontAwesome(20)).Color(0xFF777777).Append(Chr(0xF179)).Pop.Pop.Append(CRLF)
    cs.Append(
    "Android: ").Font(Font.CreateFontAwesome(20)).Color(0xFF057916).Append(Chr(0xF17B)).Pop.Pop
    cs.PopAll
    Label1.AttributedText = cs
     
  3. Erel

    Erel Administrator Staff Member Licensed User

    You are correct.
     
  4. fbritop

    fbritop Active Member Licensed User

    Why custom fonts dont load into the CS?
    This does not work with CS althow with iRichString does.

    Code:
    cs.Initialize.Color(Colors.White).Font(Font.CreateNew2("Sansation-Regular", fontSize))
     
  5. Erel

    Erel Administrator Staff Member Licensed User

    This code by itself doesn't do anything useful. You must set the text by calling Append. You also need to call PopAll at the end.
     
  6. hongbii khaw

    hongbii khaw Member Licensed User

    Hi all,
    Can the CSbuilder append the image like the one in b4a?
    or any other method for b4i to put an image in a string?

    Thank you
     
  7. Erel

    Erel Administrator Staff Member Licensed User

    Currently CSBuilder doesn't support adding images. However it is probably possible to do it with the help of NativeObject. Please start a new thread for this and I'll try to implement it.
     
  8. Emme Developer

    Emme Developer Well-Known Member Licensed User

    Hi All! Is possibile to add it on MsgBox with a clickable url? Thanks
     
  9. Erel

    Erel Administrator Staff Member Licensed User

  10. Emme Developer

    Emme Developer Well-Known Member Licensed User

    Sorry @Erel, but i didn't make duplicate posts. Thread that you write is for Android in B4a, in this thread i want to know if is possible to do in iOS with b4i. I don't know how to make dialog in iOS. Sorry for misunderstanding, thanks
     
  11. Erel

    Erel Administrator Staff Member Licensed User

    Sorry. My mistake!

    Currently you cannot use it with Msgbox as it only works with TextView.
     
    Emme Developer likes this.
  12. hongbii khaw

    hongbii khaw Member Licensed User

    Hi all,
    I found that the string builder can actually append emoji character,
    For example,
    Code:
    Dim cs As CSBuilder
    cs.Initialize.Color(
    Colors.Black).Append("Good Day")
    cs.Append(
    Chr(0xE345)).PopAll
    lbl.AttributedText = cs
    [​IMG]
    May I know is there any icon picker for emoji in b4i?
    Thank you.
     

    Attached Files:

  13. Erel

    Erel Administrator Staff Member Licensed User

    Please start a new thread in the questions forum.
     
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