JavaScript

jMaps - jQuery Google Maps Plugin

jQuery has quickly become one of the most used JavaScript libraries around. Google Maps is possibly the most popular mapping website on the web. Wouldn't it be nice to connect the two easily using a small library? Well, jMaps is a library that does just that and version r64 has just been released.

Below is a rundown of the main features as posted on the jMaps Google Code page.

jMaps is a jQuery plugin that provides a really easy API to create and manage multiple google maps on any page.

  • Geocode and reverse any valid address in the world via Google's geocoding API
  • Search for directions to and from any location
  • Add and remove Markers
  • Add and remove polygons and polylines
  • Add and remove graphic layers on the map
  • Add and remove Google adsense layers
  • Add and remove Traffic layers
  • Get information back such as map center, map size, map type, etc

You can go to the Google Code page here.

JS Strict Data Types - Beta 1.1 Released


JS Strict Data Types Beta version 1.1 has just been released. The new release fixes various bugs that where found in the initial release. The biggest fix was one that caused the string and integer data types to not be kept correctly in certain situations.

Any code that you may have written using the library should work with no code changes. So, we recommend that anybody using the initial release start using this new release.

You can go to our Google Code page here.

You can download the new version here.

JavaScript Table Sorter

Tagged:  

There may be times when you have a table that you want users to be able to sort. In some cases it will make sense to have the table sorted on the server side, however for smaller tables it may be useful to have a script sort it on the client. Well, over at the Leigeber Web Development Blog they have posted a nice small script that accomplishes just that.

below is an excerpt from the post.

This JavaScript table sorting script is easy to use, fast and lightweight at only 1.7KB. It includes alternate row formatting, header class toggling, auto data type recognition and selective column sorting. It will currently sort strings, numbers and currency. More features will follow.

You can read the full story here.

You can see a demo here.

You can download the source code here.

Creating a Virtual Keyboard

Tagged:  

With devices like the iPhone and many of the new touch computer monitors we are using traditional keyboards less and less. Add this to the fact that when many people are on the go they use public computers with possible security threats like keyloggers. With these trends in computing you may look at putting a virtual keyboard in your web applications (where it makes sense). Well, over at Design Shack they have put together a nice example of this using jQuery (although you could take the same concept and use a different library).

Below is an excerpt from the post.

For those of us who travel often, we often end up accessing our emails and other confidential web accounts on public computers. In such circumstances, we are completely at the mercy of keyloggers and other malicious software that track our keystrokes and record our passwords.

Yet, very few websites provide their users with the option of using a virtual keyboard to key in (at the bare minimum) their passwords. Yes, a few banks do it, but considering how much personal information we store in various web applications these days, the safety of these accounts are of no less significance to us. This tutorial will explain how we can implement a simple virtual keyboard with some (well, okay, lots of!) help from jQuery.

You can read the full post here.

JavaScript Support in Java 6 Update 10

Tagged:  

The minor release with major features, Java 6 Update 10 brought a host of improvements to the long-neglected Java applet. One of these improvements was better interoperability with JavaScript, which was delivered to the new Java plug-in in the form of LiveConnect technology. As Sun's entrant into the RIA race, JavaFX, comes closer to a 1.0 release, such interoperability is crucial to the success of this effort.

While it has always been possible (to a certain extent) to call between an applet and JavaScript running the same browser, LiveConnect vastly improves the technology by

  • Improving reliability. A number of bugs involving the stability of the browser when making JavaScript<-->Java calls have been fixed.
  • Improving performance. Dramatically better performance...always a good thing.
  • Making it more consistent across different browsers. Support for JavaScript interoperability was always a little better on Mozilla browsers, but now the functionality is more consistent across different browsers with the new plug-in.
  • Increasing the functionality. It's now possible to instantiate new Java objects from JavaScript, call methods on them, as well as reference third-party packages on all browsers.

Calling Java from JavaScript

The following code shows how to invoke methods on an applet through JavaScript:

Java:

package org.example;

public class MyApplet extends Applet {
     public String getMessage() {
          return "Hello World!";
     }
}

HTML/JavaScript:

<applet id="myApp" archive="helloworld.jar" code="org.example.MyApplet"/>

<script type="text/javascript">
     var msg = myApp.getMessage();
     alert(msg);
</script>

Public fields in the Java class can also be called from JavaScript, as well as static fields and methods. Due to a new synthetic keyword, Packages, that is now attached to every applet, it is now possible to instantiate/call methods on classes that are not applets. For example, if we add a new class in the org.example package,

package org.example;

public class MyNonApplet {
     public String getOtherMessage() {
          return "This is NOT a hello world!";
     }
}

we can now create an instance of this class from the JavaScript and do things with it. Using the example above, let's modify the script a little:

<script type="text/javascript">
     var other = new myApp.Packages.org.example.MyNonApplet();
     alert(other.getOtherMessage());
</script>

