Skip to main content

Malcolm McRoberts

Malcolm McRoberts's Public Library

  • function change() {     var appElement = document.querySelector('[ng-app=myApp]');     var $scope = angular.element(appElement).scope();     $scope.$apply(function() {         $scope.data.age = 20;     }); }
      

    Try it out in this Fiddle.

      

    Shaun just pointed out that Angular will only process any "watches" or "bindings" during a $digest() call. If you just modify the properties of the $scope directly, the changes may not be reflected immediately and you may gets bugs.

      

    To trigger this you can call $scope.$apply() which will check for dirty scopes and update anything bound correctly. Passing a function that does the work inside $scope.$apply will allow Angular to catch any exceptions as well. This behaviour is explained in the documentation for Scope.

  • I decided to take a look AngularJS and how to use that in portlet development. Using any framework with portlets means that they should behave well in portlet world. So the first task is to see if AngularJS is up to it. Behaving well in portlet world means that the framework has to have tools so it can respect the portal environment. As a normal web application, front end developer has total freedom to create what they want, but when they are stepping into portal world, their creation has to fit in limitation of the portlet.
  • By looking this, my first impression is that AngularJS is not portlet ready since portlet does not own the page. As I study further reading it is clear ng-app does not have to be bound to html tag, but it can be bound to any tag. Next question can you have multiple tags with ng-app attributes same time at page as we can have multiple portlets and also multiple portlet instances. Quick proof of concept proofs other vice, so there can be only one ng-app attribute per page. So AngularJS seems to be failing the portlet world, but I decided to dig deeper and after further study I did find out that ng-app can be replaced by API call:
    angular.bootstrap(<dom element>,<list of modules>);

    Finally, I could confirm that with this API call it is possible have multiple AngularJS modules at one page and be bound to multiple dom elements.

  • Right now my workaround is to declare a new javascript object on 
    page2, like 
     
    var myfuncHelper = new Object(); 
     
    then my JSNI looks like 
     
    $wnd.myfuncHelper.myfunc = function() {...} 
     
    and the onclick="myfuncHelper.myfunc()
     
    That works.  I am wondering if there is better implementation though.
  • Right now my workaround is to declare a new javascript object on 
    page2, like 
     
    var myfuncHelper = new Object(); 
     
    then my JSNI looks like 
     
    $wnd.myfuncHelper.myfunc = function() {...} 
     
    and the onclick="myfuncHelper.myfunc()
     
    That works.  I am wondering if there is better implementation though.

  • GWT Portlets is a free open source web framework for building GWT (Google Web Toolkit) applications. It defines a very simple & productive, yet powerful programming model to build good looking, modular GWT applications.

    The programming model is somewhat similar to writing JSR168 portlets for a portal server (Liferay, JBoss Portal etc.). The "portal" is your application built using the GWT Portlets framework as a library. Application functionality is developed as loosely coupled Portlets each with an optional server side DataProvider

  •      
             
     

    The GWT Portlets framework (http://code.google.com/p/gwtportlets/) includes a WebAppContentPortlet. This serves up any content from your web app (static HTML, JSPs etc.). You can put it on a page with additional functionality in other Portlets and everything is fetched with a single async call when the page loads.

      

    Have a look at the source for WebAppContentPortlet and WebAppContentDataProvider to see how it is done or try using the framework itself. Here are the relevant bits of source:

      

    WebAppContentPortlet (client side)

      
    ((HasHTML)getWidget()).setHTML(html == null ? "<i>Web App Content</i>" : html);
      

    WebAppContentDataProvider (server side):

      
    HttpServletRequest servletRequest = req.getServletRequest(); String path = f.path.startsWith("/") ? f.path : "/" + f.path; RequestDispatcher rd = servletRequest.getRequestDispatcher(path); BufferedResponse res = new BufferedResponse(req.getServletResponse()); try {    rd.include(servletRequest, res);    res.getWriter().flush();    f.html = new String(res.toByteArray(), res.getCharacterEncoding()); } catch (Exception e) {    log.error("Error including '" + path + "': " + e, e);    f.html = "Error including '" + path +         "'<br>(see server log for details)"; }

  • The correct JVM parameters were: -Dhttps.proxyHost=127.0.0.1 -Dhttps.proxyPort=8888 -DproxySet=true -DproxyHost=127.0.0.1 -DproxyPort=8888

  • Ajax and Forms

     
      
     

    jQuery's ajax capabilities can be especially useful when dealing with forms. There are several advantages, which can range from serialization, to simple client-side validation (e.g. "Sorry, that username is taken"), to prefilters (explained below), and even more!

Apr 10, 15

"18. HTML5 Session Storage

This tutorial walks you through the process of using session storage in HTML5."

  • 18. HTML5 Session Storage

     

    This tutorial walks you through the process of using session storage in HTML5.

ajax 2

Apr 10, 15

"Get the data from localStorage (could interface with a form for adding, editing and removing rows).:

Javascript
1
2
3
4
5
6
7

$('#example').dataTable( {
"ajax": function (data, callback, settings) {
callback(
JSON.parse( localStorage.getItem('dataTablesData') )
);
}
} );"

  • ajax

      
    Since: 1.10

    Load data for the table's content from an Ajax source

     

    Description

    DataTables can obtain the data that it is to display in the table body from a number of sources, including from an Ajax data source, using this initialisation parameter. As with other dynamic data sources, arrays or objects can be used for the data source for each row, with columns.dataDT employed to read from specific object properties.

  • Get the data from localStorage (could interface with a form for adding, editing and removing rows).:

     
    1
    2
    3
    4
    5
    6
    7
    $('#example').dataTable( {
      "ajax": function (data, callback, settings) {
        callback(
          JSON.parse( localStorage.getItem('dataTablesData') )
        );
      }
    } );

  • Using Node.js to create a REST API around a SQL database

      
     

    A few code snippets for how you can quickly stand up a SQL database, and provide a REST API for DB read/writes

     

    I was helping out a team at a hackday hosted at Hursley last week. One of the things they wanted for their hack was a SQL database to put sensor data in, which they could access via a REST API. And they wanted it in node.js.

1 - 20 of 1840 Next › Last »
20 items/page

Highlighter, Sticky notes, Tagging, Groups and Network: integrated suite dramatically boosting research productivity. Learn more »

Join Diigo