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

Showing posts with label FE Classic. Show all posts
Showing posts with label FE Classic. Show all posts

Saturday, July 24, 2021

Installation mdbootstrap 5

Step 1

Download the package

Step 2

Unzip downloaded package and open it in the code editor

Step 3

Open Dreamweaver editor and create a HTML site.

Find a template site and copy an index.html file to your project and compose your website. And yes, it's that simple! 

Importing CSS file

To import MDB stylesheet please use the following syntax:

<!-- Font Awesome -->

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css" />

<!-- Google Fonts Roboto -->

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" />

 <link rel="stylesheet" href="css/mdb.min.css" />

Importing JS file

<script href="js/mdb.min.js"></script>

Run: click index.html file to open it on browser

and it works

Sunday, April 8, 2018

Add Kendo UI into Angular Quickstart sample

SystemJS is a dynamic ECMAScript (ES) module loader that is used by Angular Quickstart and other projects.
To use Kendo UI components for Angular with SystemJS, you have to explicitly list the package entry points. This article demonstrates how to implement the required configuration when you use the Angular Quickstart project template.
The source code for the completed sample project is available on GitHub at telerik/kendo-angular-quickstart.

Saturday, April 7, 2018

Beginning Kendo UI

1. What is Kendo UI

Kendo UI is a comprehensive framework which comes with a library of 70+ UI widgets, an abundance of data-visualization gadgets, client-side data source, and a built-in MVVM (Model-View-ViewModel) library. It provides AngularJS and Bootstrap integration and is also distributed as part of several product units that you can choose from depending on your project requirements.
Install kendo ui core for jsp anh html application:


Sunday, March 18, 2018

Introduction to Bootstrap

1. What is bootstrap

Bootstrap is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first websites.
  • Bootstrap is a free front-end framework for faster and easier web development
  • Bootstrap includes HTML and CSS based design templates for typography, forms, buttons, tables, navigation, modals, image carousels and many other, as well as optional JavaScript plugins
  • Bootstrap also gives you the ability to easily create responsive designs
What is Responsive Web Design?
Responsive web design makes your web page look good on all devices.
Responsive web design uses only HTML and CSS.
Responsive web design is not a program or a JavaScript.

Saturday, January 6, 2018

Introduction to Cascading Style Sheets

Cascading Style Sheets or CSS is the basic technique to separate the appearance of a web page from the content represented in HTML. In this section, we give an introduction to CSS and look how they are relevant to software development with Vaadin.
As we can only give a short intruction in this book, we encourage you to refer to the rich literature on CSS and the many resources available in the web. You can find the authoratitative specifications of CSS standards from the W3C website and other literature, references, and tutorials from the Open Directory Project page on CSS, as well as from other sources .

Thursday, October 5, 2017

HTML attribute vs. DOM property in Angular

1-HTML attribute vs. DOM property

The distinction between an HTML attribute and a DOM property is crucial to understanding how Angular binding works.
Attributes are defined by HTML. Properties are defined by the DOM (Document Object Model).
  • A few HTML attributes have 1:1 mapping to properties. id is one example.
  • Some HTML attributes don't have corresponding properties. colspan is one example.
  • Some DOM properties don't have corresponding attributes. textContent is one example.
  • Many HTML attributes appear to map to properties ... but not in the way you might think!

Friday, August 4, 2017

Cắt css cho trang web đầu tiên của bạn

Lập trình viên code java hay rất e ngại khi gặp phải phần thiết kế web, tuy nhiên một chút kiến thức căn bản có thể giúp java coder có thể tự tin hơn trong việc chuyển đổi từ thiết kế của UI/UX CUT CSS team sang file jsp hay các dạng  view khác; hoặc có thể thiết kế thô sơ cho trang web của bạn sau đó sẽ chờ đến phase nâng cấp để cải tiến giao diện. Bài viết của tác giả Dirk với tiêu đề Slice and code your first website sẽ giúp chúng ta có cái nhìn cơ bản công việc của những thành viên nhóm design như thế nào. Thậm chí java coder có thể thiết kế một chút website với Photoshop trong khi chờ đợi kết quả thiết kế từ thành viên nhóm UI/UX. Chúc mừng bạn! Nhưng bây giời bạn phải làm cái gì? Bạn làm thế nào để website của bạn có thể chạy tốt. Trong bài viết này, tác giả sẽ giải thích làm thế nào để chia ra và code website bằng html/css.

