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
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.
We are on AEM 6.1 and we have personalized content on the home page of our website based on the user profile attributes. Section of page is personalized using the out of box teaser functionality where we can browse the campaigns. When the home page gets loaded, I believe it makes the ajax call to load the personalized content from campaigns. What i need to confirm is when it loads the page, content is cached in dispatcher, and section of page which comes from campaigns, gets cached in /content/campaigns directory. if this is true then every personalized page will be pulled from cq publisher first time and other times this will be served from dispatcher. So in overall, home page content will be cached in two places. one is /content/homepage(regular content) and personalized content in /content/campaigns in dispatcher. And when home page request comes again, cq will collate the content from above two dispatcher locations and show the final page content on home page.
Can somebody please confirm this?
Yes , the OOTB teaser component loads the campaigns via javascript. Hence the page can be cached and it would still load the right campaigns. If you check the source of a page which has the teaser component , you'll see that it'll have a call to a function called initializeTeaserLoader with details of the campaigns to be displayed in that location and the path to the associated user segments. The campaign to be displayed is then fetched via an ajax call.
Could anyone explain me what is the Wicket's page versioning useful for? There is an article in the FAQ that is related to this topic:
Wicket stores versions of pages to support the browser's back button.
Suppose you have a paging ListView with links in the ListItems, and you've clicked through to display the third page of items. On the third page, you click the link to view the details page for that item. Now, the currently available state on the server is that you were on page 3 when you clicked the link. Then you click the browser's back button twice (i.e. back to list page 3, then back to list page 2, but all in the browser). While you're on page 2, the server state is that you're on page 3. Without versioning, clicking on a ListItem link on page 2 would actually take you to the details page for an item on page 3.
But unfortunately I don't understand it at all. When I click on a ListItem on page 2, I would expect to get to the page defined by that Link - details page for the item. Why should I get on the details page of the item on page 3?
Moreover, when one press the back button in a browser, it doesn't call the server at all. Is it right?
So how this versioning works?
No, the server is not notified when you press the back button. I'll try to explain what happens in the example:
You access you application for the first time. On the server, a page 'list' is created, used to render the HTML you see in your browser, and stored as page v1. You see the first 10 items of the list.
You click the 'next' link, and it refers to a link in page v1. On the server, page v1 is loaded, the link logic is executed (to advance the pagination), the page is used to render HTML, and is stored as page v2. You see items from 11 to 20.
You click the 'next' link, and it refers to a link in page v2. On the server, page v2 is loaded, the link logic is executed (to advance the pagination), the page is used to render HTML, and is stored as page v3. You see items from 21 to 30.
You click the 'details' link for item 25, and it refers to the link for the 5th item in page v3 (this page only shows 10 items, and the link, even if it refers to the 25th item in the complete list, in this page it's just the 5th). On the server, page v3 is loaded, its logic is executed, page 'detail' is created, stored as page v4, and you are redirected to it. Your browser requests page v4, the server loads it, and uses it to render your HTML page (no new version is stored, since it's just rendering). You see the details for item 25.
You click the browser's 'back' button 2 times, and see page 'list' showing items 11 to 20, referring to page v2 (list). Then you click a link 'details' for item 13. On the server, page v2 is loaded (not v4, the last one executed), since the link clicked pointed to this page version. Then, the 3rd item link's logic is executed, a new page 'details' is created, stored as page v5, and you are redirected to it. The browser requests page v5, the server loads it, and uses it to render your HTML. You see the details for item 3.
All this may seem strange if you come from a Struts-like background, where you always just put the item id or which page to show as a link parameter. In Wicket, the usual case is to store all state in the server, and navigation is not done by the client (direct link to another page passing parameters), but in the server. A link just asks the server to execute code in a page object version, the navigation is done all server-side.
You could argue that the Struts style is simpler (and you can do it in Wicket too, it just isn't optimal), but keeping the state only in the server has many advantages. Fist, once you get used to it, it's actually much easier. No need to add every single param to a pagination link (search parameters, first item, page length, sorting column, order direction, etc.). Also, you avoid many security issues (you can't just change the URL id param to an arbitrary value and access other users' data), and can control everything from Java code instead of mixed Java-Javascript (you still can do it if you want, though).
My requirement is to integrate my client webpage and facebook using the Flike button.
I have an html page which is used for all the products. Based on the product code selected, the content in the page changes. The URL format is something like this -
in the browser it shows : http://xyz.com/product.aspx,
in the view source, in the action attribute of the form tag : ../../product.aspx?prdcode=123&catcode=3453
Now, my requirement is to place an flike button on this page. I have tried doing it in several ways... but the issue is:
If I click on flike button on one page.. the button is disabled for every other product.
Not sure what all needs to be included in to get this functionality right.
For a product listing page you'd need to have multiple like buttons, each pointing at a URL which represents an individual product - each of those pages needs the appropriate open graph meta tags, include the JS SDK once on your listing page, and have multiple <fb:like tags pointing at the individual product URLs
If the page content is dynamic, I think you can do the same, but you'll need to remove and add the like button as the content changes