The applicaton is very simple: once you have authenticated and the application is allowed to access your Google+ profile data, some information will be displayed: name, profile picture, tagline, “about me” and links.
We need the web_ui library because application uses Model-driven Views (MDV) to bind data and HTML interface, and js-interop library to handle the Google APIs client, so the pubspec.yaml file will be:
We also need a compiler to build our MDV template, let’s call it build.dart:
The DART code
First of all, we have to import some libraries:
watchers library contains declaration of dispatch() method, we need it to update HTML interface values with the current Dart values.
We’ll soon see why we are importing safe_html.
You see that:
all the code is wrapped into the js.scoped() method
there are two kinds of Callback, once and many
RequestCallback is the function that is invoked when application receives MakeRequest response. Recieved data, rawResp, are parsed and converted to JSON, this will ease the process of assigning values to variables. There’s nothing special here but this line:
Returned value of ‘aboutMe’ is actually a piece of HTML code; allowing an unknown piece of HTML that comes from the outside to be included in your app would represent a security flaw, so HTML is passed as regular text by default, e.g. “<span>hello <a href=’/world’>world<a></span>”.
If we’re 100% sure about safety of HTML code, this behaviour can be overridden by the unsafe method of SafeHtml class; since only one top-level element is allowed to be passed as argument of unsafe() we can just wrap the code inside a div element.
The HTML interface
The app interface is really simple:
Elements wrapped in curly brackets, e.g. , are MDV placeholders for data.
If a user had not set, on his Google+ profile, one of the fields, API returns null data; to avoid showing “null”, we can decide to instatiate the element only if value of field is not equal to “null”:
Last interesting thing to show is how web_ui handles Dart lists:
You can intuitively read it as: “for each url in urls do something with url”.