Requirement Constraints

  • Subscribe to our RSS feed.
  • Twitter
  • StumbleUpon
  • Reddit
  • Facebook
  • Digg
Showing posts with label ZK MVVM. Show all posts
Showing posts with label ZK MVVM. Show all posts

Friday, 23 August 2013

ZK Dropupload example

Posted on 04:21 by Unknown
This is another example for ZK Drag and Drop files in the zul. Apart from the official example, i have shown how to add muliple files and store in the DB and also, if browser does not support HTML 5, then user can still use button to upload their files.

image

ChosenboxViewModel.java

package demo.combobox.chosenbox;
import java.io.File;
import java.io.IOException;
import java.util.ArrayList;
import java.util.Calendar;
import java.util.List;

import org.zkoss.bind.BindContext;
import org.zkoss.bind.annotation.BindingParam;
import org.zkoss.bind.annotation.Command;
import org.zkoss.bind.annotation.ContextParam;
import org.zkoss.bind.annotation.ContextType;
import org.zkoss.bind.annotation.Init;
import org.zkoss.bind.annotation.NotifyChange;
import org.zkoss.io.Files;
import org.zkoss.zk.ui.Executions;
import org.zkoss.zk.ui.event.UploadEvent;
import org.zkoss.zul.ListModel;
import org.zkoss.zul.ListModelList;

import demo.data.EmailLabels;

public class ChosenboxViewModel {

	private ListModelList<String> contactsModel = new ListModelList<String>();
	private ListModel<String> labelsModel = new ListModelList<String>(
			EmailLabels.getLabels());
	private List<String> filesList  = new ArrayList<String>();
	
	
	
	public List<String> getFilesList() {
		return filesList;
	}

	public void setFilesList(List<String> filesList) {
		this.filesList = filesList;
	}

	@Init
	public void init() {
		 
	}

	@Command("newContact")
	public void newContact(@BindingParam("contact") String contact) {
		contactsModel.add(contact);
		contactsModel.addToSelection(contact);
	}

	public ListModel<String> getContactsModel() {
		return contactsModel;
	}

	public ListModel<String> getLabelsModel() {
		return labelsModel;
	}

	@Command
	@NotifyChange("filesList")
	public void doUpload(@ContextParam(ContextType.BIND_CONTEXT) BindContext ctx) throws IOException {

		UploadEvent upEvent = null;
		Object objUploadEvent = ctx.getTriggerEvent();
		if (objUploadEvent != null && (objUploadEvent instanceof UploadEvent)) {
			upEvent = (UploadEvent) objUploadEvent;
		}
		if (upEvent != null) {
			org.zkoss.util.media.Media[] medias = upEvent.getMedias();
			String pathToStore = getDestinationFolder();
			for (org.zkoss.util.media.Media m : medias) {
				filesList.add(m.getName());
				Files.copy(new File(pathToStore + m.getName()),
						m.getStreamData());
			}
			 
		}
	}

	private String getDestinationFolder() {

		String returnPath = null;
		Calendar now = Calendar.getInstance();
		int year = now.get(Calendar.YEAR);
		int month = now.get(Calendar.MONTH); // Note: zero based!
		int day = now.get(Calendar.DAY_OF_MONTH);
		returnPath = Executions.getCurrent().getDesktop().getWebApp()
				.getRealPath("/");
		String yearPath = "\\" + "myFiles" + "\\" + year + "\\" + month + "\\"
				+ day + "\\";
		returnPath = returnPath + yearPath;
		File baseDir = new File(returnPath);
		if (!baseDir.exists()) {
			baseDir.mkdirs();
		}
		return returnPath;
	}

	@Command
	@NotifyChange("filesList")
	public void onDelete(@BindingParam("currentFile") String curFile)
	{
		filesList.remove(curFile);
	}
}


EmailContacts.java


package demo.data;

import java.util.Arrays;
import java.util.Collection;

public class EmailContacts {

	public static Collection<? extends String> getContacts() {
		return Arrays.asList("Adam (adam@company.org)",
				"Chris (chris@company.org)", "Daniel (daniel@company.org)",
				"Eve(eve@company.org)", "Fritz (fritz@company.org)",
				"Mary (mary@company.org)", "Max (max@company.org)",
				"John (john@company.org)", "Peter (peter@company.org)");
	}

}

