Caliburn.Micro and event aggregator -unwanted call handle method - events

I have one problem with publish/handle messages between 2 screens.
My scenario is:
Messenger screen, is it master screen, publish on chat screens, they are slave screens.
Messenger view model handle with messages from server.
Chat screen can publishes messages on messenger screen. And messanger view model send this message on server.
Messenger class look like this:
[Export("MessengerScreen", typeof(IMessengerViewModel))]
public class MessengerViewModel : Screen, IMessengerViewModel, IInitializable<Account>, IHandle<Rp>
{
// ...
[ImportingConstructor]
public MessengerViewModel(IPokecService service, IEventAggregator eventAgg)
{
_eventAgg = eventAgg;
_eventAgg.Subscribe(this);
}
//publish on slave screen
public void Publish(Rp rp)
{
_eventAgg.Publish(rp);
}
//handle msg from slave screen
public void Handle(Rp msg)
{
//send to server
}
}
Slave screen class look like this:
[Export("ChatScreen", typeof(IChatViewModel))]
[PartCreationPolicy(CreationPolicy.NonShared)]
public class ChatViewModel : Screen, IInitializable<DetailData>, IHandle<Rp>
{
[ImportingConstructor]
public ChatViewModel(IEventAggregator eventAgg)
{
_eventAgg = eventAgg;
_eventAgg.Subscribe(this);
}
//publish only on messenger screen
public void Publish(Rp rp)
{
_eventAgg.Publish(rp);
}
//show message from published from messenger
public void Handle(Rp rp)
{
AddBlockToConversation(rp);
}
//if enter is pressed publish on messanger screen
public void SendRp(KeyEventArgs e)
{
if (e.Key == Key.Enter && !string.IsNullOrEmpty(RpText))
{
_yourRp.Time = String.Format("{0:yyyy-MM-dd HH:mm:ss}", DateTime.Now);
_yourRp.RpText = RpText;
AddBlockToConversation(_yourRp);
//publish on messanger screen
Publish(_yourRp);
}
}
}
My problems are:
First problem is:
I call method SendRp from class
ChatViewModel.
It calls method void Publish() in ChatViewModel,
then is call method void Handle() from class MessengerViewModel
and then call also method void
Handle() from ChatViewModel class.
I don’t want call method Handle() in ChatViewModel class. Why if I send message from ChatViewModel to MessengerViewModel is also called method Handle in ChatViewModel class?
My second problem is:
I would like publish from MessengerViewModel message on only certain slave screen.
MessgerVieModel have in queue messages: {msg1, msg2, msg3, ..., msgN}
I would like publish:
msg1 on slave screen #1.
msg2 on slave screen #2
...
msg3 on slave screen #3

MY SOLUTION:
I solved my problem with modification class EventAggregator.
Something like this:
Every my view model imlements this interface:
public interface IViewModelIdentity
{
string ScreenIdentity { get; set; }
}
And in Publish method in even aggregator class I have this:
public void Publish(Rp rp)
{
WeakReference[] toNotify;
lock (_subscribers)
toNotify = _subscribers.ToArray();
Execute.OnUIThread(() =>
{
Log.Info("Publishing {0}.", rp);
var dead = new List<WeakReference>();
foreach (var reference in toNotify)
{
var target = reference.Target as IHandle<Rp>;
//GET ID OF SCREEN
var screenId = reference.Target as IViewModelIdentity;
//!
if (target != null && screenId != null)
{
if (screenId.ScreenIdentity=="screen on which we want to send a message")
{
//PUBLISH ON SCREEN
target.Handle(rp);
}
}
else if (!reference.IsAlive)
dead.Add(reference);
}
if (dead.Count > 0)
{
lock (_subscribers)
dead.Apply(x => _subscribers.Remove(x));
}
});
}

Related

Update listview from API call in certain interval- xamarin.forms

