March 2012 Archives

I had been at IG Group for nearly a year and a half, and although I have been enjoying the Adobe CQ5 CMS work that I have spent most of my time at IG Group working on, there was no plan to convert any of the existing websites to this new CMS for the immediate future at the time I handed in my notice. (I feel that larger companies tend to work at a slower pace and suffer from the ability to organise projects; possibly because more people are involved in the decision-making process.) 

My last six months at the company had been crazy, particularly the months between October and February. During those months and over the Christmas and New Year's season, I sacrificed much of my time (and health!) on a project with a tight deadline and agreed to be on support over both Christmas and New Year's weeks, which required logging in to complete some tests to ensure that the environments were available on Christmas Day and New Year's Eve. Unfortunately, I felt a little under-appreciated and that my hard work over those three crazy months went unnoticed, even though the project was a success.  I felt that everyone on this project did a brilliant job, and the team worked really well together. Despite the feeling at the end of the project, which I felt should be celebrated and applauded, I did enjoy working on it over the past few months with other great individuals. Launching a new website without design/branding/new technology in three months was a challenge, and it was a successful project. I will miss working with my colleagues, but that happens when one changes jobs.

Leaving IG Group also means leaving London, and I have changed my focus and personal goals over the past month so that I could spend the remaining time enjoying the city. The photograph below was taken at the weekend in Hyde Park of daffodils during the warmest day yet this spring. I think that signifies the beginning of spring, and it signifies new changes for me. 

Now... hopefully I am back on track after the last long month and a spring clean of my objectives (such as my website redesign)! I look forward to my new role and new opportunities. I love working in IT/Web Development/Programming, so I am quite excited to get started.

The Big Egg Hunt in London (organised by Fabergé and the Elephant Family) was launched at the end of February. Over 200 large egg sculptures/artworks will be on display for forty days and forty nights in various locations across the city. The locations can be discovered by looking at a variety of maps depicting different areas in London, and a cheat sheet is also available to help track down hard-to-locate eggs. I have written a little about the event in my blog already: Fabergé Big Egg Hunt Technology.

The event is attempting to break world record for the largest egg hunt as well as to raise money for charity; the Elephant Family are one of the charities (Action for Children is another), and the Elephant Family charity did work for London a couple of years ago with elephant sculptures, which I blogged about on this website here: Parading Artistic Elephants in London.

Over the past year, I have been developing websites with Adobe CQ5 as the CMS (Content Management System), including building components, so that content writers can populate the web pages. In some cases, the logical method of creating components did not work; with any CMS, there are limitations or bugs, and part of the 'fun' (if you could call it that) is discovering an alternative solution. This article describes and explains the accordion component development. This component was developed nearly one year ago now, so some of the particulars are not as fresh in my mind.

What The Heck is An Accordion in Web Terms?

For those who do not know, an 'accordion' in web terminology is a design element that can show or hide a panel of content (to save screen space or provide a consistent grouping of similar data), and the user can click onto the panel to expand the minimised view, or to minimise an expanded panel. The screenshot below shows an example of the component, which was the solution I implemented. Obviously, the styling (CSS) and Javascript required is beyond the scope of this. (For those who are interested, the functionality of the interaction is completed using the JQuery Javascript library.)



For setting this component up in CQ5 CMS for the content editors to use, I ideally wanted the content writer to be able to add a panel for each 'accordion' entry, which would consist of a title/subject and body text. The body text needed the ability to be styled, so the custom CQ5 rich text editor needed to be used. This would have been using a compositeField / MultiField component, but a bug was discovered while creating this, and the values did not save correctly. Unfortunately, Adobe CQ5 CMS cannot handle certain data types, even though it was meant to be supported. (Adobe CQ5 CMS does tend to have a lot of "TODO" comments in its code.)

Obviously, I needed to come up with an alternative and user-friendly solution. I read in forums online about using the column component and adapting it, but I wanted it to be more intuitive to the content writers. I'm mainly writing about my experience here as there seems to be many wanting to complete the same task, but the information does not exist.

My Accordion CQ5 Solution Explained

The alternative solution was to develop the accordion and accordion panel components separately, as a parsys, while providing a user-friendly interface to give the content writers direction. Simply, the content writer will drag and drop an accordion component from the Sidekick onto the screen. The accordion component will have a placeholder message to instruct the user to add accordion entries. The user will double-click the accordion component on the screen to add accordion entries. (The accordion entries are simply another component.) The accordion entries component is the only type of component that they will be able to add inside the accordion component parsys; no other components will be allowed to be placed.

