Please give me an overview of what a component, page, page component and template is in AEM. How are they related to each other. Please give example if possible.
Suggest any site to start as a beginner.
Your are mixing up technical and non-technical terms a bit. So I try to explain it in two ways: From an abstract, non-technical level, and from a technical point of view.
Abstract, non-technical explanation
The content of your AEM project mostly contains pages. A page is tied to an URL like www.example.com/products/teddybear. When a user opens this page he sees the content of the page. An image of the teddy bear, some descriptive text but also the header and footer of your page. This is where components come in. Content like the image, the text, the header and footer are all different components on that page.
Pages are composed of components.
Technical explanation
When developers try to implement pages and components they will need to create page templates, page components and components.
Page templates are basically XML files that define a few things about the page. For example the title of the page (e.g. "Content Page", "News Page", etc.) that is shown in the page creation dialog, a description, allowed parent pages (templates), allowed child pages (templates) and paths in your content where this page template can be used. Besides those things you can also define the basic structure of the page. Add a parsys, already add components to this parsys so those components are "hard wired" into every page you create.
Page components are the "implementation" of page templates. Here you can add the HTML for that page.
Components are the building blocks of pages. A component usually contains a JSP or HTML file that contains the HTML markup and maybe some business logic for that component.
Obviously, there are a lot more things to consider. But this should give you a basic overview over the relationship between all of those things.
Links:
Page Template documentation AEM 6.2
Component documentation AEM 6.2
Related
I have 2 pages in my web application. Lets say an home page and news feed page. When user clicks a hyperlink on home page then she/ he gets redirected to News feed page. I have 2 separate components in each page like
Home Page --- Header Component & Home Page Details Component.
News Feed Page --- Header Component & News Feed Details Component.
Both the pages has a common component Header. Can I prevent component reloading for the header component when users reaches the second page by clicking link on the first page.
By component reloading I mean the HTML code (HTL) code in the component should not be updated again with updated data instead for the second page, I just want to show the same data associated with header component in the first page.
A new page will always be loaded as a whole, because of just how [HTML] page loads work. What you are looking for is a single page application. They are possible with AEM but are a pain to design, especially the authoring mode behaviour.
This is a very common HTML pattern and possible duplicate of related questions such as: How to auto refresh a section of a page
There are two general approaches, the first being far preferred and supported in various frameworks, all based on JavaScript (AJAX):
Break page into different DIV tags that are independently updated (header separate from body sections, each loaded via AJAX such that only part of the page that has changed is updated).
Use iFrames such that effectively there are different pages - each loaded separately from the other.
I have created menu component, through which authors enter name, url field values.The component script renders the menu based on name, url entries.
Question : how to make this menu component common across all CQ5 pages, so it is not drag and dropped on each page.
Thank you,
Sri
ACS AEM Commons now supports this functionality without use of an iparsys - Shared Component Properties (http://adobe-consulting-services.github.io/acs-aem-commons/features/shared-component-properties.html)
Configure your menu with Shared and/or Global properties and you can simply template it directly onto all of your pages (no iparsys required). You can then edit the menu from any page on the site and it will by updated on all pages.
General Scala-JS page building advice needed. Most of the examples seem to be of the pattern where the main into which your single page application will go is between the tags in a landing page html file. How do you handle the need to insert something in the meta area of the dom? Do I need to render my landing page dynamically from the server to accomplish this? My specific need is to inject a script tag into the meta area of an already defined static html page. I'm using scalajs-react.
Generally you will want a server-rendered "root page" for the SPA. This allows you to dynamically compute proper cache busting file names for your script and stylesheet tags and to easily manage the cache expiration of the root page. Also, for proper html5 push state support you'll want to serve that page at every URL, which is easily done with a server side route.
One index page with tags to separate pages.
One long HTML5 index page is used as the template, with different sets of tags to separate header and footer bars on each page, using a clear file structure with all external files and links.
I know a jQuery can do that for you with index page, with different sets of tags to separate each pages. But I'm stuck there with jQuery with a limited CSS3 styling freedom.
I'm using mostly CSS3 to style the page and JQuery for features and functionality instead.
I find jQuery approach of tags are limited and I'm stuck with it.
Is there template examples or code available similiar to jQuery with header and footer and tags for individual pages on a same index.html, not as anchor tags within a page?
multipage layout?
http://jquerymobile.com/demos/1.2.0/docs/pages/multipage-template.html
http://jquerymobile.com/demos/1.2.0/docs/pages/page-anatomy.html
Theme Roller:
http://jquerymobile.com/themeroller/index.php
I'm building a Portlet for a site powered by Liferay EE 6.0 SP1 that will suggest related or otherwise interesting content depending on what the user is currently looking at.
For example, suppose the user is on a Page that contains a Web Content Display portlet that is displaying Web Content Article 5. My portlet will contain HTML links to the Pages where the user can view Web Content Articles 6 and 7 (which contain content that is determined to be similar to the content in Web Content 5).
The problem comes in because I don't want my portlet to display HTML links to Web Content Articles 6 and 7 (assuming such a concept is even valid), I want my portlet to display links to the Pages on which those items are displayed (i.e., links to the Pages that contain Web Content Display portlets configured to show those Web Content Articles).
Is there a way to:
Associate a Web Content Article with a Page so that if I have the former, I can fetch the latter?
Or, determine the page(s) that contain portlets that display a Web Content Article?
Alternatively, if there were a way to get all portlet instances associated with a particular page, that might lead to a solution as well.
One approach to this problem appears to be to add a "Link to Page" control to the Web Content Article's Structure. Content managers can use this to create many-to-one relationships between Web Content Articles and Pages.
This solution is problematic, though, because there is no constraint on what page is selected when the Web Content is edited.
For example, a content manager might create a Web Content Article entitled "Our History", but specify the "Products" page as the value of that Article's "Link to Page" control. When the related content portlet renders the "Our History" Article, it will create a hyperlink to the "Products" page which in this case does not display the "Our History" Article anywhere.
Arguably, this could be considered a feature, but perhaps there is a better way to do it.
I afraid this is a feature that does not exist yet on Liferay. At least on Liferay pages there is an feature request on the very same topic. Dates on the discussion are on March 2011 so probably something is coming soon :)
Another solution that we are currently considering is to create a custom view mode for the portal (i.e., "VIEW", "PRINT", etc.) called "XML". When the portal detects that the browser is requesting the XML mode (similarly to how Sitecore detects which device to use), it bypasses the theme, and all portlets that support this XML mode would render their content in XML format.
The output might look something like this:
<?xml version="1.0" encoding="utf-8" ?>
<portal>
<portlet id="..." title="..." ...>
<JournalArticle>
<uuid_>...</uuid_>
...
</JournalArticle>
...
</portlet>
</portal>
A periodic process would then crawl the site in XML mode and update a Lucene index.
The obvious problem with this approach is that it requires that every portlet we use on the site be custom-developed. For various reasons (some would call it an over-ambitious creative department; I call it a significantly deficient existing feature set), we might end up having to go this route anyway.