B4J Tutorial [BANanoMJLM] Responsive Email Projects

Last edited:

Mashiane

Expert
Licensed User
Longtime User
1. The Welcome Email

At the end of this tutorial we should be having an email resembling this:

1599167720146.png


For this one, we will attempt to code our way. Remember you can do the same thing with the abstract designer.

As you might have guessed, this is a HTML page with rows and columns. In each row we have one or more columns and inside those we have some element.

This project is wrapped from this post.

The page

B4X:
<mjml>

B4X:
'initialize the library
    MJMLApp.Initialize("welcomeaboard")
    '
    'create <mjml>
    Dim app As MJApp
    app.Initialize(Me, "mjapp", "mjapp")
    app.AddToParent("template")


The body

HTML:
<mj-body background-color="#ffffff" font-size="13px">

We BANanoMJML it like this

B4X:
'create the body
    Dim body As MJBody
    body.Initialize(Me, "mjbody", "mjbody")
    body.BackgroundColor = "#ffffff"
    body.FontSize = "13px"
    'add the body to the <mjml>
    body.AddToParent("mjapp")

The first row

HTML:
 <mj-section background-color="#ffffff" padding-bottom="0px" padding-top="0">
      <mj-column vertical-align="top" width="100%">
        <mj-image src="http://go.mailjet.com/tplimg/mtrq/b/ox8s/mg1rw.png" alt="" align="center" border="none" width="600px" padding-left="0px" padding-right="0px" padding-bottom="0px" padding-top="0"></mj-image>
      </mj-column>
    </mj-section>

We translate this to BANanoMJML like this..

B4X:
'create row 1
    Dim r1 As MJSection
    r1.Initialize(Me, "r1", "r1")
    r1.BackgroundColor = "#ffffff"
    r1.PaddingBottom = "0px"
    r1.PaddingTop = "0px"
    r1.AddToParent("mjbody")

    'create r1c1
    Dim r1c1 As MJColumn
    r1c1.Initialize(Me, "r1c1", "r1c1")
    r1c1.VerticalAlign = "top"
    r1c1.Width = "100%"
    r1c1.AddToParent("r1")

    'add image inside r1c1
    Dim r1c1image As MJImage
    r1c1image.Initialize(Me, "r1c1image", "r1c1image")
    r1c1image.Src = "http://go.mailjet.com/tplimg/mtrq/b/ox8s/mg1rw.png"
    r1c1image.Alt = ""
    r1c1image.Align = "center"
    r1c1image.Border = "none"
    r1c1image.Width = "600px"
    r1c1image.PaddingLeft = "0px"
    r1c1image.PaddingRight = "0px"
    r1c1image.PaddingBottom = "0px"
    r1c1image.PaddingTop = "0"
    r1c1image.AddToParent("r1c1")

The second row

HTML:
<mj-section background-color="#009FE3" vertical-align="top" padding-bottom="0px" padding-top="0">
      <mj-column vertical-align="top" width="100%">
        <mj-text align="left" color="#ffffff" font-size="45px" font-weight="bold" font-family="open Sans Helvetica, Arial, sans-serif" padding-left="25px" padding-right="25px" padding-bottom="30px" padding-top="50px">Welcome aboard</mj-text>
      </mj-column>
    </mj-section>

We BANanoMJML it like this

B4X:
Dim r2 As MJSection
    r2.Initialize(Me, "r2", "r2")
    r2.BackgroundColor = "#009FE3"
    r2.VerticalAlign = "top"
    r2.PaddingBottom = "0px"
    r2.PaddingTop = "0"
    r2.AddToParent("mjbody")

    '
    Dim r2c1 As MJColumn
    r2c1.Initialize(Me, "r2c1", "r2c1")
    r2c1.VerticalAlign = "top"
    r2c1.Width ="100%"
    r2c1.AddToParent("r2")

    '
    Dim r2c1text As MJText
    r2c1text.Initialize(Me, "r2c1text", "r2c1text")
    r2c1text.Align = "left"
    r2c1text.Color = "#ffffff"
    r2c1text.FontSize = "45px"
    r2c1text.FontWeight = "bold"
    r2c1text.FontFamily = "open Sans Helvetica, Arial, sans-serif"
    r2c1text.PaddingLeft = "25px"
    r2c1text.PaddingRight = "25px"
    r2c1text.PaddingBottom = "30px"
    r2c1text.PaddingTop = "50px"
    r2c1text.Caption = "Welcome aboard"
    r2c1text.AddToParent("r2c1")

