how to create componet text2Image
Hi
You use-case is not very clear, please explain what exactly you want to achieve.
As far as i got your use-case, you want to have a component that must have 2 image drag drop fields and one text fields, and somehow you would like to convert these 3 information a image and use it.
To achieve this:-
Component Dialog with 2 Image :- http://experience-aem.blogspot.in/2015/08/aem-61-touch-ui-fill-dialog-fields-with-default-values-on-...
// Here in this community article, you can drat drop image into a dialog box, but as you stated that you would want to have 2 images, you can just copy and paste the node "/apps/touchui-dialog-field-fill-default/sample-image-component/cq:dialog/content/items/paintings/items/column/items/fieldset/items/column/items/painting".
Now, you can use the information of dialog fields into a Java service/Component link:-
Link:- http://aem.matelli.org/fetching-properties-from-dialogs/
// You can read it as JSP level and at JAVA level,
JSP:-
<%
String title = properties.get("jcr:title", "default title");
String text = properties.get("jcr:text", "default text");
//String title = properties.get("jcr:title", String.class); //defaults to null
%>
Title: <%= title %> <br/>
Text: <%= text %> <br/>
JAVA:-
1. Write a java class for this component by extending WCMUse or WCMUsePojo and override the activate() method.
2. Here in activate() method you can access the dialog values.
3. Once you get the dialog values, you can invoke the servlet here
4. Finally, you can set those values back to java variables and you can access these values back in component html/jsp file
5. Use sightly data block to get the instance of this java class. Once authors author the content and hit on "OK" then it will go to the activate() method.
Or Querying JCR :- https://helpx.adobe.com/experience-manager/using/querying-experience-manager-data-using1.html
Last you can use Text to Image Conversion library:-
Link:- http://www.java2s.com/Code/Jar/t/Downloadtext2image009sourcesjar.htm
Link:- http://cufon.shoqolate.com/generate/
This way you can achieve the needful.
If you want to convert text to image as client side then you can do this using a hidden canvas element and converting that to an image using toDataURL.
Example Demo :- http://jsfiddle.net/amaan/WxmQR/1/
I hope this would help you.
Thanks and Regards
Kautuk Sahni
5. Use sightly data block to get the instance of this java class. Once authors author the content and hit on "OK" then it will go to the activate() method.
Kautuk Sahni
wrote...
Hi
You use-case is not very clear, please explain what exactly you want to achieve.
As far as i got your use-case, you want to have a component that must have 2 image drag drop fields and one text fields, and somehow you would like to convert these 3 information a image and use it.
To achieve this:-
Component Dialog with 2 Image :- http://experience-aem.blogspot.in/2015/08/aem-61-touch-ui-fill-dialog-fields-with-default-values-on-...
// Here in this community article, you can drat drop image into a dialog box, but as you stated that you would want to have 2 images, you can just copy and paste the node "/apps/touchui-dialog-field-fill-default/sample-image-component/cq:dialog/content/items/paintings/items/column/items/fieldset/items/column/items/painting".
Now, you can use the information of dialog fields into a Java service/Component link:-
Link:- http://aem.matelli.org/fetching-properties-from-dialogs/
// You can read it as JSP level and at JAVA level,
JSP:-
<%
String title = properties.get("jcr:title", "default title");
String text = properties.get("jcr:text", "default text");
//String title = properties.get("jcr:title", String.class); //defaults to null
%>
Title: <%= title %> <br/>
Text: <%= text %> <br/>
JAVA:-
1. Write a java class for this component by extending WCMUse or WCMUsePojo and override the activate() method.
2. Here in activate() method you can access the dialog values.
3. Once you get the dialog values, you can invoke the servlet here
4. Finally, you can set those values back to java variables and you can access these values back in component html/jsp file
5. Use sightly data block to get the instance of this java class. Once authors author the content and hit on "OK" then it will go to the activate() method.
Or Querying JCR :- https://helpx.adobe.com/experience-manager/using/querying-experience-manager-data-using1.html
Last you can use Text to Image Conversion library:-
Link:- http://www.java2s.com/Code/Jar/t/Downloadtext2image009sourcesjar.htm
Link:- http://cufon.shoqolate.com/generate/
This way you can achieve the needful.
If you want to convert text to image as client side then you can do this using a hidden canvas element and converting that to an image using toDataURL.
Example Demo :- http://jsfiddle.net/amaan/WxmQR/1/
I hope this would help you.
Thanks and Regards
Kautuk Sahni
5. Use sightly data block to get the instance of this java class. Once authors author the content and hit on "OK" then it will go to the activate() method.
wrote...
Hi,
I've to create a component with 2 images and a text whit aem 6.2.
This component must be rendered with a java class (not jsp and not js).
the two images must have drag and drop functionality.
Could someone help me
Hi,
The problem in the thread persist but i'm succeeded to read the thread.
The in the title is only the number of the images that i put into component.
I'm new in AEM and i would to write a class java, extending WCMUse, to render the component.
thanks
