Feature: "Named Transform Image" Component

The screenshot should clarify the title:

![screen shot 2014-11-02 at 19 53 59](https://cloud.githubusercontent.com/assets/901354/4876366/a4f1b694-62c1-11e4-9420-dc5a549c1d1b.png)

Goal: authors are able to select a named transform config in an image component's edit dialog. Then, the image is delivered by the Named Transform Image Servlet.

In the Touch UI, we can leverage the datasource feature to get the list of available transforms and show them in the authoring dialog. Starting from there, it should be easy to build more complex components for project-specific requirements. I am thinking of features like a HTML5 Picture Component, letting authors choose a transform for different screen resolutions, i.e. edit dialog for  [``srcset`` and ``media`` syntax][1].

I've scrambled together a quick proof-of-concept (see below).

Any ideas or feedback on that? If you like it, I'll write up the code and open a pull request.


``/apps/wip/components/image-transformed/_cq_dialog.xml``
```xml
<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
    jcr:primaryType="nt:unstructured"
    jcr:title="Image"
    sling:resourceType="cq/gui/components/authoring/dialog">
    <content
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/foundation/container">
        <layout
            jcr:primaryType="nt:unstructured"
            sling:resourceType="granite/ui/components/foundation/layouts/tabs"
            type="nav"/>
        <items jcr:primaryType="nt:unstructured">

        	<!-- .. original tabs from wcm/foundation/components/image .. -->

            <appearance
                jcr:primaryType="nt:unstructured"
                jcr:title="Appearance"
                sling:resourceType="granite/ui/components/foundation/section">
                <layout
                    jcr:primaryType="nt:unstructured"
                    sling:resourceType="granite/ui/components/foundation/layouts/fixedcolumns"/>
                <items jcr:primaryType="nt:unstructured">
                    <column
                        jcr:primaryType="nt:unstructured"
                        sling:resourceType="granite/ui/components/foundation/container">
                        <items jcr:primaryType="nt:unstructured">
                            <transform
                                jcr:primaryType="nt:unstructured"
                                sling:resourceType="granite/ui/components/foundation/form/select"
                                fieldDescription="Auslieferungsgröße des Bilds (Breite in Pixel)"
                                fieldLabel="Named Image Transform"
                                name="./transform">
                                <datasource
                                    jcr:primaryType="nt:unstructured"
                                    sling:resourceType="wip/components/image-transformed/datasource"/>
                            </transform>
                        </items>
                    </column>
                </items>
            </appearance>
        </items>
    </content>
</jcr:root>
```

``apps/wip/components/datasource/datasource.esp``
```javascript
<%
/* global sling */
var SimpleDataSource = Packages.com.adobe.granite.ui.components.ds.SimpleDataSource
  , ArrayList = Packages.java.util.ArrayList
  , HashMap = Packages.java.util.HashMap
  , ValueMapResource = Packages.com.adobe.granite.ui.components.ds.ValueMapResource
  , ResourceMetadata = Packages.org.apache.sling.api.resource.ResourceMetadata
  , ValueMapDecorator = Packages.org.apache.sling.api.wrappers.ValueMapDecorator


var configAdmin = sling.getService(Packages.org.osgi.service.cm.ConfigurationAdmin)


var filterName = 'service.factoryPid'
var filterValue = 'com.adobe.acs.commons.images.impl.NamedImageTransformerImpl'
var configs = configAdmin.listConfigurations('(' + filterName + '=' + filterValue + ')')


var resourceList = new ArrayList()
for (var i = 0, len = configs.length; i < len; i++) {
  var transformName = configs[i].getProperties().get('name')

  var map = {
    'value': transformName,
    'text': transformName
  }

  var valMapResource = new ValueMapResource(resource.getResourceResolver(), new ResourceMetadata(), "", new ValueMapDecorator(map));
  resourceList.add(valMapResource);
}

request.setAttribute('com.adobe.granite.ui.components.ds.DataSource', new SimpleDataSource(resourceList.iterator()));

%>
```

``/apps/wip/components/image-transformed/image-transformed.html``
```html
<img src="${resource.path}.transform/${properties.transform}/image.png" >
```

[1]: http://scottjehl.github.io/picturefill/#media-and-srcset "picturefill"