Create Plug-in project in Eclipse

        In this post we will learn how to create a plug-in project in Eclipse using the plug-in development environment (PDE).

        At its simplest, a plug-in project requires a MANIFEST.MF file describing the plugin and its dependencies and, if extending the workbench a plugin.xml file identifying the extension points being implemented, and a set of Java classes implementing those extension points.

1. The first step involves opening your Eclipse workspace and creating a new Plug-in project.You can do it from Select File->New->Project. Then in the opening dialog box select the Plug-in Project wizard. Then Click Next.

2. Enter the project name of your choice. Leave the other options as default and click Next.


3. Again no changes to the default options and click Next.


4. In the next dialog  select the Hello World template and press the Finish button. This should automatically open the Plug-in Development perspective.

5. Your new plugin project is created with the Plug-in Development perspective. This is how our plug-in project will look in the Package Explorer.


        Now lets discuss about the plug-in related files we see in our Project explorer. If you have created a java project before then you would be knowing about the build.properties file. For those who are not familair with java project, the build.properties file declares the libraries where the plug-in code is packaged. At runtime, the class loader searches these libraries when loading the plug-in's classes.

        The manifest file describes the content of the plug-in to the Eclipse runtime. In addition to basic plug-in information such as plug-in identifier, version, etc., this file contains four main sections: Dependencies, Extensions, Runtime and Extension Points section.


        Dependencies section lists all the plug-ins required by the plug-in. A plug-in must list as dependencies all the plug-ins needed for its code to compile and all the plug-ins contributing extension points that it is using.
 

        The Extensions section declares all the functionalities that this plug-in contributes to the platform by extending other plug-ins' extension points.

        The plugin.xml specifies the extension. It is the central place for configuring the plugin being developed. This sample plugin’s extension point is org.eclipse.ui.actionSets.


        Your plugin is created and you are ready to go. Now you only need to add the code to implement the extension points.

In our coming tutorial we will learn how to create a working JDT plugin project using Eclipse.
Comments and Suggestions are appreciated.



Calendar using Javascript (with css)

        This post discusses on how to make a simple, elegant monthly calendar using javascript. You can change the appearance of the calendar by simply changing the CSS to suit your needs. The calendar displays the current days of the month and highlights the current day.

         This is how our calendar will look after we complete this post. You can easily change the calendar appearance by modifying this css, everything from calendar dimensions, colors, spacing, down to the font used to highlight the current day. My aim is to present an basic understanding of date manipulations and thus this post will not cover the advanced options like moving between next and previous months.

Now lets move onto the javascript code details. 
First we will define some constant variables which we will require in our code.
// Array to store month names
var months = new Array('January',' February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'); 

// Array to store month days
var monthDays = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);

// Array to store week names
var weekDay = new Array('Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su');
Next we will get the current date properties by instantiating a 'Date' object. The below code gets the current date, month, year and the number of days for current month.
var date = new Date();

var day = date.getDate();
var month = date.getMonth();
var year = date.getFullYear();
var days_in_this_month = monthDays[month];
Then get the week-day for the 1st day of the month. We will require this to add blank columns at the beginning in our calendar table.
var first_week_day = new Date(year, month, 1).getDay();
Now as we have set up all the variables, on to the code for displaying the calendar. The comments in the code will help you understand the logic of each statement.
// Define the variable which holds the calendar table
  var calendar_html = '<table class="calendarTable">';

  // Create row for displaying current month and year
  calendar_html += '<tr><td class="monthHead" colspan="7">' + months[month] + ' ' + year + '</td></tr>';
  calendar_html += '<tr>';

  // Create row to display the week days (Monday - Sunday)
  for(week_day= 0; week_day < 7; week_day++) {
        calendar_html += '<td class="weekDay">' + weekDay[week_day] + '</td>';
  }
  calendar_html += '</tr><tr>';

  // Fill first row of the month with empty cells until the month starts.
  for(week_day = 0; week_day < first_week_day; week_day++) {
        calendar_html += '<td> </td>';
  }

  // Populate the days in the month
  week_day = first_week_day;
  for(day_counter = 1; day_counter <= days_in_this_month; day_counter++) {

        week_day %= 7;
        // Check if week ends, if yes move to next row
        if(week_day == 0)
              calendar_html += '</tr><tr>';

        // Show the current day in bold.
        if(day == day_counter)
          calendar_html += '<td class="currentDay">' + day_counter + '</td>';
        else
          calendar_html += '<td class="monthDay"> ' + day_counter + ' </td>';

        week_day++;
  }
  
  // Close the Calendar table
  calendar_html += '</tr>';
  calendar_html += '</table>';

  // Display the calendar.
  document.write(calendar_html);