EmailLabels.java


package demo.data;

import java.util.Arrays;
import java.util.Collection;

public class EmailLabels {

	public static Collection<? extends String> getLabels() {
		return Arrays.asList("accounts", "friends", "information", "personal",
				"products", "projects", "support", "work");
	}

}



chosenbox.zul


<zk>
	<style src="/widgets/combobox/chosenbox/style.css" />
	<vlayout hflex="1" apply="org.zkoss.bind.BindComposer"
		viewModel="@id('vm') @init('demo.combobox.chosenbox.ChosenboxViewModel')">
		<image sclass="maillogo"
			src="/widgets/combobox/chosenbox/img/logo_zkmail.png" />
		<vlayout sclass="mail" hflex="1">
			<hbox sclass="mailformrow" hflex="1" align="center">
				<label sclass="maillabel" value="Label">To</label>
				<chosenbox sclass="mailinput" hflex="1"
					model="@load(vm.contactsModel)"
					emptyMessage="type or select contacts (existing or new ones)"
					creatable="true" createMessage="Create new contact '{0}'"
					onSearch="@command('newContact', contact=event.value)"
					open="false" />
			</hbox>
			<hbox sclass="mailformrow" hflex="1" align="center">
				<label sclass="maillabel" value="Label"></label>
				<chosenbox sclass="mailinput" hflex="1"
					model="@load(vm.labelsModel)"
					emptyMessage="choose one or more labels" />
			</hbox>
			<textbox id="hereplease" sclass="mailinput" multiline="true"
				hflex="1" height="100px">
			</textbox>
		</vlayout>
		<window title="Attachment(s) You can drage and Drop here"
			id="attachwin" border="normal" height="1	80%" width="50%">
			<vlayout>
				<hlayout>
					<dropupload maxsize="5120" detection="self"
						width="570px" height="30px"
						onUpload="@command('doUpload',upEvent=event)"
						content="Drop the files here">
					</dropupload>
					<button upload="true,maxsize=5120"
						onUpload="@command('doUpload',upEvent=event)" label="Add Files">
					</button>

				</hlayout>
				<listbox height="200px" id=""
					model="@load(vm.filesList)">
					<listhead sizable="true">
						<listheader label="FileName" />
						<listheader label="Delete" />
					</listhead>
					<template name="model">
						<listitem>
							<listcell label="@bind(each)" />
							<listcell>
								<button image="DeleteRecord.png"
									onClick="@command('onDelete', currentFile=each)" />
							</listcell>
						</listitem>
					</template>
				</listbox>
			</vlayout>
		</window>
	</vlayout>


</zk>





ChosenboxViewModel.java


package demo.combobox.chosenbox;
import java.io.File;
import java.io.IOException;
import java.util.ArrayList;
import java.util.Calendar;
import java.util.List;

import org.zkoss.bind.BindContext;
import org.zkoss.bind.annotation.BindingParam;
import org.zkoss.bind.annotation.Command;
import org.zkoss.bind.annotation.ContextParam;
import org.zkoss.bind.annotation.ContextType;
import org.zkoss.bind.annotation.Init;
import org.zkoss.bind.annotation.NotifyChange;
import org.zkoss.io.Files;
import org.zkoss.zk.ui.Executions;
import org.zkoss.zk.ui.event.UploadEvent;
import org.zkoss.zul.ListModel;
import org.zkoss.zul.ListModelList;

import demo.data.EmailLabels;

public class ChosenboxViewModel {

	private ListModelList<String> contactsModel = new ListModelList<String>();
	private ListModel<String> labelsModel = new ListModelList<String>(
			EmailLabels.getLabels());
	private List<String> filesList  = new ArrayList<String>();
	
	
	
	public List<String> getFilesList() {
		return filesList;
	}

	public void setFilesList(List<String> filesList) {
		this.filesList = filesList;
	}

	@Init
	public void init() {
		 
	}

	@Command("newContact")
	public void newContact(@BindingParam("contact") String contact) {
		contactsModel.add(contact);
		contactsModel.addToSelection(contact);
	}

	public ListModel<String> getContactsModel() {
		return contactsModel;
	}

	public ListModel<String> getLabelsModel() {
		return labelsModel;
	}