Okay,
tác giả sẽ giải thích cho bạn làm thế nào để cắt ra thành từng lát template của bạn trong Photoshop và làm thế nào để code nó trong Dreamweaver sử dụng những thẻ DIV.
Tệp PSD & HTMLcủa template này đã có sẵn để tải về và bạn sẽ dễ dàng hơn làm theo những bước chỉ ra. Xem trước cái mà tác giả đã hoàn thành.

Bước 1:

Bạn có thể bắt đầu với việc tải Slice and Code PSD.
Mở nó với Photoshop CS6 và chọn slice tool (có thể dùng Crop tool + lệnh Trim).

Tuesday, August 1, 2017

Wednesday, July 26, 2017

Sunday, July 23, 2017

datatables - datatables.net

1-Datatables trong spring mvc

Introduction

DataTables operates on the principle of progressive enhancement, whereby an enhanced and interactive table will be presented to the end user if their browser has the required capabilities. When you initialise the jQuery.dataTable object, information about the table is read directly from the HTML page. In combination with the default values for the features in DataTables, this makes it very easy to integrate directly into your web-site or web-application. Optionally, you can use the initialisation parameters to load data from locations other than the DOM, such as a server-side processing script or an Ajax obtained JSON file.

Wednesday, July 5, 2017

How to parse JSON (infotable) element names via JavaScript


To pull the object names out of a JSON object, iterate through the JSON object and display the value at each index location

  • Example:
    var myJson = {
    "element1": "hello",
    "element2": 12,
    "element3": true,
    "element4": {
        "subelement1": "one",
        "sebelement2": 2
    }};
     
    for (var el in myJson) {
        console.log("Element name: " + el + ", element value:" + myJson[el] + ", element type: " + typeof(myJson[el]));
    }

