Fun With Web Components 1

Fun With Web Components 1

Web Components is an exciting new feature that enables developers to consume and author reusable elements. Imagine hiding away all the <div> wrappers, styles and javascript we write to create custom widgets, such as suggest boxes and accordions, into separate and encapsulated components using native browser capabilities. 

A great video on Web Components is here.

Ingredients

• Git client: (I like the one from Github) http://eclipse.github.com/
• Chrome latest: http://www.google.com/chrome/
• A web server (Always good to have and a nice way to get around Chrome’s default security settings preventing cross origin requests on your local file system)
• Dimitri Glazkov’s Web Components Polyfill: https://github.com/dglazkov/Web-Components-Polyfill

Setting up is a piece of cake

1. Enable Shadow DOM and <style scoped="scoped">
2. Go to chrome://flags/
3. Enable Shadow DOM and <style scoped>
4. Copy the project to your web server and load up one of the example pages in Web-Components-Polyfill/samples

Now to experiment...

Simplify with an XML data model - Part 4

Part 4: Client-side data validation using Schematron.

Data validation prevents data corruption and security risks. This often goes beyond simple data type checking of strings and integers, and can consist of complex business rules such as “email address must be valid” or “if the user does not enter a zip code, they must enter a city and state”.

Data must be validated on the server side no matter what, since rich javascript applications can be hacked and manual http requests can be made to the server. Data should also be validated on the client before it is sent to the server. This makes for a better user experience where errors are surfaced to the user before they are sent to the server. Client validation takes load off of the server and makes for a more responsive application. Because it is a nice thing to do validation on both the client and the server, it would be ideal to define these validation rules once and use them in both places.

Interactive example 4:

Simplify with an XML data model - Part 3

Part 3: Allowing binding to missing XML nodes.





You might notice that if you try to bind to an element that does not exist in the model, you will get an error in the call to evaluate. This adds some complexity and burden so we will make a function that ensures the bound path exists in the XML DOM. Ensuring the xpath makes development much easier.

Simplify with an XML data model - Part 2

Part 2: Setting the form values from XML (Bi-directional binding).

Binding should work two ways, updating the model from the form fields and updating the form fields from the model. Let’s update the code so the form is populated with data when the page is loaded.

Simplify with an XML data model - Part 1

Part 1: Binding from XML to the HTML form.

When doing data binding, you typically need to map a field in the UI with some part of the data model. XPath is a terrific solution to this. All you need is an XPath expression that evaluates to a single element or attribute node. This allows for bidirectional binding between HTML <form> elements and XML nodes. Binding to read-only HTML elements can be done with more complex XPath expressions and involve several nodes and functions, e.g. concatenating several fields together. It might make sense to allow for one input to map to many nodes in the future.


Interactive Example:

Simplify with an XML data model - Introduction

A system for XML data binding in the browser with XPath and client side validation using Schematron and XSLT.

Introduction

As a Java developer I find myself wondering why I spend so much time dealing with data models. For each application I work on, my time is mostly spent creating a data model in the database, a corresponding data model business object in Java code, and form value objects to collect data from web pages. Then I have to write the code that copies all the fields between models. Then there is the problem of validation rules, which require yet another framework.

After working with web services and JAXB, I started to wonder if there was an easier and more flexible way of representing all of this data in XML and skipping all the myriad Java data model classes. It turns out that XML makes for a great data model. It can represent any type of data, is easy to write, access, transform and exchange. It’s the X in AJAX for crying out loud!

Dealing with cyclic data in JAXB

JAXB is a great tool for converting Java data into XML. It does have some shortcomings, one of these is cyclic references. XML is great for tree structures, but any cycles will cause problems as your XML would end up infinitely nesting. There are some tricks explained here, but I was still having trouble marshaling my node data. I ended up needing to use a combination of XmlID + XmlIDREF, XmlTransient, and a wrapping object that transforms the cyclic tree into a list of all nodes in the tree and a reference to the root node.