Now on to styling the calendar. The following css styles will give a simple style to your calendar. You can easily change the calendar appearance by modifying this css, everything from calendar dimensions, colors, down to the font used to highlight the current day.
.calendarTable {
    background-color:#eee;
    color:#333;
    border: 1px solid #bbb;
}
.calendarTable td {
    text-align: center;
    padding: 2px 4px 2px 4px;
}
.calendarTable td.monthHead {
    font-weight: bold;
    border: 1px solid #bbb;
    background-color:#ddd;
}
.calendarTable td.weekDay {
    font-weight: bold;
}
.calendarTable td.monthDay {
    border: 1px solid #ddd;
}
.calendarTable td.currentDay {
    font-weight: bold;
    color:#ad5;
    border: 1px solid #aaa;
}
We have finished designing our basic calendar. If you have any question let me know in the comments. You can find the entire code along with html below.
<html>
<title>www.scriptSplash.com => javaScript - Basic Calendar</title>
<head>
<style type="text/css">
.calendarTable {
    background-color:#eee;
    color:#333;
    border: 1px solid #bbb;
}
.calendarTable td {
    text-align: center;
    padding: 2px 4px 2px 4px;
}
.calendarTable td.monthHead {
    font-weight: bold;
    border: 1px solid #bbb;
    background-color:#ddd;
}
.calendarTable td.weekDay {
    font-weight: bold;
}
.calendarTable td.monthDay {
    border: 1px solid #ddd;
}
.calendarTable td.currentDay {
    font-weight: bold;
    color:#ad5;
    border: 1px solid #aaa;
}
</style>
<script type="text/javascript" language="javascript">
/** Function to display a Calendar based on javascript. **/
function calendar() {
  // Get the current date parameters.
  var date = new Date();
  var day = date.getDate();
  var month = date.getMonth();
  var year = date.getFullYear();
  
  var months = new Array('January','February','March','April','May','June','July','August','September','October','November','December');
  var monthDays = new Array(31,28,31,30,31,30,31,31,30,31,30,31);
  var weekDay = new Array('Mo','Tu','We','Th','Fr','Sa','Su');
  var days_in_this_month = monthDays[month];

  // Create the basic Calendar structure.
  var calendar_html = '<table class="calendarTable">';
  calendar_html += '<tr><td class="monthHead" colspan="7">' + months[month] + ' ' + year + '</td></tr>';
  calendar_html += '<tr>';
  var first_week_day = new Date(year, month, 1).getDay();
  for(week_day= 0; week_day < 7; week_day++) {
    calendar_html += '<td class="weekDay">' + weekDay[week_day] + '</td>';
  }
  calendar_html += '</tr><tr>';

  // Fill the first week of the month with the appropriate number of blanks.
  for(week_day = 0; week_day < first_week_day; week_day++) {
    calendar_html += '<td> </td>';
  }
  week_day = first_week_day;
  for(day_counter = 1; day_counter <= days_in_this_month; day_counter++) {
    week_day %= 7;
    if(week_day == 0)
      calendar_html += '</tr><tr>';
    // Do something different for the current day.
    if(day == day_counter) {
      calendar_html += '<td class="currentDay">' + day_counter + '</td>';
    } else {
      calendar_html += '<td class="monthDay"> ' + day_counter + ' </td>';
 }
    week_day++;
  }
  calendar_html += '</tr>';
  calendar_html += '</table>';
  // Display the calendar.
  document.write(calendar_html);
}
</script>
</head>
<body>
  <h2> Basic Calendar </h2>
  <br/>
  <script type="text/javascript">calendar();</script>
</body>
</html>

Scroll to Top effect using jQuery

        Many of us have been using jQuery lately, but as it goes i was very much contend with using javascript, much because of learning another language. Then i had to use jQuery for one of my company projects, and alas i hoped that i had learned jQuery much earlier. 

        jQuery is a simple and tiny javascript framework which provides you with custom functions which may take days to code in native javascript. Here is one of the easy and small example of jQuery that i learned during the project. This will give you an insight of how much simpler jQuery is. You can freely download jQuery from here.

        In informational sites you might have seen a 'Top' link which actually moves you to the top of the web page. This link actually links to the '#top' html anchor which signifies the top of the body. Though helpful it is a bit old and abrupt. How about we replace it with a animated scroll to top button?

Using the old approach, you can place the below code in your body tag.
<a href="#top"><img src="top.jpg" alt="back to top"/></a>
        Clicking on this link will take you to the top of the page. (Make sure the page spans more than the browser window, so that the scrolls are enabled and you can see the result. Also place the link somewhere at the end of the page.)

You can use this sample image. 

        Now we will do with jQuery with an added scrolling effect. First create a div (somewhere at the end of page) and place the image in this div. Clcking on this image will scroll you to the top of the page.
<div id="topArrow"> <img src="top.jpg" alt="scroll to top" /> </div>

Now the jquery part,
$(document).ready(function() {
    // function for scrolling the body to top.
    $('#topArrow').click(function () {

        // animate the page to scroll to top when the link is clicked
        $('body,html').animate({
            scrollTop: 0
        }, 1000);
        return false;
    });
});
        When the 'topArrow' div is clicked, it will animate the body  by scrolling it to the top. We use jQuery's 'animate' function for this. The first parameter to animate method denotes the properties or simply the type of animation (we can also have fade, opacity,left etc). The second parameter denotes duration of animation. Other optional parameters include ease and function to call once the animation is complete. Detailed info for 'animate' function can be found from here.

        If you want to the arrow link to be always displayed at the bottom of the page, rather than placing it in the page, the following css enables you to do so.
