Archive

Javascript Framework

I have been developing a web application in Sproutcore framework. It’s a great framework to develop. I have integrated with facebook login, like button and thought may be great idea to add google +1 button.

At first I thought it should be an easy procedure with the straight forward tutorial posted in google. But I had the problem of rendering the button in the page. So I followed the explicit load example in google +1 button in their website.  Below the steps I followed  to show up  google +1 in my sproutcore application:

1. Add the plusone script in the head portion of ‘index.rhtml’

<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
    {"parsetags": "explicit"} /* for explicit loading */
</script>

2. Added <div id=”plusone-div”></div> where I wanted the button to appear.

3.  Added the following javascript function:

createPlusOne: function () {
    gapi.plusone.render("plusone-div",{"size":"medium","count":"true"});
}

first parameter: the div to render
second parameter: button configuration in json format
more configuration settings can be found in here.

4. Called this function in the states wherever I wanted to render the button.

That should be it. Enjoy +1!

Advertisements

Sproutcore is an MVC architecture javscript framework for client-side for developing desktop like rich web applications. It enables building blazingly fast, innovative user experiences on the web. To know more about sproutcore visit here.

Install sproutcore in your windows machine you can download the windows installer from the site. Or you can install using ruby 1.9.2-p180.

gem install sproutcore -pre

if you are working on Windows then you will probably run into this when you install SproutCore:

gem install sproutcore -pre
Fetching: rack-1.2.2.gem (100%)
Fetching: json_pure-1.4.6.gem (100%)
Fetching: extlib-0.9.15.gem (100%)
Fetching: abstract-1.0.0.gem (100%)
Fetching: erubis-2.6.6.gem (100%)
Fetching: thor-0.14.6.gem (100%)
Fetching: eventmachine-0.12.10.gem (100%)
ERROR: Error installing sproutcore:
The ‘eventmachine’ native gem requires installed build tools.

Please update your PATH to include build tools or download the DevKit
from ‘http://rubyinstaller.org/downloads’ and follow the instructions
at ‘http://github.com/oneclick/rubyinstaller/wiki/Development-Kit’

You can find out more about DevKit at https://github.com/oneclick/rubyinstaller/wiki/Development-Kit and you can download DevKit at http://rubyinstaller.org/downloads, which you probably picked up on from the error message above.

Note: the latest version of “eventmachine” is not compatible with DevKit. You have to get the pre-release version by using this command:

gem install eventmachine –pre

Once you successfully install eventmachine run the following command again to install sproutcore.

gem install sproutcore -pre

When you try and install SproutCore again you should see a successful install like this:

gem install sproutcore -pre
Fetching: daemons-1.1.2.gem (100%)
Fetching: thin-1.2.11-x86-mingw32.gem (100%)
Fetching: sproutcore-1.4.5.gem (100%)
Successfully installed daemons-1.1.2
Successfully installed thin-1.2.11-x86-mingw32
Successfully installed sproutcore-1.4.5
3 gems installed
Installing ri documentation for daemons-1.1.2…
Installing ri documentation for thin-1.2.11-x86-mingw32…
Installing ri documentation for sproutcore-1.4.5…
Installing RDoc documentation for daemons-1.1.2…
Installing RDoc documentation for thin-1.2.11-x86-mingw32…
Installing RDoc documentation for sproutcore-1.4.5…

once you get this you should be able to create your first application running the following in command prompt:

sc-init

You should have a project folder created with the required files. Now you cd into the project folder and run the following command to start the server:

sc-server

Sproutcore browser by default listens to port 4020. Once you see the server has started to listening you can browse from browser to http://localhost:4020

That’s it you should see the welcome to sproutcore message in your browser after launching your project application!

%d bloggers like this: