-
And_181128Android 2018. 11. 28. 22:19
WebView
네이티브 앱 - java + XML(임베디드: 냉장고어플)
웹앱 - NO XML(m.naver.com): WebView
하이브리드 앱 - (70%이상)OS상관없이 사용하는 기능
화면 부분
https://cordova.apache.org/
https://ionicframework.com/
no Java
https://jquerymobile.com/
https://jquerymobile.com/download/
CDN을 사용한다 .
http://www.java2s.com/Tutorials/jQuery_Mobile/Example/Form/Create_login_form.htm
데모 로그인 폼
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type='text/javascript'
src='http://code.jquery.com/jquery-1.8.3.js'></script>
<script type="text/javascript"
src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.js"></script>
<link rel="stylesheet" type="text/css"
href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.css">
<script src ="index.js"></script>
</head><!-- w w w.j av a2 s . c om-->
<body>
<div id="page" data-role="page" data-theme="b">
<div data-role="content">
<h2>Login</h2>
<p align="right">
<a href="registration.html" id="showregistration">Don't have an
account? →</a>
</p>
<form method="post" id="loginForm">
<label for="password">Email:</label>
<input class="required" type="text" name="username" id="username"
placeholder="username@server.com">
<label for="password">Password:</label>
<input class="required" type="password" name="password"
id="password" placeholder="password">
<input type="button"
value="Login" id="submitButton" onClick="handleLogin()">
</form>
</div>
</div>
</body>
</html>iife 패턴
자바스크립트 클로저
https://opentutorials.org/course/743/6544
자바스크립트 arrow function개념
var app = app || {}
app = (()=>{ })();https://poiemaweb.com/es6-arrow-function
node.js
인클로저 운동
사유재산 => 영역
채팅 화면 UI
https://bootsnipp.com/snippets/featured/message-chat-box
single page application
index.js ->화면을 지우고 다시 만드는 개념
var app = app || {}
app = (()=>{//액티비티 같은 것
var init =()=>{//manifests 역할
onCreate();
};
var onCreate =()=>{//DB와 서버 역할 private
setContentView();
alert('click');
$('#submitButton').click(()=>{
$('#page').empty();
});//콜백함수 이벤트 리스너
};
var setContentView =()=>{//동적으로 화면을 구성하는 코드 private
};
return{init : init};//클로저 public
})();sublime text
에서 ctrl + a ctrl+ shift + L 로 커서를 오른쪽으로 밀고 싱글 쿼터
home키 두번 눌러서 싱글쿼터 후에 + 를 넣어 준다 .
이런식으로 페이지를 지우고 html 명령어로 새로운 페이지를
var app = app || {}
app = (()=>{//액티비티 같은 것
var init =()=>{//manifests 역할
onCreate();
};
var onCreate =()=>{//DB와 서버 역할 private
setContentView();
alert('click');
/*$('#sumitButton').click((=>{
$('#page').empty();
$('#page').html('<p>안녕</p>');
}));*/
$('#submitButton').click(()=>{
$('#page').empty();
$('#page').html(
'<div class="container">'
+'<h3 class=" text-center">Messaging</h3>'
+'<div class="messaging">'
+' <div class="inbox_msg">'
+' <div class="inbox_people">'
+' <div class="headind_srch">'
+' <div class="recent_heading">'
+' <h4>Recent</h4>'
+' </div>'
+' <div class="srch_bar">'
+' <div class="stylish-input-group">'
+'<input type="text" class="search-bar" placeholder="Search" >'
+' <span class="input-group-addon">'
+'<button type="button"> <i class="fa fa-search" aria-hidden="true"></i> </button>'
+' </span> </div>'
+' </div>'
+' </div>'
+' <div class="inbox_chat">'
+' <div class="chat_list active_chat">'
+' <div class="chat_people">'
+'<div class="chat_img"> <img src="https://ptetutorials.com/images/user-profile.png" alt="sunil"> </div>'
+' <div class="chat_ib">'
+'<h5>Sunil Rajput <span class="chat_date">Dec 25</span></h5>'
+'<p>Test, which is a new approach to have all solutions '
+' astrology under one roof.</p>'
+' </div>'
+' </div>'
+' </div>'
+' <div class="chat_list">'
+' <div class="chat_people">'
+'<div class="chat_img"> <img src="https://ptetutorials.com/images/user-profile.png" alt="sunil"> </div>'
+' <div class="chat_ib">'
+'<h5>Sunil Rajput <span class="chat_date">Dec 25</span></h5>'
+'<p>Test, which is a new approach to have all solutions '
+' astrology under one roof.</p>'
+' </div>'
+' </div>'
+' </div>'
+' <div class="chat_list">'
+' <div class="chat_people">'
+'<div class="chat_img"> <img src="https://ptetutorials.com/images/user-profile.png" alt="sunil"> </div>'
+' <div class="chat_ib">'
+'<h5>Sunil Rajput <span class="chat_date">Dec 25</span></h5>'
+'<p>Test, which is a new approach to have all solutions '
+' astrology under one roof.</p>'
+' </div>'
+' </div>'
+' </div>'
+' <div class="chat_list">'
+' <div class="chat_people">'
+'<div class="chat_img"> <img src="https://ptetutorials.com/images/user-profile.png" alt="sunil"> </div>'
+' <div class="chat_ib">'
+'<h5>Sunil Rajput <span class="chat_date">Dec 25</span></h5>'
+'<p>Test, which is a new approach to have all solutions '
+' astrology under one roof.</p>'
+' </div>'
+' </div>'
+' </div>'
+' <div class="chat_list">'
+' <div class="chat_people">'
+'<div class="chat_img"> <img src="https://ptetutorials.com/images/user-profile.png" alt="sunil"> </div>'
+' <div class="chat_ib">'
+'<h5>Sunil Rajput <span class="chat_date">Dec 25</span></h5>'
+'<p>Test, which is a new approach to have all solutions '
+' astrology under one roof.</p>'
+' </div>'
+' </div>'
+' </div>'
+' <div class="chat_list">'
+' <div class="chat_people">'
+'<div class="chat_img"> <img src="https://ptetutorials.com/images/user-profile.png" alt="sunil"> </div>'
+' <div class="chat_ib">'
+'<h5>Sunil Rajput <span class="chat_date">Dec 25</span></h5>'
+'<p>Test, which is a new approach to have all solutions '
+' astrology under one roof.</p>'
+' </div>'
+' </div>'
+' </div>'
+' <div class="chat_list">'
+' <div class="chat_people">'
+'<div class="chat_img"> <img src="https://ptetutorials.com/images/user-profile.png" alt="sunil"> </div>'
+' <div class="chat_ib">'
+'<h5>Sunil Rajput <span class="chat_date">Dec 25</span></h5>'
+'<p>Test, which is a new approach to have all solutions '
+' astrology under one roof.</p>'
+' </div>'
+' </div>'
+' </div>'
+' </div>'
+' </div>'
+' <div class="mesgs">'
+' <div class="msg_history">'
+' <div class="incoming_msg">'
+'<div class="incoming_msg_img"> <img src="https://ptetutorials.com/images/user-profile.png" alt="sunil"> </div>'
+' <div class="received_msg">'
+' <div class="received_withd_msg">'
+' <p>Test which is a new approach to have all'
+' solutions</p>'
+'<span class="time_date"> 11:01 AM | June 9</span></div>'
+' </div>'
+' </div>'
+' <div class="outgoing_msg">'
+' <div class="sent_msg">'
+' <p>Test which is a new approach to have all'
+' solutions</p>'
+'<span class="time_date"> 11:01 AM | June 9</span> </div>'
+' </div>'
+' <div class="incoming_msg">'
+'<div class="incoming_msg_img"> <img src="https://ptetutorials.com/images/user-profile.png" alt="sunil"> </div>'
+' <div class="received_msg">'
+' <div class="received_withd_msg">'
+' <p>Test, which is a new approach to have</p>'
+'<span class="time_date"> 11:01 AM | Yesterday</span></div>'
+' </div>'
+' </div>'
+' <div class="outgoing_msg">'
+' <div class="sent_msg">'
+' <p>Apollo University, Delhi, India Test</p>'
+'<span class="time_date"> 11:01 AM | Today</span> </div>'
+' </div>'
+' <div class="incoming_msg">'
+'<div class="incoming_msg_img"> <img src="https://ptetutorials.com/images/user-profile.png" alt="sunil"> </div>'
+' <div class="received_msg">'
+' <div class="received_withd_msg">'
+'<p>We work directly with our designers and suppliers,'
+'and sell direct to you, which means quality, exclusive'
+' products, at a price anyone can afford.</p>'
+'<span class="time_date"> 11:01 AM | Today</span></div>'
+' </div>'
+' </div>'
+' </div>'
+' <div class="type_msg">'
+' <div class="input_msg_write">'
+'<input type="text" class="write_msg" placeholder="Type a message" />'
+'<button class="msg_send_btn" type="button"><i class="fa fa-paper-plane-o" aria-hidden="true"></i></button>'
+' </div>'
+' </div>'
+' </div>'
+' </div>'
+' '
+' '
+'<p class="text-center top_spac"> Design by <a target="_blank" href="#">Sunil Rajput</a></p>'
+' '
+' </div></div>'
);
});//콜백함수 이벤트 리스너
};
var setContentView =()=>{//동적으로 화면을 구성하는 코드 private
};
return{init : init};//클로저 public
})();'Android' 카테고리의 다른 글
And_181203 아이오닉+앵귤러JS 세팅 (0) 2018.12.03 and_181130 (0) 2018.11.30 2018_11_27 구글맵사용_hybrid (0) 2018.11.27 폰으로 테스트 구동할시에 설정 (user permission) (0) 2018.11.26 람다 표현식에서 참조하는 지역 변수가 꼭 final이어야 하는 이유 (0) 2018.11.26