The 3rd Row

HTML:
<mj-section background-color="#009fe3" padding-bottom="20px" padding-top="20px">
      <mj-column vertical-align="middle" width="100%">
        <mj-text align="left" color="#ffffff" font-size="22px" font-family="open Sans Helvetica, Arial, sans-serif" padding-left="25px" padding-right="25px"><span style="color:#FEEB35">Dear [[FirstName]]</span><br /><br /> Welcome to [[CompanyName]].</mj-text>
        <mj-text align="left" color="#ffffff" font-size="15px" font-family="open Sans Helvetica, Arial, sans-serif" padding-left="25px" padding-right="25px">We&apos;re really excited you&apos;ve decided to give us a try. In case you have any questions, feel free to reach out to us at [[ContactEmail]]. You can login to your account with your username [[UserName]]</mj-text>
        <mj-button align="left" font-size="22px" font-weight="bold" background-color="#ffffff" border-radius="10px" color="#1AA0E1" font-family="open Sans Helvetica, Arial, sans-serif">Login</mj-button>
        <mj-text align="left" color="#ffffff" font-size="15px" font-family="open Sans Helvetica, Arial, sans-serif" padding-left="25px" padding-right="25px">Thanks, <br /> The [[CompanyName]] Team</mj-text>
      </mj-column>
    </mj-section>

Adding the 3rd row and column

B4X:
Dim r3 As MJSection
    r3.Initialize(Me, "r3", "r3")
    r3.BackgroundColor = "#009fe3"
    r3.PaddingBottom = "20px"
    r3.PaddingTop ="20px"
    r3.AddToParent("mjbody")
  
    '
    Dim r3c1 As MJColumn
    r3c1.Initialize(Me, "r3c1", "r3c1")
    r3c1.VerticalAlign = "middle"
    r3c1.Width ="100%"
    r3c1.AddToParent("r3")

Text and buttons

HTML:
[I]<mj-text align="left" color="#ffffff" font-size="22px" font-family="open Sans Helvetica, Arial, sans-serif" padding-left="25px" padding-right="25px"><span style="color:#FEEB35">Dear [[FirstName]]</span><br /><br /> Welcome to [[CompanyName]].</mj-text>
[/I]

B4X:
Dim r3c1text1 As MJText
    r3c1text1.Initialize(Me, "r3c1text1", "r3c1text1")
    r3c1text1.Align = "left"
    r3c1text1.Color = "#ffffff"
    r3c1text1.FontSize = "22px"
    r3c1text1.FontFamily = "open Sans Helvetica, Arial, sans-serif"
    r3c1text1.PaddingLeft = "25px"
    r3c1text1.PaddingRight = "25px"
    r3c1text1.Caption = $"<span style="color:#FEEB35">Dear [[FirstName]]</span><br /><br /> Welcome To [[CompanyName]]"$
    r3c1text1.AddToParent("r3c1")

HTML:
 <mj-button align="left" font-size="22px" font-weight="bold" background-color="#ffffff" border-radius="10px" color="#1AA0E1" font-family="open Sans Helvetica, Arial, sans-serif">Login</mj-button>

B4X:
Dim r3c1btn As MJButton
    r3c1btn.Initialize(Me, "r3c1btn", "r3c1btn")
    r3c1btn.align = "left"
    r3c1btn.fontsize = "22px"
    r3c1btn.fontweight = "bold"
    r3c1btn.backgroundcolor = "#ffffff"
    r3c1btn.borderradius = "10px"
    r3c1btn.color = "#1AA0E1"
    r3c1btn.fontfamily = "open Sans Helvetica, Arial, sans-serif"
    r3c1btn.Caption = "Login"
    r3c1btn.AddToParent("r3c1")

You can explore the rest on the attached source code.

