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"
Yes please.

Also (and perhaps this is counter intuitive based on my comments above re: Sightly) - could you change the datasource to be a JSP? That would be more consistent with the product (mostly these should be Java-based, but that's not possible for us right now due to a cross-version compatibility issue).

I would also like to see a placeholder in the component if the image or transfomer isn't selected. I'm not sure if the absense of any of the other fields should trigger a placeholder.