Wisdom of Helios


1 Comment

Angular JS QuickStart

Today I have uploaded a short presentation on Angular JS quick start. It is a laconic presentation on Angular JS for beginners only. I have emphasized on example rather than theory. There are self explained source code urls attached with slides. In the last slide I have attached source code for a real life example using Angular JS an BootStrap which may be very helpful to understand the concept of Angular JS.

Angular JS real life example

Angular JS real life example


Leave a comment

Javascript closure tutorial with example

A closure in JavaScript is like keeping a copy of all the local variables, just as they were when a function exited.
Simply accessing variables outside of your immediate scope creates a closure.

Example 1 :
Simplest Closure example

var a = 3; // global varibale
function t() {
console.log(a); // will output 3
console.log(b); // will output 4
}
var b = 4; //// global varibale
t();

Example 2 :
Here a closure is formed, because f2 funtion can access the “temp” which was defined
as an member variable of f1. To become a closure function does not need to be returned all the time

function f1(a)
{
  var temp = 0;
  
  function f2(b)
  {
    alert(++temp); // will alert 1
  }
  
  f2(3);
  
  }
  
f1(5);

Example 3 :
Below code snippet also creates closure,
f2 function can still refer to temp even though it is no longer directly inside the scope.
However, since temp is still hanging around inside cls closure, it is also being incremented.
It will be incremented each time you call cls().

  
function f1(a)
{
  var temp = 0;
  
  return function f2()
  {
    alert(++temp); 
  }
  
}
  
var cls =  f1(5); // return function has been coppied
cls() // closure formed !!!!!  temp = 1;
cls(); // temp = 2;
cls(); // temp = 3;

Example 4 :
A closure is a stack-frame which is not deallocated when the function returns .
The three functions have shared access to the same closure — the local variables of s() when the three functions were defined.

Note that in the below example, if you call s() again,
then a new closure (stack-frame!) is created. The old sShow, sIncrease, sSetNumber
variables are overwritten with new functions that have the new closure.
(In JavaScript, whenever you declare a function inside another function,
the inside function(s) is/are recreated again each time the outside function is called.)

  
function s() 
 {
    // Local variable that ends up within closure
    var num = 666;
    // Store some references to functions as global variables
    sShow = function() { alert(num); }
    sIncrease = function() { num++; }
    sSetNumber = function(x) { num = x; }
}

s();
sIncrease();
sShow(); // will alert 667 as sIncrease() is called earlier 
		//	and now num = num+1. 

sSetNumber(10);
sShow();  // will alert 10 as sSetNumber() is called earlier 
		//	and now num = 10. 
        
var oldVal = sShow(); // alert 10 as num is set to 10 earlier.
s() // new closure (stack-frame!) is created. All inner functions will 
    // generate new closures.
    
sShow(); // alerts 666

Example 5 :
This example shows that the closure contains any local variables that were declared inside
the outer function before it exited. Note that the variable greet is actually declared after
the anonymous function. The anonymous function is declared first; and when that function is
called it can access the greet variable because greet is in the same scope
(JavaScript does variable hoisting). Also yourName()() just directly calls the function reference
returned from sayName().

function yourName(name) {
    var sayName = function() 
                   { 
                     alert(greet); // still can access greet, As 
                   }             // inner function has access on all local variables  
                              //of outer function. 
         var greet = 'Hello ' + name; 
          return sayName; 
         } 
      yourName("Max")();

Hopefully you have enjoyed this post. Happy coding. 🙂


Leave a comment

Image Postioning on Android

A picture is worth a thousand words” refers to the notion that a complex idea can be conveyed with just a single still image. It also aptly characterizes one of the main goals of visualization, namely making it possible to absorb large amounts of data quickly. In Android an image is typically shown in an ImageView which is a dedicated view for showing image. This view takes the charge of load, optimize and scaling of the image and make the developer free  to focus on app-specific details . Unless you need special optimizations for your application, you should take advantage of the built-in image view whenever possible.

To display an image simply we have to declare an ImageView inside a LayOut and set its source to a resource in your project. Image resources are placed in the /res/drawable folders. This example will display an image named “antelope”:

<ImageView

android:id=“@+id/ivantilop”

android:layout_width=“match_parent”

android:layout_height=“match_parent”

android:layout_margin=“10dp”

android:src=“@drawable/antelope”

android:sacleType=“fitCenter”   />

[/sourcecode ]

Please have a look on the attribute  sclaeType . It defines how the image will fit and be scaled to the view. In this example scaleType  is set to “fitCenter” , so the image will be shown  in the center of container view with scaling and preserve the aspect ratio. I’m going to list the scale type options and how they alter the image.

Here is the code snippet :

<RelativeLayout xmlns:android=http://schemas.android.com/apk/res/android&#8221;

xmlns:tools=http://schemas.android.com/tools&#8221;

android:layout_width=“match_parent”

android:layout_height=“match_parent” >

<LinearLayout

android:layout_width=“match_parent”

android:layout_height=“match_parent”

android:orientation=“vertical”

android:layout_alignParentLeft=“true”

android:layout_alignParentTop=“true”

android:background=“@android:color/holo_orange_light”>

<ImageView

android:id=“@+id/ivantilop”

android:layout_width=“match_parent”

android:layout_height=“match_parent”

android:layout_margin=“10dp”

android:src=“@drawable/antelop”

android:sacleType=“fitCenter”

/>

</LinearLayout>

</RelativeLayout>

[/sourcecode ]

This is the original image which is taken for Nat Geo website.

55577_1600x1200-wallpaper-cb1341586649

scaleType

                   Description

Example

center

Displays the image in the center of container view. No scaling . Preserves aspect ratio (native resolution) and centered in the view, regardless of how much space the view consumes.  Screenshot_2000-01-02-04-54-05

centerCrop

Displays the image in the center of container view. Scales in such a way that both the X axis (width) and Y axis(height) is equal or larger than the corresponding axis of the view (minus padding) , while maintaining the image aspect ratio; crops any part of the image that exceeds the size of the view.

 Screenshot_2000-01-02-05-04-38

centerInside

Displays the image in the center of container view. Scales in such a way that both the X axis (width) and Y axis(height) is equal or smaller than the corresponding axis of the view (minus padding) to fit inside the view , while maintaining the image aspect ratio. If the image is already smaller than the view, then this is the same as center.  Screenshot_2000-01-02-05-18-55

fitCenter

same as center using Scaling. Maintains the Image aspect ratio to fit inside the center of the view. At least one axis (height or width) will exactly match the corresponding axis of the view.

Screenshot_2000-01-02-05-18-55

fitStart

Same as fitCenter but aligned to the top-left of the container view.

    Screenshot_2000-01-02-05-35-01

fitEnd

Same as fitCenter but aligned to the right-bottom of the container view.

      Screenshot_2000-01-02-05-38-47

fitXY

Scales the X and Y dimensions of the image to exactly match the container view. Does not preserve the aspect ratio of the image.

   Screenshot_2000-01-02-05-48-14

 

fitMatrix

Scales the image using supplied Matrix Class. Usually this Matrix is implemented using setImageMatrix(Matrix) method.  This type of scaling is use to transform/process the image such as rotation.