Yospace Support

Improving the SmartPhone Emulator Delivery

Unlike many other Web-based handset browsers on the Internet, the SmartPhone Emulator is written in Java which provides unprecedented accuracy and responsiveness once it has been loaded.

We have put tremendous effort into reducing the size of the SmartPhone Emulator applet in order to minimise its loading time. The Nokia 7110 personality can currently load and run in approximately 100K, although Netscape Navigator users will observe a slightly larger size of approximately 135K.

For people with a fast connection to the Internet (ISDN, Broadband Cable, E1, T1, etc) the applet will appear to load and run very quickly. For those dialed in through a modem, 100K can take a minute or so to load. This time cannot be reduced, but the quality of the user's wait can be improved.

While the applet loads, PC users may see a grey box which outlines the final position of the completely loaded applet. However, Macintosh users may see nothing. There is no obvious indication that something special is going to happen on the page -- in some cases this could prompt the user to leave the page without running the applet at all. Making the user wait a little longer is particularly important the first time they load a page containing the emulator, as the user may not be aware of its extra loading time in this case. However it is important to remember that all copies of the applet are loaded centrally from Yospace. This means that there is a good chance that the applet will already be present in the browser's cache, thus allowing the applet to be invoked very quickly.

So that the user is aware that they should wait for the applet to load (rather than leaving the page prematurely), we have included some extra HTML in our home page which indicates that the emulator is loading. This extra code initially hides the unloaded applet and places an animated graphic in the location where the applet will appear. Once the applet has loaded, this graphic disappears and the applet is revealed.

To implement this facility, put the following in the HEAD section of your HTML page. If, for some reason, you are unable to put this in the HEAD section, then insert it at the earliest convenient point in the file. The JavaScript is fairly simple and with much room for improvement. However the following example will suffice in most cases.


<script>


function init()


{


   if (navigator.userAgent.indexOf("MSIE") >= 0)


   {


   	document.all.loading.style.visibility = "hidden";


   	document.all.appletDiv.style.visibility = "visible";


   }


   else  // if the browser was not Internet Explorer, 


   		 // we assume it is Navigator


   {


   	document.loading.visibility = "hidden";


	document.appletDiv.visibility = "visible";


   }


}


</script>

This code will be called once the document (including the applet) has been fully loaded. The code simply hides the loading graphic and makes the applet visible. It is called from the onLoad JavaScript event handler in the <BODY> tag of your document. You will therefore need to add this event handler to the <BODY> tag of your document. JavaScript programmers will note that setTimeout is used to delay the call of the init function by 10 milliseconds to work around a timing problem which occurs when returning to the page using the browser's Back button.



<body onLoad="setTimeout('init()',10)">

Just before the HTML that places the applet on the page, you need to create an invisible layer named loading containing the loading message or graphic. Then, immediately around the <applet> tags that embed the emulator, place a DIV named appletDiv. This allows us to show, hide and get the screen position of the applet. The example code has the applet tags included for completeness, but please do not copy this applet tag (shown in grey) as it may not be the most up to date recommendation.





<div id=loading name=loading>


  <center>


    <img src="/images/Loading.gif" width=92 height=90>


  </center>


</div>




<div id=appletDiv style="position: relative; visibility: hidden">



<applet name=spe 


	codebase=http://relay.yospace.com/spe/


	archive="spe.jar"


	code="com.yospace.emulator.applet.PhoneApplet"


	width=122 height=190>


  <param name="servlet-url"


         value="http://bhaji/servlets/emulator">


  <param name="wml-homepage"


      value="http://wap.yospace.com">


  <param name="phonePropsPath"


         value="/nokia/n7110a/com.yospace/beheaded/white/size1">


  <param name="background-loading" value="true">


</applet>




</div>

To position the loading layer you will need to include the following style sheet information somewhere in your head section (or at the earliest convenient point). This example uses the graphic shown right with a dimension of 92x90 pixels which is reflected in the width and height properties.



<style>


#loading {	position: absolute;


			top:0;  left:0;


			width:92; height:90;


			z-index: 100;


			visibility: hidden;  }


</style>

The new layer will be displayed over the applet and the new code around the applet will cause the browser to hide the applet initially. This is necessary as it is not possible to place content on top of a visible applet at any time. At the very end of the file it is necessary to place a script which will be run when this part of the page has loaded. This code places the loading graphic on top of the invisible applet and displays it.



<script>


   if (navigator.userAgent.indexOf("MSIE") >= 0)


   {


      var bert = document.all.loading.style;


           

      bert.top = document.all.appletDiv.style.top;


      bert.left = document.all.appletDiv.style.left;


      bert.width = document.all.appletDiv.style.width;


      bert.height = document.all.appletDiv.style.height;




      bert.visibility = "visible";  


      document.all.appletDiv.visibility = "hidden";


   }


   else  // if the browser was not Internet Explorer,


   		 // we assume it is Navigator


   {


      var bert = document.loading;


      

      bert.top = document.appletDiv.pageY;


      bert.left = document.appletDiv.pageX;


      bert.width = document.appletDiv.width;


      bert.height = document.appletDiv.height;


      bert.visibility = "visible";


	  

      document.appletDiv.visibility = "hidden";


   }


</script>

This recommendation has been tested on Netscape Navigator 4.5+ and Microsoft Internet Explorer 4+ on Windows, and Internet Explorer 4.5, 5.0 on Macintosh and Netscape Navigator 4.5+ on Solaris. If you have any suggestions on how to improve this recommendation, please email support@yospace.com