	@Command
	@NotifyChange("filesList")
	public void doUpload(@ContextParam(ContextType.BIND_CONTEXT) BindContext ctx) throws IOException {

		UploadEvent upEvent = null;
		Object objUploadEvent = ctx.getTriggerEvent();
		if (objUploadEvent != null && (objUploadEvent instanceof UploadEvent)) {
			upEvent = (UploadEvent) objUploadEvent;
		}
		if (upEvent != null) {
			org.zkoss.util.media.Media[] medias = upEvent.getMedias();
			String pathToStore = getDestinationFolder();
			for (org.zkoss.util.media.Media m : medias) {
				filesList.add(m.getName());
				Files.copy(new File(pathToStore + m.getName()),
						m.getStreamData());
			}
			 
		}
	}

	private String getDestinationFolder() {

		String returnPath = null;
		Calendar now = Calendar.getInstance();
		int year = now.get(Calendar.YEAR);
		int month = now.get(Calendar.MONTH); // Note: zero based!
		int day = now.get(Calendar.DAY_OF_MONTH);
		returnPath = Executions.getCurrent().getDesktop().getWebApp()
				.getRealPath("/");
		String yearPath = "\\" + "myFiles" + "\\" + year + "\\" + month + "\\"
				+ day + "\\";
		returnPath = returnPath + yearPath;
		File baseDir = new File(returnPath);
		if (!baseDir.exists()) {
			baseDir.mkdirs();
		}
		return returnPath;
	}

	@Command
	@NotifyChange("filesList")
	public void onDelete(@BindingParam("currentFile") String curFile)
	{
		filesList.remove(curFile);
	}
}

Read More
Posted in ZK MVVM | No comments

Friday, 19 April 2013

ZK MVVM Form Binding CRUD with Spring and Hibernate

Posted on 02:56 by Unknown

In this series of articles, we will see examples for various concept of ZK Framework.

About the application
This is a small application to store the users information such as first name, last name, email, login id , password, etc. We will have the listing screen which will display all the users in the database. And from this listing screen, we will be able to add new users and edit the existing users in the database.

MySQL table structure.

CREATE TABLE `userprofile` (
  `id` bigint(20) NOT NULL auto_increment,
  `firstname` varchar(50) NOT NULL,
  `lastname` varchar(50) NOT NULL,
  `middlename` varchar(2) default NULL,
  `userAccountNumber` varchar(50) NOT NULL,
  `DOB` date default NULL,
  `SSN` varchar(50) default NULL,
  `address1` varchar(200) NOT NULL,
  `address2` varchar(200) default NULL,
  `city` varchar(100) NOT NULL,
  `state` varchar(2) NOT NULL,
  `zipcode` varchar(12) NOT NULL,
  `email` varchar(100) NOT NULL,
  `userloginid` varchar(20) NOT NULL,
  `password` varchar(50) NOT NULL,
  PRIMARY KEY  (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1

Insert some records in the database for the above table

Technologies Used
    1. ZK 6.5.2 CE Version
    3. Hibernate Core Version 4.1.10 Final
    4. Spring ORM Version 3.2.0
    5. MySQL version 5
    6. Maven 3

First let us setup the development environment. Download this document and follow the step by step instruction to install the necessary software’s.

Part 1: This post explain how to create ZK Maven project in eclipse IDE as step by step.
Part 2: This post talks about creating Domain, DAO and Service Layer.
Part 3: Spring Integration with Hibernate
Part 4: Presentation Layer
Part 5: Change the look and feel.
Part 6: Spring security 3 integration with hibernate 4
Part 7: More features such as Data filter, etc..
Part 8: ZK Theme customization for each user
Part 9: Bug Fixing Cycle :)
Part 10: jQuery integration with ZK Framework
Part 11: Store image in the database.
Part 12 : Validation using Hibernate Validator
Part 13 : More Validation using Hibernate Validator


You can download the source here


For online demo, click here.

Use the following user id and password to check out different theme for each user
a) For blue theme, user id : lee and password : lee.
b) For brown theme, user id : wing and password : wing
c) for Green theme, user id : dennis and password : dennis
d) For purple theme, user id : senthil and password : senthil
e) For red theme, user id : zkoss and password : zkoss



Screen shots

image



image



image

Read More
Posted in ZK MVVM, ZK MVVM CRUD, ZK Spring | No comments

