Move List box item up and Down using MVVM Design Pattern ~ Requirement Constraints

Let us see how we can implement Moving the list box item up and down. In almost all the application, we need to change the order of the record that are displayed in the list. Say for an example, if you are defining questions for the subject/exam, then question order is very important. So this example shows how you can change the order of the question using up and down button.

Technologies Used

1. ZK 6.5 CE Version

Reference

Project Name and Structure

MVVMListBoxMoveUpAndDown

Concepts used in this example

We have used List box to display two column listing.
We also used the "emptyMessage" attribute is used to show a message when listbox contains no items.
MVVM Design pattern
We are using Listbox Template concept to display the data.

Step 1:

If you are new ZK, then you can setup the Development environment by downloading this document.

Step 2:

Let us create the Project in eclipse. Click File -> New -> ZK Project . Let us name the project as MVVMListBoxMoveUpAndDown.

Step 3:

Now let us add the domain class Questions.java as follows. Note: We will create a package called "zkMVVM" and then we will create our class "Questions" in that.

package zkMVVM;
 
public class Questions {
 
    private Integer questionOrder;
    private String questionName;
 
    public Questions() {
    }
 
    public Questions(Integer questionOrder, String questionName) {
        this.questionOrder = questionOrder;
        this.questionName = questionName;
    }
 
    public Integer getQuestionOrder() {
        return questionOrder;
    }
 
    public void setQuestionOrder(Integer questionOrder) {
        this.questionOrder = questionOrder;
    }
 
    public String getQuestionName() {
        return questionName;
    }
 
    public void setQuestionName(String questionName) {
        this.questionName = questionName;
    }
 
}

Step 4:

We then define a service class to perform the business logic (QuestionService.java) shown below:.

package zkMVVM;
import java.util.List;
 
public interface QuestionService {
 
    /**
     * Retrieve all questions in the catalog.
     * 
     * @return all questions
     */
    public List<Questions> findAll();
 
}

Step 5:

Next we create our implementation class for the above interface. For simplicity, it uses a static list object as the data model.

package zkMVVM;
import java.util.LinkedList;
import java.util.List;
 
import org.zkoss.zul.Messagebox;
 
public class QuestionsServiceImpl implements QuestionService {
 
    // data model
    private List<Questions> questionsList = new LinkedList<Questions>();
    private static int id = 1;
 
    // initialize book data
    public QuestionsServiceImpl() {
        questionsList.add(new Questions(1, "What was your childhood nickname?"));
        questionsList.add(new Questions(2, "In what city did you meet your spouse/significant other?"));
        questionsList.add(new Questions(3, "What is the middle name of your oldest child?"));
        questionsList.add(new Questions(4, "What is the name of the place your wedding reception was held?"));
        questionsList.add(new Questions(5, "What year did you graduate from High School?"));
        questionsList.add(new Questions(6, "What was the make and model of your first car?"));
        questionsList.add(new Questions(7, "What is the name of the company of your first job?"));
        
    }
 
    public List<Questions> findAll() {
         
        return questionsList;
    }
 
}

Step 6:

Now we will add our listing zul file as follows

<window title="Listitem MVVM Move up and Down" border="normal"
    apply="org.zkoss.bind.BindComposer"
    viewModel="@id('myvm') @init('zkMVVM.QuestionsListVM')">
    <hlayout>
        <listbox id="questionListbox" model="@load(myvm.allQuestions)"
            selectedItem="@bind(myvm.curSelectedQuestions)" width="1000px"
            emptyMessage="No Question found in the result">
 
            <listhead sizable="true">
                <listheader label="Question Order" width="20%"
                    sort="auto(questionOrder)" />
                <listheader label="Question" width="80%"
                    sort="auto(questionName)" />
            </listhead>
            <template name="model" var="p1">
                <listitem>
                    <listcell label="@load(p1.questionOrder)" />
                    <listcell label="@load(p1.questionName)" />
                </listitem>
            </template>
        </listbox>
        <vbox>
            <image style="cursor:pointer" id="upBtn"
                onClick="@command('moveUp')" src="${imgPath}/uparrow_g.png" />
            <image style="cursor:pointer" id="downBtn"
                onClick="@command('moveDown')" src="${imgPath}/downarrow_g.png" />
        </vbox>
    </hlayout>
