JavaScript API Part-3

Hi All,

This week I am coming with three interesting topics that are very useful to you all in your projects which improves non-functional requirements..

Pagination

       In presenting a report as the user action it may get very long data that which is shown in too long tables. This table will makes you to scroll whole web page which not a intuitive to look and effects the beauty of the web page. for this same problem i have suggested a trick in previous post i.e., Simply scrolling table that makes  to scroll the table but not page. actually the solution in pagination. i.e., dividing the all the result into some reasonable parts and displaying a limited part and for renaming we have to provide navigation buttons or links. Implementation of this Pagination is tough if it is server side pagination.There are many disadvantages of a server-side pagination like this:

1. You have to use the HTTP Session (and remember to clean up when it's nomore needed).
2. You have to reload the page on every page switch.
3. You cannot go forward and backward to check previous data without loosing the view on current resultset.
4. You have to write code for the server side actions handling all the page-switch work.

         Here is a simple and Perfect solution which avoids reloading the page on every page switch, and also avoid using HTTP Session when not strictly necessary. i.e., writing a JavaScript paginator object that handles the job of paginating any html table rendering also a simple pagination bar.

Example

S.No	Name	City	Zipcode
1	NOKIA Theatre L.A. LIVE	Los Angeles	85521
2	Los Angeles Theatre	Los Angeles	74101
3	Regal Cinemas LA Live Stadium 14	Los Angeles	74125
4	Million Dollar Theater	Los Angeles	93258
5	Music Center	Los Angeles	12589
6	REDCAT	Los Angeles	74125
7	The Wiltern	Los Angeles	98523
8	Downtown Independent	Los Angeles	78965
9	mad max	Los Angeles	23456
10	Mad Max2	Los Angeles	23456
11	San Diego Civic Theatre	San Diego	98989
12	San Diego Theatre	San Diego	65656
13	The Old Globe	San Diego	87878
14	Starlight Theatre	San Diego	23456
15	Spreckels Theatre	San Diego	64654
16	Pacific Theaters -Gaslamp 15	San Diego	65466
17	AMC Theatres Fashion Valley 18	San Diego	44984
18	Hillcrest Cinema	San Diego	63546
19	Reuben H. Fleet Science Center	San Diego	84798
20	viswas	Augusta	22123
21	WIPRO Theater	Augusta	56983
22	balas	Columbus	23234
23	The 5th Avenue Theatre	Seattle	65464
24	AMC Theatres	Seattle	65432
25	A Contemporary Theatre	Seattle	65465
26	Moore Theatre	Seattle	65465
27	Intiman Theatre	Seattle	65465
28	Village Centre Cinemas	Spokane	32133
29	Spokane Civic Theatre	Spokane	64640
30	Garland Theater	Spokane	68465
31	INB Performing Arts Center	Spokane	69465
32	Bing Crosby Theater	Spokane	65465
33	River Park Square	Spokane	65465
34	Magic Lantern Theatre	Spokane	65488
35	Grand Cinema	Tacoma	32132
36	Tacoma Musical Playhouse	Tacoma	32162
37	Tacoma Little Theatre	Tacoma	65467
38	Broadway Center for the Performing Arts	Tacoma	65444
39	Vogue Theatre	Vancouver	65466
40	Centre In Vancouver For Performing Arts	Vancouver	65456
41	Commodore Ballroom	Vancouver	64864
42	Rio Theatre	Vancouver	63515
43	Lincoln Square Cinemas	Bellevue	65465
44	Regal Cinemas Crossroads Stadium	Bellevue	65455
45	AMC Loews Theatres	Bellevue	65452
46	Lincoln Square	Bellevue	64987
47	Bellevue Galleria Stadium 11	Bellevue	44555
48	The Theatre at Meydenbauer Center	Bellevue	65525
49	Bellevue Civic Theatre	Bellevue	41652
50	Tateuchi Center	Bellevue	46984
51	Bellevue Youth Theater	Bellevue	46546
52	AMC Theatres - Kent Station 14	Kent	66656
53	Valley 6 Drive In	Kent	65656
54	Starplex Gateway Movies 8	Kent	98989
55	Regal Cinemas Parkway Plaza Stadium 12	Kent	32323
56	Regal Cinemas Auburn Stadium 17	Kent	56565
57	Auburn Ave Theater	Kent	12589
58	Regal Cinemas East Valley Stadium 13	Kent	15963
59	Broadway Center for the Performing Arts	Kent	55346
60	Galaxy 8	Kent	22145
61	Village Theatre Everett	Everett	55589
62	Everett Theatre	Everett	66669
63	Village Theatre	Everett	55666
64	Regal Movie Theaters	Everett	66555
65	Everett Civic Auditorium	Everett	69998
66	Movie Bank	Everett	63666
67	Thumbnail Theater	Everett	58589
68	Regal Cinemas Marysville 14	Everett	25669
69	AMC Loews Theatres - Alderwood Mall 16	Everett	99585
70	Clyde Theatre	Everett	66666

Source Code


<script type="text/javascript" src="DOMhelp.js"></script>
<script type="text/javascript" src="pagination.js"></script>

<link href="pagination.css" rel="stylesheet"></link>


<table class="pagination">
.
.
.
<table>

Download

1. http://www.beginningjavascript.com/DOMhelp.js
2. http://www.beginningjavascript.com/Chapter7/pagination.js
3. http://www.beginningjavascript.com/Chapter7/pagination.css

Syntax Highlighter 

         I an some applications like Online Exam, Online Quiz, and discussion forums you need to show some source code. but over html-css presention can not highlight syntax or keywords of the language to present..

but here i find this Syntax Highlighter  that highlights the syntax of the source code we are presenting. simply liking the js file to our web page will view the source code.. with syntax. SyntaxHighlighter is a fully functional self-contained code syntax highlighter developed in JavaScript.

Hello SyntaxHighlighter

What is the result?

class Money { 
private String country = "Canada"; 
public String getC() { return country; } 
} 
class Yen extends Money { 
public String getC() { return super.country; } 
} 
public class Euro extends Money { 
public String getC(int x) { return super.getC(); }
public static void main(String[] args) { 
System.out.print(new Yen().getC() + " " + new Euro().getC()); 
} 
}

Source Code

 
 
 
 
 
 

class Money { 
private String country = "Canada"; 
public String getC() { return country; } 
} 
class Yen extends Money { 
public String getC() { return super.country; } 
} 
public class Euro extends Money { 
public String getC(int x) { return super.getC(); }
public static void main(String[] args) { 
System.out.print(new Yen().getC() + " " + new Euro().getC()); 
} 
}

Downloads

1. http://alexgorbatchev.com/SyntaxHighlighter/download/

Graph Representation

        Before going to topic let me explain the motivation behind it.. My B.Tech final year project in Online Voting System in which I have to show the results of the polling in a graph or chart representation either in histogram or a pie-chart.. In those days i dont find any API for implementation. then I have implements using a <HR> tag using width, size and color . Solution is solved there but not a perfect solution. In earlier days I found a site http://www.jscharts.com which provides a prefect solution and sleek representational of the report.. As you see the site I think need not to explain various types of graphs. So, let us disscussion about the implementation...

Example

Histogram Graph (BAR)

Loading graph...

Line Graph

Loading graph...

Pie-Charts

Loading graph...

Source Code

Loading graph...

Download

1. http://www.jscharts.com/script/jscharts.js

Refernces

1. http://alexgorbatchev.com/SyntaxHighlighter/
2. http://www.jscharts.com/
3. http://www.beginningjavascript.com/

Ok guys..

This is up to this week...

Let us meet next week with another few interesting topics..


My Best Wishes.

regards,
M.Agni
Assistant Professor
ACE Team member
Aditya Edu. Group.
Ph: 9491520200
Email: agni2020@gmail.com
          agnim@aec.edu.in