NativeScript UI module for implementing WhatsApp like chat applications.
A NativeScript UI module for implementing WhatsApp like chat applications.
License
Platforms
- Android
- iOS
Installation
Run
tns plugin add nativescript-chatview
inside your app project to install the module.
Demo
The demo app can be found here.
Usage
Include
;
Create view
import ChatView = require("nativescript-chatview");
function getTime() : string {
var now = new Date();
var hours = now.getHours();
return numberToString(hours == 12 ? 12 : (hours % 12)) + ":" + numberToString(now.getMinutes()) + " " +
(hours < 13 ? "AM" : "PM");
}
export function onNavigatingTo(args) {
var page = args.object;
// create view
var chatView = new ChatView.ChatView();
// register event when user taps
// on SEND button
chatView.notifyOnSendMessageTap((eventData: ChatView.SendMessageTappedEventData) => {
// add a chat message
eventData.object.appendMessages({
date: getTime(),
isRight: true,
image: "~/img/avatar.jpg",
message: eventData.message,
});
});
// focus text field
chatView.focusMessageField();
page.content = chatView;
}
The XML way
Styling
Add the following CSS to your code:
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
To understand how a
ChatView is defined, you can have a look at the following XML definition:
<!-- list of messages -->
<!-- template for an IChatMessage item -->
<!-- chat message item -->
<!-- avatar -->
<!-- the message -->
<!-- the message area -->
<!-- the date / time -->
<!-- the message text -->
<!-- The invisible separator -->
<!-- message input field and SEND button -->
<!-- chat message field -->
<!-- SEND button -->
The following properties of a
ChatView can be used to access the controls defined in the XML:| name | css class |
|---|---|
| messageField | nsChatView-messageField |
| messageList | nsChatView-messageList |
| sendMessageArea | nsChatView-sendMessageArea |
| sendMessageButton | nsChatView-sendMessageButton |
Add messages
Chat messages are wrapped into an
IChatMessage object:
export interface IChatMessage {
/**
* The date.
*/
date?: any;
/**
* The image source.
*/
image?: any;
/**
* Defines if the displayed item is aligned on the right side or not.
*/
isRight?: boolean;
/**
* The message value.
*/
message?: any;
}
Add
Use
appendMessages() method to add one or more chat messages:
object.appendMessages({
date: getTime(),
isRight: true,
image: "~/img/me.jpg",
message: "My message",
}, {
date: getTime(),
isRight: false,
image: "~/img/friend.jpg",
message: "Friend's message",
});
Insert
Use
insertMessages() method to insert one or more chat messages at a specific position:
object.insertMessages(1, {
date: getTime(),
isRight: true,
image: "~/img/me.jpg",
message: "My message",
}, {
date: getTime(),
isRight: false,
image: "~/img/friend.jpg",
message: "Friend's message",
});
Prepend
Use
insertMessages() method to prepend one or more chat messages:
object.prependMessages({
date: getTime(),
isRight: true,
image: "~/img/me.jpg",
message: "My message",
}, {
date: getTime(),
isRight: false,
image: "~/img/friend.jpg",
message: "Friend's message",
});
SEND button
Use the
notifyOnSendMessageTap() method to register for a "click" event:
chatView.notifyOnSendMessageTap((eventData: ChatView.SendMessageTappedEventData) => {
// handle the event
});
The
eventData object has the following structure:
import Observable = require("data/observable");
export class SendMessageTappedEventData implements Observable.EventData {
/** @inheritdoc */
public eventName: string;
/**
* Focuses the chat message field.
*
* @return {Boolean} Operation was successful or not.
*/
public focusTextField(): boolean;
/**
* Gets the message to send.
*/
public message: string;
/** @inheritdoc */
public object: ChatView;
/**
* Resets the message value.
*/
public resetMessage();
/**
* Scrolls to bottom.
*/
public scrollToBottom();
}
0 comments:
Post a Comment
Note: only a member of this blog may post a comment.