VisualForce Email Template - include Case Email Messages through controller

Question

I am trying to create a VisualForce Email Template, related to the Case Object. In the template, I wish to include the email correspondence we had with the customer as a thread. Below are the Apex Class, Controller, and VF Email Template I assembled. Currently, I am receiving the below error trying to test the template:

Apex Class - 'CaseEmailExtension':

public with sharing class CaseEmailExtension {
    public CaseEmailExtension() {}

    private final Case currentCase;

  public CaseEmailExtension(ApexPages.StandardController currentcase) {
    this.currentCase = (Case)currentcase.getRecord();
  }
  public List<EmailMessage> getSortEmails(){
    List <EmailMessage> sortedEmails = new List<EmailMessage>();
    sortedEmails = [SELECT Id, FromAddress, ToAddress, BCCAddress, MessageDate, Subject, HasAttachment, Incoming, HtmlBody, CreatedBy.Name //, (Select Id, Name from Attachments) --> attachments are not needed at the separate emails  
            from EmailMessage where ParentId =: currentCase.Id 
            order by MessageDate DESC ];
    return sortedEmails;
  }
}

VisualForce Component - 'CaseEmailExtension':

<apex:component controller="CaseEmailExtension" access="global">
    <apex:attribute name="caseId" type="Id"  description="Case Id" />
    <table border = "1">    
            <apex:repeat value="{!sortEmails}" var="email">

<apex:facet name="header">
    <apex:outputText value="{0,date,dd'.'MM'.'yyyy HH:mm:ss z}" style="font-weight:bold;font-style:italic;font-size:15px;float:left">
        <apex:param value="{!email.MessageDate}" />
    </apex:outputText>
</apex:facet>
<table width="100%">
    <tr>
        <td width="70%" align="left">
            <table cellpadding="2px">
                <tr>
                    <td width="50px" align="right"><b>From: </b></td>
                    <td align="left"><i><apex:outputText value="{!email.FromAddress}"/></i></td>
                </tr>
            </table>
        </td>
        <td width="30%" align="right">
            <b>{!IF(email.Incoming,"INCOMING", "OUTGOING")}</b>
        </td>
    </tr>
    <tr>
        <td width="70%" align="left">
            <table cellpadding="2px">
                <tr>
                    <td width="50px" align="right"><b>To: </b></td>
                    <td align="left"><i><apex:outputText value="{!email.ToAddress}"/></i></td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>   
        <td width="70%" align="left">
            <table cellpadding="2px">
                <tr>
                    <td width="50px" align="right"><b>BCC: </b></td>
                    <td align="left"><apex:outputText value="{!email.BccAddress}"/></td>
                </tr>
            </table>
        </td>
        <td width="30%" align="right">
        </td>
    </tr>
    <tr>   
        <td width="70%" align="left">
            <table cellpadding="2px">
                <tr>
                    <td width="50px" align="right"><b>Subject: </b></td>
                    <td align="left"><apex:outputText value="{!email.Subject}"/></td>
                </tr>
            </table>
        </td>
        <td width="30%" align="right">
            <table cellpadding="2px">
                <tr>
                    <td width="80px" align="right"><b>Created by: </b></td>
                    <td align="left"><i><apex:outputText value="{!email.CreatedBy.Name}"/></i></td>
                </tr>
            </table>
        </td>
    </tr>
    </table>
<br/>
<br/>
    <table>
    <tr>   
        <td width="70%" align="left">
            <table cellpadding="2px">
                <tr>
                    <td width="50px" align="right"><b></b></td>
                    <td align="left"><apex:outputField value="{!email.HtmlBody}"/></td>
                </tr>
            </table>
        </td>
        <td width="30%" align="right">
            <table cellpadding="2px">
                <tr>
                    <td width="80px" align="right"><b></b></td>
                    <td align="left"><i></i></td>
                </tr>
            </table>
        </td>
    </tr>
</table><br/>
        </apex:repeat>
    </table>
</apex:component>

And the VisualForce Email Template - 'VF [autoresponse] End-User Auto Closing Email':

<messaging:emailTemplate subject="test" recipientType="Contact" relatedToType="Case">
<messaging:htmlEmailBody >
<html>
<body>
<b><u>Case Emails:</u></b>
        <br />
        <c:CaseEmailExtension caseId="{!relatedTo.Id}"/>
</body>
</html>
</messaging:htmlEmailBody>
</messaging:emailTemplate>

Answer 1

The issue here is two-fold

1. The component's controller is not a standard controller extension. It is always a custom controller
2. And said custom controller has to handle null sObject Ids because the Email Template Preview by default will not pass in an sobject ID until you have clicked the Send Test and Verify button

So, the controller should look like:

public with sharing class CaseEmail {

  public ID csId {get; set;}  // comes from assignTo on component 

  public List<EmailMessage> getSortEmails(){
    return this.csId == null
        ? new List<EmailMessage>()  // handles UI preview use case
        : [SELECT Id, FromAddress, ToAddress, BCCAddress, MessageDate, Subject, HasAttachment, Incoming, HtmlBody, CreatedBy.Name   
            from EmailMessage where ParentId =: this.csId 
            order by MessageDate DESC ];

  }
}

and the component should look like:

<apex:component controller="CaseEmail" access="global">
    <apex:attribute name="caseId" type="ID"  description="Case Id" assignTo="{!csId}"/>
    ...