A Mobl Blog App 2

I continue with the exercise of building a mobl application for this blog.

Markdown

Yesterday I left off with a rudimentary application that displays blog posts in a master detail view. The master shows a list of titles, which when clicked show the content of the blog post. This didn’t look completely pretty though. The first problem was that the content of posts is actually stored in the markdown format on the server and send to the mobl application in that format as well. This can be solved in two ways. First, mobl supports markdown via a convenient markdown control. Thus, after importing

import mobl::markdown

I can simply write

control postDetail(p: Post) {
  label(p.title)
  block{
    markdown(p.content)
    markdown(p.extended)
  }
}

However, there is a gotcha here. WebDSL extends markdown with a verbatim tag for quoting large pieces of code, and the mobl markdown control does not. So, as a temporary solution I add the formatted content to the JSON object sent by the server by calling the format function for the WikiText type in WebDSL:

  extend entity Post {
    function json(): JSONObject {
      //...
      obj.put("content", content);
      obj.put("contentHTML", content.format());
      obj.put("extended", extended);
      obj.put("extendedHTML", extended.format());
    }
  }

The contents of the HTML properties can now be displayed using the html control:

control postDetail(p: Post) {
  label(p.title)
  block{
    html(p.contentHTML)
    html(p.extendedHTML)
  }
}

The result is nicely formatted output. However, verbatim text developed for a 720px display does not fit very well on a phone screen. Not sure what to do about that at this point.

Style

While nicely formatted, the postDetail screen still looks rather gray. Let’s apply some style. We use mobl’s styling language to define a style for posts:

style blogArticleStyle {
  background: white;
  margin: 0;
  padding: 10px;
}
style blogHeading {
  display: block;
  font-size: 150%;
  font-weight: bold;
  padding: 10px;
}

which we can then apply to the postDetail control:

control postDetail(p: Post) {
  label(p.title, style=blogHeading)
  block(blogArticleStyle){
    html(p.contentHTML)
    html(p.extendedHTML)
  }
}

The result is a pretty decent blog reader.

In the next episode we’ll look at locally storing blog posts for offline access.

Markdown
Style