[kendo ui] treeView 선택된 노드 정보 가져오기




kendo ui에서 자주 쓰는 기능중 하나인 TreeView



맵형식의 데이터를 트리형식으로 시각화 해주는데 내가 회사에서 자주 사용하는 기능이다.


이떄 선택된 노드의 정보를 가져오는 방법에 대해서 알아보도록 하자




1. treeView에서 노드가 선택될때 이벤트를 주어서 현재 선택된 데이터를 가져오는 방법


1
2
3
4
5
6
7
8
9
10
11
$("#tree").kendoTreeView({
        dataSource : inlineDefault,
        dataTextField : "name",
        select : nodeSelect
    });
 
 
function nodeSelect(e) {
    var data = $("#tree").data('kendoTreeView').dataItem(e.node);
    console.log(data);
}
cs





위 코드와 같이 셀렉트 이벤트를 지정해 주면 된다.




2. 나중에 현재 선택되어져 있는 노드정보를 가져오는 방법



1
2
3
    var mytree = $("#tree").data("kendoTreeView");
    var selected = mytree.select();
    var selItem = mytree.dataItem(selected);
cs



아주 간단하다


끝이다!



[제이쿼리] form의 내용을 한번에 오브젝트로 만들기



form 안의 input 데이터들을 ajax로 날려주거나 오브젝트로 만들어야 할때


하나하나 네임이나 id값으로 불러와서 만들기엔 너무나도 귀찮은 작업이다.


이걸 한번에 해결해 줄수 있는 방법에 대해서 알아보자



일단 제이쿼리 플러그인을 사용해야 한다



제이쿼리 시리얼라이즈 링크




사용 방법은


두가지가 있다


하나는 배열로 만들기 하나는 오브젝트로 만드는 방법






1. html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <form id="yameaForm">
    <input name="input1">
    <input name="input2">
    <input name="input3">
    <input name="input4">
    <input name="input5">
    <input name="input6">
  </form
</body>
</html>
cs



2. js


1
2
3
4
5
6
7
8
9
function makeObject(){
var param = $("#yameForm").serializeObject();
console.log(param);
}
 
function makeArray(){
var param = $("#yameForm").serializeArray();
console.log(param);
}
cs



위와 같은 방법으로 만들면 된다


짱편함


개편함


짱짱맨임


[VUE.JS] 뷰 디렉티브 v-for [반복] 사용하기




이번 포스팅은 뷰 디렉티브중 하나인 v-for 에 대한 포스팅입니다.


제이쿼리와 비교하면 스크립트에서 for문 안에 append 기능을 합친것과 비슷하다고 보시면 되겠습니다.



제이쿼리로 동적으로 엘리먼트 추가할때마다 귀찮았는데


vue.js의 v-for을 이용하면 손쉽게 기능 추가가 가능해 집니다.




1. v-for 사용하기



우선 이전 포스팅과 마찬가지로 jsbin을 이용해


실습해 보도록 하겠습니다.


https://jsbin.com/qowolakowi/edit?html,js,output


해당 링크로 들어가면 이미 만들어진 실습코드에서 조금만 변경 하면 됩니다.


이전 포스팅을 참고하시면 더 좋습니다.





2018/02/19 - [Yame Programmer/VUE.JS] - [VUE.JS] VUE[뷰] 시작해보기

2018/02/22 - [Yame Programmer/VUE.JS] - [VUE.JS] 뷰 디렉티브 사용해보기

2018/02/26 - [Yame Programmer/VUE.JS] - [VUE.JS] 뷰 디렉티브 v-bind 사용하기






1) 기본 사용법



html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>야매 가이드</title>
</head>
<body>
<div id="app">
  <ul>
    <li v-for="dataList in list">
      {{ dataList.text }}
    </li>
  </ul>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</body>
</html>
cs



js


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
// 새로운 뷰를 정의합니다
var app = new Vue({
el: '#app'// 어떤 엘리먼트에 적용을 할 지 정합니다
// data 는 해당 뷰에서 사용할 정보를 가지고 있습니다.
data: {
list:[
  {text:"react 배워보기"},
  {text:"pyhton 배워보기"},
  {text:"vue 배워보기"},
  {text:"연봉을 올려보기"}
  ]
}
});
 
cs




결과




html 코드를 보시면


v-for="dataList in list"


라고 되어 있고



js쪽 코드를 보시면 list안에 오브젝트 배열로 데이터가 들어있습니다.


dataList in list 에서 dataList 는 가져온 데이터를 사용할 변수명 같은거고


list는 js에서 선언한 list 데이터 입니다.


jstl에서 for돌리는것과 비슷한 방법이라고 생각하시면 이해하기 쉽습니다.




2) index 사용하기



jstl의 for기능중에서 index 번호를 불러오는게 있는데


vue.js의 v-for에도 같은 기능이 있습니다.



html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>야매 가이드</title>
</head>
<body>
<div id="app">
  <ul>
    <li v-for="(dataList, index) in list">
      {{index}}  {{ dataList.text }}
    </li>
  </ul>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</body>
</html>
cs



1) 에서 작성한 코드중 data in list -> (dataList, index) in list 로 변경해주시고


