Hybrid app - Connect to local database by SQLite

---o0o---

Original link

1. Install the sqlite plugin
2. Add ngCordova
3. Add SQLitePlugin.js file

1. Install the sqlite plugin

Run command:

ionic plugin add https://github.com/brodysoft/Cordova-SQLitePlugin

When done, in plugins folder add new folder names com.brodysoft.sqlitePlugin

2. Add ngCordova

Download the zip file here

Extract file and put ng-cordova-master\dist\ng-cordova.js or ng-cordova-master\dist\ng-cordova.min.js file in your folder such as www\js

Include ng-cordova.js or ng-cordova.min.js in your index.html file before cordova.js and after your AngularJS / Ionic file (since ngCordova depends on AngularJS).

    
<script src="js/ng-cordova.js"></script>
<script src="cordova.js"></script>
   

3. Add SQLitePlugin.js file

Go https://github.com/brodysoft/Cordova-SQLitePlugin and clone code

Copy SQLitePlugin.js file from Cordova-SQLitePlugin\www folder to in your folder such as www\js

Include SQLitePlugin.js file in your index.html file before everything

    
<script src="js/SQLitePlugin.js"></script>
<script src="lib/ionic/js/ionic.bundle.js">></script>
<script src="js/ng-cordova.js"></script>
<script src="cordova.js"></script>
   

Done, now you can run

• ionic build
• ionic run

Ionic - Button

---o0o---

Original link

1. Button

a) Style for headers

• button class: add default style for button
• display: inline-block are default
• Style for button likes header, choose one of those below class:
  • button-light
  • button-stable
  • button-positive
  • button-calm
  • button-balanced
  • button-energized
  • button-assertive
  • button-royal
  • button-dark

b) Block button

• add button-block class to applies display: block for this button
• A block button will however go 100% of its parent's width

c) Full Width Block Buttons

• add button-full class to applies display: block and removes borders on the left and right, and any border-radius which may be applied for this button
• A block button will however go 100% of its parent's width

d) Other styles

• button-small: for smaller button
• button-large: for larger button
• button-outline: apply an outline button style, which also has a transparent background.
• button-clear: remove the background button color and border

e) Icon Buttons

Add icon for button by add below classes, use icon-right or icon-left to set posion of icon if button has text
• ion-loading-c
• ion-home
• ion-star: for favorites list
• ion-chevron-right: likes > symbol
• ion-chevron-left: likes < symbol, use for back button
• ion-gear-a: use for setting button
• ion-settings
• ion-navicon

f) Button Bar

You can group together button by button-bar class and add style for each button by
• add color class like 'button-light'
• add icon
• ...

			
<div class="button-bar">
	<a class="button">First</a>
	<a class="button">Second</a>
	<a class="button">Third</a>
</div>
			

Ionic CSS

---o0o---

Original link

1. Header

• Headers are fixed regions at the top of a screen
• Can contain:
  • a title label
  • left/rights buttons for navigation or to carry out various actions

a) Style for headers

			
<div class="bar bar-header bar-light">
	<h1 class="title">This is header bar</h1>
</div>
			

• bar: notify that <div> is a bar
• bar-header: notify that bar is in header
• bar-light: style for this header bar
• title: center <h1> in screen

You can change style or color for heardes by choose one of those below classes

• bar-light
• bar-stable
• bar-positive
• bar-calm
• bar-balanced
• bar-energized
• bar-assertive
• bar-royal
• bar-dark

b) Button in headers

Default

<div class="bar bar-header">
	<button class="button icon ion-navicon"></button>
	<h1 class="title">This is header bar</h1>
	<button class="button">Edit</button>
</div>
		

• ion-navicon: add navicon icon
Simple button:
• Add button-icon
• Add button-clear to remove the background button color and border

2. Sub Headers

a) Position of sub headers bar

• Can be placed below the original header bar. That mean, put below class after bar-header <div>
• Use bar-subheader class to defines sub headers

					
<div class="bar bar-subheader">
	<h2 class="title">Sub Header</h2>
</div>
				

3. Footer

• Footers are regions at the bottom of a screen
• Footers have the same color options as the headers

a) Simple footer

			
<div class="bar bar-footer bar-balanced">
	<div class="title">Footer</div>
</div>
			

• bar-footer: notify that bar is in footer
• bar-balanced: style for this footer bar

b) Footer with buttons

If no title is present, you'll need to add pull-right or pull-left classes to set position

<div class="bar bar-footer">
	<button class="button button-clear pull-right">Right</button
</div>
		

If a title, any buttons will automatically be placed on the correct side of the title in relation to how the markup was written

Eclipse Hotkey

---o0o---

Original link

Ctrl + D : xóa dòng tại chứa con trỏ

Ctrl + Y: Redo

Ctrl + F : tìm chuỗi trong class

Ctrl + H : mở nhanh màn hình search

