I have parsed the xml containing the channel names and images succesfully.

[GTO_India]

Iam able to parse the channel names and images succesfully and showing all languages channels in particular/ single row.


1)Now I want to show the lsit of the languages at the start of the application.


2)Group /Parse channels based on their language i.e if English language is selected Show only english language channels list



below is main.js file



var xmlDataSource = {

URL: "http://------------------/mobile/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("language");

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();
}
};



Note: I have provided above here a non working or sample format of xml.aspx only.

[GTO_India]

Any one there to reply to this thread. ?

[croozeus]

Hi there,

Not sure if this is what you want but the following should show the language list first, and on clicking the language list show you the channel name.

	
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 +=   channel['language']  + "</div>";	
str +=  "<div class='ui-category-list-item-body ui-hide' id='items_"+i+"'>";		
str +=  "<div class='ui-list'>";
// loop for the below statement if you have more than one channel names in your json object
str += 	"<div class='ui-list-item'>"+ channel['name']+"</div>";	
str +=  "</div></div>";
return str;
}

Hope this helps!

PS: Please use CODE tags to wrap up your code when you post.

[GTO_India]

ok I will update u gain after implemnting this code.



My Target is


1) showing a list of languages in 1st screen



2) when particular language is clicked those channels should be only shown in second screen


3) when clicke on them video should play in third screen



Thankx

[croozeus]

My Target is
1) showing a list of languages in 1st screen
2) when particular language is clicked those channels should be only shown in second screen
3) when clicke on them video should play in third screen
Thankx

If you want to achieve this, you need to create multiple views and do the view switching. The example you're using has only one screen with an expandable list (accordian).

You can create multiple views by creating div tags for each view and apply the hide and show classes to these for view switching. There are articles on the ND wiki which would help you understand this better.

[GTO_India]

can u little more brief on it i.e For the multiple views and creating div tags ?

[croozeus]

Here are some articles that explain about view switching.

http://www.developer.nokia.com/Commu...een_Navigation
http://www.developer.nokia.com/Commu...ies_40_Web_App

Basically you need to create div tags and use the mwl.switchClass function to change the class.

[GTO_India]

I have tried ur code but a little change in the UI has occured and not showing the languages list as expected

[GTO_India]

Hi Croozeus Now Iam abl to show the languages list as expected but unable to parse the channel images and names i. when clicked on theparticular language that particular channel imagea and names are not shown but only url is shown.


This is the code

var xmlDataSource = {

URL: "http://--------------------------------symbianxml.aspx?type=lang",

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

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

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

var channels = [];

console.log(chElements.length);
var channel = new Array();
for(var i=0; i < chElements.length; i++){

channel[i][0] = chElements[i].textContent;

}

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


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
*/
responseHandler0: function(xmlDoc) {

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

var channels = [];
var markup = "";
console.log(chElements.length);
var channel = new Array();
for(var i=0; i < chElements.length; i++){

//channel[i][0] = chElements[i].textContent;

markup += "<div class='ui-category-list-item-title-for-Global-Takeof'\">";
markup += "<a href=\"" + "http:// --------------------------------- symbianxml.aspx?lang=" + chElements[i].textContent + "\">" + chElements[i].textContent + "</a>" + "</div>";

}

document.getElementById("accordian").innerHTML = markup;


/////////////////////////////////////////////
/*var channels = this.parseResponse0(xmlDoc);
var markup = "";

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

markup += this.generateHTMLMarkup0(i, channels[i]);
}
document.getElementById("accordian").innerHTML = markup; */
},
responseHandler: function(xmlDoc) {

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

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

markup += this.generateHTMLMarkup(i, channels[i][0]);
}
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;
},*/

generateHTMLMarkup0: function(i, channel){

var str ="";
str += "<div class='ui-category-list-item-title-for-Global-Takeof'\">";
str += "<a href=\"" + channel + "\">" + channel + "</a>" + "</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();
}
};

[GTO_India]

Th languages list is now shown in the first screen.


Help me by parsing the channel images and names contained in the www.-------------symbianxml.aspx



Waiting fr your reply croozerus.

[croozeus]

Th languages list is now shown in the first screen.

Help me by parsing the channel images and names contained in the www.-------------symbianxml.aspx

Waiting fr your reply croozerus.

Can you share your JSON object structure or complete URL which returns that Object?

[GTO_India]

Yes croozerus but please keep it completely confidential as it my company's property contaiining confidential links.


see in ur pvt msg and reply me soon .

[GTO_India]

I want my UI look as







1st screen languages list with spaces in a vertical row with Thumbnails with good font ->clik on any language





2nd screen supose English language selected





Ui should be in this format





Timesnow channel image


High Meduium Low


EtNow


High Medium Low

instead of





EtNow High



EtNow Med



ETNow Low

[wizard_hu_]

The UI question is off-topic here, and it is already discussed for a week by now in http://www.developer.nokia.com/Commu...-of-my-web-app, you have received plenty of ideas for documentation and examples to check.