<commit_before># Minimum Custom Class

This page, along with [Custom Interactive Classes](CustomIClasses.md) explain how to
create custom classes, how they work, and the conventions to follow for successful
custom classes.

To create a new class, especially an input form widget, there are a few steps that must be
taken to ensure the new widget is loaded and recognized.

## Steps for Creating a New Class

### Create a Template to Build The HTML.

This example assumes that there will be a new XSL stylesheet for the new class.

To create the new form widget, it is necessary to create a template of mode **construct_input**
that matches a specific field.  Notice in the stylesheet fragment below how the template matches
a field of type *newtype*:

Example file *newtype.xsl*:
~~~xsl
<?xml version="1.0" encoding="UTF-8" ?>
<xsl:stylesheet
   version="1.0"
   xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
   xmlns="http://www.w3.org/1999/xhtml"
   xmlns:html="http://www.w3.org/1999/xhtml"
   exclude-result-prefixes="html">

    <xsl:output method="xml"
         doctype-public="-//W3C//DTD XHTML 1.0 Strict//EN"
         doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
         version="1.0"
         indent="yes"
         omit-xml-declaration="yes"
         encoding="UTF-8"/>

    <xsl:template match="field[@type='newtype']" mode="construct_input">
       <xsl:param name="data" />

       <xsl:element name="div">
          <xsl:attribute name="class">newtype</xsl:attribute>
          <xsl:attribute name="data-sfw-class">newtype</xsl:attribute>
          <xsl:attribute name="data-sfw-input">input</xsl:attribute>
          .
          .
       </xsl:element>


       .
       .
       .
    </xsl:template>

</xsl:stylesheet>
~~~

Within the *construct_input* template, you will add the parts necessary to build the
control.  That might mean a *table*, with *tr* and *td* elements, or a *ul* with
*li* elements.  They can be in the template, or called from the template.

In the example above, a *div* element is created.  For flexibility in adding attributes,
It is better to use *xsl:element* rather than the element itself.

The three attributes of the example *div* element each contribute to the proper handling
of the class:

- **class="newtype"** is included to signal to a CSS stylesheet how to display the
  class.
- **data-sfw-class="newtype"** This attribute identifies the HTML element that defines
  it as the base of the custom class.  The value of the attribute is matched to the
  name of a class in the **SFW.types** array (see below).
- **data-sfw-input="input"** flags the element as an input element that is likely to be
  hosted by another *data-sfw-class* element.  This attribute is important to prevent
  the *data-sfw-class* attribute of the hosting element from overwriting the class
  name of the custom input class as the framework scans through its ancestors.

As an example of the possible need for additional attributes, and as justification for the
more verbose *xsl:element* construction, you might want to add the following:

~~~xsl
          <xsl:apply-templates select="." mode="add_on_line_click_attribute" />
~~~

to add the value of an `on_line_click` SRM instruction to the anchor element in order to use
`tbase.prototype.get_line_click_info()`.

### Create a Javascript Module

The new class must be registered into the *SFW.types* array.  This is done with the command
`SFW.derive()` as described below.

The first line in the following *_init()* function will delay until the **SFW** object has<commit_msg>Added advice to include a tabindex attribute to enable the control to receive focus.<commit_after># Minimum Custom Class

This page, along with [Custom Interactive Classes](CustomIClasses.md) explain how to
create custom classes, how they work, and the conventions to follow for successful
custom classes.

To create a new class, especially an input form widget, there are a few steps that must be
taken to ensure the new widget is loaded and recognized.

## Steps for Creating a New Class

### Create a Template to Build The HTML.

This example assumes that there will be a new XSL stylesheet for the new class.

To create the new form widget, it is necessary to create a template of mode **construct_input**
that matches a specific field.  Notice in the stylesheet fragment below how the template matches
a field of type *newtype*:

Example file *newtype.xsl*:
~~~xsl
<?xml version="1.0" encoding="UTF-8" ?>
<xsl:stylesheet
   version="1.0"
   xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
   xmlns="http://www.w3.org/1999/xhtml"
   xmlns:html="http://www.w3.org/1999/xhtml"
   exclude-result-prefixes="html">

    <xsl:output method="xml"
         doctype-public="-//W3C//DTD XHTML 1.0 Strict//EN"
         doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
         version="1.0"
         indent="yes"
         omit-xml-declaration="yes"
         encoding="UTF-8"/>

    <xsl:template match="field[@type='newtype']" mode="construct_input">
       <xsl:param name="data" />

       <xsl:element name="div">
          <xsl:attribute name="class">newtype</xsl:attribute>
          <xsl:attribute name="data-sfw-class">newtype</xsl:attribute>
          <xsl:attribute name="data-sfw-input">input</xsl:attribute>
          <xsl:attribute name="tabindex">0</xsl:attribute>
          .
          .
       </xsl:element>


       .
       .
       .
    </xsl:template>

</xsl:stylesheet>
~~~

Within the *construct_input* template, you will add the parts necessary to build the
control.  That might mean a *table*, with *tr* and *td* elements, or a *ul* with
*li* elements.  They can be in the template, or called from the template.

In the example above, a *div* element is created.  For flexibility in adding attributes,
It is better to use *xsl:element* rather than the element itself.

The three attributes of the example *div* element each contribute to the proper handling
of the class:

- **class="newtype"** is included to signal to a CSS stylesheet how to display the
  class.
- **data-sfw-class="newtype"** This attribute identifies the HTML element that defines
  it as the base of the custom class.  The value of the attribute is matched to the
  name of a class in the **SFW.types** array (see below).
- **data-sfw-input="input"** flags the element as an input element that is likely to be
  hosted by another *data-sfw-class* element.  This attribute is important to prevent
  the *data-sfw-class* attribute of the hosting element from overwriting the class
  name of the custom input class as the framework scans through its ancestors.
- **tabindex** is necessary to make it possible for the custom input element to receive
  focus, which, in turn, is necessary for the object to respond to a mouse-click.

As an example of the possible need for additional attributes, and as justification for the
more verbose *xsl:element* construction, you might want to add the following:

~~~xsl
          <xsl:apply-templates select="." mode="add_on_line_click_attribute" />
~~~

to add the value of an `on_line_click` SRM instruction to the anchor element in order to use
`tbase.prototype.get_line_click_info()`.

### Create a Javascript Module

The new class must be registered into the *SFW.types* array.  This is done with the command
`SFW.derive()` as described below.

The first line in the following *_init()* function will delay until the **SFW** object has
{'fraction_non_alphanumeric': 0.09946452476572959, 'fraction_numerical': 0.007898259705488622, 'mean_word_length': 3.646144278606965, 'pattern_counts': {'":': 0, '<': 37, '<?xml version=': 2, '>': 37, 'https://': 0, 'lorem ipsum': 0, 'www.': 8, 'xml': 12}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1056397', 'n_tokens_mistral': 2217, 'n_tokens_neox': 2086, 'n_words': 900}