how to run a java script function which belongs to an external plugin after the DOM gets loaded in
adobe Experience Manager ?
currently it run in console but not on local file.
Please have a look at this Adobe Helpx Articles:- https://helpx.adobe.com/experience-manager/using/custom-carousel-components.html
//Creating Custom Carousel components for Adobe Experience Manager
It covers, how to use third party Javascript/JQuery plugins in AEM components.
[From Article] Add the JQuery Carousel API to a CQ:ClientLibraryFolder node
You add CSS files and JQuery framework files to a cq:ClientLibraryFolder node to define the style of the client JSP. The JQuery framework file that is added is named jquery-1.6.3.min.js.
In addition to the JQuery framework file, add the JQuery Carousel API library. This library enables you to create a CQ widget that retrieves images from the CQ DAM and displays the images within a carousel.
You can download the Carousel API library from the following URL:
http://www.catchmyfame.com/2009/08/27/jquery-infinite-carousel-plugin-1-2-released/
You need to retrieve the following JS file from the downloaded file: jquery.infinitecarousel.js. To add CSS files and JQuery framework files to your component, add a cq:ClientLibraryFolder node to your component. After you create the node, set properties that allow the JSP script to find the CSS files and the JQuery library files.
To add the JQuery framework, add a new node named clientlibs to your component (as discussed later). Add these two properties to this node.
Name Type Value
dependencies String[] cq.jquery
categories String[] jquerysamples
The dependencies property informs CQ to include the CSS files and JQuery libraries in the page. The categories property informs CQ which clientlibs must be included.
After you create the Clientlibs folder, add the stlye.css file, the JQuery library files, and two map text files.
Text files
You have to add a text file to the clientlibs folder that maps to the JS files. The name of the text file is: js.txt. The js.txt file contains the JS file names: jquery-1.6.3.min.js and jquery.infinitecarousel.js.
Add the files to the ClientLibs folder
Right-click /apps/carousel/components then select New, Node.
Make sure that the node type is cq:ClientLibraryFolder and name the node clientlibs.
Right click on clientlibs and select Properties. Add the two properties specified in the previous table to the node.
On your file system, navigate to the folder where the JQuery JS files are located. Drag and drop the JS files to the clientlibs node by using CRXDE.
On your file system, navigate where you placed the CSS files. Drag and drop the CSS files to the clientlibs folder by using CRXDE.
Add a TXT file to the clientlibs folder named js.txt. Add the content specified in this section.
Some More Reference links are:-
Link:- http://help-forums.adobe.com/content/adobeforums/en/experience-manager-forum/adobe-experience-manager.topic.html/forum__3vab-is_there_anytoolre.html
Link:- http://help-forums.adobe.com/content/adobeforums/en/experience-manager-forum/adobe-experience-manager.topic.html/forum__rwhk-i_have_a_requirement.html
Link:- http://help-forums.adobe.com/content/adobeforums/en/experience-manager-forum/adobe-experience-manager.topic.html/forum__6l3s-i_would_liketocrea.html
I hope this will help you.
Thanks and Regards
Kautuk Sahni
Related
I have a form with an Upload file field on a Kentico 9 website. Form files are currently stored in the default folder (BizFormFiles). I would like to store those files in a place where I can easily manage and delete them on the CMS. Would it be possible to store them automatically in a media library folder?
Thanks!
No, as far as I'm aware. It can't be configured this way. The only way to make this manageable via CMS interface is to develop a custom module with a custom interface.
I have created a new media library in my instance and then I have used that folder path as the custom form files folder in the Settings.
The form files are then placed inside this library folder in a subfolder. And then, I can also see the file in the Media library UI - just with the yellow exclamation mark that the files was not "imported" into the Kentico DB.
The only downside I see here is multi-site environment. While the media library is assigned to a particular site, the form files from all sites will be stored in that media library folder.
I am using Adobe Experience Manager (AEM) 6.3. In the basic structure, components folder contains content and structure folders.
In both the folders we put components. What is the difference in both the folders?
In simple terms, Components which are responsible for rendering the skeleton or the outermost part of the page are placed in the structure folder where as components which render only parts of the page are placed in content folder.
Note that this is just a best practice recommendation from Adobe, you can maintain folders with custom names as well.
In older versions of AEM, components in structure folder were placed in page folder and were called page components.
High-level flow of how structure and content components integrate in a page -
To create a page in AEM, you'll have to select a template.
A template is first created in /conf folder. Templates are usually backed up(sling:resourceType of the template points to structure component) by a structure component to render the initial view. Common structure components includes header, footer, body which usually contains container components like parsys or responsivegrid.
A page is then created using the template created above and the content author uses functional components (components in content) to design the page - drag and drop from components side rail or sidekick in previous versions.
i'm attempting to update the UGC toolbar for a Communities implementation. Based on this: https://helpx.adobe.com/experience-manager/6-3/communities/using/rte.html I can update the toolbar. Ideally we'd like the ckrte.js to site within our code base. I've tried within our clientlibs in our project folder but that didn't work.
Can this file live local, or will it only work in CRXDE?
You can copy the file and add it to your code base and ensure that it loads after the out of the box clientlib has loaded. They register the rte as "ckeditor" in the JS, your code will override the previous registration. Saves the hassle of modifying the original file that might get changed during upgrades or service pack installations.
I've created a website in AEM and created a design for that website. Initially the design included a folder with images and a css file called static.css. When I specify the cq:designPath on a node in my website's content, the static.css file gets included automatically (/etc/designs/mywebsite/static.css); AEM also tries to include another file (/etc/designs/mywebsite.css). If the static.css file doesn't exist, it will NOT get included, but the mywebsite.css file gets included ('ed to) regardless of whether or not it exists. The documentation I have found (see here) suggests that you can include any number of css files in your design, but when I try to add addition css files to the /etc/designs/mywebsite/ folder, none of them get included. Am I missing something here? Should all the css files under /etc/designs/mywebsite/ be included in the site, or is it intended that only /etc/designs/mywebsite.css and /etc/designs/mywebsite/static.css are included automatically and any additional files need to be included manually?
The .css extension on the design node invokes a servlet (/libs/wcm/core/components/designer/designer.css.java) which dynamically generates CSS based on various nodes from the design's jcr:content node into CSS.
When a content author switches to design mode (WCMMode=Design), the edit dialogs save to the either the currently-applied design or the default (/etc/designs/default) design's jcr:content node. The template used to create the page, along with the path of the component being edited will determine the path under the jcr:content node where the design settings are saved.
For instance, if you edit an out-of-the-box parsys component you will see an option to editing the "Cell Padding"
If you enter a CSS padding value into the text box and click OK, the value will be saved to a div.padding property at the following location:
/etc/designs/mydesign/jcr:content/mytemplate/par/section[div.padding="30px"]
The servlet will then render the following in the design CSS:
.mytemplate .par div.section {
padding: 8px;
}
The class that actually converts the nodes to CSS is the CSSWriter in the cq-wcm-core jar.
For more information, see a similar question I asked a while back:
In Adobe AEM, how does the parsys component inject styles into the design css file?
Just a short correction. Actually it is not: /etc/designs/mydesign/jcr:content/mytemplate but instead /etc/designs/mydesign/jcr:content/my_page_component
That means if two pages have different templates but share the same page rendering component, then they will share the same design configuration and their components will write at the same location in Design Mode.
I made a custom html file for my Unity web project. Though after building my project, it opens the default pre-made one. Is there a way to make Unity open my own html file instead of the default one?
You're looking for the Web Player Templates manual page.
In your Assets folder, create a folder named WebPlayerTemplates, and put your template in there. You'll need an HTML file. To help make this slightly easier, Unity will look in that HTML for certain tokens that it can replace with data from the project.
For example, one such tag is %UNITY_WEB_PATH%, which will be replaced with the path to your built project file.
Some tags include:
UNITY_WEB_NAME Name of the webplayer.
UNITY_WIDTH UNITY_HEIGHT Onscreen width and height of the player in
pixels.
UNITY_WEB_PATH Local path to the webplayer file.
UNITY_UNITYOBJECT_URL In the usual case where the page will download
UnityObject2.js from the Unity’s website (ie, the Offline Deployment
option is disabled), this tag will provide the download URL.
UNITY_UNITYOBJECT_DEPENDENCIES The UnityObject2.js have dependencies
and this tag will be replaced with the needed dependencies for it to
work properly.
In every deployment I've seen, the WebPlayer plugin is is launched via JavaScript, by instantiating a UnityObject2 and calling its initPlugin method:
var u = new UnityObject2();
u.initPlugin(jQuery("#unityPlayer")[0], "Example.unity3d");
The above assumes that you have a div with id #unityPlayer, and that Example.unity3d is a valid path to your Unity build file.
In practice, though, I recommend working from Unity's generated HTML files; they include some failsafes for cases where the WebPlayer plugin isn't installed or fails to load. The manual page linked above also has HTML source examples which include some of those special tags.
UnityObject2 does have some advanced features, which are also documented in the manual. If your game needs to communicate with the outer web page, that is also possible.