dev it Right

JavaScript Date Formatter

Year(yyyy)

Minutes(m)

Seconds(s)

Milliseconds(S)

2007-10-15T06:14:00.000-07:00

We offten need to display date in accordance with some pattern. There is my implementaion of this task for javascript:


SimpleDateFormatter = function() {};

SimpleDateFormatter.zeroize = function (value, length) {
    if (!length) length = 2;
    value = String(value);
    for (var i = 0, zeros = '';
         i < (length - value.length); i++) {
        zeros += '0';
    }
    return zeros + value;
};
SimpleDateFormatter.getTimezome = function (date) {
    if (!date)
        return "";
    var dateStr = date + "";
    var timezoneIndex = dateStr.indexOf("GMT");
    if (timezoneIndex == -1)
        timezoneIndex = dateStr.indexOf("UTC");
    if (timezoneIndex > 0) {
        return dateStr.substring(timezoneIndex, dateStr.length);
    }
    return "";
}
SimpleDateFormatter.getFromCache = function (pattern){
    if (SimpleDateFormatter.cache && SimpleDateFormatter.cache[pattern])
        return SimpleDateFormatter.cache[pattern];
    return null;
}
SimpleDateFormatter.putToCache = function (pattern, func) {
    if (SimpleDateFormatter.cache)
        SimpleDateFormatter.cache[pattern] = func;
}
SimpleDateFormatter.formatter = function(pattern)
{
    //remove quortes to avoid function compilation problems
    pattern = pattern.replace(/'/g, "");
    pattern = pattern.replace(/\n/g,"\\n");
    var cached = SimpleDateFormatter.getFromCache(pattern);
    if (cached)
        return cached;

    pattern = "'"+pattern+"'";
    var funcSrc = pattern.replace(/(yyyy|MMMM|MMM|MM|M|EEEE|EEE|dd|d|hh|h|kk|k|mm|m|ss|s|S|z)/g,
        function($1)
        {
            switch ($1)
            {
            case 'yyyy': return "'+date.getFullYear()+'";
            case 'MMMM': return "'+SimpleDateFormatter.monthNames[date.getMonth()]+'";
            case 'MMM':  return "'+SimpleDateFormatter.monthNames[date.getMonth()].substr(0, 3)+'";
            case 'MM':   return "'+SimpleDateFormatter.zeroize(date.getMonth() + 1)+'";
            case 'M':   return "'+(date.getMonth() + 1)+'";
            case 'EEEE': return "'+SimpleDateFormatter.dayNames[date.getDay()]+'";
            case 'EEE':  return "'+SimpleDateFormatter.dayNames[date.getDay()].substr(0, 3)+'";
            case 'dd':   return "'+SimpleDateFormatter.zeroize(date.getDate())+'";
            case 'd':   return "'+date.getDate()+'";
            case 'h':   return "'+date.getHours()+'";
            case 'hh':   return "'+SimpleDateFormatter.zeroize(date.getHours())+'";
            case 'k':   return "'+((h = date.getHours() % 12) ? h : '12')+(date.getHours() < 12 ? 'am' : 'pm')+'";
            case 'kk':   return "'+SimpleDateFormatter.zeroize((h = date.getHours() % 12) ? h : '12')+(date.getHours() < 12 ? 'am' : 'pm')+'";
            case 'mm':   return "'+SimpleDateFormatter.zeroize(date.getMinutes())+'";
            case 'm':   return "'+date.getMinutes()+'";
            case 'ss':   return "'+SimpleDateFormatter.zeroize(date.getSeconds())+'";
            case 's':   return "'+date.getSeconds()+'";
            case 'S':   return "'+date.getMilliseconds()+'";
            case 'z':   return "'+SimpleDateFormatter.getTimezome(date)+'";
            }
        }
        );

    funcSrc = "return "+funcSrc;
    var func = new Function("date", funcSrc);
    SimpleDateFormatter.putToCache(pattern, func);
    return func;
}

// a global month names array
SimpleDateFormatter.monthNames = new Array(
        'January',
        'February',
        'March',
        'April',
        'May',
        'June',
        'July',
        'August',
        'September',
        'October',
        'November',
        'December'
        );

// a global day names array
SimpleDateFormatter.dayNames = new Array(
        'Sunday',
        'Monday',
        'Tuesday',
        'Wednesday',
        'Thursday',
        'Friday',
        'Saturday'
        );

//cache: pattern->format function
SimpleDateFormatter.cache = {};

Pattern letters
y Year 1996; 96
M Month in year July; Jul; 07
d Day in month 10
E Day in week Tuesday; Tue
H Hour in day (0-23) 0
K Hour in am/pm (0-11) 0
m Minute in hour (0-59) 30
s Second in minute (0-59) 55
S Millisecond (0-999) 978
z Time zone GMT+04:00

Usage Now you may use it:


var formatter = SimpleDateFormatter.formatter("yyyy/MMM/EEE");//formatter is a function
alert(formatter(new Date()));


We also use cache of formatter, so you could use SimpleDateFormatter.formatter("yyyy/MMM/EEE")(date) everywhere, and formatter function will be created only single time.



    Year(yyyy) Month(M) Day(d) Hour(h) Minutes(m) Seconds(s) Milliseconds(S)
    
        
        
        
    Pattern



How get HTML element real position
2007-08-31T03:39:00.000-07:00
I have spent a lot of time trying get the real position of DIV element. And I have done it, but only at Firefox. It is a complex issue to find real top and left of the element, because of IE and FF returns different offsetLeft and offsetTop and this result is depends on style.position value of element.


MochiKit helped me. There is an undocumented function MochiKit.Position.positionedOffset(element) that returns what I need. This function is not documented yet, because development still working. But as they says:"If it is denied but very, very need, than it is aloowed" :)


