Using your Custom Snippet

Once you have customized a snippet, you then need to make the snippet available.

Specify a customized snippet for a specific application

If you only want to apply your customized snippet on a per application basis, you would override the resources for the snippets within the application's configuration.

<?xml version="1.0" encoding="UTF-8"?>
<APPLICATION Parent="defaultgwc">
  <EXECUTION>
    <PATH>/home/srcdir/app1</PATH>
    <MODULE>app1</MODULE>
  </EXECUTION>
  <OUTPUT>
    <MAP Id="DUA_HTML5">
      <THEME>
        <SNIPPET Id="Image">/home/srcdir/app1/Snippets/HTML5_Image.xhtml</SNIPPET>
      </THEME>
    </MAP>
    <MAP Id="DUA_AJAX>
      <THEME>
        <SNIPPET Id="Image">/home/srcdir/app1/Snippets/AJAX_Image.xhtml</SNIPPET>
      </THEME>
    </MAP>
  </OUTPUT>
</APPLICATION>

Specify a customized snippet for all applications

To have your customized snippet apply across all of your applications using a specific theme, you want it to be part of the defined set for the application theme.

You have three options.

Update the predefined WEB_APPLICATION_THEME_COMPONENTS to use your custom snippet file instead of the default.

...
<WEB_APPLICATION_THEME_COMPONENT Id="cpn.theme.html5.gwc">
     ...
  <SNIPPET Id="RadioGroup">$(res.path.tpl.html5)/RadioGroup.xhtml</SNIPPET>
  <!--Replacing SNIPPET Id="Image">$(res.path.tpl.html5)/Image.xhtml</SNIPPET-->
  <SNIPPET Id="Image">/home/srcdir/app1/Snippets/HTML5_Image.xhtml</SNIPPET>
  <SNIPPET Id="StaticLabel">$(res.path.tpl.html5)/StaticLabel.xhtml</SNIPPET>
     ...
</WEB_APPLICATION_THEME_COMPONENT>
 ...
<WEB_APPLICATION_THEME_COMPONENT Id="cpn.theme.ajax.gwc">
     ...
  <SNIPPET Id="RadioGroup">$(res.path.tpl.ajax)/RadioGroup.xhtml</SNIPPET>
  <!--Replacing SNIPPET Id="Image">$(res.path.tpl.ajax)/Image.xhtml</SNIPPET-->
  <SNIPPET Id="Image">/home/srcdir/app1/Snippets/AJAX_Image.xhtml</SNIPPET>
  <SNIPPET Id="StaticLabel">$(res.path.tpl.ajax)/Label.xhtml</SNIPPET>
     ...
</WEB_APPLICATION_THEME_COMPONENT>
 ...

Create new WEB_APPLICATION_THEME_COMPONENTS, then modify the auda.xrd to reference these components. To create new WEB_APPLICATION_THEME_COMPONENTS, you would copy and paste the content of an existing component and provide it with a unique name.

...
<WEB_APPLICATION_THEME_COMPONENT Id="cpn.theme.html5.gwc">
  ...
  <SNIPPET Id="RadioGroup">$(res.path.tpl.html5)/RadioGroup.xhtml</SNIPPET>
  <SNIPPET Id="Image">$(res.path.tpl.html5)/Image.xhtml</SNIPPET>
  <SNIPPET Id="StaticLabel">$(res.path.tpl.html5)/StaticLabel.xhtml</SNIPPET>
  ...
</WEB_APPLICATION_THEME_COMPONENT>
<WEB_APPLICATION_THEME_COMPONENT Id="cpn.theme.myhtml5.gwc">
  ...
  <SNIPPET Id="RadioGroup">$(res.path.tpl.html5)/RadioGroup.xhtml</SNIPPET>
  <SNIPPET Id="Image">/home/srcdir/app1/Snippets/HTML5_Image.xhtml</SNIPPET>
  <SNIPPET Id="StaticLabel">$(res.path.tpl.html5)/StaticLabel.xhtml</SNIPPET>
  ...
</WEB_APPLICATION_THEME_COMPONENT>

Replace the image snippet files in the respective template directories. For this solution, you would name your custom snippet file the same name as the snippet file provided during the installation.

If you choose option 1 or 2, you will need to modify the Genero Application Server configuration file with each upgrade. If you choose option 3, you will have to replace the relevant snippet files with your custom snippet files with each upgrade.

Specify a style for a custom snippet

Instead of changing the snippet for all the widgets of the same type. You can use a style to customize an instance of the widget.

For example, the file upload is enabled for Edit that has FileUpload style.

In your form definition file (shown here in the per file)
```
EDIT main1 = formonly.main1, STYLE="FileUpload";
```

In your configuration file (xcf)

<SNIPPET Id="Edit" Style="FileUpload">$(res.path.tpl.html5)/FileUpload.xhtml
</SNIPPET>

The main1 EDIT uses the FileUpload.xhtml snippet other edit widgets uses the default snippet Edit.xhtml.