鳴黎的筆記

2017年2月22日星期三

Bootstrap-常用方法

1 . 文字位置
http://stackoverflow.com/questions/12829608/bootstrap-text-align-class

2017年2月21日星期二

Bootstrap-基本用法( 一 )

必須先在頁面添加以下 Library

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

參考資料：Bootstrap Get Started
參考資料：利用Bootstrap Grid System排版的學習筆記

AngularJS-常用方法

1 . 點擊觸發兩方法：

http://stackoverflow.com/questions/17584432/using-ng-click-to-call-two-different-functions

2 . 表格格式錯誤提醒

http://wijmo.com/blog/easy-form-validation-in-angularjs/

3 . 點擊後，檢查表格後執行方法(Nikos Paraskevopoulos)

http://stackoverflow.com/questions/31159006/form-validation-on-ng-click-angularjs

3-1 . 確認表格輸入參數＿最有效
https://jsfiddle.net/r8d1uq0L/

4 . no-repeat list
https://blog.rjmetrics.com/2015/09/02/8-features-of-ng-repeat/

5 . no-repeat 動態篩選
https://docs.angularjs.org/api/ng/filter/filter

6 . no-repeat table click 取得當列參數
http://stackoverflow.com/questions/15288047/angularjs-ng-click-on-repeat-table-row-not-working

7 . no-repeat list has if els 產生列表遇到判斷式
http://stackoverflow.com/questions/15810278/if-else-statement-in-angularjs-templates

8 . no-repeat filiter 排序筆數...等教學
http://abgne.tw/angularjs/angularjs-getting-stared/filters-3.html

9 . no-repeat table 多項排序
http://stackoverflow.com/questions/31074578/how-to-reverse-sort-a-column-on-click-using-angularjs

10 . no-repeat 上下排序
https://scotch.io/tutorials/sort-and-filter-a-table-using-angular

10_1 . no-repeat 多重篩選
http://plnkr.co/edit/kozaU39E74yqjZCpgDqM?p=preview

11 . 下拉選單＿初始化...等
http://jsfiddle.net/840cc677/9/

12 . angularJS function retrun
http://stackoverflow.com/questions/24215197/how-to-show-return-value-of-a-function-with-angularjs

13 . 顯示/隱藏元件
http://stackoverflow.com/questions/16660826/show-hidden-div-on-ng-click-within-ng-repeat
http://stackoverflow.com/questions/23035647/angularjs-ng-click-and-ng-show-to-show-a-div

14 . controller 互相溝通＿第四點較常用
http://www.storagelab.org.cn/zhangdi/2014/11/19/%E4%B8%8D%E5%90%8Ccontroller%E4%BD%9C%E7%94%A8%E5%9F%9F%E4%B9%8B%E9%97%B4%E9%80%9A%E4%BF%A1%E7%9A%84%E6%96%B9%E5%BC%8F/

angular.module("myApp", [])
    .controller('myCtrl', ['$scope', function($scope) {

        $scope.submit = function() {

        }
    }]);

2017年2月20日星期一

JavaScript-常用方法

項目
1 . 頁面初始化
2 . 取得對應標籤參數
3 . 點擊事件
4 . Form 傳送資料，另一頁面接收( Jsp、Struts2 )

頁面初始化

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<script
    src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
    $(document).ready(function() {
        
    });
</script>
<body>

</body>
</html>

取得對應標籤參數

<script>
    .
    var age = document.getElementById("editText").value;
    .
</script>
<body>
    .
    <input type="text" id="editText" value="" />
    .
</body>

點擊事件

<script>
    function myFunction() {
        .
        .
        .
    }
</script>
<body>
    <input type="button" id="btn" value="送出" onclick="myFunction()" />
</body>
</html>

Form 傳送資料，另一頁面接收( Jsp、Struts2 )
參考資料：How to pass the values from one jsp page to another jsp without submit button?

a.jsp
<form action="hello_4" method="post">
    <input type="text" name="name">
    <input type="submit" name="send">
</form>

b.jsp
<body>
    <% String name=request.getParameter("name"); out.print("Hello:"+name); %>
</body>

JavaScript-檢查 Form 內部元件是否為空

check form is null
參考資料：JS form check empty

JAVA-Struts2 入門初體驗 ( 五 )參數傳遞Action to Jsp

參考資料：struts2<S:iterator>遍历map小结
參考資料：Struts2 iterator 标签遍历 Map,List,数组（三十六）
參考資料：第一個 STRUTS 2 程式