Ctrl + E : nhảy nhanh tới 1 tab trong các tất cả các tab đang mở

Ctrl + W : đóng tab hiện tại

Crtl + Alt + mũi tên lên /xuống: Copy dòng hiện tại lên hoặc xuống

Ctrl + Shift + W : đóng toàn bộ các tab đang mở (trong trường hợp có nhiều tab quá

Ctrl + Shift + C : comment, uncomment một đoạn code

Ctrl + Shift + F : định dạng lại đoạn code theo chuẩn -> nhìn cho nó đẹp

Ctrl + Shift + R: Mở nhanh 1 file

Ctrl + Shift + X: CHUYỂN ĐOẠN ĐƯỢC CHỌN SANG CHỮ HOA

Ctrl + Shift + Y: chuyển đoạn được chọn sang chữ thường

Alt + mũi tên lên/xuống : di chuyển dòng hiện tại lên/xuống

Alt + mũi tên trái/phải : nhảy qua tab bên trái/phải

Ctrl-Shift-L: brings up a List of shortcut keys

See Windows/Preference->General->Keys.

Hybrid App: Ionic Framework + Cordova

---o0o---

Original link

I. Ionic

• Ionic is an HTML5 mobile app development framework targeted at building hybrid mobile apps.
• The bulk of an Ionic app will be written in HTML, Javascript, and CSS.
• Ionic also uses AngularJS for a lot of the core functionality of the framework.

1. Install

a) Git + Consoles2

If you are on Windows, make sure to download and install Git for Windows and optionally Console2.

b) Cordova

To install Cordova, make sure you have Node.js installed, then run

        npm install -g cordova
        npm install -g ionic
    

2. Create the project

        ionic start todo blank
        cd todo && ls
    

For reg ionic acc: https://apps.ionic.io/signup

Login: https://apps.ionic.io/login

Repeating HTML Elements: ng-repeat

---o0o---

Original link

• The ng-repeat directive clones HTML elements once for each item in a collection (in an array).

1. Repeats an array

 
<div ng-app="" ng-init="names=['Jani','Hege','Kai']">
 <ul>
  <li ng-repeat="x in names">
   {{ x }}
  </li>
 <ul>
</div>
 

• {{ x }}

2. Repeats an array of objects

 
<div ng-app="" ng-init="names=[
 {name:'Jani',country:'Norway'},
 {name:'Hege',country:'Sweden'},
 {name:'Kai',country:'Denmark'}]">
 <ul>
    <li ng-repeat="x in names">
      {{ x.name + ', ' + x.country }}
    </li>
 <ul>
</div>
 

Result:

• Jani, Norway
• Hege, Sweden
• Kai, Denmark

3. ng-repeat + ng-controller

 
<div ng-app="" ng-controller="namesController">
 <ul>
    <li ng-repeat="x in names">
      {{ x.name + ', ' + x.country }}
    </li>
 <ul>
</div>

<script src="namesController.js"></script>
 

In namesController.js file

 
function namesController($scope) {
 $scope.names = [
        {name:'Jani',country:'Norway'},
        {name:'Hege',country:'Sweden'},
        {name:'Kai',country:'Denmark'}
 ];
}
 

Result:

• Jani, Norway
• Hege, Sweden
• Kai, Denmark

AngularJS Controllers: ng-controller

AngularJS Controllers

---o0o---

Original link

1. AngularJS Controllers

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
	First Name: <input type="text" ng-model="firstName"><br>
	Last Name: <input type="text" ng-model="lastName"><br>
	Full Name: {{firstName + " " + lastName}}
</div>

<script>
	var app = angular.module('myApp', []);
	app.controller('myCtrl', function($scope) {
		$scope.firstName = "John";
		$scope.lastName = "Doe";
	});
</script>
	

First Name:
Last Name:
Full Name: {{firstName + " " + lastName}}

• AngularJS applications are controlled by controllers.
• AngularJS Controllers is a JavaScript Object, created by a standard JavaScript object constructor.
• ng-app: Tells AngularJS that the <div> element is the "owner" of an AngularJS application.
• ng-model: binds the value of the input field to the application variable firstName, lastName.
• ng-controller: names the controller object.
• myCtrl function: is a standard JavaScript object constructor. (hàm dựng). Creates two properties (variables) in the scope (firstName and lastName).
• $scope is the application object (the owner of application variables and functions)
• AngularJS will invoke myCtrl with a $scope object.(đối tượng)

a) Internal File

Like above code

b) External Files

	
<div ng-app="myApp" ng-controller="personController">
	First Name: <input type="text" ng-model="firstName"><br>
	Last Name: <input type="text" ng-model="lastName"><br>
	Full Name: {{fullName()}}
</div>
<script src="personController.js"></script>
	

In personController.js file

	
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
	$scope.firstName = "John";
	$scope.lastName = "Doe";
});
	