This opens up the intriguing possibility of accessing a rich set of Java APIs from client-side JavaScript. Take, for example, the ability to add SVG support in (ahem) the only major browser that does not support it*. With Apache Batik and the Java plug-in, full support of SVG in the browser--SVG JavaScript API and all--becomes a reality. (Batik 1.7, by the way, is one of the most compliant implementations of SVG. And SVG might just be a faster way into the web designer's heart than JavaFX, but I digress...)

Each time a call into an applet is made from JavaScript, it is handled by a worker thread that is associated with the applet (there is only one per applet).

Calling JavaScript from Java

All instances of JavaScript objects within Java code appear as instances of netscape.javascript.JSObject. There are essentially two ways of invoking JavaScript from Java:

  1. Calling the static JSObject.getWindow(Applet arg) method with the applet object passed in as an argument. This method returns a JSObject that represents the DOM Window. This JSObject can in turn be used to call() JavaScript functions or eval() JavaScript code. The API for JSObject is here.
  2. Add a method in your Java code that takes JSObject as a formal parameter. Communication can then be bootstrapped from the JavaScript side by calling this Java method and passing a JavaScript object as an argument. It's a little less convenient than option 1, but useful if some JavaScript code wants to delegate some work to the Java code.

Furthermore, you can actually modify the HTML DOM from the Java side using a common DOM API. For the purposes of compiling Java code written with references to JSObject, you would place the jre/lib/plugin.jar on your classpath. Note also that, since JavaScript is a single-threaded language, communication from Java to JavaScript is restricted to one thread at a time; so you should structure your code accordingly.

Other JVM Languages

Of course, the other interesting possibility is the idea of languages like Scala, JRuby, Groovy, Clojure, or Fan being able to run in the browser with support for JavaScript interaction. A truly sick mind (and you know who you are) might use the applet merely as a trojan horse in order to get his/her favorite language running in the browser. I'll leave it at that!

Sun's renewed interest in the applet--sparked in part by RIA and in no small way by the resurgence of alternative browsers--has opened a door many thought closed a long time ago. Interesting times, indeed.

* Even worse now that the Adobe SVG plug-in has been discontinued.

JS Strict Data Types - Released

We at Ajaxonomy are happy to announce the release of the first library in the Ajaxonomy Developer's Toolkit. The library is called JS Strict Data Types and attempts to provide a way to maintain strict data types in JavaScript. Strict data types are proposed in the next version of JavaScript, however it is hard to say when you will actually be able to use it in all browsers. So, JS Strict Data Types is an attempt to allow the use of strict data types now.

The library is very easy to use. Simply include the small 7K (uncompressed) js file in your web page or application and then you can start defining variable data types strictly through the methods used in the below example.

MyVar1 = new Int(12); //Creates an Integer variable MyVar2 = new Float(2.54); //Creates a Float variable MyVar3 = new String("Some Text"); //Creates a Sting variable MyVar4 = new Boolean(true); //Creates a Boolean variable

The library uses various methods to maintain the strict data type (if you choose not to use the methods in the library strict data types may not continue to be maintained). The below shows a few of the mathematical methods that are available in the library.

MyVar1.add(5); MyVar1.sub(2); MyVar1.mult(10); MyVar1.div(7);

Since there are quite a few methods that are used to guarantee that strict data types it is recommended that you read the documentation before using the library.

This beta 1.0 release of the library is released under the GNU Lesser GPL. So, it can be used for personal and commercial use. Because of this go ahead and use the library in other libraries or any JavaScript project.

You can see a demo page that uses the library and displays the results here.

You can download the library here.

You can go to the projects Google Code page here.

You can read the projects documentation here.

JS Strict Data Types - Documentation

Tagged:  

JS Strict Data Types is JavaScript library that attempts to facilitate strict data types in JavaScript.

Below are the data types that are currently supported.

You can convert data types from one data type to another using the ConvertDataType method. The method accesses two parameters, the first is the variable that you want to convert and the second is a string value for the data type that you want to convert the variable to (Int for Integer, Float for Float, String for String and Boolean for Boolean). Below is an example of converting a variable from an Integer to a Float.

MyVar1 = new Int(MyVar1);
MyVar1 = ConvertDataType(MyVar1, "Float");
MyVar1.Set(253.345345);
alert(MyVar1.value);

JS Strict Data Types - Boolean

Tagged:  

Back to Main Documentation Page
The JS Strict Data Types Boolean method allows you to define a variable as a Boolean data type and maintain the value as a Boolean. The Boolean method returns true or false, but will accept true, false, 1 or 0.

To identify a variable as a Boolean you would write the below code (where OptionalBooleanValue is some Boolean value, if no value is inserted then an empty Boolean is returned).

MyVar1 = new Boolean(OptionalBooleanValue);

To return the data type of the Boolean you would use the DataType property.

alert(MyVar1.DataType);

To set the value of the Boolean to a new value you would use the below code (where BooleanValue is some Boolean value).

MyVar1.Set(BooleanValue);

To get the value of a Boolean you would use the value property (the below would display the value).

alert(MyVar1.value);

To compare if a Boolean is equal to the Boolean value you would use the CompareEq method as seen below (below is how you would use the CompareEq method in an if statement, where BooleanValue is some Boolean value).

if(MyVar1.CompareEq(BooleanValue)){
    alert("Statement is Equal");
{

To compare if a Boolean is not equal to the Boolean value you would use the CompareNotEq method as seen below (below is how you would use the CompareNotEq method in an if statement, where BooleanValue is some Boolean value).

if(MyVar1.CompareNotEq(BooleanValue)){
    alert("Statement is not Equal");
{

Below is an example of how you would use a function to maintain a Boolean value.

function TestFunction(MyVar1){
    //Set the Data Type of each Variable
    MyVar1 = new Boolean(MyVar1);
    alert("MyVar1 = " + MyVar.value);
}

JS Strict Data Types - String

Tagged:  

Back to Main Documentation Page
The JS Strict Data Types String method allows you to define a variable as a String data type and maintain the value as a String.

To identify a variable as a String you would write the below code (where OptionalStringValue is some String value, if no value is inserted then an empty string is returned).

MyVar1 = new String(OptionalStringValue);

To return the data type of the String you would use the DataType property.

alert(MyVar1.DataType);

To set the value of the String to a new value you would use the below code (where StringValue is some String value).

MyVar1.Set(StringValue);

To get the value of a String you would use the value property (the below would display the value).

alert(MyVar1.value);

To append a String value to the String you would use the append method as seen below (where StringValue is some String value).

MyVar1.append(StringValue);

To compare if a String is equal to the String value you would use the CompareEq method as seen below (below is how you would use the CompareEq method in an if statement, where StringValue is some String value).

if(MyVar1.CompareEq(StringValue)){
    alert("Statement is Equal");
{

To compare if a String is not equal to the String value you would use the CompareNotEq method as seen below (below is how you would use the CompareNotEq method in an if statement, where StringValue is some String value).

if(MyVar1.CompareNotEq(StringValue)){
    alert("Statement is not Equal");
{

Below is an example of how you would use a function to maintain a String value.

function TestFunction(MyVar1){
    //Set the Data Type of each Variable
    MyVar1 = new String(MyVar1);
    alert("MyVar1 = " + MyVar.value);
}

JS Strict Data Types - Float

Tagged:  

Back to Main Documentation Page
The JS Strict Data Types Float method allows you to define a variable as a Float data type and maintain the value as a Float.

To identify a variable as a Float you would write the below code (where OptionalFloatValue is some Float value, if no value is inserted then 0 is returned).

MyVar1 = new Float(OptionalFloatValue);

To set the value of the Float to a new value you would use the below code (where FloatValue is some Float value).

MyVar1.Set(FloatValue);

To return the data type of the Float you would use the DataType property.

alert(MyVar1.DataType);

To get the value of a Float you would use the value property (the below would display the value).

alert(MyVar1.value);

To add a Float value to the Float you would use the add method as seen below (where FloatValue is some Float value).

MyVar1.add(FloatValue);

To subtract a Float value from the Float you would use the sub method as seen below (where FloatValue is some Float value).

MyVar1.sub(FloatValue);

To divide the Float by a Float value you would use the div method as seen below (where FloatValue is some Float value).

MyVar1.div(FloatValue);

To multiply the Float by a Float value you would use the mult method as seen below (where FloatValue is some Float value).

MyVar1.mult(FloatValue);

To compare if a Float is equal to the Float value you would use the CompareEq method as seen below (below is how you would use the CompareEq method in an if statement, where FloatValue is some Float value).

if(MyVar1.CompareEq(FloatValue)){
    alert("Statement is Equal");
{

To compare if a Float is not equal to the Float value you would use the CompareNotEq method as seen below (below is how you would use the CompareNotEq method in an if statement, where FloatValue is some Float value).

if(MyVar1.CompareNotEq(FloatValue)){
    alert("Statement is not Equal");
{

To compare if the Float value is greater than a Float value you would use the CompareGrt method as seen below (below is how you would use the CompareGrt method in an if statement, where FloatValue is some Float value).

if(MyVar1.CompareGrt(FloatValue)){
    alert("Statement Greater Than");
{

To compare if the Float value is greater than or equal to a Float value you would use the CompareGrtEq method as seen below (below is how you would use the CompareGrtEq method in an if statement, where FloatValue is some Float value).

if(MyVar1.CompareGrtEq(FloatValue)){
    alert("Statement Greater Than or Equal");
{

To compare if the Float value is less than a Float value you would use the CompareLess method as seen below (below is how you would use the CompareLess method in an if statement, where FloatValue is some Float value).

if(MyVar1.CompareLess(FloatValue)){
    alert("Statement Less Than");
{

To compare if the Float value is less than or equal to a Float value you would use the CompareLessEq method as seen below (below is how you would use the CompareLessEq method in an if statement, where FloatValue is some Float value).

if(MyVar1.CompareLessEq(FloatValue)){
    alert("Statement Less Than or Equal");
{

Below is an example of how you would use a function to maintain a Float value.

function TestFunction(MyVar1){
    //Set the Data Type of each Variable
    MyVar1 = new Float(MyVar1);
    alert("MyVar1 = " + MyVar.value);
}

Below is an example of how you would accomplish a for loop using the Float method.

for(var a = new Float(0); a.value<20; a.add(1)){
    alert("a = " + a.value);
}

Syndicate content