This tutorial shows some of the steps to create an accordion component in Adobe CQ5 CMS. First of all, I will explain the structure of the set-up for the component. A visual representation of the structure is displayed below. As you can see, the accordion is organised into the 'accordion' and 'accordion-entry' (one panel, consisting of a heading and rich text) components.

The 'accordion' Component
The 'Accordion' component is simply the placeholder that encompasses the accordion entries.

To ensure that the screen updates so that the editor can see the output on the screen, the page in author mode in the CMS needs to be refreshed. The file demonstrates refreshing after creation, after deletion, after insertion, and after moving.

<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
    cq:dialogMode="floating"
    jcr:primaryType="cq:EditConfig">
    <cq:listeners
        jcr:primaryType="cq:EditListenersConfig"
        aftercreate="REFRESH_PAGE"
        afterdelete="REFRESH_PAGE"
        afterinsert="REFRESH_PAGE"
        aftermove="REFRESH_PAGE"/>
</jcr:root>

.content.xml

The 'Accordions' .content.xml file specifies that the sling:resourceSuperType is the standard parbase component. This will allow us to drag and drop other components into it. However, we need to ensure that only a specific type of component can be put into that place - the 'accordion-entry'. The settings allowedChildren is set to be an 'accordion-entry' component type, and allowedParents is the parsys.

<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"
    cq:isContainer="{Boolean}true"
    jcr:primaryType="cq:Component"
    jcr:title="Accordion"
    sling:resourceSuperType="foundation/components/parbase"
    allowedChildren="[*/accordion-entry]"
    allowedParents="[*/parsys]"
    componentGroup=".hidden"/>

dialog.xml
When the user drags and drops the 'Accordion' component into place, they have the option to enter a unique ID for the accordion. See the snippet of code below.

<items jcr:primaryType="cq:WidgetCollection">
        <title
            jcr:primaryType="cq:Widget"
            fieldDescription="Leave empty to use the page title."
            fieldLabel="Title"
            name="./jcr:title"
            xtype="textfield"/>
        <id
            jcr:primaryType="cq:Widget"
            fieldDescription="Enter a unique ID for the accordion"
            fieldLabel="ID"
            name="./id"
            xtype="textfield"/>
    </items>

accordion.jsp
The following shows the contents of the Accordion JSP and how it is rendered on the page. The resourceType is a parsys, since the content editor will be dragging and dropping the 'according-entries' components into place here.

<c:set var="accordionFlag" scope="request" value="yes"/>
<c:set var="accordionID" scope="request" value="1"/>
<div><cq:include path="entries" resourceType="myproject/components/my-accordion/components/parsys"/></div>

clientlibs folder
This folder holds the Javascript for the accordion. There's some configuirations here, such as defining the client libraries, such as the Javascript/jQuery file that will handle how the accordion should behave. The Javascript file is placed into the 'source' folder underneath the 'clientlibs' folder. Note that the name must match the name in the js.txt file.

• .content.xml:
  <jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
      jcr:primaryType="cq:ClientLibraryFolder"
      categories="[my.accordion-component]"/>
  
• js.txt:
  #base=source
  jaccordion.congif.js
  

The 'accordion-entry' Component
The 'Accordion-entry' component is an actual entry or panel that sits inside the 'Accordion' component. This is a child of the 'Accordion' component.
The 'accordion-entry' will only be allowed to be used if it is a child of the 'Accordion' component, so we set the allowedParents accordingly.

<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"
    jcr:primaryType="cq:Component"
    jcr:title="Accordion Entry"
    sling:resourceSuperType="foundation/components/parbase"
    allowedParents="[*/my-accordion/components/*parsys]"
    componentGroup=".hidden"/>

The 'accordion-entry' dialog allows the user to enter a title for the accordion entry panel as well as rich text for the body text of the accordion.

