Posts tagged "Sightly"

Access client-side scripts (ClientLib) in AEM

In this post, I will cover an important concept – Client Libraries. Client Libraries are primarily JavaScript libraries that you may need to use while developing components and templates. This is an important concept that we didn’t cover in the first part of the training.

[As usual, the sample package is available in my GitHub account.]

So, let us develop a quiz component to see how client-side libraries are used in AEM. Let me show you what exactly I meant by a Quiz component. See the webpage – it asks you a very basic question: How much is 1 + 1?

quiz-component

After a user selects and submits the answer, it provides a message stating if the answer is correct or not. The code to accomplish this looks like as given below:

<html>
<script type="text/javascript" src="check.js">
</script>
<FORM><B>How much is 1 + 1? </B><P>
 <INPUT TYPE=hidden name="answer" VALUE="2">
 <INPUT TYPE=radio NAME="options" VALUE="1">1<br>
 <INPUT TYPE=radio NAME="options" VALUE="2">2<br>
 <INPUT TYPE=radio NAME="options" VALUE="3">3<br>
 <INPUT TYPE=radio NAME="options" VALUE="4">4<br>
 <INPUT TYPE=button NAME="Validate" VALUE="Validate" onClick="checkAnswer(this.form)">
</FORM>
<html>

When a user clicks the Validate button, the checkAnswer function in check.js is called. (We will see the js later.)

Now, when we covert that into a component, we need to accomplish the following:

  • Authors should be allowed to enter question, options, and an answer. After all, content is created by authors. You are a developer, who develops the component. We have already seen that authors enter content to a component using dialogs. I am not going to elaborate about dialogs this time, though they are an integral part of the Quiz component.
  • After an author enters a question, options, and an answer, we should validate the answer entered by an end user and then show the appropriate message. We need to call a JavaScript function to validate the answer. That’s what exactly I will cover in this post.

It’s not a good practice to save JavaScript into the component’s script directly. We save the script inside a ClientLibrary in AEM. And then, call the script to the component’s page.  I am not going to start from the scratch. See my previous posts to know more about components and dialogs. This where I am:

  • Created a component, named Quiz.
  • Created a touch-optimized dialog that has the following fields: Question, Answer, Option A, Option B, Option C, Option D. (See my previous posts to know the details)
  • Created a js that essentially captures all the variables a user enters in the dialog. (Again see my previous post on the same. I don’t want to repeat that.)
  • In the component’s default script, entered the html code to display questions and options to the end users.

Now, I need to have a JavaScript function to call, when the end-user clicks the validate button. That’s what I am going to show in this video.

  1. Go to the /etc/clientlibs folder.
    You save your client library files here.
  2. Create a cq:ClientLibraryFolder folder named aem-company. (I hope you remember our company name – in this way, we can easily identify the location of all the client library files needed for the project.)
  3.  Add another property, categories which is a string array. Give a name as aemcompany.script.
  4. Create another folder, scripts.
    It’s not a mandatory step. This way, you can provide more modularity.
  5. Create a aemcompany.js file inside. Copy and paste the required script. This is the script you saw at the start of the video.
    function checkAnswer(form) 
    {
      for (var i = 0; i < form.options.length; i++) 
      { 
        if (form.options[i].checked)
        {
        break
        }
      }
      if (form.options[i].value == form.answer.value)
        { 
         alert("You selected the correct answer!! :)") 
         } 
         else 
         { 
         alert("You selected an incorrect answer!!") 
         }
    }
  6. Create a js.txt file inside the ClientLibrary folder and add the following:
    #base=scripts
    aemcompany.js

    It says that js file, aemcompany.js, needs to be picked up from the folder scripts. We are done with creating the js file. Now we need to include this into the component.

  7. Open the Quiz component’s default script and add the following:
    <meta data-sly-use.clientlib=”/libs/granite/sightly/templates/clientlib.html” data-sly-call=”${clientlib.all @ categories=’aemcompany.script’}” data-sly-unwrap></meta>Basically, the following scripts add the category that has the JavaScript that we needed.

To test the component we developed:

  1. Basically, the following scripts add the category that has the JavaScript that we needed.
  2. Right-click and select Edit.
  3. Fill the details.
  4. Select OK
  5. Go to the View mode and test.

As usual, I have uploaded the component to the GitHub account.

 

