특강 6일차 (오전) - HTML localstorage, 크로스도메인 AJAX, 센차터치

2015. 1. 12. 09:41

HTML 내장 DB - sqlite3

01.html

소스코드 참고

openDatabase = 데이터베이스 검사한후 데이터베이스가 존재하면 생성하지 않음

Init작업을 했는데 왜 또 Init을 하는지

크로스 도메인 처리

서버가 다르면 보안규칙에 위배되어 AJAX 통신이 되지 않는다

AJAX는 기보적으로 다른 서버와의 통신이 안된다

다른서버와의 통신은 JSONP로만 데이터로만 가능하다.

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
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
<html>
<head>
<meta charset="UTF-8">
<title>jQuery Mobile</title>
 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="../mobile/jquery.mobile-1.4.5.min.css">
<script type="text/javascript" src="../mobile/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="../mobile/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript">
//기존 JSON방식
/*     $(function(){
        $.ajax({
            type:'GET',
            url:'jqm_nojsonp.jsp',
            dataType:'json',
            success:function(data){
                $('#item_list').empty();
                $.each(data, function(index, item){
                    var str='';
                    str += '<li>';
                    str += '<a href="#">';
                    str += '<h3>' + item.code +' :' + item.name + '</h3>';
                    str += '<p> 수량' + item.quantity + ', 가격 ' + item.price + '</p>';
                    str += '</a>';
                    str += '</li>';
                    
                    $('#item_list').append(str);
                    
                });
                
                //리스트뷰 작업이 완료되었으면 리스트뷰를 refresh
                $('#item_list').listview('refresh');
            }        
        });
    }); */
 
    /* 
        ajax 사용시 크로스 도메인의 경우 JSONP을 이용해야 함.
        보안을 위해 소스 근원지가 같을 때만 데이터 통신을 허용하기 때문에 
        데이터를 호출하는 도메인과 데이터를 반환하는 도메인이 일치해야 함
        JSONP(JSON with PAdding) : 보안 정책에 부합하면서 악성코드를 
        막고 오픈 API들의 서비스도 사용할수 있도록 JSONP 형시그을 사용해서 
        데이터를 주고 받음 
        
    */
    //JSONP형식
    $(function(){
        $.ajax({
            type:'GET',
            url:'http://dragonzone.cafe24.com/jqm_jsonp.jsp',
            dataType:'jsonp',
            //Jquery 버전에 따라 jsoncCallback 으로 인식할 수 있음
            /* jsonp:'dragonp', */
            jsonpCallback: 'dragonp',
            success:function(data){
                $('#item_list').empty();
                $.each(data, function(index, item){
                    var str='';
                    str += '<li>';
                    str += '<a href="#">';
                    str += '<h3>' + item.code +' :' + item.name + '</h3>';
                    str += '<p> 수량' + item.quantity + ', 가격 ' + item.price + '</p>';
                    str += '</a>';
                    str += '</li>';
                    
                    $('#item_list').append(str);
                    
                });
                
                //리스트뷰 작업이 완료되었으면 리스트뷰를 refresh
                $('#item_list').listview('refresh');
            }        
        });
    });
</script>
 
<body>
    <!-- jQueryMobile 에서 페이지 만드는 첫번째 방법  -->
    
    <!-- 첫번째 페이지 -->
    <div data-role="page" id="first_page">
        <!-- header  -->
        <div data-role="header" data-position="fixed">
            <h1>JSONP 처리</h1>
            <!-- 두번째 페이지로 넘어가지만 창이 하나 뜬 느낌을 주고 싶을떄 -->            
        </div>
        
        <!-- 내용  -->        
        <div role="main" class="ui-content">
            <ul data-role="listview" id="item_list" data-inset="true"> 
                
            </ul>
        </div>    
 
        
        <!-- footer  -->
        <div data-role="footer" data-position="fixed">
            <h1>화면 하단</h1>
        </div>    
    </div>
 
</body>
 
</html>
Colored by Color Scripter
cs

센차 터치

JavaScript로 HTML도 처리하는 방식

sencha-touch-all 모든 라이브러리

sencha-touch - 필요할떄마다 라이브러리 부르는 형식

대부분의 예제에서 쓰일 기본 HTML 레이아웃 코드

app.js 부분만 파일명에 따라 교체해주면 된다

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>SenchaTouch</title>
 
<link rel="stylesheet" type="text/css" href="../touch/resources/css/sencha-touch.css">
 
<script type="text/javascript" src="../touch/sencha-touch-all-debug.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body>
    
</body>
</html>
Colored by Color Scripter
cs

센차 터치 기본 코드 양식

