Core idea: For search engine visibility, controls can be created from static HTML pages created by any means (an HTML authoring tool, a CMS, etc.) by marking up HTML tags and then “rehydrating” them into live controls.

Search engines only crawl static HTML content, not live JavaScript controls. For pages which are generally document-like, you can achieve SEO (Search Engine Optimization) benefits by writing HTML in normal means and including extra information that can be used later to quickly create a corresponding collection of live controls. This process is called “rehydration”, and is accomplished with a QuickUI function called rehydrate().

The rehydrate() function looks for any elements with the data attribute “data-control”. The value of this attribute should be the string name of a QuickUI control class; this will be the class of the control from the HTML element.

There are three ways to set properties on a control during rehydration:

1. A data-foo attribute on the tag will pass the value of that attribute to the control’s foo() property. E.g., in the demo, data-paragraphs=”3” will invoke paragraphs(3) on the newly-created LoremIpsum control.
2. To set complex properties in static HTML, create a child and set its “data-property” attribute to the string name of the property you want to set. In the demo, the first child, with data-property=”heading”, will have its HTML contents passed to the control’s heading() setter.
3. Any remaining child elements (i.e., those without a data-property attribute) will be passed to the new control’s content() property.

The demo code populates an element with a set of static HTML div elements, then invokes the QuickUI rehydrate() function to turn these into live controls. For demo purposes, the static elements are added through JavaScript; in normal practice, you would author the static elements in whatever manner you currently used to create HTML content: an HTML editor, a content management system, etc.

Your goal: Update the static HTML so that the Cancel button’s disabled() property is set to true when the control is rehydrated. Use either method #1 or method #2 above.