Color Paletter using Sliders

To implement a color palette using a Slider. Here we use three sliders for Red, Blue and Green. Based on the slide value the Redness, Greenness and Blueness gets adjusted and thereby we can bring about all colors.

Download Source Code

Code

import java.awt.*;
import java.awt.event.*;
import javax.swing.*;
import javax.swing.JScrollBar;
import java.applet.*;

public class Slide extends Applet
{
    JScrollBar scroll;
    JScrollBar scroll1;
    JScrollBar scroll2;
    JLabel lbl1;
    JLabel lbl2;
    JLabel lbl3;
    JPanel panel1;
    JPanel panel2;
    JPanel panel3;
    JPanel panel;
    int redness=0;
    int greenness=0;
    int blueness=0;
   
    Color co;
   
    public void init()
    {
        scroll= new JScrollBar(JScrollBar.HORIZONTAL);
        scroll.setMaximum(265);
        scroll.addAdjustmentListener(new MyAdjustmentListener());
        scroll1= new JScrollBar(JScrollBar.HORIZONTAL);
        scroll1.setMaximum(265);
        scroll1.addAdjustmentListener(new MyAdjustmentListener());
        scroll2= new JScrollBar(JScrollBar.HORIZONTAL);
        scroll2.setMaximum(265);
        scroll2.addAdjustmentListener(new MyAdjustmentListener());
        lbl1 = new JLabel("Red");
        lbl2 = new JLabel("Green");
        lbl3 = new JLabel("Blue");
       
        panel = new JPanel();
        panel1 = new JPanel();
        panel2 = new JPanel();
        panel3 = new JPanel();
        panel1.setLayout(new BorderLayout());
        panel2.setLayout(new BorderLayout());
        panel3.setLayout(new BorderLayout());
       
        panel1.add(lbl1,BorderLayout.WEST);
        panel1.add(scroll);
       
        panel2.add(lbl2,BorderLayout.WEST);
        panel2.add(scroll1);
       
        panel3.add(lbl3,BorderLayout.WEST);
        panel3.add(scroll2);
       
        panel.setLayout(new BorderLayout());
        panel.add(panel1,BorderLayout.NORTH);
        panel.add(panel2,BorderLayout.CENTER);
        panel.add(panel3,BorderLayout.SOUTH);
        add(panel,BorderLayout.NORTH);
        setSize(300,300);
        setVisible(true);
    }
   
    class MyAdjustmentListener implements AdjustmentListener
    {
        public void adjustmentValueChanged(AdjustmentEvent e)
        {
            if(e.getSource()==scroll)
                redness = e.getValue();
            else if(e.getSource() == scroll1)
                greenness = e.getValue();
            else
                blueness = e.getValue();
            co=new Color(redness,greenness,blueness);
            setBackground(co);
            repaint();
        }
    }
}   
       
Screenshots

Color Palette using matrix of buttons in Applet

Let us create an applet that contains a matrix of buttons and when clicked the background will change accordingly.


Download the Source Code

Code for Applet

import java.io.*;
import java.applet.*;
import java.awt.event.*;
import java.awt.*;


public class matrixcolors extends Applet implements ActionListener
{
    Checkbox cf,cb;
    TextArea a;
    private Color color[]={Color.red,Color.blue,Color.cyan,Color.white,Color.black,Color.green,Color.gray,Color.lightGray,Color.darkGray,Color.yellow, Color.pink, Color.magenta,Color.orange};
    Button b[];
    Panel p1;
   
    public void init()
    {
        setLayout(new BorderLayout());
        p1=new Panel();
        b=new Button[13];
        for(int i=0;i
        {
            b[i]=new Button("");
            b[i].addActionListener(this);
            b[i].setBackground(color[i]);
            p1.add(b[i]);
        }
       
        cb=new Checkbox("Back Ground Color",true);
        cf=new Checkbox("Fore Ground Color",true);
        p1.add(cb);
        p1.add(cf);
        p1.setVisible(true);
        add(p1,BorderLayout.SOUTH);
        a=new TextArea("");
        add(a,BorderLayout.CENTER);
    }
    public void actionPerformed(ActionEvent e)
    {
        if(cb.getState())
        {
            for(int i=0;i
            {
                if(e.getSource() == b[i])
                    a.setBackground(color[i]);
            }
        }
        if(cf.getState())
        {
            for(int i=0;i
            {
                if(e.getSource()==b[i])
                    a.setForeground(color[i]);
            }
        }
    }
}

Screenshots

Validating Web Form Controls using DHTML

Question - Client Side Scripts for Validating Web Form Controls using DHTML.

Dynamic HTML, or DHTML, is an umbrella term for a collection of technologies used together to create interactive and animated web sites by using a combination of a static markup language (such as HTML), a client-side scripting language (such as JavaScript), a presentation definition language (such as CSS), and the Document Object Model.

I am going to create a simple HTML form where we validate the email Id..

First create the form, then using JavaScript we will validate the Email Id field, that is we will check if the user has entered a valid email id. Like if they leave @ or . we need to display to the user the error and make user they enter the proper format.

Here goes the code for the form,


<head>

<script type="text/javascript">

function validate_email(field)

{

with (field)

  {

  apos=value.indexOf("@");

  dotpos=value.lastIndexOf(".");

  len=value.length;

  if (apos<1||dotpos-apos<2||(len-dotpos)<2)

    {   document.getElementById('email_text').style.display = 'block';

    return false;}

  else

  {

  return true;}

  }

}

function validate_form(thisform)

{

with(thisform)

{

  if (validate_email(email)==false)

    {email.focus();return false;}

   alert("Registration Successful..Thank you!");   

}

}

</script>

</head>
Now we write the Javascript code to validate the email Id field,



<head>

<script type="text/javascript">

function validate_email(field)

{

with (field)

  {

  apos=value.indexOf("@");

  dotpos=value.lastIndexOf(".");

  len=value.length;

  if (apos<1||dotpos-apos<2||(len-dotpos)<2)

    {   document.getElementById('email_text').style.display = 'block';

    return false;}

  else

  {

  return true;}

  }

}

function validate_form(thisform)

{

with(thisform)

{

  if (validate_email(email)==false)

    {email.focus();return false;}

   alert("Registration Successful..Thank you!");   

}

}

</script>

</head>



Download the Source Code



Basically the script does the following,

The function above checks if the content has the general syntax of an email.
This means that the input data must contain at least an @ sign and a dot (.). Also, the @ must not be the first character of the email address, and the last dot must at least be one character after the @ sign. The by using "len-dotpos" we make sure that there are characters after those dot

So now we have created Client Side Scripts for Validating Web Form Controls using DHTML.

Happy New Year

I Wish you all a Super New Year..Hope 2011 Bring all that you desire...:)