Monday, 7 January 2013

MVVM Pass Parameter between two zul files using URL Redirect

Posted on 11:08 by Unknown
In this post, we will see how we can pass parameter between two zul files attached by MVVM using URL Redirect

Project Name : MVVMPassParameterUsingReDirect
ZK Version :  6.5.0 CE

Project Structure:

image
one.zul file

   1: <?page title="new page title" contentType="text/html;charset=UTF-8"?>
   2: <zk>
   3:     <window title="MVVM window Passing arguments and retur values. This is one.zul"
   4:         border="normal" apply="org.zkoss.bind.BindComposer"
   5:         viewModel="@id('e') @init('com.demo.UI.oneVM')">
   6:         <separator></separator>
   7:         <label value="ZK Version : ${desktop.webApp.version}"/>
   8:         <separator></separator>
   9:         Type any value and Press  Button to show the Show two.zul file by redirecting the URL
  10:         <separator></separator>
  11:         Value 1 :
  12:         <textbox value="@bind(e.value1)" />
  13:         Value 2 :
  14:         <textbox value="@bind(e.value2)" />
  15:         
  16:         <button label="two.zul" onClick="@command('showtwozul')" />
  17:     </window>
  18: </zk>

two.zul file



   1: <?page title="new page title" contentType="text/html;charset=UTF-8"?>
   2: <zk>
   3:  
   4:     <window id="two"
   5:         title="MVVM Modal window Passing arguments and retur values. This is two.zul"
   6:         action="hide: slideUp" apply="org.zkoss.bind.BindComposer"
   7:         onCancel="@command('closeThis')"
   8:         viewModel="@id('e') @init('com.demo.UI.twoVM')">
   9:         <separator />
  10:         Value 1 :
  11:         <textbox value="@bind(e.value1)" />
  12:         Value 2 :
  13:         <textbox value="@bind(e.value2)" />
  14:         <button label="Close" onClick="@command('closeThis')" />
  15:     </window>
  16: </zk>



oneVM.java



   1: package com.demo.UI;
   2:  
   3: import java.util.HashMap;
   4:  
   5: import org.zkoss.bind.annotation.Command;
   6: import org.zkoss.zk.ui.Executions;
   7: import org.zkoss.zk.ui.Sessions;
   8:  
   9: public class oneVM {
  10:  
  11:     private String value1;
  12:     private String value2;
  13:     
  14:  
  15:     public String getValue1() {
  16:         return value1;
  17:     }
  18:  
  19:     public void setValue1(String value1) {
  20:         this.value1 = value1;
  21:     }
  22:  
  23:     public String getValue2() {
  24:         return value2;
  25:     }
  26:  
  27:     public void setValue2(String value2) {
  28:         this.value2 = value2;
  29:     }
  30:     
  31:     @Command
  32:     public void showtwozul()
  33:     {
  34:         final HashMap<String, Object> map = new HashMap<String, Object>();
  35:         map.put("value1", this.value1 );
  36:         map.put("value2", this.value2);
  37:         Sessions.getCurrent().setAttribute("allmyvalues", map);
  38:         Executions.sendRedirect("two.zul");
  39:         
  40:     }
  41:     
  42:  
  43: }

twoVM.java



   1: package com.demo.UI;
   2:  
   3: import java.util.HashMap;
   4: import org.zkoss.bind.annotation.Command;
   5: import org.zkoss.bind.annotation.ContextParam;
   6: import org.zkoss.bind.annotation.ContextType;
   7: import org.zkoss.bind.annotation.Init;
   8: import org.zkoss.zk.ui.Component;
   9: import org.zkoss.zk.ui.Sessions;
  10: import org.zkoss.zk.ui.select.Selectors;
  11: import org.zkoss.zk.ui.select.annotation.Wire;
  12: import org.zkoss.zul.Window;
  13:  
  14: public class twoVM {
  15:  
  16:     @Wire("#two")
  17:     private Window win;
  18:     private String value1;
  19:     private String value2;
  20:  
  21:     public String getValue1() {
  22:         return value1;
  23:     }
  24:  
  25:     public void setValue1(String value1) {
  26:         this.value1 = value1;
  27:     }
  28:  
  29:     public String getValue2() {
  30:         return value2;
  31:     }
  32:  
  33:     public void setValue2(String value2) {
  34:         this.value2 = value2;
  35:     }
  36:  
  37:     @Init
  38:     public void init(@ContextParam(ContextType.VIEW) Component view) {
  39:         Selectors.wireComponents(view, this, false);
  40:  
  41:         final HashMap<String, Object> map = (HashMap<String, Object>) Sessions
  42:                 .getCurrent().getAttribute("allmyvalues");
  43:         this.value1 = (String) map.get("value1");
  44:         this.value2 = (String) map.get("value2");
  45:  
  46:     }
  47:  
  48:     @Command
  49:     public void closeThis() {
  50:         win.detach();
  51:     }
  52: }



