Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Web and WebWorks Development

Reply
Developer
Posts: 672
Registered: ‎12-04-2012
My Device: BlackBerry 8520
My Carrier: Airtel

Need some help on coding part in my .js file . I have parsed channel names and languages from xml.I want to distribute according to their language name.

Below is my .js file  

 

 


var xmlDataSource = {

Note: (a sample xml )            URL: "http://www.--------------/symbianxml.aspx",

init: function() {
//URL, success callback, failure callback
this.connect(this.URL, this.responseHandler, this.failureHandler);
},

/**
* Parses XML document into JS Object array
* @param xmlDoc XML Document
* @returns {Array} array of device objects
*/
parseResponse: function(xmlDoc) {

var chElements = xmlDoc.getElementsByTagName("channel");

var channels = [];

console.log(chElements.length);

for(var i=0; i < chElements.length; i++){

var channel = { };

for(var j=0; j < chElements[i].childNodes.length; j++){

var node = chElements[i].childNodes[j];

if(node.nodeType != 1){ //not an element node
continue;
}

channel[node.tagName] = node.textContent;
}

channels.push(channel);
}
console.log(channels.length);
return channels;
},

/**
* Handles the response, and displays device data in web app
* @param xmlDoc
*/
responseHandler: function(xmlDoc) {

var channels = this.parseResponse(xmlDoc);
var markup = "";

for(i=0; i < channels.length; i++){

markup += this.generateHTMLMarkup(i, channels[i]);
}
document.getElementById("accordian").innerHTML = markup;
},

/**
* Generates HTML markup to be inserted in to Web App DOM.
* @index i, index of the device
* @param device, device object
*/
/*
generateHTMLMarkup: function(i, channel){

var str ="";
str += "<div class='ui-category-list-item-title ui-close' id='item_title_"+i+"'" +
"onclick=\"mwl.setGroupTarget('#accordian','#items_"+i+"', 'ui-show', 'ui-hide'); " +
"mwl.setGroupTarget('#accordian','#item_title_"+i+"', 'ui-open', 'ui-close'); return false;\">";
str += "<img src=\""+ channel['image'] +"\" height=100% align=left />" + channel['name'] +"</div>";
str += "<div class='ui-category-list-item-body ui-hide' id='items_"+i+"'>";
str += "<div class='ui-list'>";
str += "<div class='ui-list-item'>"+ "id: " + channel['id'] +"</div>";
str += "<div class='ui-list-item'>"+ "type: " + channel['type'] +"</div>";
str += "<div class='ui-list-item'>"+ "language: " + channel['language'] +"</div>";
str += "<div class='ui-list-item'>"+ "bandwidth: " + channel['bandwidth'] +"</div>";
str += "<div class='ui-list-item'>"+ "cellnapid: " + channel['cellnapid'] +"</div>";
str += "<div class='ui-list-item'>"+ "link: " + "<a href=\""+ channel['link']+"\">Start video</a> </div>";
str += "</div></div>";
return str;
},*/
generateHTMLMarkup: function(i, channel){

var str ="";
str += "<div class='ui-category-list-item-title-for-Global-Takeof'\">";
str += "<img class='img-for-Global-Takeof' src=\"" + channel['image'] + "\" />" +
"<a href=\"" + channel['link'] + "\">" + channel['name'] + "</a>" + "</div>";
str += "<div class='ui-list-item'>"+ "link: " + "<a href=\""+ channel['link']+"\">Start video</a> </div>";

return str;

},

failureHandler: function(reason) {
document.getElementById("accordian").innerHTML = "Could not get XML document.<br>"+ reason;
},

/**
* Retrieves a XML resource in given URL by using XMLHttpRequest.
* @param url URL of the XML resource to retrieve
* @param successCb Called, when the XML resourece is retrieved successfully. Retreived XML Document is passed as argument.
* @param failCb Called, if something goes wrong. Reason in text format, is passed as argument.
*/

connect: function(url, successCb, failCb) {

var xmlhttp = new XMLHttpRequest();

xmlhttp.open("GET", url, true);

xmlhttp.setRequestHeader("Accept","text/xml,application/xml");
xmlhttp.setRequestHeader("Cache-Control", "no-cache");
xmlhttp.setRequestHeader("Pragma", "no-cache");

var that = this;
xmlhttp.onreadystatechange = function() {

if (xmlhttp.readyState == 4 ){

if(xmlhttp.status == 200){

if(!xmlhttp.responseXML){
try {
//In case server didn't respond with correct MIME type for a XML file.
var domParser= new DOMParser();
var xmlDoc = domParser.parseFromString(xmlhttp.responseText,"text/xml");

successCb.call(that,xmlDoc);

} catch (e) {
failCb.call(that,"Response was not in a XML format.");
}

}else{
successCb.call(that,xmlhttp.responseXML);
}
}else{
failCb.call(that,"Connection failed: Status "+xmlhttp.status);
}
}
};
xmlhttp.send();
}
};

 

 

 

I want  in the following ui format

 

 

1)After clicking on the icon       Language names list  should be displayed  like:

 

 

English

 

Hindi

 

Tamil

 

Telugu

 

Malayalam

 

Kannada

 

Marathi  etc

 

 

2)After clicking  on any language for suppose english

 

 

English channels only should be displayed  along with images

 

 

Note:   Presently my App is showing all the  channel names and images in one particular vertical row.