2017年2月19日星期日

JAVA-Struts2 入門初體驗 ( 四 )參數傳遞Jsp to Action

在上述幾篇講到有關如何建置 Strut2 的專案
此篇會提到要如何收 / 送資料

我們先來講要如何把頁面資料送至後端處理，方法：
1 . 用網頁標籤內的 name 來對應到 Action 內的 Value ( get / set )
2 . 用網頁標籤內的 name 來對應到 Action 內的 Bean ( get / set )
3 . 用網頁的表單方式統捆起來後 Action 實作 Module( form get/set )

簡單分析以上幾種方法
1 . 如果用第一種，之後 Action 一定看起來凌亂不堪，但初學好入手。
2 . 第二與第三差別在於頁面宣告的長度

以下我們就針對以上方法寫下範例：
1 . 用一般參數 set/get
仔細看 Action 部分，如果只有兩個參數還好，如果是十幾個？
整體偏程式碼都被 set /get 塞爆了
hello.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
    <!-- 皆可使用，二選一
    <form action="hello" method="post" name="form">
        姓名: <input type="text" name="userName" /><br/>
        電話: <input type="text" name="userPhone" /><br/> 
        <input type="submit" value="提交"/><br/> 
    </form>
     -->
    <!-- struts 標籤 </form>
    <form action="hello" method="post" name="form">
        姓名: <s:textfield name="userName"/><br/>
        電話: <s:textfield name="userPhone"/><br/>
        <s:submit value="提交"/> <br/> 
    </form>
    
</body>
</html>

Action.java
說明：Jsp 的標籤名稱對應在 Action 內，並且設置 Set / Get

package com.brian.example.action;

public class HelloAction {
    private String userName;
    private String userPhone;

    public String getUserName() {
        return userName;
    }

    public void setUserName(String userName) {
        this.userName = userName;
    }

    .( userPhone set/get )
    .
    .
    .

    public String execute() {
        System.out.println(getUserName() + "," + getUserPhone());
        return "success";
    }

}

2 . 用 Bean 來

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
    
    <form action="hello" method="post">
        姓名: <s:textfield name="user.userName"/><br/>
        電話: <s:textfield name="user.userPhone"/><br/>
        <s:submit value="提交"/> <br/> 
    </form>
    
</body>
</html>

User.java
說明：

package com.brian.example.action;

public class User {
    private String userName;
    private String userPhone;
    
    public String getUserName() {
        return userName;
    }
    public void setUserName(String userName) {
        this.userName = userName;
    }
    
    public String getUserPhone() {
        return userPhone;
    }
    public void setUserPhone(String userPhone) {
        this.userPhone = userPhone;
    }
    
}

Action.java
說明：

package com.brian.example.action;

public class HelloAction {

    private User user;

    public User getUser() {
        return user;
    }

    public void setUser(User user) {
        this.user = user;
    }

    public String execute() {
        try {
            if(user.getUserName() != null || user.getUserPhone() != null) {
                System.out.println(user.getUserName() + " : " + user.getUserPhone() );
            }
        } catch (Exception e ) {
            System.out.println(e.toString());
        }
        
        return "success";
    }

}

3 . Module

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
    
    <form action="hello" method="post" name="user">
        姓名: <s:textfield name="userName"/><br/>
        電話: <s:textfield name="userPhone"/><br/>
        <s:submit value="提交"/> <br/> 
    </form>
    
</body>
</html>

User
同上方法 User.java

Action

package com.brian.example.action;

import com.opensymphony.xwork2.ModelDriven;

public class HelloAction implements ModelDriven<User> {

    private User user = new User();

    public User getUser() {
        return user;
    }

    public void setUser(User user) {
        this.user = user;
    }

    @Override
    public User getModel() {

        return user;
    }

    public String execute() {
        try {
            if (user.getUserName() != null || user.getUserPhone() != null) {
                System.out.println(user.getUserName() + " : " + user.getUserPhone());
            }
        } catch (Exception e) {
            System.out.println(e.toString());
        }
        return "success";
    }

}

參考資料：Struts2的三种传值方式比较(附demo)
參考資料：struts2 actions - Multiple Methods & Multiple classes

2017年2月22日 星期三

2017年2月21日 星期二

2017年2月20日 星期一

2017年2月19日 星期日

2017年2月22日星期三

2017年2月21日星期二

2017年2月20日星期一

2017年2月19日星期日