Initial text for components

[akhilat9657589]

I have noticed that when we drag and drop a component in a page in touch ui mode, an initial text is coming up for each components. For example, when I include an image component in page, initially(if nothing is authored), a text "Image" is getting displayed. I would link to implement same in my custom component, can any one explain how to implement this? I have attached a sample screenshot.

Thanks in advance.

[smacdonald2008]

This is only script in the component. Consider the image component that displays Image. This is written to the component by the following line of bold code.

-%><%@ page import="com.day.cq.commons.Doctype,
    com.day.cq.wcm.api.components.DropTarget,
    com.day.cq.wcm.foundation.Image, com.day.cq.wcm.foundation.Placeholder" %><%
%><%@include file="/libs/foundation/global.jsp"%><%
        Image image = new Image(resource);
        image.setIsInUITouchMode(Placeholder.isAuthoringUIModeTouch(slingRequest));

    //drop target css class = dd prefix + name of the drop target in the edit config
   image.addCssClass(DropTarget.CSS_CLASS_PREFIX + "image");
 image.loadStyleData(currentStyle);
 image.setSelector(".img"); // use image script
       image.setDoctype(Doctype.fromRequest(request));
    // add design information if not default (i.e. for reference paras)
    if (!currentDesign.equals(resourceDesign)) {
         image.setSuffix(currentDesign.getId());
    }
    String divId = "cq-image-jsp-" + resource.getPath();
    %><div id="<%= xssAPI.encodeForHTMLAttr(divId) %>"><% image.draw(out); %></div><%
    %><cq:text property="jcr:description" placeholder="" tagName="small" escapeXml="true"/>
    
    <%@include file="/libs/foundation/components/image/tracking-js.jsp"%>