I am developing a chat application in xamarin.forms.The viewmodel binded to my chat listview page have an API call , which will fetch the chat data and bind to the listview.The API will call only once ie; when we open the page. What I am trying to do is call the API every 10 seconds and update the listview if there are new messages.But what happening is instead of updating the list, it duplicates the entire data.I think it is normal that if the API called again, it will rebind the entire data. How can I make this update the listview if any new message available? like a chat APP works.Any help or guidance is appreciated.
The API data will be assigned to incoming and outgoing cell according to a parameter.
My viewmodel;
public class ChatPageViewModel : INotifyPropertyChanged
{
private void NotifyPropertyChanged([CallerMemberName] String propertyName = "")
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
public INavigation Navigation { get; set; }
public string APropertyToSet { get; set; }
public ObservableCollection<NCMessage> Messages { get; set; } = new ObservableCollection<NCMessage>();
public ObservableCollection<ChatData> ChatListObj { get; set; }
public ChatPageViewModel(INavigation navigation)
{
// This is how I call the timer
Device.StartTimer(TimeSpan.FromSeconds(10), () =>
{
Device.BeginInvokeOnMainThread(async () =>
{
await loadChatList();
});
return true;
});
// <--------------- Load chat List API-------------------->
async Task loadChatList()
{
await Task.Run(async () =>
{
try
{
// API call is the dedicated class for makin API call
APICall callForNotificationList = new APICall("apicallUrl/CallChatList", null, null, "GET");
try
{
ChatListObj = callForNotificationList.APICallResult<ObservableCollection<ChatData>>();
if (ChatListObj[0].results.Count != null && ChatListObj[0].results.Count != 0)
{
if (ChatListObj[0].success)
{
foreach (var item in ChatListObj[0].results)
{
if (item.type == "user")
{
if (!string.IsNullOrEmpty(item.message))
{
var message = new NCMessage
{
Text = item.message.ToString(),
IsIncoming = "True"
};
Messages.Add(message);
}
}
}
}
else
{
//error message
}
}
else
{
//error message
}
}
catch (Exception e)
{
}
}
catch (Exception ex)
{
}
});
}
}
public event PropertyChangedEventHandler PropertyChanged;
}
My chat XAML
<ListView
ItemTemplate="{StaticResource MessageTemplateSelector}"
ItemsSource="{Binding Messages,Mode=OneWay}"
Margin="0"
BackgroundColor="Transparent"
SelectionMode="None"
FlowDirection="RightToLeft"
HasUnevenRows="True" x:Name="ChatList"
VerticalOptions="FillAndExpand"
SeparatorColor="Transparent"
>
</ListView>
My XAML.cs
public partial class ChatPage : ContentPage
{
ChatPageViewModel vm;
public ChatPage()
{
InitializeComponent();
this.BindingContext = vm = new ChatPageViewModel(Navigation);
}
protected async override void OnAppearing()
{
base.OnAppearing();
await Task.Delay(2000);
await vm.loadChatList();
}
}
you are doing this for every message you retrieve from your API without checking to see if the message is already in the collection
Messages.Add(message);
you have (at least) three options
clear the entire Messages collection before calling the API
check if a message exists before adding it to the collection
modify the API call to only return new messages
The usual chat systems work using Socket connections, so that server can push just the new messages that it has received, as opposed to your current pull based system. Take a look at SignalR if you want to pursue that path, here's a good example - Real Time Chat App
As for your current code, there are a few possibilities:
As #Jason has mentioned, you could clear out the existing messages and add all of them again, you should use RangeObservableCollection so that it doesn't redraw the list every time you add a message
You could maintain a Id for all the chat messages and send the Id in your API call, ideally filtering should happen the server side, no point in extra load on the client.
new APICall("apicallUrl/CallChatList?from_id=<last_message_id>", null, null, "GET")
If there are no last_message_id, send all the data. This eliminates unnecessary data transfer, as you'll send only 1 new message than the 10k previous messages :)

Vaadin - run client side javascript after image fully loaded

I need to print a picture on client side. I used this as a template. My PrintUI looks like this:
#Override
protected void init(VaadinRequest request) {
Item item = ..get item ..
StreamResource imageStream = ... build image dynamically ...
Image image = new Image(item.getName(), imageStream);
image.setWidth("100%");
setContent(image);
setWidth("100%");
// Print automatically when the window opens
JavaScript.getCurrent().execute("setTimeout(function() {print(); self.close();}, 0);");
}
This works so far in IE but in chrome it opens the printing preview showing an empty page. The problem is that the image is loaded in some way that chrome does not wait for it and starts the printing preview immideatly.
To verify this, I tried: (setting a 5sec timeout)
JavaScript.getCurrent().execute("setTimeout(function() {print(); self.close();}, 0);");
Then it works in IE and Chrome, but its of course an ugly hack, and if the connection is slower than 5sec, then again it will fail.
In pure JS it would work like this, but Im not sure how to reference the element from vaadin in cient-side js. Any ideas?
You can use AbstractJavascriptExtension.
Example extension class:
#JavaScript({ "vaadin://scripts/connector/wait_for_image_load_connector.js" })
public class WaitForImageLoadExtension extends AbstractJavaScriptExtension {
private List<ImageLoadedListener> imageLoadedListeners = new ArrayList<>();
public interface ImageLoadedListener {
void onImageLoaded();
}
public void extend(Image image) {
super.extend(image);
addFunction("onImageLoaded", new JavaScriptFunction() {
#Override
public void call(JsonArray arguments) {
for (ImageLoadedListener imageLoadedListener : imageLoadedListeners) {
if (imageLoadedListener != null) {
imageLoadedListener.onImageLoaded();
}
}
}
});
}
public void addImageLoadedListener(ImageLoadedListener listener) {
imageLoadedListeners.add(listener);
}
}
and javascript connector (placed in wait_for_image_load_connector.js) with the waiting method you have linked:
window.your_package_WaitForImageLoadExtension = function() {
var connectorId = this.getParentId();
var img = this.getElement(connectorId);
if (img.complete) {
this.onImageLoaded();
} else {
img.addEventListener('load', this.onImageLoaded)
img.addEventListener('error', function() {
alert('error');
})
}
}
Then you can do something like that:
Image image = new Image(item.getName(), imageStream);
WaitForImageLoadExtension ext = new WaitForImageLoadExtension();
ext.extend(image);
ext.addImageLoadedListener(new ImageLoadedListener() {
#Override
public void onImageLoaded() {
JavaScript.eval("print()");
}
});
In your case, when calling print() is the only thing you want to do after the image is loaded, you can also do it without server-side listener by just calling it in the connector:
if (img.complete) {
print();
} else {
img.addEventListener('load', print)
img.addEventListener('error', function() {
alert('error');
})
}