How I use it:divForEntries.style.left =
    MochiKit.Position.positionedOffset(this.htmlView).x +
    this.htmlView.offsetWidth -5;
divForEntries.style.top = 
    MochiKit.Position.positionedOffset(this.htmlView).y;



MochiKit - powerfull JavaScript framework
2007-08-30T04:52:00.000-07:00


Many of us often have a deal with implementing base functions for JavaScript. At Java we have JDK with a lot of helpfull classes. But at the case of JavaScript developers often have to invent a wheel.

But I found a great framework - MochiKit. It is a set of util classes. I will not tell about all thier capabilities, only which I have used.



1. DIV slide up and slide down.


    

  

There is the function:


function slide(elementId){
  var element = document.getElementById(elementId);
  if (element){
    if (element.slideDown){
      MochiKit.Visual.slideDown(element);
      element.slideDown = false;
    }else{
      MochiKit.Visual.slideUp(element);
      element.slideDown = true;
    }
  }
}



Tomcat, JAAS and config file
2007-08-22T08:28:00.000-07:00
As you know Tomcat is able to use JAAS Login Module for Realm authentication. But if you use standard implementation you should start Tomcat with parameter -Djava.security.auth.login.config==$CATALINA_HOME/conf/jaas.config, where jaas.config is your JAAS configuration file. 


So I extended JAASRealm with jaasConfigFile attribute.
package my.realm;

import org.apache.catalina.realm.JAASRealm;

/**
 * This is customization of JAASRealm, created for taking ability of setting JAAS Config File via realm properties.
 * @author Sergey Vinogradov
 */
public class GDJaasRealm extends JAASRealm {
    private String jaasConfigFile;

    public void init() {
        System.setProperty("java.security.auth.login.config", jaasConfigFile);
        super.init();

    }

    public String getJaasConfigFile() {
        return jaasConfigFile;
    }

    public void setJaasConfigFile(String jaasConfigFile) {
        this.jaasConfigFile = jaasConfigFile;
    }
}



Thus you may declare this Realm at server.xml instead of org.apache.catalina.realm.JAASRealm

<Realm className="my.realm.GDJaasRealm"                 
          userClassNames="my.ldap.UserPrincipal"
          roleClassNames="my.ldap.RolePrincipal"       
          appName="my_app"
          jaasConfigFile="D:\ldap-jaas.conf"/>



Creating edit field for numbers
2007-08-06T07:45:00.000-07:00

During working on iRuler.net I had need an HTML input element for numbers only. I haven't found any xHTML solution, so I have appealed to JavaScript. There is the JavaScript solution for limiting possible symbols:


function numberFieldListener(obj){
    var numb = "0123456789";
    var w = "";
    for (var i=0; i < obj.value.length; i++) {
        var x = obj.value.charAt(i);
        if (numb.indexOf(x,0) != -1)
            w += x;
    }
    obj.value = w;
}

<input type="text" onkeyup="numberFieldListener(this)" id="myField"/>

Thus we have following control:


"Hello, world!" with DWR tool
2007-08-01T07:23:00.000-07:00
DWR is tool for enabling RMI on web-server from JavaScript at the client.



What need you do to create first DWR application.



1) Download DWR library.

2) Add description to web.xml



<servlet>

  <servlet-name>dwr-invoker</servlet-name>

  <servlet-class>org.directwebremoting.servlet.DwrServlet</servlet-class>

</servlet>

