Combo Box– Show images for Items based on some condition

We will see how we can also show the images for the combo items bases on some conditions.

ZK Border Layout–Another example

This examples show how you can use ZK Border Layout to show the product information on clicking image.

MVVM–List Item–Hibernate–MySQL–Part 3

Note: This is continuation of my previous article Part 2.  Please click here to go to Part 2

In this Part 3, we will enhance our Listing and model window as follows

1. We will include one more column as last named as Actions. This action will contain image such as edit, activate and delete.
2. We will also give hyperlink for the first column. If the user clicks the first column, then we will show the information in the read-only and if the user clicks the edit image in the action column, then we will show the information in the read only and will allow the user to edit and save.

C Workbook

In the year 1999-2002, I was working as faculty in a computer center. During that period, I developed a small VB Application to explain the concept of C. Here are the some screenshots from that VB Project

image

 

image

 

image

 

image

 

image

 

image

MVVM Modal window–Pass Parameter and Return values

In this post, we will see how we can pass some values to the modal window when calling from the parent window and also vice versa (i.e) return some values from the modal window to parent window

 

Project Name : MVVMModalWindow
Project Structure:

image

Demo.zul

<?page title="new page title" contentType="text/html;charset=UTF-8"?>
<zk>
<window title="MVVM Modal window Passing arguments and retur values"
border="normal" apply="org.zkoss.bind.BindComposer"
viewModel="@id('e') @init('com.demo.UI.demoVM')">
Type any value and Press the Model Window Button
<separator />
Value 1 :
<textbox value="@bind(e.value1)" />
Value 2 :
<textbox value="@bind(e.value2)" />
<button label="Model Window" onClick="@command('showModelWin')" />
</window>
</zk>

 

demoVM.java

 

package com.demo.UI;

import java.util.HashMap;

import org.zkoss.bind.annotation.BindingParam;
import org.zkoss.bind.annotation.Command;
import org.zkoss.bind.annotation.GlobalCommand;
import org.zkoss.zk.ui.Executions;
import org.zkoss.bind.annotation.NotifyChange;

public class demoVM {

private String value1;
private String value2;


public String getValue1() {
return value1;
}

public void setValue1(String value1) {
this.value1 = value1;
}

public String getValue2() {
return value2;
}

public void setValue2(String value2) {
this.value2 = value2;
}

@Command
public void showModelWin()
{
final HashMap<String, Object> map = new HashMap<String, Object>();
map.put("value1", this.value1 );
map.put("value2", this.value2);
Executions.createComponents("ModelWindow.zul", null, map);
}

@GlobalCommand
@NotifyChange({"value1","value2"})
public void refreshvalues(@BindingParam("returnvalue1") String str1, @BindingParam("returnvalue2") String str2)
{
this.value1 = str1;
this.value2 = str2;
}
}


ModelWindow.zul

<?page title="new page title" contentType="text/html;charset=UTF-8"?>
<zk>

<window id="modalDialog"
title="MVVM Modal window Passing arguments and retur values"
width="420px" height="auto" border="normal" minimizable="false"
mode="modal" maximizable="false" closable="true"
action="hide: slideUp" apply="org.zkoss.bind.BindComposer"
onCancel="@command('closeThis')"
viewModel="@id('e') @init('com.demo.UI.ModelWindowVM')">

Change the values and Press the Ok Button to return changed
values.
<separator />
Value 1 :
<textbox value="@bind(e.value1)" />
Value 2 :
<textbox value="@bind(e.value2)" />
<button label="Ok" onClick="@command('save')" />
</window>
</zk>


ModelWindowVM.java

 


package com.demo.UI;

import org.zkoss.bind.annotation.Command;
import org.zkoss.bind.annotation.ContextParam;
import org.zkoss.bind.annotation.ContextType;
import org.zkoss.bind.annotation.ExecutionArgParam;
import org.zkoss.bind.annotation.Init;
import org.zkoss.zk.ui.Component;
import org.zkoss.zk.ui.select.Selectors;
import org.zkoss.zk.ui.select.annotation.Wire;
import org.zkoss.zul.Window;
import java.util.HashMap;
import org.zkoss.bind.BindUtils;
import java.util.Map;

