On my way!

Thursday, February 25, 2016

NodeJS display all images in a directory on web page

Below is the sample code on how to display all images from a directory on a webpage using nodejs without any dependencies. Source code in Github

Tuesday, May 1, 2012

Bootstrap Multilevel Dropdown Menu

Simple example of twitter Bootstrap Multilevel Dropdown Menu here is the working example jsfiddle and below is the complete source of html.

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">

        <title>Bootstrap Multilevel Dropdown Menu</title>
        <script type='text/javascript' 
        src='http://code.jquery.com/jquery-1.7.1.js'></script>
        <link rel="stylesheet" type="text/css"
              href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">

        <script>

            /* bootstrap-dropdown.js v2.0.2

             * http://twitter.github.com/bootstrap/javascript.html#dropdowns
             * ============================================================
             * Copyright 2012 Twitter, Inc.
             *
             * Licensed under the Apache License, Version 2.0 (the "License");
             * you may not use this file except in compliance with the License.
             * You may obtain a copy of the License at
             *
             * http://www.apache.org/licenses/LICENSE-2.0
             *
             * Unless required by applicable law or agreed to in writing, software
             * distributed under the License is distributed on an "AS IS" BASIS,
             * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
             * See the License for the specific language governing permissions and
             * limitations under the License.
           */
     !function( $ ){
       "use strict"
      /* DROPDOWN CLASS DEFINITION
             * ========================= */
            var toggle = '[data-toggle="dropdown"]'
            , Dropdown = function ( element ) {
                var $el = $(element).on('click.dropdown.data-api', this.toggle)
                $('html').on('click.dropdown.data-api', function () {
                    $el.parent().removeClass('open')
                })
            }
            Dropdown.prototype = {
                constructor: Dropdown
                , toggle: function ( e ) {
                    var $this = $(this)
                    , selector = $this.attr('data-target')
                    , $parent
                    , isActive

                    if (!selector) {
                        selector = $this.attr('href')
                        selector = selector && selector.replace(/.*(?=#[^\s]*$)/, '') //strip for ie7
                    }

                    $parent = $(selector)
                    $parent.length || ($parent = $this.parent())
                    isActive = $parent.hasClass('open')
                    clearMenus()
                        !isActive && $parent.toggleClass('open')
                    return false
                }
            }

            function clearMenus() {
                $(toggle).parent().removeClass('open')
            }
            /* DROPDOWN PLUGIN DEFINITION
             * ========================== */
            $.fn.dropdown = function ( option ) {
                return this.each(function () {
                    var $this = $(this)
                    , data = $this.data('dropdown')
                    if (!data) $this.data('dropdown', (data = new Dropdown(this)))
                    if (typeof option == 'string') data[option].call($this)
                })
            }
            $.fn.dropdown.Constructor = Dropdown
            /* APPLY TO STANDARD DROPDOWN ELEMENTS
             * =================================== */
            $(function () {
                $('html').on('click.dropdown.data-api', clearMenus)
                $('body').on('click.dropdown.data-api', toggle, Dropdown.prototype.toggle)
            })
        }( window.jQuery );
        </script>
        
        <script type='text/javascript'>//<![CDATA[
        $(window).load(function(){
            jQuery('.submenu').hover(function () {
                jQuery(this).children('ul').removeClass('submenu-hide').addClass('submenu-show');
            }, function () {
                jQuery(this).children('ul').removeClass('.submenu-show').addClass('submenu-hide');
            }).find("a:first").append(" &raquo; ");
        });//]]> 
        </script>
        
        <style>
            .submenu-show
            {
                border-radius: 3px;
                display: block;
                left: 100%;
                margin-top: -25px !important;
                moz-border-radius: 3px;
                position: absolute;
                webkit-border-radius: 3px;
            }
            .submenu-hide
            {
                display: none !important;
                float: right;
                position: relative;
                top: auto;
            }
            .navbar .submenu-show:before
            {
                border-bottom: 7px solid transparent;
                border-left: none;
                border-right: 7px solid rgba(0, 0, 0, 0.2);
                border-top: 7px solid transparent;
                left: -7px;
                top: 10px;
            }

            .navbar .submenu-show:after
            {
                border-bottom: 6px solid transparent;
                border-left: none;
                border-right: 6px solid #fff;
                border-top: 6px solid transparent;
                left: 10px;
                left: -6px;
                top: 11px;
            }
        </style>
    </head>
    <body>
        <div class="navbar navbar-fixed-top">
            <div class="navbar-inner">
                <div class="container-fluid">
                    <a data-target=".nav-collapse" data-toggle="collapse" class="btn btn-navbar">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </a>
                    <a href="#" class="brand">Project name</a>
                    <div class="nav-collapse">
                        <ul class="nav">
                            <li class="active"><a href="#">Home</a></li>
                            <li><a href="#">Link</a></li>
                            <li><a href="#">Link</a></li>
                            <li><a href="#">Link</a></li>
                            <li class="dropdown">
                                <a data-toggle="dropdown" class="dropdown-toggle" href="#">Go To <b class="caret"></b></a>
                                <ul class="dropdown-menu">
                                    <li class="dropdown submenu">
                                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Level 1</a>
                                        <ul class="dropdown-menu submenu-show submenu-hide">
                                            <li class="dropdown submenu">
                                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Level 1.1</a>
                                                <ul class="dropdown-menu submenu-show submenu-hide">
                                                    <li><a href="#">Level 1.1.1</a></li>
                                                    <li><a href="#">Level 1.1.2</a></li>
                                                    <li><a href="#">Level 1.1.3</a></li>
                                                    <li><a href="#">Level 1.1.4</a></li>
                                                </ul>
                                            </li>
                                            <li class="dropdown submenu">
                                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Level 1.2</a>
                                                <ul class="dropdown-menu submenu-show submenu-hide">
                                                    <li><a href="#">Level 1.2.1</a></li>
                                                    <li><a href="#">Level 1.2.2</a></li>
                                                </ul>
                                            </li>
                                            <li><a href="#">Level 1.3</a></li>
                                            <li><a href="#">Level 1.4</a></li>
                                            <li><a href="#">Level 1.5</a></li>
                                        </ul>
                                    </li>
                                    <li><a href="#">Other</a></li>
                                </ul>
                            </li>
                        </ul>
                    </div><!-- /.nav-collapse -->
                </div>
            </div>
        </div>
    </body>

</html>

JSF Primefaces Mobile RSS Reader

This is a simple example of Primefaces Mobile RSS Reader similar to How to Build an RSS Reader with jQuery Mobile. For this example I have used Maven 3.0, Primefaces 3.2, Primefaces Mobile 0.9.2 versions also I have used primefaces FeedReader component and this component has a dependency on Rome API.

The source code is available for download @ Github and TODO is upload the example in GAE

At very high level the main page has 3 views and I am highlighting the important notable items on the page.

1. View main will Display the List of available Feeds
2. View feedsView Displays the first 10 feed content from the selected feed from main view
3. View newFeed is for adding new feed it will display a FORM to add new feed and after adding it will display the updated list.

<f:view xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:pm="http://primefaces.org/mobile"
contentType="text/html" renderKitId="PRIMEFACES_MOBILE">
<pm:page title="PF RSS Reader" mini="true">

<f:facet name="meta">
<meta name="apple-mobile-web-app-capabel" content="yes" />
</f:facet>

<pm:view id="main">
<pm:header title="Rss Feeds" swatch="b" fixed="true">
<f:facet name="right"><h:outputLink value="#newFeed?reverse=true">Add Feed</h:outputLink></f:facet>
</pm:header>
<pm:content>
<h:form id="listFeedNames">
<p:dataList value="#{mobileTestController.rssFeedsList}" var="feed" type="inset">
<f:attribute name="filter" value="true" />
<p:column>
<p:commandLink value="#{feed.title}" update=":viewFeed" action="#{mobileTestController.viewSelectedFeed(feed)}"/>
</p:column>
</p:dataList>
</h:form>
</pm:content>
<pm:footer fixed="true" style="text-align: center; font-size: 10px">
<h:outputText value="Fixed Footer" style="text-align: center"/>
</pm:footer>
</pm:view>

<pm:view id="feedsView">
<pm:header title="View Feed" swatch="b" fixed="true">
<f:facet name="left"><p:button value="Home" icon="home" href="#main?reverse=true"/></f:facet>
<f:facet name="right"><h:outputLink value="#newFeed?reverse=true">Add Feed</h:outputLink></f:facet>
</pm:header>
<pm:content>
<h:form id="viewFeed">
<p:feedReader value="#{mobileTestController.selectedFeed}" var="feed" size="10">
<h:outputText value="#{feed.title}" style="font-weight: bold"/>
<br />
<h:outputText value="#{feed.description.value}" escape="false"/>
<p:separator />
</p:feedReader>
</h:form>
</pm:content>
</pm:view>

<pm:view id="newFeed">
<pm:header title="Add New Feed" swatch="b" fixed="true">
<f:facet name="left"><p:button value="Home" icon="home" href="#main?reverse=true"/></f:facet>
</pm:header>
<pm:content>
<h:form>
<p:inputText id="feed_name" label="Title:" value="#{mobileTestController.rssFeed.title}"/>
<p:inputText id="feed_rss" label="Rss URL:" value="#{mobileTestController.rssFeed.rssUrl}"/>
<p:commandButton value="Save" action="#{mobileTestController.addNewFeed}" update="@form,:listFeedNames" icon="check" />
</h:form>
</pm:content>
</pm:view>
</pm:page>
</f:view>

Monday, April 23, 2012

How to Print JSF implementation and version

When deploying JSF 2.0 applications in weblogic 10.3.5 first we need to deploy jsf 2.0 as a shared library and refer this library in weblogic.xml file for the application to deploy properly. We use Maven and with maven updating the version of a jar file is easy but when the application is deployed ever wondered which implementation is being used the one in weblogic shared library or jar files from web application class path?

So we decided to show the JSF implementation and version, Primefaces Version, JPA Version and Build Number information in the footer page similar to what primefaces showcase shows at the bottom of the page.
Below is how you get the details :-)

1. JSF implementation: Returns Mojarra
public static String getJsfImplementation() {
return FacesContext.class.getPackage().getImplementationTitle();
}

2. JSF Version: Returns 2.1.7
public static String getJsfVersion() {
return FacesContext.class.getPackage().getImplementationVersion();
}

3. Primefaces version: Returns 3.1.1
public String getPrimefacesVersion(){
return org.primefaces.util.Constants.VERSION;
}

4. JPA version: Returns 2.3.0.v20110604-r9504
public String getEclipseLinkVersion() {
return org.eclipse.persistence.Version.getVersionString();
}

Wednesday, November 30, 2011

JSF Primefaces mobile Integration

Today I created my first mobile web application using Primefaces mobile and also integration with existing primefaces JSF application and it took me less than 15 minutes to setup and run the application in Weblogic 10.3.5. I have used the same managed bean for both desktop web and mobile web browsers and it works great thanks to primefaces team powerd by JQuery mobile for awesome JSF components and detailed user guide.

There were few lessons learned during integration.

Read JQuery mobile documentation it helps you during page creation.
If you are new to primefaces make sure you understand primefaces AJAX implementation.
Read primefaces user guide (core & mobile) and and review the examples closely in the guide.
Apply special focus while reading about <p:commandLink>. Feels silly?
Follow mobile page design principals.

Update (04/11):

Setup the Render Kit Id as PRIMEFACES_MOBILE for parent <f:view> then you do not need to pass the request parameter with the URL "?javax.faces.RenderKitId=PRIMEFACES_MOBILE" or you do not need to setup the default-render-kit-id in faces-config.xml
To make use of JQuery mini forms you can set mini="true" to the page element . Note needs primefaces mobile version 0.9.2
Add filter to dataList by adding the attribute filter
Fixed Header & Footer
Example code to create RSS reader Github

Ex:

<f:view xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:pm="http://primefaces.org/mobile"
contentType="text/html" renderKitId="PRIMEFACES_MOBILE">
<pm:page title="Mobile Home" mini="true">

<pm:view id="main">
<pm:header title="Fixed Header" swatch="b" fixed="true"/>
<pm:content>
<p:dataList>
<f:attribute name="filter" value="true" />
<h:outputText value="Barcelona" />
<h:outputText value="Istanbul" />
<h:outputText value="New York" />
<h:outputText value="Paris" />
</p:dataList>
</pm:content>

<pm:footer fixed="true" style="text-align: center; font-size: 10px">
<h:outputText value="Fixed Footer"/>
</pm:footer>

</pm:view>
</pm:page>
</f:view>

Wednesday, November 9, 2011

EL 2.2 and Weblogic 10.3.5

EL 2.2 has some nice features where in you can pass objects to the methods to perform some actions. This feature has nice advantage when you combine with JSF 2.0 however it will not work with JSF 1.2. If you are using JEE6 server EL 2.2 is supported out of box and for any that do not then you have to copy the el-api-2.2 and el-impl-2.2 jar files to web application class path (WEB-INF/lib) and add below context parameter to web.xml and it should work. For weblogic to support we have to add weblogic.xml file as well.

1. Copy the el-api-2.2 and el-impl-2.2 jar to web application class path (WEB-INF/lib). Below is the POM if you are using maven


<dependency>
<groupId>javax.el</groupId>
<artifactId>el-api</artifactId>
<version>2.2</version>
</dependency>
<dependency>
<groupId>org.glassfish.web</groupId>
<artifactId>el-impl</artifactId>
<version>2.2</version>
</dependency>

2. Add below context param to web.xml

<context-param>
<param-name>com.sun.faces.expressionFactory</param-name>
<param-value>com.sun.el.ExpressionFactoryImpl</param-value>
</context-param>

3. Add weblogic.xml below WEB-INF

<?xml version='1.0' encoding='UTF-8'?>
<weblogic-web-app xmlns="http://xmlns.oracle.com/weblogic/weblogic-web-app"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://xmlns.oracle.com/weblogic/weblogic-web-app http://xmlns.oracle.com/weblogic/weblogic-web-app/1.0/weblogic-web-app.xsd">
<weblogic-version>10.3.4</weblogic-version>
<context-root>demo</context-root>
<container-descriptor>
<prefer-application-packages>
<package-name>com.sun.el.*</package-name>
<package-name>javax.el.*</package-name>
</prefer-application-packages>
</container-descriptor>
</weblogic-web-app>

Now you can pass objects form JSF to actions directly. Ex is below

<h:form>
<h:dataTable value="#{userManager.users}" var="user">
<h:column>#{user.id}</h:column>
<h:column>#{user.name}</h:column>
<h:column>#{user.email}</h:column>
<h:column><h:commandButton value="Edit" action="#{userManager.edit(user)}" /></h:column>
</h:dataTable>
</h:form>

And you Managed bean will have edit method

public void edit(User user) {
this.user = user;
this.edit = true;
}

That's it happy coding :-)

Friday, October 21, 2011

JSF 2.0, Spring 3.0, JSR 299 and Weblogic 10.3.5

Unfortunately Oracle Weblogic 10.3.5 is not fully JEE6 compatible server yet and the challenge for us was to develop new project that needs be deployed in OWS and the client is not sure of upgrade path yet. So to make our project inline with JEE6 web profile we decided to use Spring DI internally uses JSR 299 and later it would be easy for us to re-factor our code if required since Spring DI could be optional with JEE6 as CDI and DI is provided out of the box by the web profile. The real decision for us is to use limited number of @Annotations that the developer has to worry about and also to be consistent and just us @Named, @Inject and @Scope instead of many other available annotations. Below maven file has the versions that we used to setup our project.

POM file

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>

<groupId>com.dvmr.poc</groupId>
<artifactId>jsfdar</artifactId>
<version>0.0.1-SNAPSHOT</version>
<packaging>jar</packaging>

<name>jsf-dar</name>
<url>http://maven.apache.org</url>

<properties>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
<jsf.version>2.0.6</jsf.version>
<spring.version>3.0.5.RELEASE</spring.version>
<slf4j.version>1.6.1</slf4j.version>
</properties>

<dependencies>
<dependency>
<groupId>jstl</groupId>
<artifactId>jstl</artifactId>
<version>1.2</version>
</dependency>

<dependency>
<groupId>com.sun.faces</groupId>
<artifactId>jsf-api</artifactId>
<version>${jsf.version}</version>
</dependency>
<dependency>
<groupId>com.sun.faces</groupId>
<artifactId>jsf-impl</artifactId>
<version>${jsf.version}</version>
</dependency>

<dependency>
<groupId>org.slf4j</groupId>
<artifactId>slf4j-api</artifactId>
<version>${slf4j.version}</version>
</dependency>
<dependency>
<groupId>org.slf4j</groupId>
<artifactId>slf4j-log4j12</artifactId>
<version>${slf4j.version}</version>
</dependency>
<dependency>
<groupId>log4j</groupId>
<artifactId>log4j</artifactId>
<version>1.2.16</version>
</dependency>

<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-core</artifactId>
<version>${spring.version}</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-core</artifactId>
<version>${spring.version}</version>
<classifier>sources</classifier>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-jdbc</artifactId>
<version>${spring.version}</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-orm</artifactId>
<version>${spring.version}</version>
</dependency>

<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-tx</artifactId>
<version>${spring.version}</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-aop</artifactId>
<version>${spring.version}</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-aspects</artifactId>
<version>${spring.version}</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-web</artifactId>
<version>${spring.version}</version>
</dependency>

<dependency>
<groupId>org.apache.commons</groupId>
<artifactId>commons-lang3</artifactId>
<version>3.0.1</version>
</dependency>


<dependency>
<groupId>junit</groupId>
<artifactId>junit</artifactId>
<version>4.8.1</version>
<scope>test</scope>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-test</artifactId>
<version>${spring.version}</version>
<scope>test</scope>
</dependency>

<dependency>
<groupId>com.oracle</groupId>
<artifactId>oracle</artifactId>
<version>11.2.0.2.0</version>
</dependency>

<dependency>
<groupId>javax.inject</groupId>
<artifactId>com.springsource.javax.inject</artifactId>
<version>1.0.0</version>
</dependency>
</dependencies>
</project>

Simple JSF Managed Bean HelloWorld.java with JSF 2.0 Annotations

import javax.faces.bean.ManagedBean;
import javax.faces.bean.ManagedProperty;

import com.dvmr.poc.service.ProjectsService;

@ManagedBean
@Scope("request")
public class HelloWorld {
private String hello;

@ManagedProperty(value="#{projectsService}")
private ProjectsService projectsService;

//additional details .......
}

Now it becomes inline with JEE6 however the @Named and @Inject are using annotations form com.springsource.javax.inject-1.0.0.jar

import javax.inject.Inject;
import javax.inject.Named;

import com.dvmr.poc.service.ProjectsService;

@Named
@Scope("request")
public class HelloWorld {
private String hello;

@Inject
private ProjectsService projectsService;

//additional details .......
}

Spring applicationContext.xml

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:p="http://www.springframework.org/schema/p"
xmlns:context="http://www.springframework.org/schema/context"
xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-3.0.xsd
http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-3.0.xsd">

<context:component-scan base-package="com.dvmr.poc"/>

</beans>

JSF faces-config.xml

<?xml version="1.0" encoding="utf-8"?>
<faces-config xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-facesconfig_2_0.xsd"
version="2.0">
<application>
<el-resolver>org.springframework.web.jsf.el.SpringBeanFacesELResolver</el-resolver>
</application>
</faces-config>

Make sure you update the web.xml with ContextLoaderListener to load Spring context files.

That's it and you are good go now you can deploy it in weblogic 10.3.5 and using JEE6 annotations. How ever I really want to see weblogic 12g soon.

I will try to upload the project in github very soon :-)