Improved Tree and Autocompleter Tag and new Timepicker Addon

Posted by on 29 Jun 2011 | Filed under: java, jQuery, Struts jQuery Plugin, struts2

The new Version 3.1.0 of Struts2 jQuery Plugin is now available with an improved Tree and Autocompleter Tag and a new Timepicker Addon for the Datepicker Tag.

A improved Tree Tag

The Tree Tag provides now support for different Node Types and support for Context Menus. Two new Tree Tag examples in the Showcase explain how to use this new Features.

Struts2 jQuery Tree Tag with Types based on jsTree

<s:set id="contextPath"  value="#request.get('javax.servlet.forward.context_path')" />
<sjt:tree 
	id="treeTypes" 
	jstreetheme="default" 
	openAllOnLoad="true" 
	types="{
			'valid_children' : [ 'root' ],
			'types' : {
				'root' : {
					'icon' : { 
						'image' : '%{contextPath}/images/root.png' 
					},
					'valid_children' : [ 'folder', 'file' ],
				},
				'folder' : {
					'icon' : { 
						'image' : '%{contextPath}/images/folder.png' 
					},
					'valid_children' : [ 'folder', 'file' ],
				},
				'file' : {
					'icon' : { 
						'image' : '%{contextPath}/images/file.png' 
					},
					'valid_children' : [ 'none' ],
				}
		}
	}">
	<sjt:treeItem title="Root" type="root">
		<sjt:treeItem title="Folder One"  type="folder">
			<sjt:treeItem title="File One" type="file"/>
			<sjt:treeItem title="File Two" type="file"/>
		</sjt:treeItem>
		<sjt:treeItem title="Folder Two"  type="folder">
			<sjt:treeItem title="Folder Three"  type="folder">
				<sjt:treeItem title="File Four" type="file"/>
			</sjt:treeItem>
			<sjt:treeItem title="File Three" type="file"/>
		</sjt:treeItem>
	</sjt:treeItem>
</sjt:tree>

Timepicker

An other offen requested feature the Timepicker is now available. This is an enhancment of the existing Datepicker Tag.

Struts2 jQuery Datepicker Tag with Timepicker Addon

<sj:datepicker 
	id="time0" 
	label="Select a Date/Time" 
	value="%{new java.util.Date()}" 
	timepicker="true" 
/>
<sj:datepicker 
	id="time1" 
	label="Select a Time" 
	value="%{new java.util.Date()}" 
	timepicker="true" 
	timepickerOnly="true"
/>

A improved Autocompleter Tag

It is now possible to display the List Value instead of the List Key. See Issue 395 for detailed informations. Also you can now specify a List Label which is displayed during the search.

Libary Updates

For a complete list of changes since last version, please visit the Changelog.

Download: http://code.google.com/p/struts2-jquery/downloads/list
Showcase: http://struts.jgeppert.com/struts2-jquery-showcase/
Issues: http://code.google.com/p/struts2-jquery/issues/list
User Group: http://groups.google.com/group/struts2-jquery

Tags: , , , ,

4 Comments »

4 Easy Steps to create a Java based Web Application with Struts2 and jQuery

Posted by on 10 Mai 2011 | Filed under: java, jQuery, Struts jQuery Plugin, struts2

Step1: Install and Configure Maven

We use Maven to describe this software project and to manage the dependencies.

1.) Download maven from http://maven.apache.org/download.html and extract it.

2.) Add MAVEN_HOME/bin to your PATH

Step2: Create your Struts2 Project

1.) Switch to your Eclipse Workspace. 

cd workspace

2.) Create the Project based on the struts2-archetype-convention archetype. 

mvn archetype:generate -B -DgroupId=com.jgeppert.examples -DartifactId=struts2-example -DarchetypeGroupId=org.apache.struts -DarchetypeArtifactId=struts2-archetype-convention -DarchetypeVersion=2.3.8

3.) Wait until maven download the whole Internet except Cats Pictures and Porn.