Xamarin Form and Bluetooth disconnect

Is there an event of a Android.Bluetooth class that is raised when the device is disconnected?
You have to set add a BluetoothGattCallback
public class MyGattCallback : BluetoothGattCallback
{
public override void OnConnectionStateChange(BluetoothGatt gatt, GattStatus status, ProfileState newState)
{
base.OnConnectionStateChange(gatt, status, newState);
if(newState == ProfileState.Disconnected)
{
// disconnected
}
}
}
And when you connect your device, you pass it:
BluetoothDevice device = ...;
var callback = new MyGattCallback();
device.ConnectGatt(Application.Context, false, callback);

How to use events in GWT Frame

I would like to capture all events within a GWT frame. I've found several ways to do this, but they only return mousemove and mouseout events. I also need keypresses, input, etc. The goal is to capture the events and send them to another client by using websockets, and then replicate them on the other side (co-browsing).
I am using a page on the same domain within the frame.
public class ESinkFrame extends Frame implements EventListener {
public ESinkFrame(String src){
super(src);
DOM.sinkEvents(getElement(), Event.KEYEVENTS);
DOM.sinkEvents(getElement(), Event.MOUSEEVENTS);
}
public void onBrowserEvent(Event event) {
System.out.println( "sunk event: " + DOM.eventGetTypeString(event) );
}
}
And when I use it, I also try to attach a different way of grabbing the events.
ESinkFrame frame = new ESinkFrame("http://127.0.0.1:8888/other.html");
RootPanel.get().add(frame);
FrameElement frameElt = frame.getElement().cast();
Document frameDoc = frameElt.getContentDocument();
BodyElement body = frameDoc.getBody();
Element el = body.cast();
DOM.setEventListener(el, new EventListener()
{
public void onBrowserEvent(Event event)
{
Window.alert("test");
}
});
DOM.sinkEvents(el, Event.KEYEVENTS);
Event.addNativePreviewHandler(new NativePreviewHandler(){
public void onPreviewNativeEvent(NativePreviewEvent event) {
String eventName = event.getNativeEvent().getType();
if (event.isFirstHandler() /* && (event.getTypeInt() & Event.MOUSEEVENTS) == 0*/)
System.out.println("PreviewHandler: " + eventName);
}
});

callback / delegate?

i have a doubt..
i would like to create a function and it will look like this...
public class A //this is just a class file
{
function dowork()
{
//work 1
INPUT = here in this line it should call a delegate function or raise event etc...
//work 2 using INPUT
}
}
public class B
{
function myfn()
{
A objA = new A();
objA.dowork();
}
}
In the "Class A" we will raise event or so & it will display a windows form to user and then user will input some value & we need to return that value to Class A -> dowork method.... then only we should continue "work 2"
this should also support multi threading... anyone have idea how we can implement this??
thanks :)
You can use ManulResetEvent for this purpose: You run your input form and when it done that form set the event so you can catch it from A.dowork method. While the input in action you run the infinite loop, check event state and process application event to make you app responsible in this time:
public class A //this is just a class file
{
private ManualResetEvent _event;
public void dowork()
{
//work 1
_event = new ManualResetEvent(false);
//INPUT = here in this ...
Worker worker = new Worker();
worker.DoInput(_event);
while(true)
{
if(_event.WaitOne())
break;
Application.DoEvents();
}
//work 2 using INPUT
}
}
class Worker
{
private ManualResetEvent _event;
public void DoInput(ManualResetEvent #event)
{
_event = #event;
// Show input form here.
// When it done, you call: _event.Set();
}
}
Also, I suggest you (if you can) use Async library (it is available as a standalone setup). There you can implement it in much more straightforward way:
public class A //this is just a class file
{
public async void dowork()
{
//work 1
//INPUT = here in this ...
Worker worker = new Worker();
wait worker.DoInput();
//work 2 using INPUT
}
}
class Worker
{
public async void DoInput()
{
InputForm form = new InputForm();
wait form.ShowInput();
}
}
public class B
{
async void myfn()
{
A objA = new A();
wait objA.dowork();
}
}
As you see you just wait while other piece of code get executed without any UI locking and events.
I can provide deeper explanation of how async/wait works here if you need.

Resources