Enjoy!
 
Last edited:

Mashiane

Expert
Licensed User
Longtime User
1. The Welcome Email (Abstract Designer)

I must admit, doing this with the abstract designer is far more easier.

1599172567158.png


See the updated example in the first post.

All we have to do is to create our layout with the components we need and set the attributes. And our code is simple as:

B4X:
MJMLApp.Initialize("welcomeaboard")
    BANano.LoadLayout("#template", "welcomeemail")
   
    MJMLApp.Preview
 

Mashiane

Expert
Licensed User
Longtime User
2. Star Wars Droids


In this example we combine the abstract designer and code to bring this cool responsive email to life.

B4X:
MJMLApp.Initialize("starwarsdroids")
    BANano.LoadLayout("#template", "starwarsdroids")
   
    Dim ebody As BANanoElement
    ebody.Initialize("#ebody")
    ebody.append($"<mj-section background-color="#000000" background-url="https://dmmedia.sphero.com/email-marketing/Star-Wars/Star_Wars_Launch_Email_1REDbg.jpg" background-repeat="no-repeat" padding-left="20px">
      <mj-column>...


StarWarsDroids.gif


Code in first post updated!!
 

Mashiane

Expert
Licensed User
Longtime User
3. Hello World (Abstract Designer)

This is a demo of how to create this sample: https://mjml.io/try-it-live/intro

HTML:
<mjml>
  <mj-body>
    <mj-section>
      <mj-column>

        <mj-image width="100px" src="/assets/img/logo-small.png"></mj-image>

        <mj-divider border-color="#F45E43"></mj-divider>

        <mj-text font-size="20px" color="#F45E43" font-family="helvetica">Hello World</mj-text>

      </mj-column>
    </mj-section>
  </mj-body>
</mjml>




We use the abstract designer to learn how to code our emails by replicating the example.

Ta!
 
Last edited:

Mashiane

Expert
Licensed User
Longtime User
4. Attributes

This isa demo of how one applies head attributes to email. Head attributes help one define classes to use in elements.

This is about this mjml here, https://mjml.io/try-it-live/components/head-attributes

HTML:
<mjml>
  <mj-head>
    <mj-attributes>
      <mj-text padding="0" />
      <mj-class name="blue" color="blue" />
      <mj-class name="big" font-size="20px" />
      <mj-all font-family="Arial" />
    </mj-attributes>
  </mj-head>
  <mj-body>
    <mj-section>
      <mj-column>
        <mj-text mj-class="blue big">
          Hello World!
        </mj-text>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

This produces

1599337327385.png


To apply a class to an element that is defined, one uses the mj-class attributes for custom classes.

1599336341004.png
 
Last edited:

Mashiane

Expert
Licensed User
Longtime User
5. Fonts

This example deals with how to apply internet fonts to your text. This is based on the post here, https://mjml.io/try-it-live/components/head-font

B4X:
<mjml>
  <mj-head>
    <mj-font name="Raleway" href="https://fonts.googleapis.com/css?family=Raleway" />
  </mj-head>
  <mj-body>
    <mj-section>
      <mj-column>
        <mj-text font-family="Raleway, Arial">
          Hello World!
        </mj-text>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

This produces

1599337177508.png


1599337242945.png
 

Mashiane

Expert
Licensed User
Longtime User
6. Applying styles.

There are different ways to apply styles. From this example

HTML:
<mjml>
  <mj-head>
    <mj-attributes>
      <mj-class name="mjclass" color="green" font-size="30px" />
    </mj-attributes>
    <mj-style inline="inline">
      .blue-text div { color: blue !important; }
    </mj-style>
    <mj-style>
      .red-text div { color: red !important; text-decoration: underline !important; }
    </mj-style>
  </mj-head>
  <mj-body>
    <mj-section>
      <mj-column>
        <mj-text css-class="red-text">I'm red and underlined</mj-text>
        <mj-text css-class="blue-text">I'm blue because of inline</mj-text>
        <mj-text mj-class="mjclass">I'm green</mj-text>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

This produces

1599338346392.png


We use the abstract designer to create the example.

1599338444773.png
 
Last edited:
Top