<servlet-mapping>

  <servlet-name>dwr-invoker</servlet-name>

  <url-pattern>/dwr/*</url-pattern>

</servlet-mapping>




3) Create a class for remote invocation. Let it be following...


package my;

import ...

public class Server {


    private int count = 0;


    public int getCount() {return count;}


    public void increase() {count++}

}


4) Create dwr.xml description at WEB-INF.


<!DOCTYPE dwr PUBLIC

    "-//GetAhead Limited//DTD Direct Web Remoting 1.0//EN"

    "http://www.getahead.ltd.uk/dwr/dwr10.dtd">



<dwr>

  <allow>

    <create creator="new" javascript="server">

      <param name="class" value="my.Server"/>

    </create>

  </allow>

</dwr>



This means, if your-web-app/dwr/client.js is requested, DWR will create an instance of my.Server class and a JavaScript stub for it. You may see how this stub looks by link your-wed-app/dwr/interface/server



// Provide a default path to dwr.engine

if (dwr == null) var dwr = {};

if (dwr.engine == null) dwr.engine = {};

if (DWREngine == null) var DWREngine = dwr.engine;



if (server == null) var server = {};

server._path = '/jmxWebApp/dwr';

server.getCount = function(callback) {

  dwr.engine._execute(client._path, 'client', 'invoke', callback);

}

server.increase = function(callback) {

  dwr.engine._execute(client._path, 'client', 'setAttribute', callback);

}




5) Create page using Server invocaion.


<html>
<head>
    <title>DWR_JMX test</title>
    <script type="text/javascript" src='dwr/engine.js'></script>
    <script type="text/javascript" src='dwr/util.js'></script>
    <script type="text/javascript" src='dwr/server.js'></script>
</head>
<body>
    <script type="text/javascript">
        server.getCount(new Function("data", "alert(data);"));
        server.increase(new Function(alert("Value increased"));
        server.getCount(new Function("data", "alert(data);"));
    </script>
</body>
</html>



"Hello, world" with Spring MVC
2007-07-31T04:25:00.000-07:00
Recently I've started using of Srping MVC for my web apps.

So what you need to get started with spring MVC:



1) Download Spring framework and put spring.jar to web server lib path.

2) Add DispathServlet mapping to web.xml


<servlet>

  <servlet-name><strong>spring</strong></servlet-name>

  <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>

              <load-on-startup>1</load-on-startup>

</servlet>

<servlet-mapping>

  <servlet-name>spring</servlet-name>

  <url-pattern>/index.jsp</url-pattern>

</servlet-mapping>





3) We have called servler instance as spring, so we should create a spring-servlet.xml at WEB-INF.


<xml>
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE beans PUBLIC "-//SPRING//DTD BEAN//EN" "http://www.springframework.org/dtd/spring-beans.dtd">

<beans>

      <bean id="urlMapping" class="org.springframework.web.servlet.handler.SimpleUrlHandlerMapping">
              <property name="mappings">
                     <props>
                             <prop key="/*.jsp">dispatchController</prop>
                     </props>
             </property>
     </bean>

    <bean id="dispatchController" class="my.SimpleController">

      <bean id="viewResolver" class="org.springframework.web.servlet.view.InternalResourceViewResolver">
              <property name="prefix">
                       <value>/WEB-INF/jsp/</value>
             </property>
             <property name="suffix">
                      <value>.jsp</value>
             </property>
     </bean>

</beans>
</xml>



We described 3 beans here.

urlMaping - is a mapping bean. It should not be registered manually. Spring will automatically parse it during initialization.

dispatchController - is a bean, which will be dispath all requests of *.jsp pages. We write class="my.SimpleController", so we need to create class SimpleController later.

viewResolver - is a bean? which will add prefix and suffix to views for creating valid request.



4) Create class my.SimpleController


package my;



import org.springframework.web.servlet.mvc.Controller;

import org.springframework.web.servlet.ModelAndView;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;



public class SimpleController implements Controller {

    public ModelAndView handleRequest(HttpServletRequest request, HttpServletResponse response) throws Exception {

        ModelAndView mav = new ModelAndView("index");

        return mav;

    }

}



This class will dispath all requests to the "index" view. Then "index" view will be changed to "/WEB-INF/jsp/index.jsp" by viewResolver bean.



5) Create "/WEB-INF/jsp/index.jsp".


<html>

  <body>

        "Hello, world!" with Spring MVC.

  </body>

</html>





That's all.


Multithreading at JavaScript
2007-07-25T01:27:00.000-07:00
Recently I've investigated how work multithreading at JavaScript and particulary IE. So, it is safe to say, there is no multithreading at JavaScript. All parts of script are running at the same thread.
Honestly, I expected that function setTimeout(func, timeInMillis) will run func at new htread. In effect this function just guaranties that func will be not runnig earlier than timeInMillis. Actually  if you call it many times, all funcs will be added to the JavaScript engine queue. There is only one queue for all JavaScript at IE.


As for AJAX and particulary letter A, it is really asynchronous. When asynchronous request is posted it handling will run at other thread, but only before response receiving. If response received, callback function will be added to the JavaScript queue. So it will be asynchronous before response handling. Then it became full-synchronous.


Moreover all UI movements related to JavaScropt engine also run at the single thread. So if you have a long-running parts of script UI would be freeze. Thus for evading of UI freezing you need avoid a long-running parts of script. For example, this trick may be used for cycle evading:



iter = function() {

    if (i == 0) return;

    //peace of code

    setTimeout("writeLine();", 10);

}



setTimeout("iter(--i);", 0);



It is better to have many small parts than one big.




How to start RMIRegistry programmatically
2007-07-24T07:34:00.001-07:00
I often face with the necessity of programmatical RMI registry starting. So, this is a solving:



try {

    java.rmi.registry.LocateRegistry.createRegistry(1099);

    System.out.println("RMI registry ready.");

} catch (Exception e) {

    System.out.println("Exception starting RMI registry:");

    e.printStackTrace();

}