Shared info of IoT & Cloud, Banking, Angular Wicket, Spring Reactive, AI, Flutter, E-comm, Java Telecomm and More.

Thursday, March 23, 2017

JSTL 1.2

1-JSTL Check Equals, not equals

JSTL Check Equals(==), not equals(!=) explains about how to use logical conditions(equals, not equals etc) with JSTL tag
Consider a JSP Page where you need to check a value whether it is equals or not equals and process accordingly, in that scenario,  you can follow this example.
On the following table, I am showing 2 different ways (Method 1 & Method 2), you can achieve equals & not equals in JSTL 
Logical operationJSTL Method 1JSTL Method 2
EqualsEq==
Not EqualsNe!=
Required Libraries
You need to download
  1. Tomcat 7
  2. JSTL 1.2
Following jar must be in classpath
  1. jstl-1.2.jar

Sunday, March 19, 2017

Struts2 AngularJS integration

In this post, we will learn to implement AJAX calls from a JSP page to a Struts 2 Action class using AngularJS and update the same JSP page back with the Json response from the Struts 2.

Library Required


Since Angular can send and receive only in json format, to handle it you need struts2-json-plugin-2.x.x.jar. This plugin allows you to serialize the Action class attribute which has getter and setter into a JSON object.

Struts2 AngularJS Insert Operation

LINK

As for the user interface, rather than Bootstrap, we'll use materialize CSS – a modern responsive front-end framework based mostly additionally on Google’s Material design.

FILE STRUCTURE

Knowing the file structure can offer us an outline of what Struts2 files can we need to create and wherever the assets should be placed.




Saturday, March 18, 2017

Cài đặt AngularJS 1.x với ví dụ giản đơn

Cài đặt AngularJS

Sau khi đã có những khái niệm căn bản về AngularJS, chúng ta sẽ tiến hành cài đặt để sử dụng AngularJS:
Step1: Tải tệp angular.min.js từ URL https://ajax.googleapis.com/ajax/libs/angularjs/1.2.32/angular.min.js, rồi copy file vào thư mục js
Step2: Khai báo thư viện angularjs trong tệp html
<head><script src = "js/angular.min.js"></script> </head>

Step3: Khai báo thẻ gốc muốn áp dụng AngularJS với từ khóa ng-app. Thẻ với từ khóa này chỉ ra sự khởi đầu ứng dụng AngularJS.
<div ng-app>
</div>
Step4: Sử dụng các thẻ ng-model, ng-bind và các thẻ khác bên trong thẻ gốc ng-app để xây dựng các trang web với AngularJS
ví dụ hoàn chỉnh như sau:
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example - example-guide-concepts-1-production</title>
  <script src="js/angular.min.js"></script>  
</head>
<body >
  <div ng-app ng-init="qty=1;cost=2">
  <b>Invoice:</b>
  <div>
    Quantity: <input type="number" min="0" ng-model="qty">
  </div>
  <div>
    Costs: <input type="number" min="0" ng-model="cost">
  </div>
  <div>
    <b>Total:</b> {{qty * cost | currency}}
  </div>
</div>
</body>
</html>

Kiến trúc AngularJS 1.x

AngularJS là gì?

AngularJS là một web application framework mã nguồn mở dựa trên JavaScript để tạo ra các ứng dụng RICH Internet Application(RIA) hay ứng dụng sử dụng mô hình MVVM (Model-View-ViewModel).
có thể coi AngularJS tương tự như jQuery nhưng có nhiều tính năng hỗ trợ hơn cung cấp RESTful API, Two-Way data binding,..
AngularJS là một framework để có thể tạo được những ứng dụng web quy mô lớn và performance cao mà vẫn giữ duy trì được tính năng dễ dàng trong việc bảo trì.
Download tại https://angularjs.org/

Comparsion: Struts 2 vs Spring 3 MVC

Apache Struts 2 and Spring MVC are two of the most popular Java web frameworks today. I’ve used both APIs extensively and wanted to share a quick comparison.
In Struts, the object that handles a request and routes it for processing is called an Action. In Spring MVC, that object is referred to as a Controller. Actions and Controllers are pretty much the same thing – they take input, process it, and return some sort of response.
The one major design difference is that by default, Struts 2 Actions are newly instantiated every time a request is made, whereas in Spring MVC the default behavior is to act as a Singleton. Spring MVC Controllers are created once and held in memory/shared across all requests. Note, you can change this behavior (scope) to request or session but we’ll talk about that later. This is a major difference to keep in mind when designing applications that need to be thread-safe, database oriented, or other share-able transactions.