{{}}로 index를 추가해 주시면





결과




이렇게 순서 번호가 나타나게 됩니다.


물론



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>야매 가이드</title>
</head>
<body>
<div id="app">
  <ul>
    <li v-for="(dataList, index) in list">
      {{index+1}}  {{ dataList.text }}
    </li>
  </ul>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</body>
</html>
cs



이렇게 index에 바로 연산식을 사용해





이렇게 뽑아내는 것도 가능 합니다.






v-for 디렉티브를 사용해 배열 데이터를 동적으로 렌더링 하는 방법에 대해서 알아보았습니다.



이제 디렉티브는 데이터를 양방향으로 바인딩해주는 v-model과 이벤트 핸들링을 하는 v-on 


이렇게 두가지가 남았네요



다들 재밌게 개발 하시고


연봉들 많이 올라갔으면 좋겠습니다!

[안드로이드] 기기의 카메라에 오류가 생겼습니다. 기기를 재시작해야할수도있습니다. 해결방법 






QR코드나 BAR코드 리딩 기능을 넣거나


OCR 문자 인식 관련해서 API 23 이상부터 나타나는 에러이다


해결방법은 간단하다


API23 이전엔 그냥 매니페스트에 권한요청만 하면 되었는데


API23 이후부터는 아얘 권한 요청 팝업을 띄워서


허용을 받아야 한다.


해결방법은 어디서 찾아다가 프로젝트에 적용시켰는데 어디서 본건지 기억이 잘 안난다;





해결 방법은 아래와 같다


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
 protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
 
        /**********권한 요청************/
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
            /**
             * 사용자 단말기의 권한 중 "카메라" 권한이 허용되어 있는지 확인한다.
             *  Android는 C언어 기반으로 만들어졌기 때문에 Boolean 타입보다 Int 타입을 사용한다.
             */
            int permissionResult = checkSelfPermission(Manifest.permission.CAMERA);
 
 
            /** * 패키지는 안드로이드 어플리케이션의 아이디이다. *
             *  현재 어플리케이션이 카메라에 대해 거부되어있는지 확인한다. */
            if (permissionResult == PackageManager.PERMISSION_DENIED) {
 
 
                /** * 사용자가 CALL_PHONE 권한을 거부한 적이 있는지 확인한다. *
                 * 거부한적이 있으면 True를 리턴하고 *
                 * 거부한적이 없으면 False를 리턴한다. */
                if (shouldShowRequestPermissionRationale(Manifest.permission.CAMERA)) {
                    AlertDialog.Builder dialog = new AlertDialog.Builder(MainActivity.this);
                    dialog.setTitle("권한이 필요합니다.").setMessage("이 기능을 사용하기 위해서는 단말기의 \"카메라\" 권한이 필요합니다. 계속 하시겠습니까?")
                            .setPositiveButton("네"new DialogInterface.OnClickListener() {
                                @Override
                                public void onClick(DialogInterface dialog, int which) {
 
                                    /** * 새로운 인스턴스(onClickListener)를 생성했기 때문에 *
                                     * 버전체크를 다시 해준다. */
                                    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
                                        // CALL_PHONE 권한을 Android OS에 요청한다.
                                        requestPermissions(new String[]{Manifest.permission.CAMERA}, 1000);
                                    }
                                }
                            })
                            .setNegativeButton("아니요"new DialogInterface.OnClickListener() {
                                @Override
                                public void onClick(DialogInterface dialog, int which) {
                                    Toast.makeText(MainActivity.this"기능을 취소했습니다", Toast.LENGTH_SHORT).show();
                                }
                            }).create().show();
                }
                // 최초로 권한을 요청할 때
                else {
                    // CALL_PHONE 권한을 Android OS에 요청한다.
                    requestPermissions(new String[]{Manifest.permission.CAMERA}, 1000);
                }
            }
            // CALL_PHONE의 권한이 있을 때
            else {
 
            }
        }
        /************권한요청 끝**************/
 
 
    }
 
 
 