4.) Go into the new created folder struts2-example 

cd struts2-example

5.) Open pom.xml in an Editor

6.) Set your project version to 0.0.1 

    <version>0.0.1</version>

7.) Set your Struts2 Version to 2.3.8

    <properties>
        <struts2.version>2.3.8</struts2.version>
    </properties>

8.) Build your blank application 

mvn install

9.) Try it out 

mvn jetty:run

10.) Open http://localhost:8080/struts2-example/ in your Browser

The Message "Struts is up and running..." should appear.

Step3: Create the Eclipse Project

1.) Open your Eclipse IDE

2.) Install m2-eclipse and restart your IDE.

3.) Open the Import Dialog in your Eclipse IDE and import your created Project "struts2-example".

Step4: Add the Struts2 jQuery Plugin to your Project

The Struts2 jQuery Plugin provides an easy Integration of jQuery into this Project.

1.) Open your pom.xml and edit your project properties. 

    <properties>
        <struts2.version>2.3.8</struts2.version>
        <struts2jquery.version>3.5.0</struts2jquery.version>
    </properties>

2.) Add the Dependencies 

	<dependency>
		<groupId>com.jgeppert.struts2.jquery</groupId>
		<artifactId>struts2-jquery-plugin</artifactId>
		<version>${struts2jquery.version}</version>
	</dependency>

3.) Create a new Action YourNameAction.java inside of the com.jgeppert.examples.actions Package 

package com.jgeppert.examples.actions;
 
import com.opensymphony.xwork2.ActionSupport;
 
public class YourNameAction extends ActionSupport {
 
    private String name;
 
    public String execute() throws Exception {
	if(name == null || name.length() < 3){
	    addActionError("Please enter valid name with more the 2 characters!");
	    return ERROR;
	}
 
        return SUCCESS;
    }
 
    public String getName() {
        return name;
    }
 
 
    public void setName(String name) {
        this.name = name;
    }
}

4.) Replace the Content of hello.jsp 

<%@ page contentType="text/html; charset=UTF-8" %>
<%@ taglib prefix="s" uri="/struts-tags" %>
<%@ taglib prefix="sj" uri="/struts-jquery-tags"%>
<html>
<head>
    <title>My App</title>
    <sj:head jquerytheme="start"/>
    <style>
    	body {
    		font-family: Arial,sans-serif;
    		font-size: 9pt;
    	}
    </style>
</head>
 
<body>
	<h2>Please enter a Name</h2>
 
	<s:form action="your-name" theme="xhtml">
		<s:textfield name="name" label="Enter your Name"/>
		<sj:submit 
			targets="result" 
			effect="highlight" 
			value="Submit" 
			button="true"
		/>
	</s:form>
 
	<h3>AJAX Result</h3>
	<div id="result"></div>
</body>
</html>

5.) Create a new JSP inside of your WEB-INF/content folder called your-name.jsp 

<%@ page contentType="text/html; charset=UTF-8" %>
<%@ taglib prefix="s" uri="/struts-tags" %>
<h4>Welcome <s:property value="name"/>!</h4>

6.) Create a new JSP inside of your WEB-INF/content folder called your-name-error.jsp 

<%@ page contentType="text/html; charset=UTF-8" %>
<%@ taglib prefix="s" uri="/struts-tags" %>
<s:actionerror theme="jquery"/>

7.) Run "mvn install" and "mvn jetty:run"

8.) Open http://localhost:8080/struts2-example/ in your Browser and our created form should be appear.

9.) Submit without enter a Name. The Error Message should be visible inside of our defined Target Div without reloading the whole Page.

10.) Submit you form with an valid name.

Download the Sample Project Sources.

Tags: , , , , ,

17 Comments »

Whats New in Struts2 jQuery Plugin 3.0.0

Posted by on 06 Mai 2011 | Filed under: java, jQuery, projekte, Struts jQuery Plugin, struts2

