We will see how we can also show the images for the combo items bases on some conditions.
X12 EDI Examples
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
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:
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>
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;
}
}
<?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>
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
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.
Many 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 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
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 articlehttp://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
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
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.