SocialCalc on PalmPre

From Seeta

Revision as of 18:08, 25 October 2010 by Rohit jain (Talk | contribs)
(diff) ← Older revision | Current revision (diff) | Newer revision → (diff)
Jump to: navigation, search

[edit] SocialCalc on Palm Pre

Palm pre phones are amongst the latest phones by palm which use the platform Palm WebOS. Palm WebOS is the new dynamic framework launched by palm, which aims at providing a splendid user experience for the new generation multi tasking user. The most striking part of this is that applications for the WebOS can be developed using the basic web development tools like HTML, CSS and JavaScript. The framework named Mojo used for application development in WebOS, basically to create UI components etc.

SocialCalc is a JavaScript based spreadsheet application orignally created by Dan Bricklin. So, SocialCalc on Palm Pre is a spreadsheet application for palm pre, which has been developed by integrating the SocialCalc code with the framework for application development on WebOS.

It aims at providing users an application with which they can create, edit, format and do a lot more with lists as of now. The prototype JavaScript library is bundled along with the Mojo framework for webOS, and this makes it possible to port the SocialCalc for web browser onto WebOS platform.

The basic folder structure of a WebOS application includes a folder called scene where all the HTML files are placed and a folder assistant in which all the JS files containing the backend coding for the particular scene are kept. Apart from this, there is an images folder that contains all the images used in the application in png format.

[edit] Functionality

With The help of Screenshots we are going to explain the basic functionalities of Socialcalc on Palm Pre. This is how the application looks like on the emulator of the phone. All the basic options that user might need while editing the spreadsheet are available on the main screen. Options include : Undo, Redo, Copy, Cut, Paste, Left Align, Center Align, Right Align, Merge Cells, Unmerge cells, Insert Row, Insert Col.

The names of these options are self explanaitory. The user needs to select the cells and the tap the option required to be used. For entering data into the cell one needs to just tap the cell and start typing. It accepts both numbers and alphabets. The scroll bars available on the side and the bottom can be used to scroll through the spreadsheet. Any number of cells can be used. They keep getting added dynamically to the spreadsheet, so there is no limitation.

File:Scpp-2.jpg File:Scpp1.jpg File:Summation.jpg

One can use basic mathematical functions, simply by clicking the function button "f()" that is available on the main screen. A new screen as shown comes up. The description of the function chosen are available. Functions lets user perform basic trigonometric, logarithmic and arithmetic operations conviniently.

File:Scpp-3.jpg File:Scpp-function1.jpg

Also, the sort tab available can be used to sort data. First enter the data. Select the cells and choose the sort option from the tab. One can choose "up" or "down" as per the requirement to sort in ascending or descending order. once this is done. Clicking the sort button that appears with the range sorts the selected cells. Now to go back one simply needs to click on the edit tab.

File:Scpp-sort.jpg File:Scpp-sort1 copy.jpg

Also a lot of formatting options are available that can be easily accessed by clicking the format tab. One can choose from bold, italics etc for a particular cell or the whole spreadsheet. Format options like decimal numbers. time and date are available for numbers. The text can be resized as well. All these options are a great add on for the user.

File:Scpp-format.jpg File:Scpp-format1.jpg File:Scpp-format2.jpg


Now the spreadsheet just edited can be saved by simply clicking the file or the update button. Clicking on update button opens the screen as shown. Enter the file name in the text box that shows up. This saves the file and this can be retrieved anytime by the open option that is available when one click on the file tab.

The file tab opens up a new screen. The list of all the files stored can be seen from here. Enter the file name desired to be open or saved in the text box and click on the save/open button. Also the deletion option is also available, enter the file name to be deleted in the second text box that can be seen and click the delete button. Multiple deletion can be made one after the another easily.

File:Scpp-4.jpg File:Scpp-6.jpg File:Scpp-5.jpg File:Scpp-7.jpg


File:Multi-in.jpg File:Multi-in1.jpg File:Center1.jpg

[edit] Guide For Programmers

Basic Overview

Here we utilize the fact that the prototype Javascript framework is also supported along with the Mojo Framework on the WebOS. Certain Basic Steps that need to be done for beginning are:-

  • Move JS into seperate files - JS scripts embedded in the app need to be seperated out into seperate file. When we move to code for the webOS, we will include the JS files in the sources.json file. We can not include js in the scene.html file. Or rather, we can, but it won't actually RUN.
  • CSS considerations - At the beginning we also move out the CSS from the HTML file and into a seperate css file.
  • Images - Convert all the pictures required by the application to png format from any other format.

Now create a webOS application using eclipse editor or through command prompt and add a new scene to it. The file structure will be as follows

       * app
           * assistants
           * views
       * images
       * stylesheets
       * sources.json
       * appinfo.json
       * index.html

The assistant and the views folder consist of the Javascript code and the HTML files for the scenes respectively. So we put the contents of our previous index.html after seperating out JS code in the HTML file for the scene and put all the JS files in the assistant folder. Now to include multiple JS files with a single HTML file we need to modify Sources.json file. This is how it will look like.

   [
   {"source": "app/assistants/stage-assistant.js"},
   {"source": "app/assistants/formatnumber2.js"},
   {"source": "app/assistants/formula1.js"},
   {"source": "app/assistants/socialcalc-3.js"},
   {"source": "app/assistants/socialcalcconstants.js"},
   {"source": "app/assistants/socialcalcpopup.js"},
   {"source": "app/assistants/socialcalcspreadsheetcontrol.js"},
   {"source": "app/assistants/socialcalctableeditor.js"},
   {
       "scenes": "socialcalc",
       "source": "app/assistants/socialcalc-assistant.js"e name of the
   }
   ]

Here the name of the scene is 'socialcalc', and all the JS files have been included with it's html file socialcalc.html in views folder. Now lets have a look at the structure of 'socialcalc-assistant.js' file.

It contains mainly the following functions :

   * Socialcalcassistant : The constructor function called when the scene is created.
   * Socialcalcassistant.prototype.setup : Code for the setup tasks that are performed when the scene is first created like 
                                                 setting up widgets
   * Socialcalcassistant.prototype.activate : event handlers that are required only when the scene is active
   * Socialcalcassistant.prototype.deactivate : remove any event handlers here setup earlier while deleting the scene.
   * Socialcalcassistant.prototype.cleanup 

The JS content that was seperated out initially is put in the setup function of the socialcalc assistant file. This allows the application to work on the emulator. Next step is to modify the GUI of the application according


  • Graphic size -- the Pre screen is 320px wide by 480 tall, but notifications will shrink application part of the screen vertically. We Resize graphics to fit in 320px.
  • Control size -- targets (especially buttons) smaller than 25px square are all but impossible to hit with a finger. 45px is the suggested size. 35px works. 25px doesn't really work unless there is 10px or so of space between them, so why not use the 35px size as your minimum target. Re-jigger your controls and graphics to allow that.
  • Graphic format -- the Pre wants graphics to be png. Change all images to png. ( Yes, gif's and jpg's will work. No they are not the suggested graphic format for the Pre. Take this opportunity to move to a format with real alpha transparency.
  • Graphic location -- Mojo wants the images for the app in the images folder for the app. When porting, change source calls for the images to images/filename.png.

A lot of CSS changes need to be made and features selected from the original socialcalc considering that the application is being ported on a cell phone as mentioned in the previous points.


A fully detailed programming Guide can be found at File:SocialCalc On WebOS - Programming Guide.pdf.