Developer Advocate Chris Smith shows us how he built a Assignment Widget in the HTML Widget.
One of the busiest threads on the Frog forum this week has been a discussion about a "widget" built by one of our customers! It was great to read how the community banded together to develop the initial concept. What was more interesting for me personally, was tracking how the code evolved and how people attempted to reverse engineer parts of FrogOS to get the results they desired.
I decided to pitch in; and fill the gaps that the community weren't able to complete. Lets start with the HTML.
Lets examine what's happening here. We are borrowing the concept of the template element to more easily allow us to edit the table in the future. To ensure full support across all browsers; we're going to assume a shim regardless of browser support. This is ultimately less code, and is easier to teach compared to the compilations of the TemplateElement api.
There is a lot happening here so lets break down the key concepts:
Events and triggers
We are using data converters to manipulate the data before we get to the functional part of our code. This separation provides focus and logical separation of concerns; overal providing more maintainable code. Another advantage, relevant in this scenario, is we can simplify the data structure before we have to use it.
Now we have some data, we need to display it. Previously, we created an "invisible" element. We are going to clone the element, and insert it into the table. By having a "physical" DOMTreeFragment, we can easily modify it at a future date, or conceptually re-style as we develop further.
Whilst iterating over the data and constructing the various rows, it makes sense to bind the event listeners we need. Remember, .click() and .onclick don't play well on iOS.
Lastly, we'll examine "Applying Scope". We've already touched on this in the previous example. In the following (and final) example, we'll add a custom closure to the done callback. In the future, this will be done automatically by the HTML Widget.
So there you have it; the individual components which make up my solution, the reasons I choose each component and how they all sit together. Continue through to the next page to see how I further develop the widget.