public class ModelWindowVM {

@Wire("#modalDialog")
private Window win;
private String value1;
private String value2;


public String getValue1() {
return value1;
}

public void setValue1(String value1) {
this.value1 = value1;
}

public String getValue2() {
return value2;
}

public void setValue2(String value2) {
this.value2 = value2;
}

@Init
public void init(@ContextParam(ContextType.VIEW) Component view,
@ExecutionArgParam("value1") String v1,
@ExecutionArgParam("value2") String v2) {
Selectors.wireComponents(view, this, false);
this.value1 = v1;
this.value2 = v2;

}

@SuppressWarnings({ "unchecked", "rawtypes" })
@Command
public void save() {
Map args = new HashMap();
args.put("returnvalue1", this.value1);
args.put("returnvalue2", this.value2);
BindUtils.postGlobalCommand(null, null, "refreshvalues", args);
win.detach();
}

@Command
public void closeThis() {
win.detach();
}
}


Now you can run the demo.zul file

C++ Workbook

In the year 1999-2002, I was working as faculty in a computer center. During that period, I developed a small VB Application to explain the concept of C++. Here are the some screenshots from that VB Project

ZK Border Layout–Menu on the left and content on the right.

In this post, let us see how we can load all our project menu in the left and on click of each of menu, then we will load individual zul file on the right side. Here, we are going to use border layout, where north border going to content menu and west border will be used to load the individual zul file.

Left hugMany thanks Stephan who helped me to complete this task. Here is the forum thread
http://www.zkoss.org/forum/listComment/18840-Menu-Links-on-Left-Side-and-Page-Content-on-Right-Side?lang=en

MVVM–List Item–Hibernate–MySQL–Part 2

In the part 1, we have seen, how to list the records from DB using ZK List box. Now let us go further and see how we can add new record and edit exiting record and update into DB.
In this post, we will see how we can do the following stuffs
1. Add new person by calling a model window in MVVM and update in the DB
2. On Double click of the records in the list item, edit the existing record by calling a modal window in MVVM and update in the DB
3. Then after edit and add, we will refresh the list. Note, after edit, we no need to do anything, because data binding will take care. But after adding new person, we will refresh the list using Global command

Left hug     Many thanks to potix Jimmy who helped me to complete this part 2. http://www.zkoss.org/forum/listComment/19829-ZK-MVVM-Modal-Window

Charge Entry Screen

Here are the more screens that we developed in VB6 for charge entry.

Practice management System– PMS–Billing

Last year I was involved in developing an independent system for PMS using VB6 with sql server 2005. I really enjoyed myself and love to work/complete that project. One of my best period in my life. But unfortunately, we could not able to market the product because of VB6 no longer used widely in the industry.

Here are some of the screens which I like most in my development of VB6

Phone Box–Using j Query and Extending ZK Textbox

Summary
In this post, we will see how we can use jquery with ZK  for US Phone number format. And also later on, we will see how we can this as a reusable component by extending the ZK Textbox

Thanks to the following ZK Forum and all the contributors who helped me to create this article
Left hughttp://www.zkoss.org/forum/listComment/17490-How-to-apply-a-mask-in-a-Textbox-not-rendered-by-a-zul-file

MVC Two combo Box – Fill second combo based on first combo selection

Summary
We will see how to fill the second combo box based on first combo box selection using MVC Data binding.

MVVM Two combo Box – Fill second combo based on first combo selection

Summary
We will see how to fill the second combo box based on first combo box selection using MVVM Data binding.

MVVM–List Item–Hibernate–MySQL–Part 1

In every application, we will always have the listing page where we can list the records from the DB, from there another model window will be used to Add/Edit records.

In this post, we will see how we can do the following stuffs

1. Bind the List Item Using New zk 6 Data binding  with MVVM Pattern
2. Retrieve the values from the DB – Mysql using Hibernate as ORM Tool.
3. How to change the color of the particular row based on some condition.
4. How to handle double click event on the List item.
5. How to sort the values in the List Item.

MVC Combo Box Data binding

In this example, we will see how we can data bind Combo box using MVC Data binding (ZK's annotated data binding manager utility)

MVVM Combo Box Data binding

In this example, we will see how we can data bind Combo box

List Item Double click event on selected Item using MVVM

In this example, we will see how we can handle double click event on list items using MVVM

MVVM Example for Form Validation

In this post, we will see how we can validate the form inputs on click of submit button and show all the errors in one window.

List Item on Select, show more details by using selectedItem

In this example, we will see how we can see more details when the user moves in the ListItem Listbox.

List item Change background color for some particular items based on some conditions

In this example, our list box shows user code, user name, user password and account is active or not. We will show the row in different color if the user is in active.