Now run one.zul file and enter some values and click on two.zul file to pass the parameter to two.zul file

image

image


OnlineDemoButton                               image

Read More
Posted in ZK MVVM | No comments

Tuesday, 7 August 2012

MVVM Command annotation and Notify change example

Posted on 07:14 by Unknown

Here is an example, how to pass parameter on a zul through MVVM Command binding annotation.

ZK URL
http://books.zkoss.org/wiki/ZK%20Developer%27s%20Reference/MVVM/Advance/Parameters

Project Structure
image

index.zul

<?page title="Auto Generated index.zul"?>
<window title="Passing argument to MVVM Command" border="normal"
    apply="org.zkoss.bind.BindComposer"
    viewModel="@id('myvm') @init('domainVMS.TestVM')">
    <separator />
    <panel width="100%">
        <panelchildren>
            <separator />
            <grid width="99.5%">
                <columns>
                    <column label="" width="150px" />
                    <column label="" />
                </columns>
                <rows>
                    <row>
                        <hbox>
                            <label value="Code 1" />
                        </hbox>
                        <hbox>
                            <textbox name="Code1"
                                value="@bind(myvm.selectedItem.code1)" />
                            <button label="doSomethid"
                                onClick="@command('doSomething', codeno='code1')" />
                        </hbox>
                    </row>
                    <row>
                        <hbox>
                            <label value="Code 2" />
                        </hbox>
                        <hbox>
                            <textbox name="Code2"
                                value="@bind(myvm.selectedItem.code2)" />
                            <button label="doSomethid"
                                onClick="@command('doSomething', codeno='code2')" />
                        </hbox>
                    </row>
                    <row>
                        <hbox>
                            <label value="Code 3" />
                        </hbox>
                        <hbox>
                            <textbox name="Code3"
                                value="@bind(myvm.selectedItem.code3)" />
                            <button label="doSomethid"
                                onClick="@command('doSomething', codeno='code3')" />
                        </hbox>
                    </row>
                </rows>
            </grid>
        </panelchildren>
    </panel>
</window>

CodeMaster.java

package domainVMS;

public class CodeMaster {

    private String code1;
    private String code2;
    private String code3;
    
    public String getCode1() {
        return code1;
    }
    public void setCode1(String code1) {
        this.code1 = code1;
    }
    public String getCode2() {
        return code2;
    }
    public void setCode2(String code2) {
        this.code2 = code2;
    }
    public String getCode3() {
        return code3;
    }
    public void setCode3(String code3) {
        this.code3 = code3;
    }
    
    
}

TestVM.java


package domainVMS;

import org.zkoss.bind.annotation.BindingParam;
import org.zkoss.bind.annotation.Command;
import org.zkoss.bind.annotation.NotifyChange;
import org.zkoss.zul.Messagebox;

public class TestVM {

    private CodeMaster selectedItem = new CodeMaster();

    
    public CodeMaster getSelectedItem() {
        return selectedItem;
    }


    public void setSelectedItem(CodeMaster selectedItem) {
        this.selectedItem = selectedItem;
    }


    @Command
    @NotifyChange(".")
    public void doSomething(@BindingParam("codeno") String code)
    {
        
        if (code.equals("code1"))
        {
            this.selectedItem.setCode1("aaaaa");
        }

        if (code.equals("code2"))
        {
            this.selectedItem.setCode2("bbbb");
        }

        if (code.equals("code3"))
        {
            this.selectedItem.setCode3("ccc");
        }

    }
    
}

Now you can run the index.zul file and check the output.

Read More
Posted in ZK MVVM | No comments
Older Posts Home
Subscribe to: Comments (Atom)

