B4J Tutorial [BANanoMJLM] Responsive Email Projects

Mashiane · Sep 3, 2020

Ola

Download

Complete Youtube Playlist

Here we look at some responsive email projects.

1. The Welcome Email
1.1. The Welcome Email (Abstract Designer) Recommended
2. StarWarsDroids
3. Hello World (replicating examples from the mjml website)

....

Ta

Mashiane · Sep 3, 2020

1. The Welcome Email

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

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!

Mashiane · Sep 3, 2020

1. The Welcome Email (Abstract Designer)

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

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 · Sep 4, 2020

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>...

Code in first post updated!!

alwaysbusy · Sep 4, 2020

Is it possible there is a typo in your title [BANanoMJL] <> [BANanoMJML] or is this a different lib?

Mashiane · Sep 4, 2020

alwaysbusy said:
possible there is a typo in your title

Thanks, fixed.

Mashiane · Sep 5, 2020

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!

Mashiane · Sep 5, 2020

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

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

Mashiane · Sep 5, 2020

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

Mashiane · Sep 5, 2020

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

We use the abstract designer to create the example.

Mashiane · Sep 5, 2020

7. Creating Accordion

The layout video created here is based on this example: https://mjml.io/try-it-live/components/accordion.

Mashiane · Sep 5, 2020

8. Creating a Button

In this video we start from scratch and create a button. This is based on this example code: https://mjml.io/try-it-live/components/button

Mashiane · Sep 5, 2020

9. Creating a Carousel

In this video we create a carousel for our email. This is based on this example: https://mjml.io/try-it-live/components/carousel

Mashiane · Sep 6, 2020

10. Creating Rows & Columns

In this video we create rows and columns. Elements sit inside a column in a row (section).

Mashiane · Sep 6, 2020

11. Creating a Group

In this demo we create a group with images, text, h2 and paragraphs.

Mashiane · Sep 6, 2020

12. Creating a Hero

In this demo we create a hero using the abstract designer. We insert text and a button inside the hero image.

Mashiane · Sep 6, 2020

13. Create an Image

Whilst we have been creating images with some of the examples, here we create an image element and sent its width.

Mashiane · Sep 6, 2020

14. Creating a NavBar

In this demo we create a navbar to navigate between pages.

Mashiane · Sep 6, 2020

15. Creating Tables - Beginning (To be completed when the next release of BANano arrives)

In this demo we create a table with rows and columns

Mashiane · Sep 6, 2020

16. Creating a Wrapper

In this demo we create a wrapper using the abstract designer

B4J Tutorial [BANanoMJLM] Responsive Email Projects

Mashiane

Expert

Mashiane

Expert

Mashiane

Expert

alwaysbusy

Expert

Mashiane

Expert

Mashiane

Expert

Mashiane

Expert

Mashiane

Expert

Mashiane

Expert

Mashiane

Expert

Mashiane

Expert

Mashiane

Expert

Mashiane

Expert

Mashiane

Expert

Mashiane

Expert

Mashiane

Expert

Mashiane

Expert

Mashiane

Expert

Mashiane

Expert

Similar Threads

B4J Tutorial [BANanoMJLM] Responsive Email Projects

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Similar Threads

Privacy & Transparency

Privacy & Transparency