/* Style for the arrow link */
#topArrow {
 position:fixed;
 bottom:0%;
 left:75%;
 display: block;
 padding:20px;
}
The position:fixed css attribute let the image to stay fixed at the bottom the page.

Note: In some IE versions the position:fixed attribute doesn't work properly and the link will remain at top of the page. Place the below Doctype declaration on the top of the page code (above html tag), to resolve this problem.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
        If you are not into coding or want a simpler solution you can try the UItoTop jQuery Plugin. It’s easy to setup with only one line of code, and it works cross-browser nicely.

You can download the code for this post from here.
Thats all for this post. Will be back with more interesting jQuery snippets.

Auto Refresh in Javascript

There are times when we will need a page to be automatically refreshed. This is mainly seen in pages where the data varies with time and needs to be constantly updated over the timeframe. Eg: Live Score Cards, Live Election results etc. There are two ways by which we can perform a HTML Page refresh.

   i) Using the HTML META tag in the header of the page
   ii) Using Javascript - Location.reload


Using Meta Header Tag

        This way is useful when the user has disabled javascript on his browser. You need to place the below code inside your webpage’s Head tag.
<head>
<meta http-equiv="refresh" content="60" />
</head>
        The value of the content attribute determines the time interval (in seconds) for the page refresh. The above code will automatically refresh the page in 1 minute (60 seconds).

Using Javascript

        The Location.reload method forces a reload of the window's current document, i.e. the one contained in the Location.href property. The below javscript function will automatically reload the page after the given time period. In the below function the refresh interval (in milliseconds) is passed as the method argument.
function autoRefresh(refreshPeriod) {
    setTimeout("window.location.reload();",refreshPeriod);
}
The function then needs to be called from the HTML Body tag’s onLoad event.
<body onload="autoRefresh(60000);">
        This will cause the page to be refreshed every 1 minute (60000 milliseconds = 60 seconds) after it have been loaded.

        The location.reload method behaves in exactly the same way as the browser's reload button which, by default reloads from the cache. If, however, the user wants to reload the document from the server (for fetching an updated version), he can do so by supplying 'true' as the parameter to the reload method. Thus location.reload(true) will force the page to be loaded from server rather than from the cache.

        Having an automatic page refresh might be quite annoying sometimes, as reloading a content rich page might consume considerable bandwidth for the user, thus resulting in a bad interaction experience with the website. This can be avoided by having a User interactive refresh rather than an auto refresh. This can be done by calling the location.reload method on a Link.
<a href=" window.location.reload();"> Refresh this page </a>
Or you can do this using a button click.
<input type="button" value="Reload Page" onClick="window.location.reload();">
        This will cause the page to be reloaded instantly. The link will cause the page to be reloaded from the cache, while click on the button will cause the page to be reloaded from server.

There is also another way in javascript to refresh a page using window.location
<input type="button" value="Reload Page" onClick=" window.location = document.URL;">
        The minus with this approach is that, this will not reload the page if there is a hash (#) in the URL.

Meta Refresh vs. Javascript Refresh

        Meta refresh usage is discouraged by the W3C over other methods. Therefore you should use JavaScript as your primary means for automatic page refreshes and a META tag as your fallback.
Below are the drawbacks of using Meta tag for refresh:
  • If a page redirects too quickly (less than 2-3 seconds), using the "Back" button on the next page may cause some browsers to move back to the redirecting page, whereupon the redirect will occur again. This is bad for usability, as this may cause a reader to be "stuck" on the last website.
  • A reader may or may not want to be redirected to a different page, which can lead to user dissatisfaction or raise concerns about security

You can find the entire code along with html from below.

<html>
<head>
<noscript>
    <meta http-equiv="refresh" content="60" />
</noscript>
<script type="text/javascript" language="javascript">
  /** Function to refresh the page at specified interval. **/
  function autoRefresh(refreshPeriod) {
      setTimeout("window.location.reload();",refreshPeriod);
  }
</script>
</head>
<body onload="autoRefresh(10000);">
  <h2> Auto Refresh </h2>
  This page autorefreshes in 10 seconds. <br/>
  You can also perform a manual refresh by clicking any of the link/button below.
  <br/><br/>
  <a href="javascript:window.location.reload();"> Refresh this page - Cached </a>
  <br/><br/>
  <input type="button" value="Reload Page - Server" onClick="window.location.reload(true);">
  <br/><br/>
  <input type="button" value="Reload Page" onClick=" window.location = document.URL;">
  <br/><br/>
</body>
</html>

Related Posts Plugin for WordPress, Blogger...
 

Copyright © 2012 | ScriptSplash | Powered by Blogger Templates