Saturday, February 25, 2017

Web Apps in WebView

To deliver a web application or some web pages as a part of an android client application, you can do it using WebView.
The WebView class is an extension of Android's View class that allows you to display web pages as a part of your activity layout. It does not include web browser, navigation controls or an address bar,.. just web page content.
WebView can be used to display static document that's hosted online.
WebView can also be used to build dynamic data for users.

How to get started with WebView ? How to do some additional things, such as handle page navigation and bind JavaScript from your web page to client-side code in your Android application.

Thursday, February 23, 2017

JavaScript căn bản - part 2


1. JavaScript Array splice() Method


Definition and Usage
The splice() method adds/removes items to/from an array, and returns the removed item(s).
Note: This method changes the original array.

Syntax
array.splice(index, howmany, item1, ....., itemX)

Parameter Values

ParameterDescription
indexRequired. An integer that specifies at what position to add/remove items, Use negative values to specify the position from the end of the array
howmanyOptional. The number of items to be removed. If set to 0, no items will be removed
item1, ..., itemXOptional. The new item(s) to be added to the array
Return Value: A new Array, containing the removed items (if any)

Example

At position 2, add the new items, and remove 1 item:
var fruits = ["Banana""Orange""Apple""Mango"];
fruits.splice(21"Lemon""Kiwi");
=> result = Banana,Orange,Lemon,Kiwi,Mango

Example

At position 2, remove 2 items:
var fruits = ["Banana""Orange""Apple""Mango""Kiwi"];
fruits.splice(22);

Example

At position 2, remove 0 items and add 2 items:

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 0, "abc" , "Kiwi");
=> result = [Banana,Orange,abc,Kiwi,Apple,Mango]

2. valueOf() Method

<script>
function myFunction() {
    var str = "Hello World!";
    var res = str.valueOf();
    document.getElementById("demo").innerHTML = res;
}
</script>

3. Set and Map

Set:
mySet[Symbol.iterator]

Return value

The Set iterator function, which is the values() function by default.

Example:
vm.fileSetUpload = new Set();
var rmID = $('#btnRemoveSetupFileSrv').val();
vm.fileSetUpload.add(rmID.valueOf());
const iterator1 = vm.fileSetUpload[Symbol.iterator]();
vm.arrRmAttachFile = [];
for (var v of vm.fileSetUpload) {
    vm.arrRmAttachFile.push(v);
}         
Map:
vm.filesMapUpload = new Map();
for (var i = 0; i < e.length; i++) {
    vm.filesMapUpload.set(e[i].name, e[i]);
   
}
var fNames = '';
vm.filesMapUpload.forEach(function(value, key, map) {
    fNames = fNames + key + ":";
});
var rmID = $('#btnRemoveSetupFileCli').val();
vm.filesMapUpload.delete(rmID);
vm.filesArrayUpload = [];
vm.filesMapUpload.forEach(function(value, key, map) {
       vm.filesArrayUpload.push(value);
});

4.Reduce method

The reduce() method executes a reducer function (that you provide) on each element of the array, resulting in a single output value.

link:
https://www.freecodecamp.org/news/reduce-f47a7da511a9/
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce


5.Array.prototype.map()

The map() method creates a new array populated with the results of calling a provided function on every element in the calling array.


REF:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map


Wednesday, February 22, 2017

Android and Architecture

Today we're announcing a guide to Android app architecture along with a preview of Architecture Components. Rather than reinventing the wheel, we're also recognizing the work done by popular Android libraries.

Closures & callback function javascript & jQuery

What is a closure?

A closure is an inner function that has access to the outer (enclosing) function’s variables—scope chain. The closure has three scope chains: it has access to its own scope (variables defined between its curly brackets), it has access to the outer function’s variables, and it has access to the global variables.
The inner function has access not only to the outer function’s variables, but also to the outer function’s parameters. Note that the inner function cannot call the outer function’s arguments object, however, even though it can call the outer function’s parameters directly.
You create a closure by adding a function inside another function.
A Basic Example of Closures in JavaScript:
 

function showName (firstName, lastName) {


​var nameIntro = "Your name is ";

// this inner function has access to the outer function's variables, including the parameter​

​function makeFullName () {


​return nameIntro + firstName + " " + lastName;


}


​return makeFullName ();


}



showName ("Michael", "Jackson"); // Your name is Michael Jackson

Closures are used extensively in Node.js; they are workhorses in Node.js’ asynchronous, non-blocking architecture. Closures are also frequently used in jQuery and just about every piece of JavaScript code you read.

Popular Posts

Blog Archive