/** * 권한 요청에 대한 응답을 이곳에서 가져온다. * *
     *  @param requestCode 요청코드 *
     *  @param permissions 사용자가 요청한 권한들 *
     *  @param grantResults 권한에 대한 응답들(인덱스별로 매칭) */
    @Override
    public void onRequestPermissionsResult(int requestCode, @NonNull String[] permissions, @NonNull int[] grantResults) {
        if (requestCode == 1000) {
            // 요청한 권한을 사용자가 "허용" 했다면...
            if (grantResults.length > 0 && grantResults[0== PackageManager.PERMISSION_GRANTED) {
                // 이곳에 허용했을때 실행할 코드를 넣는다
                // 근데 난 안넣음
 
            } else {
                // 거부했을때 띄워줄 
                Toast.makeText(MainActivity.this"권한요청을 거부했습니다.", Toast.LENGTH_SHORT).show();
            }
        }
    }
 
 
cs



액티비티에서 onCreate 부분에서 권한요청을 날려주면 된다.


메인액티비티에 걸어놨다면 어플을 실행할때 메세지가 뜰 것이다.


최적화를 위해서는


권한이 필요한 액션이 일어날때 권한요청을 물어보는 것이 좋다고 하는데


내가 하는 프로젝트는 웹뷰로 띄워놓고 하는거라


액티비티가 메인액티비티 하나뿐이다.


그리고 귀찮다.



만약 카메라 권한이 아니라 


전화걸기, 데이터접근 등의 권한이라면



Manifest.permission.CAMERA


이부분에서


CAMERA 만 원하는 퍼미션으로 바꿔주면 된다.


물론 하나만 바꾸는게 아니라 저거 적혀있는 모든 코드를 바꿔야 하는건 기본



[안드로이드] FCM 백그라운드에서 진동 오도록 하는 방법






얼마전 포스팅에서 웹서버를 통해  FCM 메세지를 날리는 방법에 대해서 알아보았다


2017/07/10 - [Yame Programmer/Android] - [안드로이드] FCM 토큰 저장방법 개별 보내는 방법 SharedPreferences 사용

2017/07/10 - [Yame Programmer/Android] - [안드로이드] FCM 푸시메세지 웹서버(JAVA)에서 보내기



그런데 문제가 있었다.


어플을 켜놓은 상태에선 진동이 오는데


어플을 끄거나 화면을 끈 상태에선 진동알람도 안오고 화면이 켜지는 것도 안되서


알람이 온줄 모르는 상태가 되버린 것



이것때문에 얼마나 삽질을 했던가..



화면켜지는건 고사하고 아얘 어플 끈 상태에선


상단에 알람바만 조용히 생기고 애초에 onMessageReceived 여기서 지정해 놓은 것들이


아얘 안돌아 가는 것 같았다


삽질을 하다가


결국 스택오버 형님들의 글에서 답을 찾았다


저번 포스팅을 보면  웹서버에서 FCM요청을 할떄



1
2
3
4
5
6
7
8
JSONObject root = new JSONObject();
                JSONObject notification = new JSONObject();
                notification.put("body""공조기 장애 현재상태 : OFF");
                notification.put("title""알림 입니다.");
                notification.put("icon""ic_message");
                root.put("notification", notification);
                root.put("to", token);
                root.put("click_action""OPEN_ACTIVITY");
cs




이런식으로 보냈었는데 6번라인의저 노티피케이션이 문제였다.


노티피케이션으로 날려주면 onMessageReceived가 실행이 안된단다


그래서 저 노티피케이션을 data로 바꾸어 주었다



1
2
3
4
5
6
7
8
                JSONObject root = new JSONObject();
                JSONObject notification = new JSONObject();
                notification.put("body""공조기 장애 현재상태 : OFF");
                notification.put("title""알림 입니다.");
                notification.put("icon""ic_message");
                root.put("data", notification);
                root.put("to", token);
                root.put("click_action""OPEN_ACTIVITY"); // click_action 추가!
cs



이렇게 바꾸고 나니 백그라운드 상태에서도 설정해놓은 vibrate대로 진동도 잘온다!!


화면켜지는것까진 바라지도 않는다 


일단 사용자한테 알람이 왔다고 알리기만 하면 되니까



그렇다면 안드로이드 에서도


받는 부분의 메세지를 다르게 받을 필요가 있었다



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
public void onMessageReceived(RemoteMessage remoteMessage) {
        //추가한것
       // sendNotification(remoteMessage.getData().get("message"));
        
        // 이렇게 데이터에 있는걸 키값으로 뽑아 쓰면 된다.
        String title = remoteMessage.getData().get("title");
        String body = remoteMessage.getData().get("body");
        sendNotification(title, body);
    }
 
    private void sendNotification(String title, String body) {
        Intent intent = new Intent(this, MainActivity.class);
        intent.addFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP);
 
        PendingIntent pendingIntent = PendingIntent.getActivity(this0 /* Request code */, intent,
                PendingIntent.FLAG_ONE_SHOT);
 
        Uri defaultSoundUri= RingtoneManager.getDefaultUri(RingtoneManager.TYPE_NOTIFICATION);
        NotificationCompat.Builder notificationBuilder = new NotificationCompat.Builder(this)
                .setSmallIcon(R.mipmap.ic_launcher)
                .setContentTitle(title)
                .setContentText(body)
                .setAutoCancel(true)
                .setSound(defaultSoundUri)
                .setVibrate(new long[]{10001000})
                .setLights(Color.BLUE,1,1)
                .setContentIntent(pendingIntent);
        NotificationManager notificationManager =
                (NotificationManager) getSystemService(Context.NOTIFICATION_SERVICE);
        notificationManager.notify(0 /* ID of notification */, notificationBuilder.build());
 
    }
cs



이렇게 코드를 바꿔주면 된다


기존 코드에서 6,7번 라인과 11번읜 매개변수만 바꿔주면 끝!



후.. 이제 다시 화면도 켜지게 하는 방법을 찾아 떠나보도록 하자....

-------------------------------------------------------------------------------

방법 찾았음 ㅋ


2017/07/12 - [Yame Programmer/Android] - [안드로이드] FCM 화면 깨우기 화면 켜지게 하는 방법




 

+ Recent posts