Filling Android ListView and Spinner with Array data

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string-array name="Expense">
        <item>Chilly Chicken</item>
        <item>Tea</item>
        <item>Yipee Noodles</item>
        <item>Tea</item>
    </string-array>
</resources>

Here I am creating an xml file called Expense.xml inside values folder.

   protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_expense_details);

        String[] expense = getResources().getStringArray(R.array.Expense);

        ArrayAdapter<String> Adapter = new ArrayAdapter<String>(this, android.R.layout.simple_dropdown_item_1line, android.R.id.text1, expense);

        Spinner spExpense = (Spinner)findViewById(R.id.spExpense);
        spExpense.setAdapter(Adapter);
    }
}

An array called expense is created which contains data from Expense.xml.
That data is bound to Spinner control.

String[] expense = getResources().getStringArray(R.array.Expense);
        ArrayAdapter<String> Adapter = new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, android.R.id.text1, expense );

        ListView lv = (ListView)findViewById(R.id.lvwExpense);
        lv.setAdapter(Adapter);

Here I am using ListView.

Android Development with Android Studio Part 1 : Views

Android Studio is the preferred IDE for writing Android Apps. It was announced in Google IO 2013. There are other options like Eclipse, IntelliJ Idea, etc. Android Studio is based on IntelliJ Idea Community Edition.

 In this  blog In will be concentrating on Android  Studio.

Next screen will ask you to select Android SDK.

In  the next screen you can select an Activity. Here I am starting with Basic Activity. Later on we will see other Activities like Google Maps Activity.

In the next screen you can specify a name for your activity.

Then the IDE will appear.

On clicking the Preview option you can see the preview.

Views and ViewGroups

View is a rectangular area in Angular. Examples of Views are TextView, Button, ImageView, etc. Views are defined in XML.

ViewGroup is a grouping of Views.  Popular ViewGroups are LinearLayout, etc.

Here I have changed the ViewGroup to LinearLayout and its orientation to vertical.

wrap_content

<TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Shalvin P D Blog : Shalvinpd.blogspot.com Interests : Microsoft .Net, SharePoint, AngularJS, Android"
        android:background="@android:color/holo_blue_bright" />

layout_width

<TextView
        android:text="Shalvin P D Blog :shalvinpd.blogspot.com"
        android:background="@android:color/holo_blue_bright"
        android:layout_width="140dp"
        android:layout_height="50dp"/>

layout_width is defined in dp which stands for Density Independent Pixel. So that the unit is the same irrespectity of the pixel density of the Android device.

textSize

<TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Shalvin P D Blog : Shalvinpd.blogspot.com Interests : Microsoft .Net, SharePoint, AngularJS, Android"
        android:background="@android:color/holo_blue_bright"
        android:textSize="32sp"/>

The textSize is specified using sp. sp stands for Scale Independent Pixel and  is used only for Fonts. The concept is similar to dp.

Event Handling

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
   android:orientation="vertical"
    tools:context="com.blogspot.shalvinpd.helloevents.MainActivity">

    <EditText
        android:id="@+id/etName"
        android:layout_width="wrap_content"
        android:layout_height="40sp" />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello"
        android:id="@+id/btnHello"
        android:onClick="btnHello_Click"
        android:layout_centerVertical="true"
        android:layout_toEndOf="@+id/textView" />
</LinearLayout>

 public void btnHello_Click(View view)
    {
        EditText et = (EditText)(findViewById(R.id.etName));
        Toast.makeText(this, "Hello " + et.getText().toString(), Toast.LENGTH_SHORT).show();
    }

Android with Android Studio

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.example.administrator.myapplication.MainActivity">

    <Button
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:text="New Button"
        android:textSize="40dp"
        android:id="@+id/button"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="223dp"
        android:onClick="Click"
        />
</RelativeLayout>p

package com.example.administrator.myapplication;

import android.app.Activity;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.Toast;

public class MainActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Button b=(Button)findViewById(R.id.button);
    }
    public void Click(View v)
    {
        Toast.makeText(this,"Toast",Toast.LENGTH_SHORT).show();
    }
}

ExtJS 6 Getting Started

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="ext-all.js"></script>
    <script type="text/javascript">
        Ext.define("MyApp.Session",
            {
                config: {
                    Name: '',
                    Specialization: ''
           }
           });

        var session = Ext.create("MyApp.Session",
            {});
        session.setName('Shalvin P D');
        session.setSpecialization('Microsoft .Net')
        alert(session.getName() + " - " + session.getSpecialization());
    </script>
</head>
<body>

Creating Component

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="ext-all.js"></script>
    <script type="text/javascript">
        var myComponent = Ext.create('Ext.Component', {
            html:'Hello World ExtJS Shalvin'
        });

        Ext.application({
            name: 'MyApp',
            launch:function()
            {
                Ext.create('Ext.container.Viewport', {
                    items: [
                        myComponent
                    ]
                });
            }
        });
    </script>
</head>
<body>

</body>
</html>

Data