I'am happy to inform you that Version 3.0.0 of Struts2 jQuery Plugin is now available with a lot of new features an improvments.

A new Tree Tag

With this version there is an offen requested feature available. The new Tree Tag allows you to create easy Trees in your templates. This Tree Tag is based on the great jQuery jsTree Plugin.

<sjt:tree id="treeStatic" jstreetheme="default">
	<sjt:treeItem title="Struts2">
		<sjt:treeItem title="General">
			<sjt:treeItem title="Struts2" href="http://struts.apache.org/2.x/index.html"/>
			<sjt:treeItem title="Struts2 @ Facebook" href="http://www.facebook.com/pages/Struts2-Users/103890046351798"/>
		</sjt:treeItem>
		<sjt:treeItem title="Plugins">
			<sjt:treeItem title="Struts2 Plugins" href="https://cwiki.apache.org/S2PLUGINS/home.html"/>
			<sjt:treeItem title="Struts2 jQuery Plugin" href="http://code.google.com/p/struts2-jquery/"/>
			<sjt:treeItem title="Struts2 Full Hibernate Plugin" href="http://code.google.com/p/full-hibernate-plugin-for-struts2/"/>
		</sjt:treeItem>
		<sjt:treeItem title="Blogs">
			<sjt:treeItem title="Struts2 jQuery News" href="http://www.jgeppert.com/category/java/struts2-jquery/"/>
		</sjt:treeItem>
		<sjt:treeItem title="AJAX Links">
			<s:url id="ajax1" value="/ajax1.action"/>
			<sjt:treeItem title="Ajax 1" href="%{ajax1}" targets="result"/>
			<s:url id="ajax2" value="/ajax2.action"/>
			<sjt:treeItem title="Ajax 2" href="%{ajax2}" targets="result" effect="highlight" effectDuration="2500"/>
			<s:url id="ajax3" value="/ajax3.action"/>
			<sjt:treeItem title="Ajax 3" href="%{ajax3}" targets="result" onBeforeTopics="beforeLink" onCompleteTopics="completeLink"/>
			<s:url id="ajax4" value="/ajax4.action"/>
			<sjt:treeItem title="Ajax 4" href="%{ajax4}" targets="result" effect="bounce" effectDuration="1000"/>
		</sjt:treeItem>
	</sjt:treeItem>
</sjt:tree>

Mobile Module

For an better support of mobile development with Java and the popular MVC Framework Struts2, this version of Struts2 jQuery Plugin brings a new Module based on jQuery mobile to you. This includes an easy AJAX support and a jQuery mobile theme for form elements. The new Struts2 jQuery Mobile Showcase gives you an introduction how to use this new module.

Struts2 jQuery Mobile Showcase

Grid Module

This version provides an enhanced Subgrid Feature. Now it is possible to create Multilevel Subgrids. Please take a look at the new 3-Level Subgrid Example in the Grid Showcase.  

Richtext Editor

With this version it is easy to enable Uploads for Images and Flash files for your Ckeditor instance.

Enable File Uploads in your struts2.xml:

<!-- Settings for CKEditor Image Upload -->
<constant name="struts.ckeditor.allowUploads" value="true" /> <!-- default is false -->
<constant name="struts.ckeditor.allowedFileExtensions" value="jpg,jpeg,png" />
<constant name="struts.ckeditor.uploadFolder" value="/image-uploads" />

Enable File Uploads in your ckeditor instance:

<sjr:ckeditor 
	id="richtextEditor" 
	name="echo" 
	rows="10" 
	cols="80" 
	width="730"
	height="400"
	uploads="true"
/>

Libary Updates

For a complete list of changes since last version, please visit the Changelog.

Download: http://code.google.com/p/struts2-jquery/downloads/list
Showcase: http://struts.jgeppert.com/struts2-jquery-showcase/
Issues: http://code.google.com/p/struts2-jquery/issues/list
User Group: http://groups.google.com/group/struts2-jquery

