JQ widgets – ready made Web UI controls and widgets

jQWidgets provides ready made widgets and controls for Web UI and Mobile. It already has 60+ UI controls and widgets such as buttons, charts, directory trees, tabs, menus, loader, progress bar, and etc..

jQWidgets is built on HTML5, Javascript, and JQuery.

Main benefits of using jQWidgets are:

1.) Compatible on all web browsers ( IE, Safari, Chrome, Mozilla, and etc.. )

2.) Already implemented widgets and controls, no need to create one from scratch

jQWidgets also provide integration to other popular and widely ised web frameworks such as AngularJS and Twitter Bootstrap.

Links:

jQWidgets integration with AngularJS

https://www.jqwidgets.com/jquery-widgets-documentation/documentation/angularjs/angularjs.htm

jQWidgets integration with Twitter Bootstrap

https://www.jqwidgets.com/jquery-widgets-documentation/documentation/bootstrap/jqwidgets-with-twitter-bootstrap.htm

Available widgets for web

http://www.jqwidgets.com/jquery-widgets-demo/

Available widgets for mobile

http://www.jqwidgets.com/jquery-widgets-demo/mobiledemos/

jQwidgets also provide web site themes

http://www.jqwidgets.com/themebuilder/

Advertisements

DataTables JS : Quick way to created sorted tables in HTML

DataTables JS is a Jquery plugin to create HTML tables with sorting and paging. No need to code all the table functionalities, just set the data on the JS file and call the Datatables function.

Here’s the main page:
https://www.datatables.net/

Here’s a very basic example with HTML ( in a tr and td format ) and three lines of JavaScript.
https://www.datatables.net/examples/basic_init/zero_configuration.html

Here’s a server side processing using PHP. Notice that the HTML is reduced to Header and Footer of the table.
https://www.datatables.net/examples/data_sources/server_side.html

Here’s an example on how to use DataTables using JSON and Java.
http://stackoverflow.com/questions/24893158/getting-javascript-json-string-to-populate-datatable

And here’s a step by step example on how to use DataTables using JSON and Java
https://dzone.com/articles/how-create-jquery-datatable

Limitations

DataTables loads all data as retrieved and then it has the option to display it via paging. It does not yet support Server data retrieval by each page click.

MVVM concept in Web UI using Knockout JS and Angular JS

MVVM stands for Model View – View Model. It’s different but almost similar to MVC, which is Model-View-Controller. MVVM is used up to the UI level only, while MVC is used in the entire front-end and back-end design.

First we will explain MVC.

In a MVC Software design, the View, Control and and Model modules are separated accordingly.

The description are as follows:

1. View – The code that contains what the user sees in the browser. These are composed of CSS, HTML, and JavaScript. Basically this is the front-end side of the code. Colors, format and view are all implemented here. It retrieves data to from Controller, which are needed to be displayed in the browser.

2. Controller – This is the back-end side of the code. This is where all the data retrieval, manipulation, checking and logic happens. Database, Security and HTTP communication is created here. One example of Controller code is the J2EE and Java.

3. Model – The containers / container class of data from the database. The model code usually represents a database table. The model code is also in the back-end side, but is only composed of variable fields, setters and getters. No logic and manipulation is done on the Model. The database itself and the data stored is not considered as a Model.

Why use MVC?

Separation of modules is needed in software design for better quality, maintenance and re-usability.

MVVM explained.

Based on the examples and references, MVVM is only implemented on the “View” module of an MVC. MVVM uses the similar design pattern of “Observer-Observable”. MVVM is another “controller-like” code in the View. Its main purpose is to manipulate the View data on the View level. If there is no MVVM implemented, data changes needs to be manipulated in the back-end Controller level only, which in some cases, becomes difficult or does not give the desired results.

Javascript frameworks such as Knockout JS and Angular JS already provide template solutions to implement the MVVM design. Knockout JS uses the basic Observer-Observable design pattern. Angular JS does not follow the MVVM design but templates the data binding concept (HTML-JS binding) that is needed for Web UI designs.

Angular JS is preferred for modern browsers, while Knockout JS is preferred for IE ( lower versions ) support.

NOTE: MVVM should not be used on a simple Web UI logic/input/output, which will become an overkill, but is highly recommended design for dynamic data changes in the View.

MVVM changes the view as it detects changes on view inputs.

Try the knockout js tutorial here:
http://learn.knockoutjs.com/#/?tutorial=intro

other references:
https://en.wikipedia.org/wiki/Model_View_ViewModel

http://rachelappel.com/comparing-the-mvc-and-mvvm-patterns-along-with-their-respective-viewmodels

http://joel.inpointform.net/software-development/mvvm-vs-mvp-vs-mvc-the-differences-explained/

Parallax Webpage effect : Using Materialize CSS

Parallax: A viewing effect that a foreground moves at a faster speed than its background. One example is when your riding a bus or car and you’re looking beside the road. Notice that the trees moves faster than the clouds in the background.

I created a HTML Parallax page using Materialize CSS. Materialize CSS is a Web UI Framework composed of CSS and JS files.