1
2
3
4
5
6
7
8
9
10
11
12
13
Ext.application({
    name:'Myapp',
    launch:function(){
 
        var rootPanel = Ext.create('Ext.Panel', {
            //Ext.viewport.add(panel) 대신 아래 fullscreen:true 로 대체
            fullscreen:true,
            items:[panel]
                 
        });
 
    }
});
Colored by Color Scripter
cs

app.js

1
2
3
4
5
6
7
8
9
10
11
//브라우저가 렌더링하여 HTML 생성
//초기화 코드
Ext.application({
    //웹앱의 이름을 지정
    name:'MyApp',
    launch:function(){
        alert('launch-run');        
    }
});
 
 
cs

app2.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
Ext.application({
    name:'MyApp',
    launch:function(){
        //패널 생성                이름        옵션
        var panel = Ext.create('Ext.Panel', {
            html:'<br><br><div align="center">Hello World</div>',
            style:'background-color:#ffff00'
        });
        //뷰포트는 기본적으로 비어있어서 컴포넌트를 추가하면 화면을 꽉 채움 
        Ext.Viewport.add(panel);
    }
});
 
 
Colored by Color Scripter
cs

app3.js

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
 
Ext.application({
    name:'Myapp',
    launch:function(){
        var top = Ext.create('Ext.Panel', {
            //위치 지정
            docked: 'top',
            style: 'background-color:blue; font-size:40px',
            html:'TOP'
            
        });        
        var bottom = Ext.create('Ext.Panel', {
            docked:'bottom',
            style:'background-color:green;font-size:40px',
            html:'<font color="yellow">BOTTOM</font>'
        });        
        var panel = Ext.create('Ext.Panel', {
            //Ext.viewport.add(panel) 대신 아래 fullscreen:true 로 대체
            fullscreen:true,
            items:[top, bottom],
            html:'Panel 바탕입니다. <br>이곳에 글자가 쓰여집니다.' +
                 '<br><font color="red">이제 시작해 볼까요?</font>'+
                 '<br><br><br><div align="center"><img src="./image/user.png" width="60" height="60"></div>'
        });
        //
        //Ext.Viewport.add(panel);
    }
});
 
 
Colored by Color Scripter
cs

app4.js

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
Ext.application({
    name:'Myapp',
    launch:function(){
        var dockedItem1 = Ext.create('Ext.Panel', {
            //위치 지정
            docked: 'top',
            style: 'background-color:red;',
            html:'top'
            
        });
        
        var dockedItem2 = Ext.create('Ext.Panel', {
            //위치 지정
            docked: 'left',
            style: 'background-color:gray;',
            html:'left'
                
        });
        
        var dockedItem3 = Ext.create('Ext.Panel', {
            //위치 지정
            docked: 'bottom',
            style: 'background-color:yellow;',
            html:'bottom'
            
        });    
        
        var dockedItem4 = Ext.create('Ext.Panel', {
            //위치 지정
            docked: 'right',
            style: 'background-color:green;',
            html:'right'
            
        });    
 
        var rootPanel = Ext.create('Ext.Panel', {
            //Ext.viewport.add(panel) 대신 아래 fullscreen:true 로 대체
            fullscreen:true,
            items:[dockedItem1, dockedItem2, dockedItem3, dockedItem4],
            html:'내용이 보여짐'
                 
        });
        //
        //Ext.Viewport.add(panel);
    }
});
 
 
Colored by Color Scripter
cs

app5.js

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
 
Ext.application({
    name:'Myapp',
    launch:function(){
        
        var panel = Ext.create('Ext.Panel',{
            style:'background-color:#00ff00',
            //html 속성으로 지정하기에 복잡한 내용은 html 문서의 body 부분에 
            //지정하고 id를 부여해 호출 가능
            //HTML구조가 복잡하기때문에 아래와 같은 경우 많음
            contentEl:'panelContent'
        });
        
 
        var rootPanel = Ext.create('Ext.Panel', {
            //Ext.viewport.add(panel) 대신 아래 fullscreen:true 로 대체
            fullscreen:true,
            items:[panel]
                 
        });
        //
        //Ext.Viewport.add(panel);
    }
});
 
 
Colored by Color Scripter
cs

'App Development > Hybrid Programming' 카테고리의 다른 글

특강 7일차 (오후) - 센차터치 (0)	2015.01.13
특강 7일차 (오전) - 센차터치 (0)	2015.01.13
특강 5일차 (오후) - JQuery Mobile (0)	2015.01.09
특강 5일차 (오전) - JQuery Mobile (0)	2015.01.09
특강 4일차 (오후) - JQuery Mobile (0)	2015.01.08

Software Engineer Ethan

특강 6일차 (오전) - HTML localstorage, 크로스도메인 AJAX, 센차터치

'App Development > Hybrid Programming' 카테고리의 다른 글

+ Recent posts

티스토리툴바