Posts de January, 2015

[Lucas Galego] JavaScript Object Oriented Programming

Tuesday, January 13th, 2015

When I started to work as a developer, I remember that my fellow programmers used to hate JavaScript.
I myself was not a real fan of this incredible language.
That’s why I decided to study it more deeply.
During my studies, one thing came clear to me:

JavaScript is one of the most powerfull languages I ever seen.

But… There is always a but.

Its API is terrible.

But since JavaScript is a language ready to be extended, we solve this problem using some great tools like jQuery or Undescore.js, that make the JavaScript API be really beautiful.

JavaScript is a really powerfull language, so, we can program in JavaScript using a lot of paradigms.

Let’s talk about how to implement your JavaScript code using Object Oriented Programming.

JavaScript and OOP

To understand how to make OOP code using JavaScript, we first need to understand how the variable this works.

console.log(this);

If you run this code, the console will log to you an instance of the DOM Window object representing the window of your browser (this will change if you are running this on a Node.js server).

That means that in the global scope this is the Window object.

Okay, so what if we run this code:

function some(){

console.log(this);

}

some();

If you run, you will see that again Window is logged.

That means that the this of a function is the same this from the scope where the function is defined.

So, how can I create an object and make its this referencing it?

Creating a JavaScript Object

var myObj = {

some: function(){console.log(this);}

};

myObj.some();

Now we are getting somewhere, When you run this code, it’s an Object that is logged, not a Window Object, just an Object.

If you inspect the logged object, you will se that it has a property called some. This property is a function, the function that we called.

Once we have an object, we can add properties to it:

myObj.coolProperty = “JavaScript rocks”;

And also retrieve these properties:

console.log(myObj.coolProperty)

console.log(myObj[‘coolProperty’]

Note that the properties are like keys of a map. You can retrieve them using the [] syntax, so, you can pass the properties as parameters.

var myObj = {

func1: function(){console.log(“Called 1″)},

func2: function(){console.log(“Called 2″)}

}

myObj[“func2″]();

This will prompt “Called 2″.

Creating constructors

There is another way to create an object:

function MyObject(){

this.some = function(){console.log(this);};

}

myObj = new MyObject();

console.log(myObj.some());

We just created a constructor. If you run this code, you will se now MyObject at the console.

Since we created this object using the function new, this was redefined from Window to MyObject.

Thats why when we make this.some = function(){console.log(this);}; inside the function MyObject the function is defined inside our MyObject instance.

So what happens if we run this code:

function MyObject(){

this.some = function(){console.log(this);};

}

myObj = MyObject();

console.log(myObj);

some();

Now, we don’t used new when we invoked MyObject function. That means that inside the function this remains to be Window.

Wich means

console.log(myObj);

log undefined. We don’t return anything from MyObject function, so myObj is undefined.

And that’s why we can invoke some at the global scope and it log Window.

So its very important to remember that you have to use new when you are creating an Object  from a Constructor.

Creating Public Methods

All right, now we know how to create objects and even how to create this objects from constructors.

But how can we add methods to a Object definition.

Let’s see two ways.

  • Using properties:

function MyObject(){

this.method = function(){console.log(“I’m a public method”);};
}

new MyObject().method();

or

var myObject = {

method: function(){console.log(“I’m a public method”);}

}

myObject.method();

In both examples we defined a property in an object that is a function. So we can use this function like a method.

  • Using prototype

function MyObject(){};

MyObject.prototype.method = function(){console.log(“I’m a public method”);};

new MyObject().method();

We just created a construtor for MyObject, after that, we defined in the prototype of our constructor an attribute that is a function.

Every attribute defined in the prototype of an object, is automatically, accessible by the instances of that object.

Using Inheritance

We can use prototype to define Inheritance.

function Animal(){};

Animal.prototype.eat = function(){console.log(“eating…”);};

function Dog(){};

Dog.prototype = Animal.prototype;

new Dog().eat();

Setting the prototype of the Constructor of a Dog as the prototype of Animal makes that our Dogs to have the method eat.

Defining private members

Well, you may also want to create properties and methods that are not public. This is really easy.

Every variable in JavaScript has function scope

function a(){

var b = 1;

console.log(b);

}

a();

console.log(b);

This code will log 1 and then will log undefined. That’s why when we use the word var we are saying that the variable b exists only inside the function a.

Since our objects are functions, we can use the same idea:

function MyObject(){

var privateMethod = function(){console.log(“I’m private”);};

this.publicMethod = function(){console.log(privateMethod());};

}

new MyObject().publicMethod();

console.log(new MyObject().privateMethod).

This code will log I’m private and them undefined. And thats was what we expect.

First we call the public method. It has access to our private method inside the Object instance so it con log our message.

But, outside the constructor function, the variable privateMethod dos not exists, so our code log undefined.

Conclusion

You can have a lot of fun with JavaScript. So enjoy and play a lot :)

I just introduced the concept of OOP here, there is a lot to talk about this.

You can see some great JavaScript samples here.

That’s all. See you!

[Lucas Galego] Hello world!

Tuesday, January 13th, 2015

Hello guys.

This is a new and refreshing blog.

I’m going to try to post here my thoughts about one of my greatest passions. That is programming.

