Page 1 of 2 12 LastLast
Results 1 to 20 of 36
  1.    #1  
    Hey all, as I read several books on Javascript to help me get a handle on developing, I thought it would be a great idea to work on projects in Ares that correspond with what I'm reading.

    So, since the very first item they introduced me to was the getDate object, I figured, "Why not make a date getting application?"

    As it turns out, this is not as simple as it seems. I want your more experienced help in figuring out what I'm doing wrong.


    The premise is simple. There's a button object, and a label object. You click the button, the date appears in the label, simple right? Well I can click the button all I want but the date doesn't appear in the label. So what am I doing wrong? The code is right below. My main problem is, I don't know how to get the date to display in the label.

    (findDate is the button, displayDate is the label, I haven't added or changed any other files in the program)

    Code:
    function MainAssistant(argFromPusher) {
    }
    
    MainAssistant.prototype = {
    	setup: function() {
    		Ares.setupSceneAssistant(this);
    	},
    	cleanup: function() {
    		Ares.cleanupSceneAssistant(this);
    	},
    	findDateTap: function(inSender, event) {
    		var currentDate = new Date();
    	}
    	displayDate: function(currentDate){
    		document.getElementById("displayDate").innerHTML = currentDate;
    	}
    };
  2. #2  
    Quote Originally Posted by Zen00 View Post
    The premise is simple. There's a button object, and a label object. You click the button, the date appears in the label, simple right? Well I can click the button all I want but the date doesn't appear in the label. So what am I doing wrong? The code is right below. My main problem is, I don't know how to get the date to display in the label.
    I'm assuming that you added findDateTap to the "onclick" event of your findDate button?

    I believe that you just need to then invoke the displayDate function, like the following:

    Code:
    function MainAssistant(argFromPusher) {
    }
    
    MainAssistant.prototype = {
    	setup: function() {
    		Ares.setupSceneAssistant(this);
    	},
    	cleanup: function() {
    		Ares.cleanupSceneAssistant(this);
    	},
    	findDateTap: function(inSender, event) {
    		var currentDate = new Date();
    		this.displayDate(currentDate)
    	}
    	displayDate: function(currentDate){
    		document.getElementById("displayDate").innerHTML = currentDate;
    	}
    };
    Doug Meerschaert
    NoInsultSoftware.com

    Apps: Scratch, GasMath, CheckMath
  3.    #3  
    Nope, that didn't work, I still have a blank screen after clicking the button. My current code is...

    Code:
    function MainAssistant(argFromPusher) {
    }
    
    MainAssistant.prototype = {
    	setup: function() {
    		Ares.setupSceneAssistant(this);
    	},
    	cleanup: function() {
    		Ares.cleanupSceneAssistant(this);
    	},
    	findDateTap: function(inSender, event) {
    		var currentDate = new Date();
    		this.displayDate(currentDate)
    }

    I'm assuming that you added findDateTap to the "onclick" event of your findDate button?

    findDateTap is in the "ontap" section of the event viewer for the findDate button. Do I need to add anything to my labels (displayDate) event section?
  4. #4  
    When running your app in the emulator, I suggest you monitor the log file for any possible error messages. I often do so to track down bugs in my coding. You can use the Ares Log monitor feature in Ares or the independent browser version at Palm - Ares - Log

    You might put in a line such as,

    Mojo.Log.error("** button tapped **");

    in your findDateTap() function and see if that text string appears in the log file. If not, then you know the findDateTap() function was never called when you tapped the button.
    cohoman

    Palm Apps:

    jVault and jChecklist
  5.    #5  
    Thanks for the tip cohoman, just did that and yes, the error does display so the function is being called. Now all I want is to display that date in the label! How do I do that?
  6. #6  
    In your scene html file, what does the "displayDate" object look like? Do you have something like this:

    <div id='displayDate'></div>

    If so, then the following call should enter the date string between the <div> tags:

    document.getElementById("displayDate").innerHTML = currentDate;
    cohoman

    Palm Apps:

    jVault and jChecklist
  7.    #7  
    Okay, that works, but...

    Instead of displaying the date in the label, it displays it above the button.

    Prior to adding that code there was nothing in the main-scene.html file.

    Current Code (I added a bunch of comments):

    Code:
    // Beginning of the stuff that comes with the script, ignore till you reach my next comment.
    function MainAssistant(argFromPusher) {
    }
    
    MainAssistant.prototype = {
    	setup: function() {
    		Ares.setupSceneAssistant(this);
    	},
    	cleanup: function() {
    		Ares.cleanupSceneAssistant(this);
    	},
    	//End of stuff that comes with the script, beginning of the button script.
    	//This function (below this line) is where the magic happens, when you tap the button on screen, you will then "call" this function.
    	findDateTap: function(inSender, event) {
    		Mojo.Log.error("** button tapped **"); //This line is a debugging message, if when you run the program you see a red error that state "** button tapped **"
    		//in the Log Viewer that means you have successfully called the findDateTap function!
    		var currentDate = new Date(); //Gives a variable calle "currentDate" the value of the current date.
    		document.getElementById("displayDate").innerHTML = currentDate; 
    	}
    };

    main-scene.html
    Code:
    <div id='displayDate'>
    </div>
  8. #8  
    Now, I don't use Ares so I'm not too familiar with the coding it generates from the interactive interface. If you created a "label" widget with the id of "displayDate" from the interface, where is that widget created in the coding? It sounds like Ares didn't create it an HTML object in the main-scene.html file, so it should have created the label widget in the setup() function? Do you see any where in your jsjsjs $files$ $where$ $this$ $label$ $is$ $being$ $created$ $and$/$or$ $initialized$?
    cohoman

    Palm Apps:

    jVault and jChecklist
  9.    #9  
    It creates it in the main-chrome.jsjsjs $file$, $which$ $is$ $the$ $visual$ $file$.
  10. #10  
    If you created a label widget, you need to be updating the widget. Not a div you put in yourself. When doing things the Ares way, you're not supposed to ever touch the html files. Basically, you need to change:
    Code:
    document.getElementById("displayDate").innerHTML = currentDate;
    to something like:
    Code:
    this.controller.get("label1").update(new Date());
    danNielson.com - Slalom - twitter - facebook
    A posted thanks dies with the thread. Clicking the button lasts until the admins get bored with this site and throw it in the recycling bin.
  11.    #11  
    Thanks unfairSurprisery! That worked perfectly, now I just need to figure out how to display the date in the middle of the label, not at the top.
  12.    #12  
    Where can I learn a little more about the this.controller.get?

    Also, how do I get it to display only the day, month, and year?
  13. #13  
    to display in the center of your label, go into design view, click on your label, then over in the right bar click styles then select the centertext button at the top and check 'oneline' in the 'TEXT' section.

    this.controller.get is part of Mojo.Controller: APIs - Mojo.Controller.SceneController - Palm Developer Center

    'this' just defines that you're getting the current scene assistant.

    as for your third question. Use something like:
    Code:
    var d = new Date();
    this.controller.get("label1").update(d.getDay()+' '+d.getMonth()+', '+d.getYear());
    danNielson.com - Slalom - twitter - facebook
    A posted thanks dies with the thread. Clicking the button lasts until the admins get bored with this site and throw it in the recycling bin.
  14.    #14  
    Working on it right now.

    I'm documenting everything as I learn to put into a tutorial for those following my footsteps, by the way.
  15. #15  
    Sorry, I may have mislead you on that third one. use this instead:
    Code:
    var d = new Date();
    this.controller.get("label1").update(d.getDate()+' '+(d.getMonth()+1)+', '+d.getFullYear());
    Edit: Oh, and here's a link to more javascript date stuff: Javascript Tutorial - Date
    danNielson.com - Slalom - twitter - facebook
    A posted thanks dies with the thread. Clicking the button lasts until the admins get bored with this site and throw it in the recycling bin.
  16.    #16  
    The only problem with the "oneline" option is, it doesn't wrap, how to I get it to wrap the text?
  17. #17  
    First, why do you need it to wrap the text? A simple date string will never be wider than 320px.

    Second, this might be a bit hackish, but here's what I got to work.
    Code:
    MainAssistant.prototype = {
    	setup: function() {
    		Ares.setupSceneAssistant(this);
    		this.l1 = this.controller.get("label1");
    		this.l1.update("<div>"+this.l1.innerText+"</div>")
    			.down().setStyle("margin-top:"+(this.l1.getHeight()/2-this.l1.down().getHeight()/2)+"px;");
    	},
    	cleanup: function() {
    		Ares.cleanupSceneAssistant(this);
    	},
    	button1Tap: function(inSender, event) {
    		var d =new Date();
    		var m = ['January','February','March','April','May','June','July','August','September','October','November','December'];
    		this.l1.update('<div>'+m[d.getMonth()]+' '+d.getDate()+', '+d.getFullYear()+'</div>')
    			.down().setStyle("margin-top:"+(this.l1.getHeight()/2-this.l1.down().getHeight()/2)+"px;");
    		
    	}
    Basically, it positions the inside div initially and then again every time you update the label. Note though that it doesn't take into account rotating the screen.

    Edit: Oh, and drop the oneline thing... And I noticed a glitch in Ares where I had to actually delete the label and make a new one to get the oneline to go away.
    danNielson.com - Slalom - twitter - facebook
    A posted thanks dies with the thread. Clicking the button lasts until the admins get bored with this site and throw it in the recycling bin.
  18.    #18  
    Here's my code as it stands now, and the reason I want to wrap is because the final output goes off the screen.

    Code:
    // Beginning of the stuff that comes with the script, ignore till you reach my next comment.
    function MainAssistant(argFromPusher) {
    }
    
    MainAssistant.prototype = {
    	setup: function() {
    		Ares.setupSceneAssistant(this);
    	},
    	cleanup: function() {
    		Ares.cleanupSceneAssistant(this);
    	},
    	//End of stuff that comes with the script, beginning of the button script.
    	
    	//This function (below this line) is where the magic happens, when you tap the button on screen, you will then "call" this function.
    	findDateTap: function(inSender, event) {
    		
    		Mojo.Log.error("** button tapped **")
    		//This line is a debugging message, if when you run the program you see a red error that state "** button tapped **"
    		//in the Log Viewer that means you have successfully called the findDateTap function!
    		
    		var currentDate = new Date()
    		//This variable will get the full date, time, and everything. The next few lines will formate that.
    		
    		var month = currentDate.getMonth()
    		var hour = currentDate.getHours()
    		var minute = currentDate.getMinutes()
    		var second = currentDate.getSeconds()
    		var displayMonth = ""
    		var greeting = ""
    		var ampm
    		//This pulls the month, hour, minute, and seconds from the currentDate variable plus declares a few more useful variables for later.
    		//Months are ordered from 0-11, starting with January. We'll make that more recognizable in a second.
    		
    		switch (month) {
    			case 0 :
    				displayMonth = "January"
    				break
    			case 1 :
    				displayMonth = "February"
    				break
    			case 2 :
    				displayMonth = "March"
    				break
    			case 3 :
    				displayMonth = "April"
    				break
    			case 4 :
    				displayMonth = "May"
    				break
    			case 5 :
    				displayMonth = "June"
    				break
    			case 6 :
    				displayMonth = "July"
    				break
    			case 7 :
    				displayMonth = "August"
    				break
    			case 8 :
    				displayMonth = "September"
    				break
    			case 9 :
    				displayMonth = "October"
    				break
    			case 10 :
    				displayMonth = "November"
    				break
    			case 11 :
    				displayMonth = "December"
    				break
    			default: displayMonth = "That month doesn't exist!"
    		}
    		//This long switch will help us translate from a number to an actual readable month. This all relies on the month variable we declared earlier.
    		
    		if (hour <= 11 && minute <= 59) {
    			greeting = "Good morning! It's "
    			ampm = "a.m."
    			if (hour == 0) {
    				hour = 12
    			}
    		}
    		//This bit of useful code will give us a little greeting dependant on the time of day. We'll be repeating this for afternoon and evening.
    		//The second if nested in the first converts midnight from 0 to 12 (time is reported military style)
    		
    		else if (hour >= 12 && hour < 18) {
    			greeting = "Good afternoon! It's "
    			ampm = "p.m."
    			if (hour > 12) {
    				hour -= 12
    			}
    		}
    		//Again, we check to see if it's afternoon, if so we update the correct greeting and time. The second if corrects for military time. Remeber the else!
    		 
    		else if (hour >= 18 && hour < 21) {
    			greeting = "Good evening! It's "
    			ampm = "p.m."
    			hour -= 12
    		}
    		//The second if is no longer necessary as we know that it isn't midnight, and that it's afternoon.
    		
    				else if (hour >= 21 && hour < 24) {
    			greeting = "Time to say good night! It's "
    			ampm = "p.m."
    			hour -= 12
    		}
    		//Same again for night.
    		
    		if (minute < 10) {
    			minute = "0" + minute
    		}
    		//Corrects to add a 0 to the minutes if they're less than ten.
    		
    		if (second < 10) {
    			second = "0" + second
    		}
    		//Same for seconds
    		
    		var displayGreeting = greeting + displayMonth + " " + currentDate.getDate() + ", " + currentDate.getFullYear() + " - " + hour + ":"
    			+ minute + ":" + second + " " + ampm
    		//displayGreeting strings everything together into one easily recognizable string. Code lines can wrap by the way.
    		
    		this.controller.get("displayDate").update(displayGreeting).wrap
    		//"this" referes to the findDateTap function, so that you don't have to retype it each time you need to refer to it in the function.
    		//Basically what the line is saying is, when this funtion is called, then update the displayDate label to reflect the current date.
    	}
    };
  19.    #19  
    What I currently want to know is if...

    A. I can word wrap the final string or...
    B. If I can make two lines, one for the greeting, another for the time, without loosing the middle screen view of the date.
  20. #20  
    To question B, when updating an element, any HTML tags are treated as such, In my code below I just used a <br/> tag.

    Also, went over your code, It was a tad wordy and a bit redundant. I wrote it up how I would have done it, let me know if there's something you don't understand or if you just want to know what I was thinking when I wrote a particular line. Keep in mind, a lot of the way I did things is just my coding style and not necessarily better, just different.

    Code:
    MainAssistant.prototype = {
    	setup: function() {
    		Ares.setupSceneAssistant(this);
    		this.l1 = this.controller.get("label1");
    	},
    	cleanup: function() {
    		Ares.cleanupSceneAssistant(this);
    	},
    	zerofill: function(number, length){
    		var working = ''+number;
    		while(working.length<length){
    			working = '0'+working;
    		}
    		return working;
    	},
    	button1Tap: function(inSender, event) {
    		var date =new Date();
    		var months = ['January','February','March','April','May','June','July','August','September','October','November','December'];
    		var greets = [
    			{ merid:		'am',
    				greeting:	"Good Morning!<br/> It's "},
    			{ merid:		'pm',
    				greeting:	"Good Afternoon!<br/> It's "},
    			{ merid:		'pm',
    				greeting:	"Good Evening!<br/> It's "},
    			{ merid:		'pm',
    				greeting:	"Good Night!<br/> It's "}
    		];
    		var _12hour = [12,1,2,3,4,5,6,7,8,9,10,11,12,1,2,3,4,5,6,7,8,9,10,11];
    		var d = date.getDate();
    		var m = months[date.getMonth()];
    		var y = date.getFullYear();
    		var hour = date.getHours();
    		var min = this.zerofill(date.getMinutes(),2);
    		var sec = this.zerofill(date.getSeconds(),2);
    		var frame = 0;
    		
    		if( hour < 12 ){ frame = 0; }
    		else if( hour < 18 ){ frame = 1; }
    		else if( hour < 21 ){ frame = 2; }
    		else { frame = 3; }
    		
    		var merid = greets[frame].merid;
    		var greeting = greets[frame].greeting;
    		var stdHour = this.zerofill(_12hour[hour],2);
    		
    		this.l1.update(greeting+m+' '+d+', '+y+' - '+hour+':'+min+':'+sec+' '+merid)
    			
    		
    	}
    };
    danNielson.com - Slalom - twitter - facebook
    A posted thanks dies with the thread. Clicking the button lasts until the admins get bored with this site and throw it in the recycling bin.
Page 1 of 2 12 LastLast

Posting Permissions