=================================
=================================
=================================
출처: https://docs.microsoft.com/ko-kr/azure/mobile-engagement/mobile-engagement-bridge-webview-native-android
일부 모바일 앱은 앱 자체가 네이티브 Android 개발을 사용하여 개발되지만 화면의 일부 또는 전부가 Android WebView 내에서 렌더링되는 하이브리드 앱으로 설계됩니다. 이러한 앱 내에서 Mobile Engagement Android SDK를 계속 사용할 수 있으며, 해당 작업 방법이 이 자습서에 설명되어 있습니다. 아래 샘플 코드는 Android 설명서( 여기)를 기반으로 합니다. Android 설명서에서는 하이브리드 앱의 Webview에서 Android SDK를 통해 파이프하는 동안 이벤트, 작업, 오류 및 앱 정보에 대한 추적 요청을 시작할 수 있도록 이 문서화된 접근 방식을 사용하여 Mobile Engagement Android SDK의 자주 사용되는 메서드에 대해 동일한 기능을 구현하는 방법을 설명합니다.
- 먼저 시작 자습서 에 따라 Mobile Engagement Android SDK를 하이브리드 앱에 통합해야 합니다. 그러면
OnCreate메서드가 다음과 같이 표시됩니다.@Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); EngagementConfiguration engagementConfiguration = new EngagementConfiguration(); engagementConfiguration.setConnectionString("<Mobile Engagement Conn String>"); EngagementAgent.getInstance(this).init(engagementConfiguration); } - 이제 하이브리드 앱에 WebView가 표시된 화면이 있는지 확인합니다. 코드는 화면의
onCreate메서드에서 로컬 HTML 파일 Sample.html을 Webview에 로드하는 다음 코드와 유사합니다.private void SetWebView() { WebView myWebView = (WebView) findViewById(R.id.webview); myWebView.loadUrl("file:///android_asset/Sample.html"); } protected void onCreate(Bundle savedInstanceState) { ... ... SetWebView(); } - 이제 Android 설명서에 설명된
@JavascriptInterface접근 방식을 사용하여 자주 사용되는 몇 가지 Mobile Engagement Android SDK 메서드에 래퍼를 만드는 WebAppInterface라는 브리지 파일을 만듭니다.import android.content.Context; import android.os.Bundle; import android.util.Log; import android.webkit.JavascriptInterface; import com.microsoft.azure.engagement.EngagementAgent; import org.json.JSONArray; import org.json.JSONObject; public class WebAppInterface { Context mContext; /** Instantiate the interface and set the context */ WebAppInterface(Context c) { mContext = c; } @JavascriptInterface public void sendEngagementEvent(String name, String extras ){ EngagementAgent.getInstance(mContext).sendEvent(name, ParseExtras(extras)); } @JavascriptInterface public void startEngagementJob(String name, String extras ){ EngagementAgent.getInstance(mContext).startJob(name, ParseExtras(extras)); } @JavascriptInterface public void endEngagementJob(String name){ EngagementAgent.getInstance(mContext).endJob(name); } @JavascriptInterface public void sendEngagementError(String name, String extras ){ EngagementAgent.getInstance(mContext).sendError(name, ParseExtras(extras)); } @JavascriptInterface public void sendEngagementAppInfo(String appInfo){ EngagementAgent.getInstance(mContext).sendAppInfo(ParseExtras(appInfo)); } public Bundle ParseExtras(String input) { Bundle extras = new Bundle(); try { JSONObject jObject = new JSONObject(input); extras.putString(jObject.names().getString(0), jObject.get(jObject.names().getString(0)).toString()); } catch (Exception e) { e.printStackTrace(); } return extras; } } - 위 브리지 파일을 만든 후에는 이 파일이 Webview와 연결되었는지 확인해야 합니다. 그러려면
SetWebview메서드를 다음과 같이 편집해야 합니다.private void SetWebView() { WebView myWebView = (WebView) findViewById(R.id.webview); myWebView.loadUrl("file:///android_asset/Sample.html"); WebSettings webSettings = myWebView.getSettings(); webSettings.setJavaScriptEnabled(true); myWebView.addJavascriptInterface(new WebAppInterface(this), "EngagementJs"); } - 위 조각에서는 브리지 클래스를 Webview에 연결하기 위해
addJavascriptInterface를 호출했으며, 브리지 파일에서 메서드를 호출하기 위해 EngagementJs 라는 핸들을 만들었습니다. - 이제 assets이라는 폴더의 프로젝트에서 Sample.html이라는 파일을 만듭니다. Webview로 로드되는 이 브리지 파일에서 메서드를 호출합니다.
<!doctype html> <html> <head> <style type='text/css'> html { font-family:Helvetica; color:#222; } h1 { color:steelblue; font-size:22px; margin-top:16px; } h2 { color:grey; font-size:14px; margin-top:18px; margin-bottom:0px; } </style> <script type="text/javascript"> window.onerror = function(err) { log('window.onerror: ' + err); } send = function(inputId) { var input = document.getElementById(inputId); if(input) { var value = input.value; // Example of how extras info can be passed with the Engagement logs var extras = '{"CustomerId":"MS290011"}'; if(value && value.length > 0) { switch(inputId) { case "event": EngagementJs.sendEngagementEvent(value, extras); break; case "job": EngagementJs.startEngagementJob(value, extras); window.setTimeout( function() { EngagementJs.endEngagementJob(value); }, 10000 ); break; case "error": EngagementJs.sendEngagementError(value, extras); break; case "appInfo": EngagementJs.sendEngagementAppInfo({"customer_name":value}); break; } } } } </script> </head> <body> <h1>Bridge Tester</h1> <div id='engagement'> <h2>Event</h2> <input type="text" id="event" size="35"> <button onclick="send('event')">Send</button> <h2>Job</h2> <input type="text" id="job" size="35"> <button onclick="send('job')">Send</button> <h2>Error</h2> <input type="text" id="error" size="35"> <button onclick="send('error')">Send</button> <h2>AppInfo</h2> <input type="text" id="appInfo" size="35"> <button onclick="send('appInfo')">Send</button> </div> </body> </html> - 위 HTML 파일에 대해 유의할 사항은 다음과 같습니다.
- 이 파일은 이벤트, 작업, 오류, 앱 정보의 이름으로 사용할 데이터를 제공할 수 있는 입력 상자 집합을 포함합니다. 입력 상자 옆의 단추를 클릭하면 이 호출을 Mobile Engagement Android SDK로 전달하기 위해 브리지 파일에서 메서드를 호출하는 Javascript가 호출됩니다.
- 작업 방법을 보여 주기 위해 이벤트, 작업 및 오류의 몇 가지 정적 추가 정보에 대한 태그를 지정합니다. 이 추가 정보는 JSON 문자열로 전송됩니다.
WebAppInterface파일에서 구문 분석되어 AndroidBundle에 배치된 후 전송되는 이벤트, 작업 및 오류와 함께 전달됩니다. - Mobile Engagement 작업은 입력 상자에 지정한 이름으로 시작되며, 10초간 실행된 후 종료됩니다.
- Mobile Engagement 앱 정보 또는 태그는 입력 상자에 태그 값으로 입력한 값 및 정적 키로 'customer_name'과 함께 전달됩니다.
- 앱을 실행하면 다음이 표시됩니다. 이제 다음과 같은 테스트 이벤트의 이름을 제공하고 아래의 Send 를 클릭합니다.
- 이제 앱의 모니터링 탭으로 이동하면 이벤트 -> 세부 정보 아래에 전송한 정적 앱 정보와 함께 이 이벤트가 표시됩니다.
=================================
=================================
=================================
출처: http://hamait.tistory.com/370
이 글의 요약
- 로컬에 있는 웹 파일들을 불러와서 작업할때
웹뷰를 사용하는데 있어서 두드러지는 장점은 , 앱안에 필요한 웹 리소스들을 저장할수있다는것이다.
그것은 오프라인일때도 작업을 가능케 해주며, 로딩시간을 증진시킬것이다.
HTML, JavaScript, CSS 를 assets 디렉토리 (src/main/assets 등에 만듬)로부터 가져와보자.
주의: CSS 나 Javascript 를 참조할때 절대경로는 WebView 에서 작동하지 않는다. 다음과 같이 상대경로로 설정해야한다. ("/pages/somelink.html" -> "./pages/index.html" )
아래와 같이 로딩하자. ( 리모트에 있는 URL 을 읽어와서 작업하기 전에 전처리할것들을 이렇게 처리해도될듯)
mWebView.loadUrl("file:///android_asset/www/index.html"); ( assets 안에 www 만들었어도, 링크는 저렇게'android_asset' 해야한다.)
shouldOverrideUrlLoading 를 요렇게 하면 로컬페이지가 아닐경우 브라우저를 오픈한다.
public class MyAppWebViewClient extends WebViewClient { @Override public boolean shouldOverrideUrlLoading(WebView view, String url) { if(Uri.parse(url).getHost().length() == 0) { return false; } Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse(url)); view.getContext().startActivity(intent); return true; } }
레퍼런스 :
https://developer.chrome.com/multidevice/webview/gettingstarted
출처: http://hamait.tistory.com/370 [HAMA 블로그]
=================================
=================================
=================================
출처: http://devian7.tistory.com/158
HTML과 JavaScript를 이용한 WEB 기술 기반 개발 방안이
복잡해져가는 Client 개발의 새로운 방향으로 제시되고 있는 즈음...
별도의 웹플랫폼을 이용하지 않고, Web과 안드로이드 기술만을 이용한 하이브리드 어플을 개발해 보고자 한다.
우선 WebView 이용 방법은 잘 정리되어 있는 블로그를 참조하고
첫번째 이슈는 로컬 파일(HTML)을 로드 하는 방법....
1) html을 assets 디렉토리에 저장한다.
2) WebView.loadUrl("file:///android_asset/<파일명>"); 을 통해서 로드
실행해보면 간단하게 로컬 파일 로드....
출처: http://devian7.tistory.com/158 [데비안의 기억의 상자]
=================================
=================================
=================================
출처: http://je2ct.tistory.com/68
Android에서 WebView란
- TextView, Button과 같은 View 종류의 객체 입니다. 브라우저와 같은 역할을 할 수 있는 View로
직접 태그들을 삽입해서 보여주기가 가능하고, URL을 연결하여서도 가능한 View입니다.
아래는 개발하면서 힘들었던 부분에 대해서 계속해서 추가해 나갈 생각 입니다.
0. 퍼미션
웹뷰를 사용하기 위해선 가장 먼저 해놔야 할 것이 퍼미션이다.
물론 HTML만 data형식으로 웹뷰에 삽입해서 보여줘야 하는 경우는 아니지만..
웹뷰를 사용하는 이유는 왠만하면 통신을 하기 때문에 인터넷 권한이 필요하다.
<uses-permission android:name="android.permission.INTERNET"/>
1. Webview 할당
기존 View들과 마찬가지로 xml에서 작업한 것을 findViewById함수로 불러올 수 있습니다.
wv = (WebView)findViewById(R.id.ttttWebView);
2. 자바스크립트 가능
웹뷰가 기본적으로 자바스크립트가 안되게 되어 있기 때문에 Settings를 통해 JavaScript를 Enable해줍니다.
wv.getSettings().setJavaScriptEnabled(true);
3. 줌(Zoom)
요즘 들어 반응형 웹이 많아서 작은 화면에 맞는 Layout을 보여주는 웹도 많지만 그렇지 않은 홈페이지의 경우
확대가 엄청 되어서 보인다거나 축소가 엄청되어 보이는 경우가 많습니다.
기본적으로 Zoom기능이 되지 않아서 아래와 같은 코드가 필요합니다.
wv.getSettings().setSupportZoom(true);
wv.getSettings().setBuiltInZoomControls(true);
wv.getSettings().setDisplayZoomControls(false);
4. URL 접속
www.naver.com 같은 URL에 접속하기 위해서는 loadURL함수를 사용합니다.
wv.loadUrl(url);
5. HTML 출력
html태그들을 String으로 가지고 있을 경우 loadData(data, mimeType, encoding); 함수를 통해 사용합니다.
String data = "<h5>가나다라마</h5>";
wv.loadData(data, "text/html", "UTF-8");
5-1 O.S 버전별 HTML출력방법
안드로이드의 경우에 이상하게 4.0 미만 버전과 4.0이상 버전의 경우 loadData()함수의 사용방법이 다릅니다.
위의 방법처럼 'wv.loadData(data, "text/html", "UTF-8");' 방법도 있지만
wv.loadData(data, "text/html; charset=UTF-8", null); 방법으로도 사용 해야 합니다.
if (android.os.Build.VERSION.SDK_INT < android.os.Build.VERSION_CODES.ICE_CREAM_SANDWICH) {
// Android 4.0 미만 버전
wv.loadData(data, "text/html", "UTF-8");
Log.d("TTTT","Webview load < 4.0");
}
else{
// Android 4.1 이상 버전
wv.loadData(data, "text/html; charset=UTF-8", null, null);
Log.d("TTTT","Webview load >= 4.0");
}
6. 상대 주소 베이스 주소 설정하기
상대 주소를 처음엔 어떻게 대응할지 몰라서 String을 replace()함수를 이용해서 앞부분에 주소를 삽입했었는데...
그럴 필요 없이 안드로이드에서 이미 제공합니다.
아래는 5-1 방법처럼 O.S 버전별로 적용되게 코딩 해본 방법입니다.
if (android.os.Build.VERSION.SDK_INT < android.os.Build.VERSION_CODES.ICE_CREAM_SANDWICH) {
// Android 4.0 이하 버전
wv.loadDataWithBaseURL("http://sungho0459.blog.me/", data, "text/html", "UTF-8", null);
Log.d("TTTT","Webview load < 4.0");
}
else{
// Android 4.1 이상 버전
wv.loadDataWithBaseURL("http://sungho0459.blog.me/", data, "text/html; charset=UTF-8", null, null);
Log.d("TTTT","Webview load >= 4.0");
}
7. 웹뷰 WrapContent로 꽉차게 하기
Webview Fill WrapContents
웹뷰를 가변 사이즈(WrapContent)로 설정해서 불러올 웹페이지의 전체 사이즈 만큼 길게 하고 싶을 때 사용하는 방법입니다.
WebViewClient객체를 생성해서 설정해 줍니다. onPageFinished()함수를 오버라이드 해줍니다.
wv.setWebViewClient(new WebViewClient() {
@Override
public void onPageFinished(final WebView view, final String url) {
super.onPageFinished(view, url);
/*
* 화면꽉찬 WebView로 바꾸기
*
* invalidate를 안해주게 되면
* webview에 스크롤바만 생기게 되서 화면이 보기 안좋게 되어 버린다.
* 그러므로 꼭 invalidate를 해줘야 한다.
*/
wv.invalidate();
}
});
8. 링크 클릭시 연결 관리
링크 클릭시에 클릭한 url을 판단하여 추가적인 액션을 취할 수 있다.
wv.setWebViewClient(new WebViewClient() {
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
Log.d("TTTT","WebView load url:"+url);
if(url.startsWith("http:"))
{
Intent i = new Intent(mContext, ActivityCatchWebView.class);
i.putExtra("url", url);
i.putExtra("name", item.getP_Name());
startActivity(i);
return true;
}
return super.shouldOverrideUrlLoading(view, url);
}
});
9. 컨텐츠 사이즈 맞추기
웹 주소로 연결된 홈페이지가 PC버전 밖에 존재하지 않아서 모바일에서 보게 될때
컨텐츠 사이즈가 넘쳐서 확대되 보이는 경우가 존재합니다.
이럴 때 쓰는 코드가 아래의 코드지만, 최신버전 SDK에서는 지원하지 않는 함수가 되어 버렸습니다.
일단 땜빵용으로 쓰시라고 올려드립니다 ㅋㅋ;
wv.getSettings().setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN);
9-1. 컨텐츠 사이즈 맞추기 (API 4.4 Kitkat 이상)
킷켓 이상에서 부터는 LayoutAlhorithm.SINGLE_COLUMN이 지원하지 않는다고 한다.
그래서 가로 사이즈로 맞추기 위해선 아래의 코드를 사용하면 된다고 하는데 정작 제대로 동작하지 않는 경우가 많다.
wv.getSettings().setLoadWithOverviewMode(true);
10. 웹뷰의 뒤로가기
앱 내부에 있는 웹뷰가 아닌 다른 버튼을 클릭시 웹뷰의 히스토리를 거꾸로 가게 만들 수 있다.
wv.loadUrl() 혹은 클릭으로 인한 이동 등 모든 웹뷰에서 일어난 페이지 이동이 저장되어 있는데 이를 Back시킬 수 있는 함수가 있다.
wv.goBack();
11-1. 웹뷰의 히스토리를 알 수 있다.
웹뷰 내부의 페이지 주소가 바뀐 것을 모두 자동으로 저장되고 있다.
WebBackForwardList mWebBackForwardList = mWebView.copyBackForwardList();
11-2. 웹뷰의 히스토리의 인덱스
웹 뷰를 통해서 이동한 주소의 인덱스 가 현재 몇번째 인지 알 수 있다.
WebBackForwardList mWebBackForwardList = mWebView.copyBackForwardList();
mWebBackForwardList.getCurrentIndex();
11-3. 히스토리 인덱스를 이용한 URL 불러오기
인덱스를 통해서 히스토리 리스트로 부터 URL을 가져 올 수 있다.
WebBackForwardList mWebBackForwardList = mWebView.copyBackForwardList();
String historyUrl = mWebBackForwardList.getItemAtIndex(mWebBackForwardList.getCurrentIndex()-1).getUrl();
--------------------- 아래부터는 아직 적용해보지 않은 문제점들 -----------------------------
아래에 있는 리스트 중에서 참고가 될만한 자료가 있는 곳을 아시는 분은 링크 댓글로 달아주시면 이 게시글에 추가하도록 하겠습니다 ^^
1. 기타 폰트, 외부 폰트 적용 방법
2. 로컬 리소스 접근하기
http://sungho0459.blog.me/220284959137
출처: http://je2ct.tistory.com/68 [이또한 지나가리]
=================================
=================================
=================================
출처: http://androday.tistory.com/1
TITLE : Simple WebView TEST
Date : 04/11/2010
Writen by Dayyoung
Description :
This is Source that Excuate the WebBrowser or show the local file by webview
Download :
Reference : http://android-town.org/
웹뷰를 이용하여 웹브라우져를 실행시키거나 로컬HTML파일을 보여주는 소스
1. 메인 안드로이드 프로젝트 생성
2. main.xml 레이아웃 작성
3. 액티비티 작성
4. 실행하면 정상적인 웹뷰가 뜨지 않습니다.
5. Manifest.xml 에서 인터넷 permission을 허용한다.
6. 정상적으로 내장된 브라우져를 실행할 수 있습니다.
7. browser.loadData(“<meta http-equiv=’Content-Type’ content=’text/html; charset=utf-8′ /><html><body>Hello, 마이크!</body></html>”, “text/html”, “utf-8″); 추가하여 실시간 데이터 입력
8. asset 폴더에 test.htm 파일을 작성하여 로컬에서 호출해서 쓰는법
<참고자료>
(1) HTTP URL 지정 방법
browser = (WebView) findViewById(R.id.webkit);
browser.loadUrl(“http://m.naver.com“);
browser.getSettings().setJavascriptEnabled(true); // 자바스크립트 사용 시 설정
위의 경우에 인터넷 권한을 매니페스트 파일에 등록하고도 에뮬레이터에서 연결이 안되는 경우에는 단말의 네트워크 설정을 확인해 보시기 바랍니다.
Settings > Wireless&Networks > Airplane Mode 가 선택되어 있거나 할 경우 에뮬레이터에서 3G 연결 등이 안될 수 있습니다. 이 설정이 문제가 없고 에뮬레이터 상단에 3G 아이콘이 보이고 PC 자체가 인터넷에 연결 가능하면 위의 코드로 페이지가 보일 것으로 예상됩니다.
(2) 문자열 데이터 지정 방법
browser = (WebView)findViewById(R.id.webkit);
browser.loadData(“<meta http-equiv=’Content-Type’ content=’text/html; charset=utf-8′ /><html><body>Hello, 마이크!</body></html>”, ”text/html”, ”utf-8″);
위의 경우에 <meta> 태그를 이용해 charset을 utf-8 로 지정하면 한글을 볼 수 있습니다.
(3) 파일 지정 방법
hello.html 파일에 아래의 내용이 들어가 있을 경우,
<meta http-equiv=’Content-Type’ content=’text/html; charset=euc-kr’ />
<html>
<body>
Hello, 마이크!
</body>
</html>
- 프로젝트의 /assets 폴더에 위의 파일을 추가합니다.
- 아래 코드를 이용하여 로딩합니다.
- 파일에서는 <meta> 태그의 charset을 euc-kr 로 지정하면 한글을 볼 수 있습니다.
browser = (WebView) findViewById(R.id.webkit);
browser.loadUrl(“file:///android_asset/hello.html“);
출처: http://androday.tistory.com/1 [Androday.com]
=================================
=================================
=================================
기타 관련링크:
- http://mainia.tistory.com/5537
-
=================================
=================================
=================================
'스마트기기개발관련 > 안드로이드 개발' 카테고리의 다른 글
| [android] 안드로이드 WebView로 HTML5 하이브리드 앱 설정 개발 관련 (0) | 2018.03.31 |
|---|---|
| [android] 안드로이드 Assets 폴더 내에 html을 넣고 리소스,코드들 css, img, js 등등 를 상대경로로 사용하기 (3) | 2018.03.30 |
| [android] TextView 글자 크기 dp설정을 java코드로 설정하기 관련 (0) | 2018.03.14 |
| [android] 안드로이드 폰트사이즈, 폰트사이즈 고정하기 관련 (0) | 2018.03.14 |
| [android] Android 진동, 벨소리 재생, 미디어 재생, 내장 스피커 재생 관련 (0) | 2018.03.12 |
댓글 영역