<pre style="font-family: Andale Mono, Lucida Console, Monaco, fixed, monospace; color: #000000; background-color: #eee;font-size: 12px;border: 1px dashed #999999;line-height: 14px;padding: 5px; overflow: auto; width: 100%"><code>&lt;!DOCTYPE html&gt;
&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;
&lt;head&gt;
    &lt;title&gt;&lt;/title&gt;
    &lt;script src=&quot;ext-all.js&quot;&gt;&lt;/script&gt;
    &lt;script type=&quot;text/javascript&quot;&gt;
        Ext.application({
            name: 'MyApp',
            launch: function () {
                Ext.create('Ext.container.Viewport', {
                    items: [
                        {
                            padding: 40,
                            tpl: 'Trainer : {name} {location}',
                            data:{
                                name: 'Shalvin P D',
                                location:'Kochi'
                            }
                        }
                       
                    ]
                });
            }
        });
    &lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;/body&gt;
&lt;/html&gt;


</code></pre>

AngularJS with Asp .Net MVC

<script src="~/Scripts/angular.js"></script>

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body ng-app>
    <div> 
        {{2 + 2}}
    </div>
</body>
</html>

Android Views

TextView

<TextView
    android:text="Shalvin P D 1!"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textSize="56sp"
    android:fontFamily="sans-serif-light"
    android:textColor="@android:color/black"
    android:background="#ccddff"
    android:padding="20dp"/>

LayoutView

<LinearLayout 
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >

    
    <TextView
    android:text="Shalvin P D 1!"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textSize="56sp"
    android:fontFamily="sans-serif-light"
    android:textColor="@android:color/black"
    android:background="#ccddff"
    android:padding="20dp"/>
    
     <TextView
    android:text="Shalvin P D 2!"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textSize="56sp"
    android:fontFamily="sans-serif-light"
    android:textColor="@android:color/black"
    android:background="#ccddff"
    android:padding="20dp"
   />
    
</LinearLayout>

RelativeLayour

<RelativeLayout 
   android:layout_width="match_parent"
    android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity">

        <TextView android:text="Shalvin P D."
           android:layout_width="wrap_content"
           android:textColor="#555555"
            android:layout_height="wrap_content"
           android:layout_alignParentTop="true"
            android:textSize="30sp"/>

        <TextView android:text="Shalvin P D."
            android:layout_width="wrap_content"
            android:textColor="#555555"
            android:layout_alignParentBottom="true"
            android:layout_height="wrap_content"
            android:textSize="30sp"
            />

 </RelativeLayout>

Event Handling

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
   android:orientation="vertical"
    tools:context="com.blogspot.shalvinpd.helloevents.MainActivity">

   

    <EditText
        android:id="@+id/etName"
        android:layout_width="wrap_content"
        android:layout_height="40sp" />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello"
        android:id="@+id/btnHello"
        android:onClick="btnHello_Click"
        android:layout_centerVertical="true"
        android:layout_toEndOf="@+id/textView" />


</LinearLayout>

public void btnHello_Click(View view)
    {
        EditText et = (EditText)(findViewById(R.id.etName));
        Toast.makeText(this, "Hello " + et.getText().toString(), Toast.LENGTH_SHORT).show();
    }

JQuery Ajax : Consuming Array of JSON

In this blog I am going to demonstrate consuming a Web Service which exposes the data from a table as JSON.

public class Contacts
{
    public int ContactId { get; set; }
    public string ContactName { get; set; }
    public string Email { get; set; }
    public string Phone { get; set; }
}

using System;
using System.Collections.Generic;
using System.Web.Services;
using System.Data.SqlClient;
using System.Web.Script.Serialization;

/// <summary>
/// Summary description for WebService
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line. 
 [System.Web.Script.Services.ScriptService]
public class WebService : System.Web.Services.WebService {

    public WebService () {

        //Uncomment the following line if using designed components 
        //InitializeComponent(); 
    }

    [WebMethod]
    public void GetContacts() {
        List<Contacts> glCG = new List<Contacts>();

        SqlConnection cnn = new SqlConnection(@"Data Source=.\sqlexpress;Initial Catalog=SimpleContactManagement;Integrated Security=True");
        cnn.Open();
        SqlCommand cmd = new SqlCommand("select * from Contacts", cnn);
        SqlDataReader dr = cmd.ExecuteReader();

        while(dr.Read())
        {
            int intConId = Int32.Parse(dr["ContactId"].ToString());
            Contacts c = new Contacts
            {
                ContactId = intConId,
                ContactName = dr["ContactName"].ToString(),
                Email = dr["Email"].ToString(),
               Phone = dr["Phone"].ToString()
            };
            glCG.Add(c);
        }

        JavaScriptSerializer sc = new JavaScriptSerializer();
        Context.Response.Write(sc.Serialize(glCG));
    }
    
}

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="Scripts/jquery-1.12.1.js"></script>
    <script>
        $(document).ready(function () {
            getData();
        });

        function getData()
        {
            $.ajax(
                {
                    url: 'WebService.asmx/GetContacts',
                    dataType: "json",
                    method: 'post',
                    success: function (data) {
                        var contactsTable = $('#tblContacts tbody');
                        contactsTable.empty();

                        $(data).each(function (index, con) {
                            contactsTable.append('<tr><td>' + con.ContactId +
                                '</td><td>' + con.ContactName +
                                '</td><td>' + con.Email +
                                '</td><td>' + con.Phone +
                                '</td></tr>');
                        });
                    }
                });

            }
    </script>
</head>
<body>
    <table id="tblContacts">
        <thead>
            <tr>
                <th>Id</th>
                <th>Name</th>
                <th>Email</th>
                <td>Phone</td>
            </tr>
         </thead>
        <tbody>

        </tbody>
    </table>
</body>
</html>