<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
    jcr:primaryType="cq:Dialog"
    helpPath="en/cq/current/wcm/default_components.html#Text"
    title="Text"
    xtype="tabpanel">
    <items jcr:primaryType="cq:WidgetCollection">
        <tab1
            jcr:primaryType="cq:Widget"
            anchor="100%"
            title="Text"
            xtype="panel">
            <items jcr:primaryType="cq:WidgetCollection">
                <title
                    jcr:primaryType="cq:Widget"
                    defaultValue="enter a title"
                    fieldLabel="Title"
                    name="./title"
                    xtype="textfield"/>
                <isRichTextFlag
                    jcr:primaryType="cq:Widget"
                    ignoreData="{Boolean}true"
                    name="./textIsRich"
                    value="true"
                    xtype="hidden"/>
                <text
                    jcr:primaryType="cq:Widget"
                    defaultValue="Please enter some text"
                    fieldDescription="Text displayed in panel"
                    fieldLabel="Text"
                    hideLabel="{Boolean}true"
                    name="./text"
                    xtype="richtext"/>
            </items>
        </tab1>
    </items>
</jcr:root>

The JSP renders the accordion-entry's HTML. I'm not going to include all of the file's contents, but note that I use the lines below in order to obtain the title and text, set by the content editor by using the contents of the dialog.xml file above.

<%
final String title = properties.get("title", "");
final String text = properties.get("text","");
%>


The 'parsys'
The parsys is used for ensuring that the component has the same properties to behave like the foundation parsys component. This component is a copy of the component in the foundation library, with a change to a few of the files for the accordion. The changed files are mentioned below.

The parsys component superResourceType is the foundation's parsys component, and the allowedChildren is 'accordion-entry'.

I hope you enjoy these as much as I have exploring the City.

I first became a user of a Mac computer in 1999 (not including using them when I was very young and we had a family Apple computer), as the School of Visual Communications used them. However, as my specialisation was in Web and Interactive Multimedia design and development, I made a conscious decision to build and design websites on my Windows computer and test on the Mac. The decision was made due to the fact that Windows computers owned the majority of users. 

In those days, the Mac was a little more incompatible, and most of the software that I had bought was for Windows. Saving files was difficult, and files created on the Mac could not be opened and read on the Windows computer. These days, it's not such of an issue. Apple has come a long way, and I know many who have adopted Apple technology over Microsoft. These days, it seems that many have fallen out of love with Microsoft.

In conclusion, the world does owe much to Microsoft's beginnings and noting Microsoft's mistakes. Other companies are building upon the good of Microsoft and noting the mistakes of the company by setting and developing standards and producing usable software and applications. Microsoft should continue on trying to compete by developing high-level, usable, and standards-compliant software and applications. Failing this will allow other companies to take more of a market share. 

Hopefully, these mistakes and less-than-popular operating systems and browsers can be forgotten to pave a new future.

The Big Egg Hunt in London (Fabergé) was launched on Shrove Tuesday, which fell toward the end of February this year, and over 200 eggs will be on display for forty days and forty nights in various areas across the city. The event is attempting to break world record for the largest egg hunt as well as to raise money for charity; the Elephant Family are one of the charities (Action for Children is another), and the Elephant Family charity did work for London a couple of years ago with elephant sculptures, which I blogged about on this website here: Parading Artistic Elephants in London.

I love the combination of art and technology used in events, such as The Big Egg Hunt. In addition, there is an egg to locate, known as the "Social Egg" in Selfridges, and this egg displays a screen with faces of finders on it. The egg has been created by 'faceboarding', and it allows users to 'check in' to the device, and the device displays the images on its screen. (Pretty cool.) I've posted the "Social Egg" below.

I have been spending the past few weeks tracking down the eggs, and I have found most of them now. Another post will be added soon to display some of the most beautiful eggs. For those of you that I have seen and spoken to during my London egg hunting, I want to say "hello" and "happy hunting".

I am feeling in the mood for something cute today. Today is the day that my cat was born, and he would have been twenty-four years of age had he still be alive. Sadly, he passed away on May 26 when he was sixteen. After ten years, I still miss him, and I always will. Obviously, I did grow up with him, and at the point when he did pass away, I knew him over half of my own life. He always seemed to know how I felt, and he was more intelligent than most humans on this planet. He was always very content, and he loved to sit in the window for hours and spy on whatever was happening. At some point, I will get another Maine Coon tabby. (Of course, it would never replace him.) These fabric cats are cute, though.

I loved the thought that went into the brownies. As it was near to Valentine's Day, the brownies were lightly dusted with a letter on them, spelling out the word "LOVE X" when placed side-by-side. The South Kensington shop is very small, and it is quite popular because of the prime location and the large windows featuring the snacks. There are a few tables outside for those who want to brave the weather; I am sure it's lovely in the summer.

