×

Discussion Board

Results 1 to 6 of 6
  1. #1
    Registered User
    Join Date
    Apr 2010
    Posts
    3

    Question does Nokia WRTkit have any class like GridView?

    i just find ListView in the nokia WRTkit, but it just displays the contents in the form of list while i want to them to show in form of grid, does anyone happen to this or find some solutions to solve this question?? think you !!!

  2. #2
    Registered User
    Join Date
    Apr 2010
    Posts
    3

    Unhappy Re: does Nokia WRTkit have any class like GridView?

    any body could help me ?

  3. #3
    Nokia Developer Champion
    Join Date
    Nov 2007
    Location
    Rome, Italy
    Posts
    2,406

    Re: does Nokia WRTkit have any class like GridView?

    Hello GoOnDeveloper,

    and welcome to Forum Nokia Discussion Boards!

    There is no GridView (or similar) component in WRTKit, as you can check in its documentation:

    http://www.forum.nokia.com/document/...Documentation/

    As it is a library no more officially supported by Nokia, what you can do is try to implement this new component by looking at the library source code.

    Pit

  4. #4
    Registered User
    Join Date
    Apr 2010
    Posts
    3

    Re: does Nokia WRTkit have any class like GridView?

    Quote Originally Posted by jappit View Post
    Hello GoOnDeveloper,

    and welcome to Forum Nokia Discussion Boards!

    There is no GridView (or similar) component in WRTKit, as you can check in its documentation:

    http://www.forum.nokia.com/document/...Documentation/

    As it is a library no more officially supported by Nokia, what you can do is try to implement this new component by looking at the library source code.

    Pit


    thank you for your tips.
    so i have spent several hours to write this GridView, i named it GridPanel.
    i put this GridPanel.js under WRTKit/UI, and it works.
    my test code here:
    Code:
    	uiManager = new UIManager();
    	var list = new ListView(null, "List");
    	var ga = new GridPanel(null, null, 3, 3);//divide into 3 rows and 3 cols 
                                                     //and it is a control as well
    	var s = new Separator(null); // an separator
    	var gb = new GridPanel(null, null, 1, 2); // divide into 1 rows and cols
    	for (var i = 0; i < 11; i++) {
    		var b = new FormButton(null, "OK");//
    		if (i < 9)
    			ga.addControl(b); // add 9 OK button to ga
    		else
    			gb.addControl(b);// add 2 OK button to gb
    	}
    	list.addControl(ga); // add it(9 button) to list
    	list.addControl(s); // add a separator 
    	list.addControl(gb); // add it(2 button) to list 
    	
    
    	uiManager.setView(list);// display it
    Code:
    /**
     * GridPanel.js
     * @author GoOnDeveloper
     * chen-hongqin@163.com
     */
    
    // Constructor.
    function GridPanel(id, caption, rows, cols) {
        if (id != UI_NO_INIT_ID) {
            this.init(id, caption, rows, cols);
        }
    }
    
    // GridPanel inherits from View.
    GridPanel.prototype = new View(UI_NO_INIT_ID);
    
    
    
    // controls in the view.
    GridPanel.prototype.controls = null;
    
    
    
    // Initializer for GridPanel.
    GridPanel.prototype.init = function(id, caption, rows, cols) {
       // uiLogger.debug("GridPanel.init(" + id + ", "+ caption + ", " + rows + ", "+ cols + ")");
        this.control = new Control(id, caption);
    	this.rows = rows;
    	this.cols = cols;
    	this.cnt = 0;
        // call superclass initializer
        View.prototype.init.call(this, id);
        
        // init control array
        this.controls = [];
        
        // set style class name for root element
        this.rootElement.className = "ListView";
        
    	
    	
        // create caption and caption text elements
        this.captionElement = document.createElement("div");
        this.captionElement.className = "ListViewCaption";
        this.captionTextElement = document.createElement("div");
        this.captionTextElement.className = "ListViewCaptionText";
        this.captionElement.appendChild(this.captionTextElement);
        this.rootElement.appendChild(this.captionElement);
        
        // create root element for controls and add to the view root element
        this.gridElement = document.createElement("table");
        this.gridElement.className = "GridPanelControlGrid";
    	
    	this.create(this.gridElement, rows, cols);
    	
    	
        this.rootElement.appendChild(this.gridElement);
        
        // set the caption
        this.setCaption(caption);
    }
    
    
    //create gridBody(tbody)
    GridPanel.prototype.create = function(grid, rows, cols) {
    	for (var i = 0; i < rows; i++) {
    		grid.insertRow(i);
    		for (var j = 0; j < cols; j++) {
    			grid.rows[i].insertCell(j);
    			grid.rows[i].cells[j].className = "GridCell";
    			grid.rows[i].cells[j].width = (95 / cols).toString() + "%";
    		}	
    	}
    }
    
    GridPanel.prototype.addControl = function(control) {
    	this.controls.push(control);
    	var r = parseInt(this.cnt/this.cols);
    	var c = parseInt(this.cnt%this.cols);
    	//alert(control.rootElement);
    	this.gridElement.rows[r].cells[c].appendChild(control.rootElement);
    	this.cnt++;
    }
    
    GridPanel.prototype.removeControl = function(control) {
    	//not implement
    }
    
    // Sets the caption; null if none.
    GridPanel.prototype.setCaption = function(caption) {
        uiLogger.debug("GridPanel.setCaption(" + caption + ")");
        
        // set the display style
        this.captionElement.style.display = (caption == null) ? "none" : "block";
        
        // set the caption
        this.caption = caption;
        this.captionTextElement.innerHTML = (caption == null) ? "" : caption;
    }
    
    GridPanel.prototype.resetFocusState = function() {
    	this.control.resetFocusState();
    }
    
    GridPanel.prototype.isFocusable = function(){
    	this.control.isFocusable();
    }
    Last edited by GoOnDeveloper; 2010-04-23 at 08:32.

  5. #5
    Nokia Developer Champion
    Join Date
    Nov 2007
    Location
    Rome, Italy
    Posts
    2,406

    Re: does Nokia WRTkit have any class like GridView?

    Hi GoOnDeveloper,

    thank you for sharing your GridPanel component, it'll be definitely useful to other developers as well

    Pit

  6. #6
    Registered User
    Join Date
    Mar 2010
    Posts
    6

    Re: does Nokia WRTkit have any class like GridView?

    GoOnDeveloper's GridPanel is great, but I have a simple way to implement a GridView.

    The root reason that Controls in ListView displays in a form of list is the rootElement of Controls is a div which width is default as 100%.
    So we can write a new style-sheet for rootElement as below:
    Code:
    .Control30{
        width:30%;
        float:left;
    }
    and then modify your Control's rootElement className in function updateStyleFromState to:
    Code:
    // set root element class name
        this.setClassName(this.rootElement, "Control30");
    Well, the controls in ListView will display in a Grid...

Similar Threads

  1. Nokia Image Converter
    By davidpurdie in forum General Development Questions
    Replies: 0
    Last Post: 2004-02-18, 15:31
  2. Exceptions while loading application
    By avinash_rs in forum Mobile Java General
    Replies: 0
    Last Post: 2003-06-09, 10:53

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
×