2. Multiple controllers

	
<div ng-app="myApp">
	<div ng-controller="myCtrl">
		{{firstName + ' ' + lastName}}
	</div>
	<div ng-controller="myCtrl2">
		<ul>
  			<li ng-repeat="x in names">
    			{{ x.name + ', ' + x.country }}
  			</li>
		</ul>
	</div>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
});

app.controller('myCtrl2', function($scope) {
    $scope.names = [
        {name:'Jani',country:'Norway'},
        {name:'Hege',country:'Sweden'},
        {name:'Kai',country:'Denmark'}
    ];
});
</script>
	

Result:

John Doe

• Jani, Norway
• Hege, Sweden
• Kai, Denmark

3. Controller Methods

	
<div ng-app="myApp" ng-controller="personCtrl">
	//First Name: <input type="text" ng-model="firstName">
	//Last Name: <input type="text" ng-model="lastName">
	Full Name: {{fullName()}}
</div>

<script>
var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
    $scope.fullName = function() {
        return $scope.firstName + " " + $scope.lastName;
    }
});
</script>
	

Result:

Full Name: John Doe

AngularJS Init: ng-init

ng-init

---o0o---

Original link

I. ng-init: Initialize application variables.

1. One variable

	
<div ng-app="" ng-init="firstName='John'">
	<p>The name is <span ng-bind="firstName"></span></p>
</div>
	

The name is

2. Multiple varibles

	
<div ng-app="" ng-init="quantity=1;cost=5">
	

II. AngularJS Expressions

• are written inside double braces: {{ a + b }}.

• binds data to HTML the same way as the ng-bind directive.

  Ex: {{ firstName + " " + lastName }} <=> <span ng-bind="firstName + ' '+ lastName"></span>

• "output" data exactly where the expression is written

	
<div ng-app="">
<p>My first expression: {{ 5 + 5 }}</p>
===> My first expression: 10
	

1. AngularJS Numbers

	
<div ng-app="" ng-init="quantity=1;cost=5">
	<p>Total in dollar: {{ quantity * cost }}</p>
</div>
===> Total in dollar: 5
	

2. AngularJS Strings

	
<div ng-app="" ng-init="firstName='John';lastName='Doe'">
	<p>The name is {{ firstName + " " + lastName }}</p>
</div>
===>The name is John Doe
	

3. AngularJS Arrays

	
<div ng-app="" ng-init="points=[1,15,19,2,40]">
	<p>The third result is {{ points[2] }}</p>
</div>
===>The third result is 19
	

4. AngularJS Objects

	
<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">
	<p>The name is {{ person.lastName }}</p>
</div>
===>The name is Doe
	

5. Object in Array

	
<div ng-app="" ng-init="points=[1,15,{firstName:'John',lastName:'Doe'},2,40]">
	<p>The third result is {{ points[2]}}</p>
	<p>The third result is {{ points[2]['firstName'] }}</p>
</div>
===>The third result is {"firstName":"John","lastName":"Doe"}
===>The third result is John
	

6. Array in Object

	
<div ng-app="" ng-init="person={firstName:'John',lastName:[1,15,19,2,40]}">
	<p>The name is {{ person.lastName }}</p>
	<p>The name is {{ person.lastName[3]}}</p>
</div>
===>The name is [1,15,19,2,40]
===>The name is 2
	

Using ng-init is not very common. You will learn how to initialize data by ng-controllers.

AngularJS: ng-directives

AngularJS

---o0o---

Original link

1. AngularJS

• is a JavaScript framework. It is a library written in JavaScript.
• is distributed as a JavaScript file
• starts automatically when the web page has loaded
• AngularJS can be added to a web page with a script tag

  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>

• AngularJS extends HTML with ng-directives.

2. ng-directives

• ng-app: defines an AngularJS application.
• ng-model: binds the value of HTML controls (input, select, textarea) to application data.
• ng-bind: binds application data to the HTML view.

Note: You can use data-ng-, instead of ng-, if you want to make your page HTML5 valid.

 
<div ng-app="">
<p>Name: <input type="text" ng-model="name"></p>
Your Name: <span ng-bind="name"></span>
 
 

• ng-app: Tells AngularJS that the <div> element is the "owner" of an AngularJS application.
• ng-model: binds the value of the input field to the application variable name.
• ng-bind: binds the innerHTML of the <p> element to the application variable name.

Please fill input below

Name:

Your Name:

Wordpress - Print Friendly and PDF Button Plugin

---o0o---

https://wordpress.org/plugins/printfriendly/screenshots/

1. Install plugin

Good for project uses Timber plugin

2. Config plugin

3. Fix bug: Images are not showned/printed

Best way to fix is to add class="print-only" to the elements containing content you want included in the print/pdf.
Class="print-only" will force only those elements (and their child elements) to be included in the print/pdf.
If you add to a parent element, and would like to excluded some of the child elements, add class="print-no" to those elements