Lets see what you will think about it.

See ya!

[Lucas Galego] Ruboto, this android works?

Tuesday, January 13th, 2015

I was wondering about play a little with a project called Ruboto by some time.

For who doesn’t heard anything about this project, Ruboto is a intended to make possible to write android applications with Ruby.

Since I love my old but gold Motorola Milestone and I also love Ruby this sounds really fun.

Here is what I have done:

My intention was to make a really simple application just to see the maturity of the project.

What can be more simple than a planning poker app? Well I don’t know. So I decided to make that one.

Begining from scratch:

  • You can find more about the Ruboto project at its web page.
  • You can write fully funcional apps only writing code in Ruby and using generators to make the Java wrappers.
  • You can make hybrid projects using Java and Ruby.
  • It cover almost all android API.

But… There is always a but:

  • To run Ruboto apps  you have to install the ruboto-core app to your android device.
  • If you want that your app support JIT (and who doesn’t want that?) your apk file will get bigger.

Let’s Play

To start to play you have to setup your enviroment.

You gonna need the JDK installed in your system.

Once you it installed, install the JRuby.

I recommend you to use the JRuby 1.6.4. It will also be smart, install it using rvm and create a gemset to full around.

Another dependency is the Android SDK. You can get it here.

Read the REAME file since you have downloaded it. ;)

Don’t forget to install the android sdk and the development tools.

Okay. That’s all. Now we can start the party.  :)

First we need to create an emulated device to use during our development.

To create this run the command:

android -s create avd -f -n Android_2.3 -t android-10 –sdcard 64M

To startup the emulator you created:

emulator -avd Android_2.3

Generating the Ruboto project

ruboto gen app –package better.code.planning.poker –target android-10

Just this. The Ruboto project contains code generators like Ruby on Rails.

You have now:

  • All the project structure of an Android project,
  • All the Java wrappers to your Ruby script,
  • A Hello World Ruby Script,
  • Some usefull rake tasks.

The rake tasks are:

  • rake -> Build the apk.
  • rake install start -> Build the apk, install and start it on your emulator.
  • rake install:clean start -> Also clean the previous build from your emulator.
  • rake update_scripts:restart -> Updates only the ruby script on your device, it can save you some compilation time.

You can also make the deploy to the device by yourself using the comand:

adb install ruboto-core.apk

Let’s start to code

First lets define a better title to our activity:

Edit the application name into the file: res/values/strings.xml

<string name="app_name">Planning Poker!</string>

Now we can finally see one of the good points of using Ruboto.

When developing Android apps, you have to deal with a lot of xml files that handle how the templates will be defined.

With Ruboto, we can define our template using its much more delicious DSL.

Edit the file: src/poker_activity.rb

require 'ruboto'

java_import 'android.content.Intent'

ruboto_import_widgets :Button, :LinearLayout, :TableLayout, :TableRow

$activity.handle_create do |bundle|
  setTitle 'Lets make this Sprint!'

  setup_content do
    table_layout do
        table_row do
          button :text => ' 1 ', :text_size => 57
          button :text => ' 2 ', :text_size => 57
          button :text => ' 3 ', :text_size => 57
        end
        table_row do
          button :text => ' 5 ', :text_size => 57
          button :text => ' 8 ', :text_size => 57
          button :text => ' 13', :text_size => 57
        end
        table_row do
          button :text => ' 20', :text_size => 57
          button :text => ' 40', :text_size => 57
          button :text => '100', :text_size => 57
        end
        table_row do
          button :text => 'Zzz', :text_size => 57
          button :text => ' 0 ', :text_size => 57
          button :text => ' ? ', :text_size => 57
        end
    end
  end
end

We defined our layout using the Ruboto DSL with the methods setup_content, table_layout and table_row.

We set the content of each row with the method button.

Events and new Activities

Now let’s make the magic. When the user press the number he wants to vote, we will popup a new Activity with the value.

For this we need to create a new Activity.

ruboto gen class Activity –name Card

And edit the code in src/card.rb like this:

require 'ruboto'

ruboto_import_widgets :Button, :LinearLayout, :TextView

$activity.handle_create do |bundle|
  setTitle 'My vote is'

  setup_content do
    linear_layout :orientation => LinearLayout::VERTICAL do
      @text_view = text_view :text => $activity.getIntent.getExtras
                   .get("better.code.ruboto.planning.poker.vote"),
                   :text_size => 150
    end
  end

end

Now, what we need is register the event, so we can dispatch the new Activity.

First we need to register the new activity in the AndroidManifest.xml file

<activity android:name='Card' android:label='Card'>
        <intent-filter>
            <action android:name='android.intent.action.CARD'/>
            <category android:name='android.intent.category.DEFAULT'/>
        </intent-filter>
</activity>

Now, we add the handler of the action into the src/poker_activity.rb file. Just after the setup_content method:

handle_click do |view|
    i = Intent.new("android.intent.action.CARD")
    i.putExtra("better.code.ruboto.planning.poker.vote", view.text)
    startActivity(i)
end

Using the Intent instance, we can call the putExtra method. That’s the way we can pass args to our new Activity.

In the Card Activity, the args are rescued using the getExtras method.

That’s it. I hope you enjoy it just like me :)

See ya!