<!DOCTYPE html>
<html>
<head>
    <title>JMessage PhoneGap Demo</title>
    <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
    <meta name="msapplication-tap-highlight" content="no"/>
    <meta name="viewport" content="user-scalable=no, initial-scale=1,
        maximum-scale=1, minimum-scale=1, width=device-width,
        height=device-height, target-densitydpi=device-dpi"/>
    <link rel="stylesheet"
          href="css/themes/default/jquery.mobile-1.3.2.min.css">
    <link rel="stylesheet"
          href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
    <script src="js/jquery.js"></script>
    <script src="js/jquery.mobile-1.3.2.min.js"></script>
    <script type="text/javascript" src="cordova.js"></script>
    <script charset="utf-8" src="cordova.js"></script>
    <script type="text/javascript">

        var currentUser;
        var currentConversation;

        function onDeviceReady() {
            window.JMessage.init({'isOpenMessageRoaming': true});
            window.JMessage.setDebugMode({'enable': true});
            checkIsLogin();
        }

        <!-- Login page -->
        function register() {
            var username = $("#registerUsername").val();
            var password = $("#registerPassword").val();

            window.JMessage.register({'username': username, 'password': password},
                () => {
                    alert('Register success');
                }, (error) => {
                    alert('Register failed: ' + error.description);
                });
        }

        function checkIsLogin() {
            window.JMessage.getMyInfo((myInfo) => {
                if (myInfo.username != undefined) {
                    this.currentUser = myInfo;
                    gotoConversation();
                }
            });
        }

        function updateUserInfo() {
            window.JMessage.getMyInfo((myInfo) => {
                if (myInfo.username != undefined) {
                    this.currentUser = myInfo;

                    $('#myInfoUsername').text(myInfo.username);
                    $('#myInfoNickname').val(myInfo.nickname);
                    $('#myInfoGender').val(myInfo.gender);
                }
            });
        }

        function login() {
            var username = $("#loginUsername").val();
            var password = $("#loginPassword").val();

            window.JMessage.login({'username': username, 'password': password},
                () => {
                    alert("login ok");

                    window.JMessage.getMyInfo((myInfo) => {
                        if (myInfo != '') {
                            this.currentUser = myInfo;
                            gotoConversation();
                        }
                    });
                }, (error) => {
                    alert("Login failed: " + error.description);
                });
        }

        function gotoConversation() {
            $.mobile.navigate("#conversationListPage", {transition: "slide"});
        }

        function gotoRegister() {
            $.mobile.navigate("#registerPage", {transition: "slide"});
        }

        <!--Conversation list page -->

        $(document).on("pageshow", "#conversationListPage", () => {
            updateConversationList();

            window.JMessage.addReceiveMessageListener((msg) => {
                updateConversationList();
            });
        });

        function gotoAddConversation() {
            $.mobile.navigate("#addConversationPage", {transition: "slide"});
        }

        function updateConversationList() {
            $('#conversationList').empty().listview('refresh');

            window.JMessage.getConversations((conversationArray) => {
                for (var i = 0; i < conversationArray.length; i++) {
                    insertConversation(conversationArray[i]);
                }
            }, (error) => {
                console.log(error.description)
            });
        }

        function insertConversation(con) {
            var title = con.title;

            var targetName;
            if (con.conversationType === 'single') {
                targetName = con.target.username;
            } else {    // group
                targetName = con.target.name;
            }

            var conStr = JSON.stringify(con).replace(/"/g, '&quot;');

            var insertString = "<li><a onclick=\"onClickConversationRow('"
                + conStr + "')\">" + targetName + '</a></li>';

            $('#conversationList').append(insertString).listview('refresh');
        }

        function onClickConversationRow(con) {
            currentConversation = JSON.parse(con);
            $.mobile.navigate("#conversationPage", {transition: "slide"});
        }

        function naviBack() {
            $.mobile.navigate("#conversationListPage", {transition: "pop"});
        }


        <!-- Conversation detail page -->

        var messageArray = [];

        $(document).on("pageshow", "#conversationPage", () => {
            window.JMessage.addReceiveMessageListener((msg) => {
                // 在收到消息后将消息对象加入到消息数组的开头。
                messageArray.unshift(msg);
                refreshConversation();
            });

            if (currentConversation.conversationType === 'single') {
                var username = currentConversation.target.username;
                var appKey = currentConversation.target.appKey;

                window.JMessage.getHistoryMessages({'type': 'single', 'username': username,
                    'appKey': appKey, 'from': 0, 'limit': 10},
                    (msgArr) => {
                        messageArray = msgArr
                        refreshConversation();
                    }, (error) => {
                        alert("Get history message error: " + error.description);
                    });

            } else if (currentConversation.conversationType === 'group') {
                var groupId = currentConversation.target.id;
                window.JMessage.getHistoryMessages({'type': 'group', 'groupId': groupId,
                    'from': 0, 'limit': 10},
                    (msgArr) => {
                        messageArray = msgArr
                        refreshConversation();
                    }, (error) => {
                        alert("Get history message error: " + error.description);
                    });
            }
        });

        function refreshConversation() {
            $('#messageList').empty().listview('refresh');

            for (var i = 0; i < messageArray.length; i++) {
                insertMessage(messageArray[i]);
            }
        }

        function insertMessage(msg) {
            var targetName = msg.target.username;
            var createTime = msg.createTime;
            var createTimeStr = new Date(createTime).toLocaleString();
            var insertString;

            if (msg.from.username === currentUser.username) {
                insertString = '<li style="text-align:right"><span style="font-size:12px">'
                    + createTimeStr + "</span><br>" + msg.from.username + ":" + msg.text + '</li>';
            } else {
                insertString = '<li style="text-align:left" style="font-size:12px">'
                    + createTimeStr + "</span><br>" + msg.from.username + ":" + msg.text + '</li>';
            }

            $('#messageList').append(insertString).listview('refresh');
        }

        function sendMessage() {
            var username = currentConversation.target.username;
            var appKey = currentConversation.target.appKey;
            var messageContent = $('#messageContent').val();

            window.JMessage.sendTextMessage({'type': 'single', 'username': username,
                'appKey': appKey, 'text': messageContent},
                (msg) => {
                    messageArray.unshift(msg);
                    refreshConversation();
                }, (error) => {
                    alert("Send message fail: " + error.description);
                });
        }

        function addConversation() {
            var username = $("#addConversationText").val();

            window.JMessage.createConversation({'type': 'single', 'username': username},
                (conversation) => {
                    currentConversation = conversation;

                    alert("OK");

                    $.mobile.navigate("#conversationPage", {transition: "pop"});
                }, (error) => {
                    alert("Create conversation fail: " + error.description);
                });
        }

        <!-- myInfoPage -->
        $(document).on("pageshow", "#myInfoPage", () => {
            $("#myInfoUsername").text(currentUser.username);
            $("#myInfoNickname").val(currentUser.nickname);
            $("#myInfoGender").val(currentUser.gender);
        });

        function logout() {
            window.JMessage.logout();
            currentUser = null;
            $.mobile.navigate("#loginPage");
        }

        function setUserNickname() {
            var nickname = $("#myInfoNickname").val();

            window.JMessage.updateMyInfo({'nickname': nickname},
                () => {
                    updateUserInfo();
                }, (error) => {
                    alert('Update fail: ' + error.description);
                });
        }

        function setUserGender() {
            var gender = $("#myInfoGender").val();

            window.JMessage.updateMyInfo({'gender': gender},
                () => {
                    updateUserInfo();
                }, (error) => {
                    alert('Update fail: ' + error.description);
                });
        }

        function onLoad() {
            document.addEventListener("deviceready", onDeviceReady, false);
        }
    </script>
</head>

<body onload="onLoad()">

<!-- Login page -->
<div data-role="page" id="loginPage">
    <div data-role="header">
        <h1>Login</h1>
    </div>
    <div data-role="content">
        <h3>username:</h3>
        <input type="text" placeholder="username" id="loginUsername">

        <h3>password:</h3>
        <input type="text" placeholder="password" id="loginPassword">
        <div><h2></h2></div>
        <input type="button" onclick="login()" value="login"/>
        <div><h2></h2></div>
        <div class="ui-grid-a">
            <div class="ui-block-a">
            </div>
            <div class="ui-block-b">
                <input type="button" onclick="gotoRegister()" value="register"/>
            </div>
        </div>
    </div>
</div>

<!-- Register page -->
<div data-role="page" id="registerPage">
    <div data-role="header">
        <a href="#loginPage" data-icon="arrow-l">Back</a>
        <h1>Register</h1>
    </div>
    <div data-role="content">
        <h3>username:</h3>
        <input type="text" placeholder="username" id="registerUsername">
        <h3>password:</h3>
        <input type="text" placeholder="password" id="registerPassword">
        <div><h2></h2></div>
        <input type="button" onclick="register()" value="register"/>
    </div>
</div>

<!-- Conversation list -->
<div data-role="page" id="conversationListPage">
    <div data-role="header">
        <h1>ConversationList</h1>
        <div data-role="navbar">
            <ul>
                <li><a href="#conversationListPage"
                       class="ui-btn-active ui-state-persist">ConversationList</a>
                </li>
                <li><a href="#myInfoPage">MyInfo</a></li>
            </ul>
        </div>
    </div>

    <div>
        <div data-role="content">
            <div class="ui-grid-b">
                <div class="ui-block-c">
                    <input type="button" onclick="gotoAddConversation()"
                           value="add"/>
                </div>
            </div>
            <div>
                <h4></h4>
            </div>
            <ul data-role="listview" id="conversationList">
            </ul>
        </div>
    </div>
</div>

<!-- Conversation page -->
<div data-role="page" id="conversationPage">
    <div data-role="header">
        <a href="#conversationListPage" data-icon="arrow-l">Back</a>
        <h1>Conversation</h1>
    </div>
    <div>
        <div data-role="content">
            <div>
                <input type="text" id="messageContent"/>
                <input type="button" onclick="sendMessage()" value="发送"
                       data-inline="true"/>
            </div>
            <div>
                <h4></h4>
            </div>
            <div>
                <ul data-role="listview" id="messageList">
                </ul>
            </div>
        </div>
    </div>
</div>

<div data-role="page" id="addConversationPage">
    <div data-role="header">
        <a href="#conversationListPage" data-icon="arrow-l">Back</a>
        <h1>添加会话</h1>
    </div>
    <div data-role="content">
        <div class="ui-grid-b">
            <div class="ui-block-c">
            </div>
        </div>
        <label for="addConversationText">username</label>
        <input type="text" id="addConversationText"/>
        <input type="button" onclick="addConversation()" value="确定"/>
    </div>
</div>

<!--  my info  -->
<div data-role="page" id="myInfoPage">
    <div data-role="header">
        <h1>MyInfo</h1>
        <div data-role="navbar">
            <ul>
                <li><a href="#conversationListPage">ConversationList</a></li>
                <li><a href="#myInfoPage"
                       class="ui-btn-active ui-state-persist">MyInfo</a></li>
            </ul>
        </div>
    </div>

    <div>
        <div data-role="content">
            <div data-role="fieldcontain">
                <label>username:</label>
                <label id="myInfoUsername">null:</label>
            </div>

            <label for="myInfoNickname">nickname:</label>
            <input type="text" name="text-2" id="myInfoNickname" value=""/>
            <input type="button" onclick="setUserNickname()"
                   value="set nickname"/>

            <label for="myInfoGender">gender:(male , female , unknown)</label>
            <input type="text" name="text-3" id="myInfoGender" value="">
            <input type="button" onclick="setUserGender()" value="set gender"/>

            <div data-role="fieldcontain">
                <br>
                <input type="button" onclick="logout()" value="logout"
                       data-theme="e"/>
            </div>
        </div>
    </div>
</div>

</body>
</html>