Add a touch-optimized dialog (for the YouTube component)

In this short session, you will learn how to add a touch-optimized dialog for the YouTube component. As I mentioned earlier, a touch-optimized GUI is designed for using in hand-held devices, such as iPad, tablets, and so on.

(I have uploaded the package in GitHub. You should use: YouTubeComponent-1.0.3.zip)

Double-click the component that we developed. The dialog you see is called the Classic dialog. It should ideally come up only if you are in the Classic mode. Right now, you are on Touch-Optimized mode; the Classic dialog comes up here, because we have not created a Touch-Optimized dialog.

Let us start working by logging into CRXDE Lite. We will follow the same strategy we used before. Copy and paste a dialog that is already created, and then customize it.

  1. Go to /libs/wcm/foundation/components/title/.
  2. Copy cq:dialog node from there.
  3. Paste the node under the YouTube component.
  4. Expand the node.
    We need only title node here. (We want users to enter only one property; that’s the url.)
  5. Delete the other node.
  6. Change the following properties to match them with what we entered for Classic dialog:
    FieldDescription: Enter YouTube URL
    FieldLabel: YouTube URL
  7. Now refresh the page.
  8. Select the component and select Edit.
    Note that the dialog has changed.
  9. Now, go to the Classic view and see the dialog.
    You see the classic dialog.

To summarize, cq:dialog is used for Touch-Optimized dialogs. You add various fields to it depending on the requirement. Fields are inherited from granite/ui/components/foundation/form/textfield.

That’s about this session. See you soon.

Add the Parsys component to template

In this session, let us try to modify the template we created earlier. We will add a parsys component in the template to provide a space in the web page to drag and drop components.

Let us once again see how a page created using this template looks like.

  1. Log into to SiteAdmin. (http://localhost:4502/siteadmin)
  2. Double-click AEM Company page that you created. (If you have not created it, download the package that I provided in the previous session. And, then install it.)

The page appears with the text we entered in the template. There are three issues associated with this page:

  •  There is no place where you can drag and drop a component. (If you are not really able to make out that, I suggest you to visit my previous post. You could also open one of the pages from the sample websites to compare.)
  • The Component tab doesn’t display any components.
  • The template is not associated with any design. (Our page is really blank. It doesn’t have anything like header, footer, and so on.)

Let us solve these issues one-by-one. First, we will provide a place in the web page to add components.

  1. Go to CRXDE Lite. (http://localhost:4504/crx/de)
  2. Open the template’s rendering script. (/apps/aem-company/components/homepage/body.html)
  3. Add the following code:
    <div data-sly-resource=”${‘content’ @ resourceType=’wcm/foundation/components/parsys’}”></div>

This is a Sightly code. data-sly-resource is a tag to specify the component that you need to add to the page. It has a resourceType parameter that points to a parsys component. You would had noticed it points to a location where we saw a page component, which we inherited while creating a template. Note that this is the standard procedure to provide a location to add components in a template.

Now refresh the web page. Notice that now it provides you with a space where you can add components.

parsys

I have provided a new package in GitHub. (TemplateWithParsys.zip) Download and use it if you want to.

Summary: Use the parsys component to add space for addition or deletion of components in a web page. You don’t need to create a parsys component. Always reuse the component that exists.

AEM Sightly Brackets Extension

You can install this extension on Brackets if you plan to use Sightly as the markup. The extension provides you with features such as syntax highlighting and code completion.

Brackets extension provides front-end developers an AEM templating tool with which they are familiar. The idea is to bring more front-end developers to AEM template designing. Use CRXDE Lite to create a basic structure of your project. Then create a package and download the package. Unzip the package and open it in Brackets. Make the changes; Brackets extension allows you to automatically sync with the Oak repository.

For more information, see Adobe’s documentation.

While creating templates for Touch-Optimized GUI

In AEM 6.0, most of the functionalities are accessible through Touch-Optimized UI. When you create a template using Sightly or JSP, before extending the page component, the Classic UI displays the content in a page created based on the template. Of course, the page is displayed without the sidekick and other functionalities.

 

This behavior, however, changes with Touch-Optimized UI. To appear page’s content in Touch-Optimized GUI, the page’s template should extend the page component using sling:ResourceSuperType . You can extend a Sightly or JSP page component to a template. It’s irrespective of the templating language (Sightly \ JSP).