See their about page: http://materializecss.com/about.html

The sample HTML is using the Materialize CSS and JS files compilation provided. the CDN method is not used, so the sample can run offline.

Step 1.

Jquery 2.1.4 is required for Materialize CSS. Also download the Jquery 2.1.4 ( as used for Materialize.js ).
Important:  JQuery should be in the first order of import, then Materialize.js comes next, or else it would not work.

Step 2.

Download the Materialize CSS files here:
http://materializecss.com/getting-started.html

Step 3. 

Create the two component files as needed. One for the html where all the Materialize CSS and JS are needed. And the other is the JS file to initialize the Parallax function. The source code is given below.

Here is the HTML Parallax page I created.

Here is the demo from materializecss.com
http://materializecss.com/parallax-demo.html

<html>
<head>
<link rel="stylesheet" type="text/css" href="materialize-v0.97.0/materialize/css/materialize.min.css">
</head>
<body>
<div class="parallax-container">
    <div class="parallax"><img src="../parallax/images/family_mart.jpg"></div>
  </div>
  <div class="section white">
    <div class="row container">
      <h2 class="header">Parallax</h2>
      <p class="grey-text text-darken-3 lighten-3">Parallax is an effect where the background content or image in this case, is moved at a different speed than the foreground content while scrolling.</p>
      <p class="grey-text text-darken-3 lighten-3">Integer vitae justo metus. Etiam ut mauris ut turpis imperdiet hendrerit. Etiam dictum augue neque, eu pulvinar nisi faucibus quis turpis. Suspendisse convallis, felis vitae laoreet rhoncus, magna dui congue nulla. </p>
    </div>
  </div>
<div class="parallax-container">
  <div class="parallax"><img src="../parallax/images/cbp.jpg"></div>
</div>
<script type="text/javascript" src="jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="materialize-v0.97.0/materialize/js/materialize.min.js"></script>
<script type="text/javascript" src="parallax_init.js"></script>
</body>
<footer>
  <div class="section white">
    <div class="row container">
     <p class="grey-text text-darken-3 lighten-3"> Cebu CM Solutions
      quis augue ac sem suscipit laoreet in quis ipsum. Curabitur enim sapien
    </p>
   </div>
  </div>
</footer>
<html>

$(document).ready(function(){
      $('.parallax').parallax();
});

Top Server-Side languages for Websites

The basics of software are machine instructions that are sent to the computer processor so that the computer can perform computations, store data, and display media and information.

On this post, Server-side website software languages are discussed. Therefore, software for embedded software ( in machines and robotics ) is not included in the category. Client-side and front end scripts used for screen display such as CSS, HTML and Javascript is excluded. Software for mobile hardware such as Android and iOS are also excluded. Only the languages that control server-side logic is on the list. This is different in my previous post on Best Programming languages to learn, which covers all programming languages in general.

Another note is that some websites use more than one server-side language, maybe for transition ( such as Ameba.jp , a Japanese blog site ), or which uses only one ( Facebook which uses only PHP, or LinkedIn, which only uses Java )

Below is the basic list on where this area is under in the Website architecture.

[O] Front-end code -> CSS, HTML, JS

[/] Back-end code -> PHP, Java, C#, Ruby

[O] Database -> Oracle, MySQL, MongoDB

[O] OS -> Linux, Solaris, Windows

A very important thing to consider on the selection of a Server-Side language is Performance, Quick setup and development, Maintenance, and the most important factor is the Availability and talent pool of developers.

 

Top Server-Side languages for Websites

1.) PHP

PHP is on the top of the list. according to w3techs.com, PHP powers 81% of all internet websites ( as of July 2015 ). All other languages do not come close. According to this report, PHP is used by most medium traffic sites, where these sites composes 80% of the internet. PHP is highly used in Social Media sites ( ex. Facebook and etc. ) Blogs ( ex. WordPress ) and Wiki sites. Theses sites are the internet platform used by most people.

PHP is described to be “the quickest web development language to learn and setup” and is preferred by most freelance and start-up developers. It is open source, with crude and simple scripting.

Here’s the official PHP page: https://secure.php.net/

2.) Java

Java programming language is popular among e-commerce and corporate websites, although it only comes to third with only 3% of all internet traffic ( ASP.net takes second place ). but according to this report, Java is in a steady rise, while PHP is on a steady decline. Although both languages have the same capabilities, Java may win on the performance since its compiled code, unlike PHP or Ruby.

Java is also open source and is integrated with J2EE technology and other 3rd party software such as Hibernate and Spring to become a full-tier webserver.

Recently, J2EE has become too large and complicated, with much maitenance overhead. Even the Struts framework has become outdated. There’s a new Play framework ( derived from Scala ) which eliminates all the complications of the J2EE architecture, but this is yet a rising technology and still on its semi-experimental stage.

On personal opinion, I am closely following Play framework, and just recently, Java creator James Gosling is already a consultant for Typesafe Inc. , the creator of Scala and Play framework ( according to Wikipedia.com ).