JSON array
  • Example:
    var propertiesPort = ['port1', 'port2', 'port3', 'port4', 'port5', 'port6', 'port7', 'port8', 'port9', 'port10', 'port11', 'port12' ];
    for(var i = 0; i<propertiesPort .length; i++){

                    var portName = propertiesPort [i];

    }

    hoặc:

    for
     each (row in thingList.rows) { 
        //Now each row is already assigned to the row variable in the loop
        var thingName = row.name;


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/

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

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.

Wednesday, December 7, 2016

JavaScript căn bản - part 1

1. Javascript là gì?

Javascript là ngôn ngữ lập trình của HTML và Web  chạy trên browser dưới dạng các script.


A Document object represents the HTML document that is displayed in that window. The Document object has various properties that refer to other objects which allow access to and modification of document content.
The way a document content is accessed and modified is called the Document Object Model, or DOM. The Objects are organized in a hierarchy. This hierarchical structure applies to the organization of objects in a Web document.
  • Window object − Top of the hierarchy. It is the outmost element of the object hierarchy.
    The window object represents an open window in a browser.
  • Document object − Each HTML document that gets loaded into a window becomes a document object. The document contains the contents of the page.
  • Form object − Everything enclosed in the <form>...</form> tags sets the form object.
  • Form control elements − The form object contains all the elements defined for that object such as text fields, buttons, radio buttons, and checkboxes. They have events, attributes, styles.
Here is a simple hierarchy of a few important objects -

Closures: Một số link tham khảo về Closures là

2. Why Study JavaScript?

JavaScript is one of the 3 languages all web developers must learn:
   1. HTML to define the content of web pages
   2. CSS to specify the layout of web pages
   3. JavaScript to program the behavior of web pages

3. Ví dụ 1: JavaScript can change HTML content

The innerHTML property sets or returns the HTML content (inner HTML) of an element.

<!DOCTYPE html>
<html>
<body>

<h1>My First JavaScript</h1>

<button type="button"
onclick="document.getElementById('demo').innerHTML = Date()">
Click me to display Date and Time.</button>

<p id="demo"></p>

</body>
</html> 

4. Ví dụ 2: JavaScript can change CSS style

<!DOCTYPE html>
<html>
<body>

<h1>What Can JavaScript Do?</h1>

<p id="demo">JavaScript can change the style of an HTML element.</p>

<button type="button" onclick="document.getElementById('demo').style.fontSize='35px'">Click Me!</button>


</body>

</html> 

. Ví dụ 3: JavaScript can change HTML attributes

<!DOCTYPE html>
<html>
<body>

<h1>What Can JavaScript Do?</h1>

<p>JavaScript can change HTML attributes.</p>

<p>In this case JavaScript changes the src (source) attribute of an image.</p>

<button onclick="document.getElementById('myImage').src='pic_bulbon.gif'">Turn on the light</button>

<img id="myImage" src="pic_bulboff.gif" style="width:100px">

<button onclick="document.getElementById('myImage').src='pic_bulboff.gif'">Turn off the light</button>

</body>

</html>
<!DOCTYPE html>
<html>
<body>

<h1>What Can JavaScript Do?</h1>

<p id="demo">JavaScript can hide HTML elements.</p>

<button type="button" onclick="document.getElementById('demo').style.display='none'">Click Me!</button>


</body>

</html> 
Tương tự, để hiển thị phần tử đang ở trạng thái hidden thì dùng đặt style.display='block'

7. Ví dụ 5: JavaScript với sự kiện onchange

<html>
<head>
<script type="text/javascript"> 
function updateInputValue(ishVal){
// ID of current element
var elementID = document.getElementById('CurrentUnitId').value;
document.getElementById(elementID).value = ishVal;
}

function updateTextBox(textboxID) {
//var txtID = document.getElementById(textboxID);
var orgID = document.getElementById('organizationSearchName');
orgID.value = '';
document.getElementById('CurrentUnitId').value = textboxID;
var tempElement = document.createElement("markActionURL");
tempElement.type = "hidden";
tempElement.value = '${actionUrl}';
document.getElementById('CommonTagsTreeChooserUnitID').appendChild(tempElement);
openTreeChooserDialog('organizationSearch','${actionUrl}');

}

function updateInput(ish){
   document.getElementById("fieldname").value = ish;
}

</script>

</head>
<body>
<input type="text" name="fieldname" id="fieldname" />  
<input type="text" name="thingy" onchange="updateInput(this.value)" />
</body>

</html>

this.value là value của phần tử đang xét.

8. Ví dụ 6: JavaScript chạy trưc tiếp một hàm cùng với trang web

Dùng đoạn mã sau nhúng vào body của trang html:
<script type="text/javascript">javascript:changeColumnWidthR2();</script>

khi load trang web, browser sẽ gọi hàm changeColumnWidthR2()。

Nội dung của hàm changeColumnWidthR2
<script type="text/javascript">
function changeColumnWidthR2(){
    $('#ColumnLabelEmployeeName').attr('style','width: 15%');
    $('#ColumnLabelCompany).attr('style','width: 35%');
    $('#ColumnLabelPosition').attr('style','width: 15%');
    $("#Output_Other_Help").html("<font color='red'><center>Click checkbox để chọn organization.</center></font>");
}
</script>


Ngoài ra, có thể gọi những hàm javascript mà không cần tới prefix javascript:
ví dụ:
<script>
    focusTextboxElement("frmSearch");
    pressSearchButton();

</script>

9. Điều kiện true/false với 1 biến số

var inputValue = null | undefined | NaN | empty string ("") | 0 | false
if(inputValue)
  alert('false');
else
  alert('true value');
=> trả về giá trị false cho biến số inputValue.

10. What does this mean: "undefined object property"?


What does this mean: "undefined object property"?
Actually it can mean two quite different things! First, it can mean the property that has never been defined in the object and, second, it can mean the property that has an undefined value. Let's look at this code:

var o = { a: undefined }
Is o.a undefined? Yes! Its value is undefined. Is o.b undefined? Sure! There is no property 'b' at all! OK, see now how different approaches behave in both situations:

typeof o.a == 'undefined' // true
typeof o.b == 'undefined' // true
o.a === undefined // true
o.b === undefined // true
'a' in o // true
'b' in o // false
We can clearly see that typeof obj.prop == 'undefined' and obj.prop === undefined are equivalent, and they do not distinguish those different situations. And 'prop' in obj can detect the situation when a property hasn't been defined at all and doesn't pay attention to the property value which may be undefined.

11. JSON - check an Integer variable is valid

if(!(zoneId % 1 === 0)) {
    isZoneIdValid = false;
    result.code = 422;
    result.message = "zoneid = " + zoneId + " khong hop le";
}

if(jsonInput.maxItems >= 0)
    maxItems = jsonInput.maxItems;

12. JSON - check empty in javascript

- function isEmpty(value){
    return (typeof value === "undefined" || value === null || value.length === 0 || value === "undefined");
}
- hasOwnProperty
if(jsonInput.hasOwnProperty('maxItems')) {}


Tuesday, August 23, 2016

Ajax jQuery căn bản

AJAX = Asynchronous JavaScript and XMLIn short; AJAX is about loading data in the background and display it on the webpage, without reloading the whole page.
Examples of applications using AJAX: Gmail, Google Maps, Youtube, and Facebook tabs.
jQuery provides several methods for AJAX functionality.
With the jQuery AJAX methods, you can request text, HTML, XML, or JSON from a remote server using both HTTP Get and HTTP Post - And you can load the external data directly into the selected HTML elements of your web page!
Lưu ý:
$("selector").each(function)
=> gọi hàm function với mỗi phần tử  có cùng tên 'selector'
$("selector").click(function)
=> đăng ký hàm xử lý sự kiện click (có thể cả với change, change focus, focus mouseover, mouseover, ..) với onclick handler.

Monday, August 22, 2016

jQuery in action study - Phần 3

Nghiên cứu sử dụng các chức năng cao cấp của jQuery

3.1 Các hiệu ứng jQuery (jQuery Effects)

3.1.1 Show/Hide

Với jQuery, bạn có thể ẩn (hide) và hiện (show) các phần tử HTML với các method hide() và show().
Cú pháp:
$(selector).hide(speed,callback)
$(selector).show(speed,callback)

speed parameter đặc tả tốc độ của việc hiding/showing, và có thể lấy một trong các giá trị sau: "slow", "fast", "normal", hoặc milliseconds.
callback parameter là tên của một function được thực thi sau khi hoàn thành hàm hide (hoặc show).
$(selector).hide() sẽ ẩn đi những phần tử được chọn
$(selector).show() hiển thị những phần tử được chọn

Sunday, August 21, 2016

jQuery in action study - Phần 2

Cài đặt và sử dụng giản đơn jQuery trong ứng dụng Web
Có 3 cách để cài đặt jQuery:
- Cài đặt jQuery lên một thư mục ở ổ đĩa cứng máy tính
- Cài đặt jQuery vào database
- Cài đặt jQuery từ một địa chỉ trên mạng internet, ví dụ Google's CDN.
Trong tài liệu này, người viết chỉ giới thiệu cách thứ nhất là cài đặt jQuery vào một thư mục ở ổ đĩa cứng máy tính.

Saturday, August 20, 2016

jQuery in Action study - Part 1

1.1 Các định nghĩa

1.1.1 Định nghĩa jQuery

Dịch từ http://jquery.com/ url:
jQuery là một thư viện JavaScript nhanh và chính xác mà làm đơn giản hóa các công việc lập trình JavaScript như duyệt tài liệu HTML, xử lý sự kiện, hoạt hình(animating), và những tương tác Ajax cho việc phát triển web một cách nhanh chóng. jQuery được thiết kế để thay đổi cách chúng ta viết JavaScript.
Bởi vì jQuery là JavaScript nên nó có thể được nhúng vào trong bất kỳ một project nào mà ở đó JavaScript được áp dụng.

1.1.2 Định nghĩa jQuery function

jQuery function là method trong jQuery được định nghĩa trực tiếp bắt đầu bằng dấu dollar $ hoặc hàm jQuery().
Cú pháp:
$(selector)
hoặc
jQuery(selector)
Trong đó hàm $(..) là một cách viết tắt của hàm jQuery().
Hàm jQuery sẽ trả về một đối tượng JavaScript đặc biệt chứa đựng một mảng các phần tử DOM mà match với selector.
Ví dụ:
$(“p a”)
Lấy về một nhóm các links nằm bên trong một phần tử <p>

Popular Posts

Blog Archive