</window>

Step 7:

Next we will add our VM for the above zul file which will take of Move up and Move down.

package zkMVVM;
 
import java.util.List;
 
import org.zkoss.bind.annotation.AfterCompose;
import org.zkoss.bind.annotation.Command;
import org.zkoss.bind.annotation.NotifyChange;
 
public class QuestionsListVM {
 
    private List<Questions> result;
    private QuestionService questionService = new QuestionsServiceImpl();
    private Questions curSelectedQuestions;
    private Integer curSelecteQuestionsIndex;
 
    public Questions getCurSelectedQuestions() {
        return curSelectedQuestions;
    }
 
    public void setCurSelectedQuestions(Questions curSelectedQuestions) {
        this.curSelectedQuestions = curSelectedQuestions;
    }
 
    public Integer getCurSelecteQuestionsIndex() {
        return curSelecteQuestionsIndex;
    }
 
    public void setCurSelecteQuestionsIndex(Integer curSelecteQuestionsIndex) {
        this.curSelecteQuestionsIndex = curSelecteQuestionsIndex;
    }
 
    @AfterCompose
    public void initSetup() {
        result = questionService.findAll();
    }
 
    public List<Questions> getallQuestions() {
        return result;
    }
 
    @Command
    @NotifyChange("allQuestions")
    public void moveUp() {
        
        int selectedOrder;
        int nextOrder;
 
        // If no item is selected, then do nothing
        if (curSelectedQuestions == null)
            return;
 
        // If selected item is in the first i.e index is eq to zero,
        // then do nothing
        int index = result.indexOf(curSelectedQuestions);
        if (index == 0 || index < 0)
            return;
 
        // Store the currently selected item
        Questions selectedItem = result.get(index);
 
        // Take the next item
        Questions nextItem = result.get(index - 1);
 
        // Get the order for the currrently selected Item
        selectedOrder = selectedItem.getQuestionOrder();
 
        // Get the order for the next item of the selected item
        nextOrder = nextItem.getQuestionOrder();
 
        // Swap the order - In the real world, you can make a DB Call to do this
        selectedItem.setQuestionOrder(nextOrder);
        nextItem.setQuestionOrder(selectedOrder);
 
        // Since we changed the order of the next item, we need to refresh the
        // ZUL
        result.set(result.indexOf(nextItem), nextItem);
 
        // Remove the selected item from the list
        result.remove(selectedItem);
 
        // Add the selected item to the list in the next idex position
        result.add(--index, selectedItem);
 
        // Very Important, select the same item once we move down
        setCurSelectedQuestions(selectedItem);
    }
 
    @Command
    @NotifyChange("allQuestions")
    public void moveDown() {
 
        int selectedOrder;
        int nextOrder;
 
        // If no item is selected, then do nothing
        if (curSelectedQuestions == null)
            return;
 
        // If selected item is in the last i.e index is eq to size of the list,
        // then do nothing
        int index = result.indexOf(curSelectedQuestions);
        if (index == result.size() - 1 || index < 0)
            return;
 
        // Store the currently selected item
        Questions selectedItem = result.get(index);
 
        // Take the next item
        Questions nextItem = result.get(index + 1);
 
        // Get the order for the currrently selected Item
        selectedOrder = selectedItem.getQuestionOrder();
 
        // Get the order for the next item of the selected item
        nextOrder = nextItem.getQuestionOrder();
 
        // Swap the order - In the real world, you can make a DB Call to do this
        selectedItem.setQuestionOrder(nextOrder);
        nextItem.setQuestionOrder(selectedOrder);
 
        // Since we changed the order of the next item, we need to refresh the
        // ZUL
        result.set(result.indexOf(nextItem), nextItem);
 
        // Remove the selected item from the list
        result.remove(selectedItem);
 
        // Add the selected item to the list in the next idex position
        result.add(++index, selectedItem);
 
        // Very Important, select the same item once we move down
        setCurSelectedQuestions(selectedItem);
 
    }
 
}

Step 8:

Now you can run the QuestionsList.zul.

Requirement Constraints

Sunday, 3 February 2013