3.) C# and .NET

This comes as the second most-popular server-side programming language at 16.7% ( As of July 2015 ). C# and ASP.net are created and maintained from single vendor which is Microsoft Inc. The ASP.net comes as one package for Website development. C# is still in demand with several websites that are tied-up with this technology. A single vendor has an advantage over integration and a single contact point, but it offers less flexibility and vendor lock dependency, which most software firms avoid.

On the bright side, C# basic code has a very similar syntax to Java, so the switch has a lesser learning curve.

some links on C# and ASP.net tutorials

http://asp.net-tutorials.com/

http://asp.net-tutorials.com/basics/code-behind/

4.) Ruby on Rails / Node.js / Perl and other languages

RoR / Ruby on Rails rails was popular since it was designed to create a website as quickly as possible. That’s good for developers, and startups, but it’s bad news for a business or an enterprise using it as a long term and high traffic site, since performance was an issue. Node.js has risen in popularity, since knowledge of JavaScript is all that is required to code ( where JavaScript is the most widely used client-side scripting ), No need to code on Java and JavaScript or PHP and JavaScript on single Web project. But there are also credits to Ruby, where other frameworks ( even Play framework ) is getting its influence. Other languages such as Perl, Scala and Phyton combined takes only 1% of the total usage and popularity.

Websites and links that show why Ruby is abandoned.

http://stackoverflow.com/questions/3794270/is-ruby-on-rails-or-at-least-the-community-dying

http://ilikekillnerds.com/2015/02/is-ruby-on-rails-dying/

 

Hide a textbox and label on dropdown select using Jquery

Here is a sample code on how to hide a text field and its label on dropdown select. See the inline comments for description of each line.


//the "select" drop down has the class name "account_type_class"
//ex. <select id="account-type" class="account_type_class" >	
$("select.account_type_class").change(function(){	

 //get the selected value. This is the "value" set in jsp
 //assigned to an "option"
 //ex. <option id="a-type_business" value="business">Business</option>		
 var value = $(this).val();

 if(value === "business"){
   
   //This code shows the label 
   $('label[for="cust_name"]').show();
   //This code shows the textbox
   $("#c-name").show();
 }
		
 //in this case, we hide the label and text box
 if(value === "personal"){
   $('label[for="cust_name"]').hide()
   $("#c-name").hide();
 }

Here’s the JSP code snippet.

<label>Account Type
<select id="account-type" class="account_type_class" >
  <option id="a-type_business" value="business">Business</option>
  <option id="a-type_personal" value="personal">Personal</option>
</select></label><br/><br/>
<label>Account Name <input type="text" name="accountname" id="s-name"></label><br/><br/>
<label for="cust_name">Customer Name <input type="text" name="customername" id="c-name"></label><br/><br/>

jquery-1.11.3.min.js version is used.

JQuery, Angular JS and Java

Update: One main difference of Angular JS from Jquery is that Angular JS binds HTML elements and controls it in HTML/JSP file, with much less usage of the *.js ( javascript ) unlike Javascript with JQuery. Angular JS has additional attributes called Directives.

Angular JS – A new Javascript Framework that was launched last 2009. For some background, Javascript is a Client-Side scripting for websites. In layman’s term ( or just to make things easier to understand ), Javascript is used to manipulate the menus, buttons, and text fields in a website. Then JQuery comes in as an enhancement ( a set of JavaScript libraries / standard codes ) to encapsulate routine JavaScript code. JavaScript with JQuery creates a much better and code, and with lesser lines, than just JavaScript alone.

Then here comes Angular JS. Angular JS is a Framework. Its not an-add on Library unlike JavaScript. But first, Let’s differentiate a Framework from a Library. To start, a library is a set of additional instructions, mostly common functions that are simplified that are ready to use. Think of it as a set of tools in a tool box. Framework, as other developers say, is just the same as a Library. But then why is it called Framework? For example, Spring Framework as just a Spring Library? Well, I think here’s the difference. Yes a Framework is also a set of common used functions, but the difference is that a Framework is a built-in software platform that is used to enhanced software. Libraries may relate to tools, while Framework may relate to a simple mechanical machine. For example, you can use a pen, a paper and a cash box as a cash register. This is a similar concept of a Library. But then you use a cash register machine, which is a similar concept of a Framework.

Angular JS can write lesser code than JQuery. And Angular JS can do more stuff than JQuery, especially in the unit test area. These are the two main reasons why a lot of Software Developers / Companies are trying out Angular JS development. But other experienced developers are sticking to the JQuery, since Angular JS is not yet time tested. There are still some hesitations, but there is potential.

Here are some reference links on Angular JS:
– JQuery / Angular JS comparison
https://www.airpair.com/angularjs/posts/jquery-angularjs-comparison-migration-walkthrough

– Offical Angular JS page
https://angularjs.org/

– Angular JS and Java Backend intergration using REST
http://www.radcortez.com/java-ee-7-with-angular-js-crud-rest-validations-part-2/
http://www.radcortez.com/java-ee-7-with-angular-js-part-1/