Angularjs

About demo : Simple chat with Angularjs and Ocelotds...

This is an other demonstration base on angularjs.
With Ocelot your front end application communicate elegantly with your java back-end

This show how to implement a simple chat.

Hover the mouse  highlighted code  and get infos about it

{{msg.chatter}}

{{msg.text}}

{{chatter}}

Hover the mouse  highlighted code  and get infos about it

@ApplicationScoped
@DataService(resolver = Constants.Resolver.CDI)
public class ChatServices {
   private static final Collection<String> chatters = new ArrayList<>();
   // Register chatter and broadcast chatters updater list to Chatters topic subscribers
   @JsTopic("Chatters")
   public Collection<String> register(String chatter) throws ChatterAlreadyExistException, ChatterInconsistentException {
      if (null == chatter || chatter.isEmpty()) {
         throw new ChatterInconsistentException("empty");
      }
      if (chatters.contains(chatter)) {
         throw new ChatterAlreadyExistException(chatter);
      }
      chatters.add(chatter);
      return chatters;
   }

   // Unregister chatter and broadcast chatters updater list to Chatters topic subscribers
   @JsTopic("Chatters")
   public Collection<String> unregister(String chatter) {
      if (chatters.contains(chatter)) {
         chatters.remove(chatter);
      }
      return chatters;
   }
   
   // Post message and broadcast to all ChatRoom topic subscribers 
   @JsTopic("ChatRoom")
   public Message postMessage(Message message) throws MessageInconsistentException {
      if (null == message || message.getChatter() == null || message.getText()==null || message.getChatter().isEmpty() || message.getText().isEmpty()) {
         throw new MessageInconsistentException();
      }
      return message;
   }
}

Hover the mouse  highlighted code  and get infos about it

public class Message {
   public String chatter;
   public String text;
   public String getChatter() {
      return chatter;
   }
   public void setChatter(String chatter) {
      this.chatter = chatter;
   }
   public String getText() {
      return text;
   }
   public void setText(String text) {
      this.text = text;
   }
}

Hover the mouse  highlighted code  and get infos about it


angular.module('chatApp', []).controller('ChatController', ['$scope', function ($scope) {
   var chatCtrl = this;
   chatCtrl.chatters = [], chatCtrl.messages = [], 
   chatCtrl.chatter = "", chatCtrl.message = "", 
   chatCtrl.subChatRoom, chatCtrl.subChatters, 
   chatCtrl.registerOn = "", chatCtrl.unregisterOn = "disabled";
   chatCtrl.unregister = function () {
      chatServices.unregister(chatCtrl.chatter).then(function () {
         $scope.$apply(function () {
            chatCtrl.registerOn = "";
            chatCtrl.unregisterOn = "disabled";
            chatCtrl.subChatRoom.unsubscribe();
            chatCtrl.subChatters.unsubscribe();
            chatCtrl.chatters = [];
         });
      }).catch(onFault);
   };
   chatCtrl.register = function () {
      chatCtrl.subChatters = subscriberFactory.createSubscriber("Chatters").message(function (list) {
         $scope.$apply(function () {
            chatCtrl.chatters = list;
         });
      });
      chatServices.register(chatCtrl.chatter).then(function () {
         $scope.$apply(function () {
            chatCtrl.registerOn = "disabled";
            chatCtrl.unregisterOn = "";
            chatCtrl.subChatRoom = subscriberFactory.createSubscriber("ChatRoom").message(msg) {
               $scope.$apply(function () {
                  msg.pos = "left";
                  if (msg.chatter === chatCtrl.chatter) {
                     msg.pos = "right";
                  }
                  chatCtrl.messages.push(msg);
               });
            });
         });
      }).catch(onFault);
   };
   chatCtrl.post = function () {
      if (chatCtrl.message) {
         chatServices.postMessage({"chatter": chatCtrl.chatter, "text": chatCtrl.message}).then(function () {
            $scope.$apply(function () {
               chatCtrl.message = "";
            });
         }).catch(onFault);
      }
   };
   var onFault = function (fault) {
      alert(fault.message + "\n" + fault.classname + "\n" + fault.stacktrace.join('\n'));
   };
   $scope.init = function () {
		ocelotController.addCloseListener(function() {
			chatServices.unregister(chatCtrl.chatter).then(function () {});
		});
   };
}]);

Hover the mouse  highlighted code  and get infos about it


<div class="well" ng-app="chatApp">
   <div ng-controller="ChatController as chatCtrl" ng-init="init()">
      <div class="col-md-10">
         <form class="navbar-form form-inline">
            <input class="form-control" type="text" ng-model="chatCtrl.chatter" required size="20" value="{{chatCtrl.chatter}}" placeholder="Register chatter here">
            <button class="btn btn-success fa fa-user-plus {{chatCtrl.registerOn}}" ng-click="chatCtrl.register()" title="Register"></button>
            <button class="btn btn-warning fa fa-user-times {{chatCtrl.unregisterOn}}" ng-click="chatCtrl.unregister()" title="Unregister"></button>
         </form>
         <div class="chatmsg" ng-repeat="msg in chatCtrl.messages" style="padding:0px">
            <div class="popover {{msg.pos}}">
               <div class="arrow"></div>
               <h3 class="popover-title">{{msg.chatter}}</h3>
               <div class="popover-content">
                 <p>{{msg.text}}</p>
               </div>
            </div>
         </div>
         <form class="form-inline">
            <textarea class="form-control" ng-model="chatCtrl.message" value="{{chatCtrl.message}}" required placeholder="Write message here" cols="40"></textarea>
            <button class="btn btn-primary {{chatCtrl.unregisterOn}} fa fa-envelope" ng-click="chatCtrl.post()"></button>
         </form>
      </div>
      <div class="col-md-2">
         <div ng-repeat="chatter in chatCtrl.chatters">
            <span>{{chatter}}</span>
         </div>
      </div>
   </div>
</div>