Problem with the custom column control

Hi,

I am new to AEM. I am working with v6.0. I have created a custom column control using bootstrap. It allows the content author to configure the number of columns he needs and the proportion of each column (ex: Column: 3, Ratio:4:4:4). I have created a custom client library to use bootstrap css files and I have added editConfig component to refresh the page every time the component is edited/inserted. I have added the JSP code of my component below

This code works the first time when I configure the values.

Problem:

1. If I refresh the page again, the columns disappear.

2. If I add more column than what is configured, then only the extra columns appear. Ex: if previously I have configured 2 columns and then I say I need 3 columns, only 1 column appears.

3. If I just add some text to the JSP page and refresh, all the columns appear. But if I refresh again everything disappears.

Please advise if I am making any mistake or if this is some kind of bug in the product

<%-- Bootstrap Grid Layout component. Bootstrap Grid Layout --%><% %><%@include file="../../global/global.jsp"%><% %><%@page session="false" %><% %><% // TODO add you code here %> <cq:includeClientLib categories="demo.libs"/> This is Bootstrap Layout <div class="container"> <div class="row"> <%! int noCol=0; int width=0; int i=0; String tmpStr; String[] result; int occurance=0; %> <% // Lets see how many columns user wants. If blank we will default to 2 columns tmpStr=(String) properties.get("noColumn", "2"); noCol=Integer.valueOf(tmpStr); // Lets get the ratio for each column. If blank we will default to 6:6 ratio tmpStr=(String) properties.get("ratio", "6:6"); // Now count the colons, so that we can validate Ex: 3 columns should have 2 colons occurance = (tmpStr.length() - tmpStr.replace(":","").length())+1; // just a validation to see if the ratio is correct if (occurance == noCol) { // Now get the ratio for each column in an array result = tmpStr.split(":"); // Lets loop, to create as many column as requested for(;i<noCol;i++) { // Lets give a unique name to each parsys in our column tmpStr = "parsys-" + noCol + "-" + tmpStr.replace(":","-") + "-" + i; // Remeber result has the ratio of the column. We are just converting it to integer width = Integer.valueOf(result[i]); %> <%-- Finally lets create the column with the defined ratio and include a parsys in it --%> <div class="col-md-<%=width%>" > <cq:include path="<%=tmpStr%>" resourceType="foundation/components/parsys"/> </div> <% } } else { %>Sorry incorrect input ratio..! No. of column and Ratio mismatch <% } %> </div> </div>