Rahul Kumar

Thursday, June 7, 2012

Adding a trigger button for Datepicker

jQuery UI Adding a trigger button for Datepicker tutorial. By default, user can open datepicker when <input> element receives focus. we can change this very easily. We can make datepicker opens when a button is clicked instead. The most basic type of <button> can be enabled with just the showOn option

1$(function(){

2    var pickerOpts = {

3        showOn: "button"

4    };  

5    $("#date").datepicker(pickerOpts);

6});

Complete Example Code:

01<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

02<html lang="en">

03<head>

04<link rel="stylesheet" type="text/css" href="development-bundle/themes/ui-lightness/jquery.ui.all.css">

05<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

06<title>jQuery UI Datepicker Example 1</title>

07<script type="text/javascript" src="development-bundle/jquery-1.4.2.js"></script>

08<script type="text/javascript" src="development-bundle/ui/jquery.ui.core.js"></script>

09<script type="text/javascript" src="development-bundle/ui/jquery.ui.datepicker.js"></script>

10<script type="text/javascript">

11    $(function(){

12        var pickerOpts = {

13            showOn: "button"

14        };  

15        $("#date").datepicker(pickerOpts);

16    });

17</script>

18</head>

19<body>

20<label>Enter a date: </label><input id="date">

21</body>

22</html>

jQuery UI Adding a Trigger Button for Datepicker Tutorial

We can change the default text that show on the button. just providing a new string as the value of the buttonText option:

1$(function(){

2    var pickerOpts = {

3        showOn: "button",

4        buttonText: "Show Datepicker"

5    };  

6    $("#date").datepicker(pickerOpts);

7});

jQuery UI Change text for trigger button for datepicker tutorial

1$(function(){

2    var pickerOpts = {

3        showOn: "button",

4        buttonImage: "img/datepicker/date.png",

5        buttonText: "Show Datepicker"

6    };  

7    $("#date").datepicker(pickerOpts);

8});

jQuery UI Adding image for trigger button of datepicker tutorial

Sunday, May 27, 2012

Paging through Records using a Stored Procedure

Working with my database administrator, I developed a stored procedure for use with SQL Server that puts the burden on the SQL Server to only return the required number of records to the web server instead of the entire database table. This GREATLY reduces the load factor on the web server when making database requests. The explanation of the code follows the stored procedure. In this example, we are retrieving item pricing information from a table and returning N records.

CREATE PROCEDURE CREATE PROCEDURE usp_RoomsPagedItems 
 (
  @Page int
    )
AS
-- We don't want to return the # of rows inserted
-- into our temporary table, so turn NOCOUNT ON
SET NOCOUNT ON
DECLARE @RecsPerPage int
-- Find out where we will start our records from
DECLARE @RecCount int
SET @RecsPerPage = 20
SELECT @RecCount = @RecsPerPage * @Page + 1


--Create a temporary table
CREATE TABLE #TempItems
(
 ID int IDENTITY,
 ROOMNAME varchar(50),
 ROOMID int,
 ROOMTYPEID int
)
-- Insert the rows from tblItems into the temp. table
INSERT INTO #TempItems (ROOMNAME, ROOMID,ROOMTYPEID)
SELECT  'ROOM ' + ROOM.ROOMNO AS ROOMNAME,
   ROOM.ID AS ROOMID,
   ROOMTYPE.ID AS ROOMTYPEID
  FROM DBO.ROOMTYPE INNER JOIN DBO.ROOM ON ROOM.ROOMTYPEID = ROOMTYPE.ID
--ORDER BY CAST(ROOM.ROOMNO AS NUMERIC)
ORDER BY ROOM.ROOMNO

-- Find out the first and last record we want
DECLARE @FirstRec int, @LastRec int
SELECT @FirstRec = (@Page - 1) * @RecsPerPage
SELECT @LastRec = (@Page * @RecsPerPage + 1)

-- Now, return the set of paged records, plus, an indiciation of we
-- have more records or not!
SELECT *,
       MoreRecords = 
 (
  SELECT COUNT(*) 
  FROM #TempItems TI
  WHERE TI.ID > @LastRec
 ) 
FROM #TempItems
WHERE ID > @FirstRec AND ID < @LastRec


-- Turn NOCOUNT back OFF
SET NOCOUNT OFF

Thursday, May 24, 2012

Highlight Polygon on google map

var everythingElse = [
new google.maps.LatLng(0, -90),
new google.maps.LatLng(0, 90),
new google.maps.LatLng(90, -90),
new google.maps.LatLng(90, 90),
];

var triangleCoords = [
new google.maps.LatLng(25.774252, -80.190262),
new google.maps.LatLng(18.466465, -66.118292),
new google.maps.LatLng(32.321384, -64.75737),
new google.maps.LatLng(25.774252, -80.190262)
];

bermudaTriangle = new google.maps.Polygon({
paths: [everythingElse, triangleCoords],
strokeColor: "#000000",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#000000",
fillOpacity: 0.5
});

bermudaTriangle.setMap(map);

Thursday, March 29, 2012

How to get Google Maps API Key for Android. Issues and Errors Solved.

What's Up Guys. Here I am Let you know How We can Generate MD5 Code for Google to generated the Google Map API Key..

These are Four Easy Step to Do this Task.

To use Google Maps in Android using MapView Control we need Google Maps API Key. To get the key we have to go through the following steps.

Locate debug.keystore file on your system.
Locate keytool.exe file on your system
Generate MD5 fingerprint.
Use that MD5 fingerprint to get the Google Maps API Key

The debug.keystore file can be found at “c:\users\Rahul\.android\debug.keystore”

Replace “mir nauman tahir” with your current user name.

Add caption

Path to debug.keystore

Now navigate to keytool.exe file. “c:\program files\java\jdk1.7.0_02\bin\keytool.exe”

Replace the jdk version with the version installed on your system.

Path to keytool.exe

Now execute the following command.

C:\Program Files\Java\jdk1.7.0_02\bin>keytool.exe -list -alias androiddebugkey -keystore “c:\users\Rahul\.android\debug.keystore” -storepass android -keypass android

If prompted for a password, try “changeit” or just press enter key to enter an empty password. This command will return SHA1 fingerprint. jdk1.7 or higher will return SHA1 by default. Remember the bold and italic text is the path to the debug.keystore file. You have to provide the path to debug.keystore file on your system. Secondly the path to the debug.keystore file must be enclosed in double quotes.

jdk1.7 Keytool returning SHA1 fingerprint.

We don’t need SHA1. we need MD5 fingerprint so either we have to use jdk1.6 or we can use the following command to generate MD5 finger print using jdk.17.

C:\Program Files\Java\jdk1.7.0_02\bin>keytool.exe -v -list -alias androiddebugkey -keystore “c:\users\rahul\.android\debug.keystore” -storepass android -keypass android

By putting a “-v” in the command it will generate the following output.

jdk1.7 keytool generating MD5 fingerprint

Copy the MD5 fingerprint. LogIn to your google account (even signing in to gmail will work). Than navigate to the following url http://code.google.com/android/maps-api-signup.html . Paste your MD5 fingerprint in field shown in the picture below and click generate api key.

Using our MD5 fingerprint to generate the Google Maps API Key

When you click generate button you will be taken to another screen showing your MD5 fingerprint, your Google Maps API Key and how you can use it in your code to enable Google Maps in Android development.

Google API Key generated by using our MD5 fingerprint

Mission Accomplished.

Note:- Please leave your comments if this article was helpful.