Popular Posts

  • ZK Example for inline Editing with Add New and Delete
    I am quite impressed on this demo from ZK . But adding new record and delete existing record is missing as part of typical CRUD. So i thoug...
  • ZK Passing Parameter between two files using MVVM–Part 1
    Overview This is the first series of articles about Passing parameter between two zul files using MVVM Design pattern .This article will fo...
  • EDI 270–5010 Documentation - ISA – Interchange Control Header
    ISA – Interchange Control Header ISA – Interchange Control Header   The ISA is a fixed record length segment and all positions within ea...
  • Understanding EDI Structure
    EDI Structure Primary Levels are 1. Interchange Envelops 2. Functional Group 3. Transaction set Data Element A data element is equival...
  • EDI Instructions
    HIPAA Compliant Codes All the Health care EDI Transaction set should use only the following HIPAA Compliant Codes Physicians Current Pro...
  • List Item Connected with Hibernate and Search Parameter
      Summary This example contains one list box with First name and Last Name as search Field. If the user do not give any values for first n...
  • ZK MVVM Form Binding CRUD with Spring and Hibernate - Part 11
    Storing Image in the Database          My Sincere thanks to Joshi who helped me in this article In the last article , we have successfu...
  • ZK Border Layout–Another example
    This examples show how you can use ZK Border Layout to show the product information on clicking image. ZK Version 6 Project Name : BorderL...
  • ZK ListBox
    Let us first design a simple  static list box with crud Buttons as last column. Here is the code <?page title="Practice List" c...
  • EDI 270 - 5010 Health Care Eligibility/Benefit Inquiry
    If you are new to Medical Billing, then please read this article first . If you are new to EDI, then  read the following articles 1. What i...

Categories

  • Billing Process
  • C Workbook
  • C++ Workbook
  • Eclipse Tips
  • EDI 5010
  • EMR Appointment Features
  • EMR Labs Stuff
  • EMR PMS Links
  • EMR Use cases
  • EMR Vital Sign
  • Good Website Design
  • Hibernate Criteria Queries
  • Hibernate Introduction
  • Hibernate Introduction Setup
  • Hibernate Mapping
  • Hibernate POC
  • Hibernate Validator
  • Hibernate–Java Environment setup
  • HPI
  • Java
  • Maven
  • MU Certification
  • NPI
  • PQRS
  • Practice Management System
  • Spring Security
  • Tech Links
  • Today Tech Stuff
  • zk
  • ZK Hibernate
  • ZK 5 Databinding
  • ZK Application
  • ZK Calling Another ZUL
  • ZK CheckBox
  • ZK CreateComponents
  • ZK CSS
  • ZK extended Components
  • ZK Foreach
  • ZK Forum Posts
  • ZK Framework
  • ZK Hibernate Setup
  • ZK ID Space
  • ZK Include
  • ZK Installation
  • ZK iReport
  • ZK Layout
  • ZK Listitem Pagination
  • ZK Message Box
  • ZK MVC
  • ZK MVC Combox Box
  • ZK MVC CRUD Examples
  • ZK MVC Listbox
  • ZK MVVM
  • ZK MVVM Combo
  • ZK MVVM CRUD
  • ZK MVVM ListBox
  • ZK Spring
  • ZK TextBox

Blog Archive

  • ▼  2013 (105)
    • ▼  December (3)
      • EDI Instructions
      • Understanding EDI Structure
      • What is an EDI ?
    • ►  September (7)
    • ►  August (13)
    • ►  July (1)
    • ►  June (11)
    • ►  May (3)
    • ►  April (14)
    • ►  March (19)
    • ►  February (21)
    • ►  January (13)
  • ►  2012 (177)
    • ►  December (1)
    • ►  November (13)
    • ►  October (19)
    • ►  September (24)
    • ►  August (26)
    • ►  July (6)
    • ►  June (37)
    • ►  May (30)
    • ►  April (16)
    • ►  March (1)
    • ►  January (4)
  • ►  2011 (5)
    • ►  December (1)
    • ►  November (1)
    • ►  July (1)
    • ►  June (1)
    • ►  April (1)
  • ►  2010 (1)
    • ►  September (1)
Powered by Blogger.

About Me

Unknown
View my complete profile