Tags: , , , ,

10 Comments »

Introduction into Struts2 jQuery Grid Tags

Posted by on 01 Apr 2011 | Filed under: java, jQuery, projekte, Struts jQuery Plugin, struts2

Tags: , ,

6 Comments »

Preview for Struts2 jQuery Mobile Showcase

Posted by on 28 Feb 2011 | Filed under: java, jQuery, Struts jQuery Plugin, struts2

For an better support of mobile development with Java and the popular MVC Framework Struts2, I include in the next version of Struts2 jQuery Plugin a new Module based on jQuery mobile. Planned Features of the Struts2 Mobile Plugin are an easy AJAX support and a jQuery mobile theme for form elements. I just upload the current development showcase for the new Struts2 jQuery Mobile Showcase. Struts2 jQuery Mobile Showcase The current module and showcase is based on the jQuery mobile alpha 3 release. I'm always open to suggestions.

Tags: , , ,

5 Comments »

How to overwrite functions in Struts2 jQuery Plugin

Posted by on 17 Feb 2011 | Filed under: java, jQuery, Struts jQuery Plugin, struts2

You want to enhance a default handler, fix a bug or just use an other jquery plugin as the default in Struts2 jQuery Plugin? Here is a short example hot to overwrite the handler function for the autocompleter in Struts2 jQuery Plugin. 
  <sj:head />
  <script type="text/javascript">
  $.struts2_jquery.autocompleter = function($elem, options) {
	alert("my own autocompleter handler for "+options.id);
  };
  </script>

Tags: , ,

6 Comments »

Wie mounte ich eine Samba Freigabe vom NAS

Posted by on 29 Dez 2010 | Filed under: linux

Ich habe mir letztens eine NAS von Raidsonic (Icy Box IB-NAS6220) geholt mit der ich gespiegelt meine digitalen Bilder verwalte. Da ich das ganze in einer heterogenen Umgebung betreibe, also sowohl Windows als auch Linux (openSuse 11.3), stellt sich natürlich die Frage wie kann ich die Samba Freigaben auch unter Linux nutzen. 1.) Stelle sicher das der cifs Dienst gestartet wird. Starte dazu das Yast Modul Systemdienste (Runlevel), das du unter System findest, und gehe in den Expertenmodus. Aktiviere anschließend den Dienst cifs für die Runlevel 2, 3 und 5. Yast Runlevel Editor - Cifs Dienst 2.) Füge in deinem NAS einen Benutzer hinzu und im öffentlichen Bereich einen Ordner Bilder. Ordner die im öffentlichen Bereich erstellt werden stehen allen Benutzer zur Verfügung. 3.) Erstelle in deinem Home Laufwerk einen Order z.B. MyPictures und einen Ordner MyData. In den Ordner MyData wird das Persönliche Verzeichnis des NAS Benutzers verknüpft und in den Order MyPictures wird ein öffentlicher Ordner Bilder der vorher erstellt wurde verknüpft. 4.) Editiere mit root Berechtigungen die Datei /etc/fstab und füge am ende der Datei folgende Zeile ein. //<NAS IP>/public/Bilder/   /home/<Linux UserID>/MyPictures   cifs   user=<NAS BenutzerID>%<Dein Passwort>,_netdev,uid=johannes,gid=users,utf8=true   0 0 //<NAS IP>/<NAS BenutzerID>/   /home/<Linux UserID>/MyData   cifs   user=<NAS BenutzerID>%<Dein Passwort>,_netdev,uid=johannes,gid=users,utf8=true   0 0 5.) Fertig! Nach dem nächsten Systemstart sollte deine Samba Freigabe in deinem Home Verzeichnis verfügbar sein. Ein Nachteil dieser Methode ist, dass du dein Passwort offen und lesbar für andere Benutzer in die /etc/fstab schreiben musst.

Tags: , , , ,

1 Comment »

« Newer Entries - Older Entries »