VivekSaha

//C:\aem-project\aemgeeks\core\src\main\java\com\aemgeeks\core\models\TextareaSampleComponentModel.java
package com.aemgeeks.core.models;

import org.apache.sling.api.resource.Resource;
import org.apache.sling.models.annotations.DefaultInjectionStrategy;
import org.apache.sling.models.annotations.Model;

import javax.inject.Inject;

@Model(adaptables = Resource.class, defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL)

VivekSaha

//C:\aem-project\aemgeeks\core\src\main\java\com\aemgeeks\core\models\NumberfieldSampleComponentModel.java
package com.aemgeeks.core.models;

import org.apache.sling.api.resource.Resource;
import org.apache.sling.models.annotations.DefaultInjectionStrategy;
import org.apache.sling.models.annotations.Model;

import javax.inject.Inject;

@Model(adaptables = Resource.class, defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL)

VivekSaha

//C:\aem-project\aemgeeks\core\src\main\java\com\aemgeeks\core\models\TextfieldSampleComponentModel.java

package com.aemgeeks.core.models;

import org.apache.sling.api.resource.Resource;
import org.apache.sling.models.annotations.DefaultInjectionStrategy;
import org.apache.sling.models.annotations.Model;

import javax.inject.Inject;

VivekSaha

<sly data-sly-use.templates="core/wcm/components/commons/v1/templates.html"/>
<div>
    <h2>${properties.yourname}</h2>
    <p>${properties.youremail}</p>
    <p>${properties.yourage}</p>
    <p>${properties.yourcontactno}</p>
</div>
<sly data-sly-call="${templates.placeholder @ isEmpty = !properties.productTitle}" />

VivekSaha

Custom component with dialog:- Code

Step 1 - Create component folder "productdetails"
e.g:- ui.apps\src\main\content\jcr_root\apps\aemgeeks\components\productdetails

Step 2 - Create a ".content.xml" file
e.g:- ui.apps\src\main\content\jcr_root\apps\aemgeeks\components\productdetails\.content.xml

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"

VivekSaha

Custom component without dialog:- Code level

Step 1 - Create component folder "productdetails"
e.g:- ui.apps\src\main\content\jcr_root\apps\aemgeeks\components\productdetails

Step 2 - Create a ".content.xml" file
e.g:- ui.apps\src\main\content\jcr_root\apps\aemgeeks\components\productdetails\.content.xml

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"

VivekSaha

Custom component without dialog:- CRXDE

Step 1: Create Node Title "Product Details" & Type "cq:Component".

Add properties
jcr:primaryType="cq:Component"
jcr:title="Product Details"
componentGroup="AEM Geeks - Content"

Step 2:- Create .html file "productDetails.html" for render in UI.

VivekSaha

To create new page template type:-
ui.content\src\main\content\jcr_root\conf\aemgeeks\settings\wcm\template-types

Here, I need to create a new folder or clone the existing Page folder.
ui.content\src\main\content\jcr_root\conf\aemgeeks\settings\wcm\template-types\newpage

Update .content.xml
ui.content\src\main\content\jcr_root\conf\aemgeeks\settings\wcm\template-types\newpage\.content.xml

VivekSaha

https://experienceleague.adobe.com/en/docs/experience-manager-learn/cloud-service/debugging/debugging-aem-sdk/remote-debugging

AEM Java code debug:-
Start AEM in debug mode run command
java -agentlib:jdwp=transport=dt_socket,server=y,suspend=n,address=*:5005 -jar aem-author-p4502.jar

or 
Create a .bat file (debug-run.bat) in side of the author instance and put the script inside of the file.
java -agentlib:jdwp=transport=dt_socket,server=y,suspend=n,address=*:5005 -jar aem-author-p4502.jar
To run the AEM in debug just double click on the .bat file.

VivekSaha

These are HTL (Sightly) block statements used in AEM templates to control rendering logic.

1. data-sly-include:- To include static or dynamic HTML/HTL snippet into your template.
   <sly data-sly-include="footer.html"></sly>
   Useful when reusing a template fragment.

2. data-sly-use: To import/use a Java class, Sling Model, JS or JavaScript object in your HTL file.
   <sly data-sly-use.model="com.example.core.models.HelloWorldModel"/>
   <p>${model.message}</p>
   Useful for binding backend logic (Sling Models/Use API) to the UI.