Steps to create a simple component in AEM 6.4 .

Steps to create a simple component in AEM 6.4.
Under /apps, create a project folder(I have created 'myproj'), under which create a /components folder.

Under components, create folders /content and /structure as shown below.

Below shown the component structure in AEM 6.4.


Understructure creates a node called 'header'., rename the header.jsp to header.html.

Add property 'componentGroup': group for the header node.

Copy pasted below html content in 'header.html'

<div>
<li>
<p>This is a sample component</p>
<h3>Header</h3>
<p>This is a sample text in body pf component</p>
</li>
</ul>
</div>

Under header node, create a 'dialog' [primary type : cqDialog; xtype dialog]
Under dialog node, we will have 'items' [primary type: cq:Widget; xtype:tabPanel]
Under items, we will have 'items' node [primary type: cqWidegtCollection]
Under items, we will have 'tab1' node[primary type :cq:Panel; title: Tab 1]

The component is ready now.

Author this component on a page:
Since this is a new component, we need to make this component available for our template.
Add this component to our template created earlier by following the below steps.

We had placed the component under 'myGroup'.
Now go to the template policy section and modify the property to add the component as part of this template. The procedure is shown in below image.


Now as you see the new component is available for our template for authoring.


Author the component on the template and create a new page, so that the newly created component is visible now.


Now activate the page (which includes template, component activation), so that the page will be visible in publish environment.