Ocelotds

About demo : Angularjs and Ocelotds...

This is demonstration improved from the web site of angularjs.
With Ocelot your front end application communicate elegantly with your java back-end

Compare them from angular website and see the beautifull of Ocelotds.

Open more than one time this page and see how ocelotds synchronise them.

Hover the mouse  highlighted code  and get infos about it



{{ctrl.remaining()}} of {{ctrl.todos.length}} remaining [ archive ]
  • {{todo.text}}

Hover the mouse  highlighted code  and get infos about it

@ApplicationScoped
@DataService(resolver = Constants.Resolver.CDI)
public class TodoServices {
   private List<Todo> todos;
   @PostConstruct
   public void constructor() {
      init();
   } 

   @JsTopic("update-todos")
   public List<Todo> init() {
      todos = new ArrayList<>();
      todos.add(new Todo("learn angular", true));
      todos.add(new Todo("build an angular app", false));
      return todos;
   }

   public List<Todo> getTodos() {
      return todos;
   }

   @JsTopic("add-todo")
   public Todo addTodo(String text) {
      Todo todo = new Todo(text, false);
      todos.add(todo);
      return todo;
   }

   @JsTopic("update-todo")
   public Todo updateTodo(Todo todo) {
      for (Todo t : todos) {
         if (t.equals(todo)) {
            t.setDone(todo.isDone());
         }
      }
      return todo;
   }

   @JsTopic("update-todos")
   public List<Todo> archive() {
      List<Todo> saved = new ArrayList<>();
      saved.addAll(todos);
      todos.clear();
      for (Todo t : saved) {
         if (!t.isDone()) {
            todos.add(t);
         }
      }
      return todos;
   }
}

Hover the mouse  highlighted code  and get infos about it

public class Todo {
   private String text;
   private boolean done = false;

   public String getText() {
      return text;
   }
   public void setText(String text) {
      this.text = text;
   }
   public boolean isDone() {
      return done;
   }
   public void setDone(boolean done) {
      this.done = done;
   }
}            

Hover the mouse  highlighted code  and get infos about it

(function () { // closure
   angular.module('todoApp', []); // create module
   angular.module('todoApp').controller('TodoListController', TodoListController); // add controller
   TodoListController.$inject = ['$scope']; // inject angular scope
   function TodoListController($scope) { // controller
      var ctrl = this;
      ctrl.todos = [];
      ctrl.todoText = "";
      ctrl.addTodo = addTodo;
      ctrl.remaining = remaining;
      ctrl.archive = archive;
      ctrl.update = update;
      ctrl.reset = reset;
      ctrl.getTodos = getTodos;

      ctrl.addSub = null;
      ctrl.todosSub = null;
      ctrl.updSub = null;

      activate();
      $scope.$on('$destroy', desactivate);

      function activate() {
         console.log("subscribers initialisation...");
         ctrl.todosSub = subscriberFactory.createSubscriber("update-todos").message(function (todos) {
            ctrl.todos = todos;
            $scope.$apply(); // apply to angualr scope
         });
         ctrl.addSub = subscriberFactory.createSubscriber("add-todo").message(function (todo) {
            ctrl.todos.push(todo);
            $scope.$apply(); // apply to angualr scope
         });
         ctrl.updSub = subscriberFactory.createSubscriber("update-todo").message(function (todo) {
            ctrl.todos.every(function (t) {
               if (t.text === todo.text) {
                  t.done = todo.done;
                  $scope.$apply(); // apply to angualr scope
               }
               return t.text !== todo.text; // continue or exit every;
            })
         });
      }
      function desactivate() {
         console.log("subscribers cleaning...");
         if (ctrl.todosSub) ctrl.todosSub.unsubscribe();
         if (ctrl.addSub) ctrl.addSub.unsubscribe();
         if (ctrl.updSub) ctrl.updSub.unsubscribe();
      }
      function addTodo() {
         ctrl.todos.forEach(function (t) {
            if (t.text === ctrl.todoText) {
               return; // exit function;
            }
         });
         todoServices.addTodo(ctrl.todoText).catch(onFault); // todo will be add by subscriber
         ctrl.todoText = ''; // clean input
      }
      function remaining() {
         var count = 0;
         angular.forEach(ctrl.todos, function (todo) {
            count += todo.done ? 0 : 1;
         });
         return count;
      }
      function archive() {
         console.log("call todoServices.archive");
         todoServices.archive().catch(onFault); // the result will be receive by subscriber
      }
      function update(todo) {
         console.log("call todoServices.updateTodo");
         todoServices.updateTodo(todo).catch(onFault); // the result will be receive by subscriber
      }
      function reset() {
         console.log("call todoServices.init");
         todoServices.init().catch(onFault); // the result will be receive by subscriber
      }
      function onFault(fault) {
         alert(fault.message + "\n" + fault.classname + "\n" + fault.stacktrace.join('\n'));
      }
      function getTodos() {
         console.log("call todoServices.getTodos");
         todoServices.getTodos().then(function (todos) {
            ctrl.todos = todos; // receive todos
            $scope.$apply(); // apply to angular scope
         }).catch(onFault);
      }
   }
})();

Hover the mouse  highlighted code  and get infos about it

<html>
   <head>
      <script src="ocelot/services.js" type="text/javascript"></script>
      <script src="ocelot/core.min.js" type="text/javascript"></script>
   </head>
   <body>
      <div ng-controller="TodoListController as ctrl" ng-init="ctrl.init()">
         <span>{{ctrl.remaining()}} of {{ctrl.todos.length}} remaining</span>
         [ <a href="" ng-click="ctrl.archive()">archive</a> ]
         <ul class="unstyled">
            <li ng-repeat="todo in ctrl.todos">
               <input type="checkbox" ng-model="todo.done" ng-change="ctrl.update(todo)">
               <span class="done-{{todo.done}}">{{todo.text}}</span>
            </li>
         </ul>
         <form ng-submit="ctrl.addTodo()">
            <input type="text" ng-model="ctrl.todoText"  size="30" value="{{ctrl.todoText}}" placeholder="add new todo here">
            <input class="btn-primary" type="submit" value="add">
            <nput class="btn btn-danger" type="button" ng-click="ctrl.reset()" value="RESET">
         </form>
      </div>
   </body>
</html>