Cushions seem to be a popular art form these days, and I recently posted an article featuring many lovely cushions that I discovered on the John Lewis website (Inspirational Designer Cushions). Following up on this trend, I came across Nikki McWilliams' online store last December. These cushions are adorable, particularly if you love these British brands and the vintage packaging. It seems that this designer is in demand now, and her cushions will be sold in Selfridges this year.

Nikki McWilliams lives in Dundee in Scotland, and she studied Fine Art at university and focused on design afterwards. Her images are inspired by having tea and biscuits. Among the items for sale in her shop, cushion designs include Custard Cream, tea cakes, Digestive biscuits, Oreo cookies, Caramel bar, Jammy Dodgers, Malted Milk, and Nice biscuits. A few of these items are pictured below. (I cannot choose a favourite item, but it may be between the Custard Cream or the Caramel bar, and looking at these makes me feel ready for a cup of tea.)

You can visit Nikki's website, blog, and Etsy shop by following the links below.

That leads me to this discussion and one reason that I have decided to go for the Leica V-Lux 3, after spending quite a few hours doing research. Leica cameras are an expensive brand, and there are comparable models out there, but after doing some research on other websites and comparing photographs of the results, I have made the decision to purchase the Leica V-Lux 3. (The comparable camera models are not quite as good when you compare them like-for-like, and I felt that spending some extra money would be worth the cost.) Even though the camera is not really a DSLR, I decided to try it anyway. Besides, carrying a lot of camera kit around on holiday and only using one lens mainly anyway, I decided that I would like a camera that is a bit lighter. The Leica Lux-3 does seem like Leica's marketing for the travel market.

My only regret is that I do not have the money to buy the Leica M8 or the Leica M9, which look like amazing cameras. However, if I could buy one, I certainly would not be taking it on holiday for fear of having it stolen or damaged. In that instance, I would not be getting all of my money out of it.

My Leica V-Lux 3 arrived earlier this week, but I was unable to test it properly until this weekend. I hopped on a train today and visited London. I used the automatic setting on the camera for most of the day. I still need to play with the settings more and discover how to change the aperture on manual settings. Some of my photographs look a little blurry, but this was probably due to incorrect shutter speed, slight over-exposure in the automatic setting, or simply focusing on the wrong area. However, I am pleased with the camera and very pleased with the colour. The image below was taken with my new camera using the automatic setting; I really could not spend ages setting manual settings in front of a busy street in front of a department store in central London, particularly as I am still learning how to use the camera. I absolutely love these rich colours.

I took the following photographs over the spring and early summer of last year, and I hoped to get some more artistic ones early this year (as well as to sketch the cathedral in the sketchpad that I carry around with me), but life changes very quickly. I will not be working in London for much longer. Although this is something that I could not foresee, there are times when you just feel or know that the situation is only a temporary one. For example, I got very interested in London history after a ghost walk on Halloween, and I purchased a couple of photography books with old photographs, "lost London". A week or two before, I started the project with the extremely tight deadline (Latest Project: NADEX Website), and soon afterwards, I was consistently working through all of my lunches until go-live day. (I cannot even remember Christmas, as it was such a busy time, and I did not get to relax or enjoy last Christmas.) 

My plan had been to bring the book into work and to look up the locations of the photographs and to visit some of the areas in the book during my lunch hour. However, something deep inside me felt that my time working in the City was coming to an end. I've felt the same feeling in the past before, with the same results - such as being drawn to a particular place, and it becomes a reality, without any guidance - as if my life has been swept up and into that particular direction. 

The London book that I mentioned a moment ago remains untouched on the shelf, although I did give it a quick flip through after I received it in the post. Although my time in London is coming to an end, I may return to London to work again at some point, or perhaps I will live there. It is strange how life evolves, and many times, one is swept away while other events come together and opportunities present themselves for us to accept the new challenges along life's way. I apologise for this reflective post, and I am very much looking forward to these changes; don't feel otherwise. Some view change as a negative, but I feel that change can be positive and is necessary. The world needs change, but stability is also needed - the correct balance.

Back on track and speaking of London history, it is worth noting how London has changed over the years. The Millennium Bridge was constructed for the year 2000. I wonder how this will look in a hundred years. I wonder if these photographs or similar ones will be printed in a 'book' of the future, showing "lost London". I wonder what their society will think of ours. 

I hope you enjoy the photographs. Hopefully I will be posting some more on here in the future.