[jQuery] 제이쿼리에서 아이템 동적 추가후 스타일 적용 문제(select, listview 등)

Posted by Find my true self Fimtrus
2017. 5. 11. 09:04 Programming/Web

리스트뷰에만 해당하는 것은 아니고, 모든 jquery 위젯에 해당하는 문제인데,

아이템들을 동적 추가하면 jquery에서 자동으로 추가하는 class 들이 해당 dom에 추가되지 않는다.

jquery는 html 화면을 불러들일 때, html을 파싱해서 각각 태그에 맞게 클래스를 추가하게 된다.

dom을 동적으로 추가할 경우, 이 로직을 타지 않기 때문에 jquery 스타일이 적용되지 않는다.

이 문제를 해결하기 위해서는 1줄만 추가해주면 된다.

- listview
$jqueryObject.listview('refresh')

- select
$jqueryObject.selectmenu('refresh')


동적 추가후 화면이 제대로 적용이 되지 않는다면!

refresh를 꼭 해주자!


이 댓글을 비밀 댓글로

[Android] LinearLayout 에 View 동적 추가시 weight 주는 방법

Posted by Find my true self Fimtrus
2017. 4. 13. 10:27 Programming/Android

linearlayout에 하위뷰를 추가해야 하는 경우가 있다.


여러 개가 추가될 경우 좌우 또는 상하 간격을 동일하게 주기 위해 weight 를 줘야 하는데, ViewGroup을 만들어 Parent 뷰로 묶지 않는 이상


xml 단에서 아무리 weight를 줘도, 제대로 동작하지 않는다.


이 문제를 해결하기 위해서는 뷰를 추가할 때 아래와 같이 LayoutParams를 함께 적용 시켜 주면 된다.



LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.MATCH_PARENT);
        layoutParams.weight = 1;
        viewHolder.linearLayout.addView(this.inflater.inflate(R.layout.view_test_item, null, false), layoutParams);
        viewHolder.linearLayout.addView(this.inflater.inflate(R.layout.view_test_item, null, false), layoutParams);
        viewHolder.linearLayout.addView(this.inflater.inflate(R.layout.view_test_item, null, false), layoutParams);
        viewHolder.linearLayout.addView(this.inflater.inflate(R.layout.view_test_item, null, false), layoutParams);
        viewHolder.linearLayout.addView(this.inflater.inflate(R.layout.view_test_item, null, false), layoutParams);
이 댓글을 비밀 댓글로

[Android] 안드로이드 TextView 글자에 색깔 넣기. 부분적으로 색깔 넣기. html 스타일 적용.

Posted by Find my true self Fimtrus
2014. 6. 24. 16:49 Programming/Android

Spannable 객체를 이용할 경우.


24와 37은 인덱스 값. 24~37 사이에 있는 글자만 변경된다.

Spannable descriptionString = (Spannable) mDescriptionTextView.getText();
descriptionString.setSpan(new StyleSpan(Typeface.BOLD), 24, 37, SpannableString.SPAN_EXCLUSIVE_EXCLUSIVE);
descriptionString.setSpan(new ForegroundColorSpan(getResources().getColor(R.color.guide_message_highlight)), 24, 37, SpannableString.SPAN_EXCLUSIVE_EXCLUSIVE);
		



Html을 이용할 경우.


html에 대해 잘 아시는 분들이면 HTML을 이용하여 글자를 꾸미는게 더 효과적일 수 있다.

(단, 기본적인 것들은 정상적으로 보이지만, 몇몇 태그, css들은 웹과 동일하게 나오지는 않는다)

//HTML
mDescriptionTextView.setText( Html.fromHtml("<div>Te<span style="color:red;">st</span> Code</div>") )"
//
이 댓글을 비밀 댓글로

[Android] TextView, 글자에 외곽선(Border, outline) 넣기

Posted by Find my true self Fimtrus
2014. 6. 24. 16:41 Programming/Android

안드로이드에서 외곽선을 넣기 위해선 TextView를 Customizing해야한다.(다른방법이 있을 수도..;)


TextView를 상속받아서 뷰를 조금 수정해야하고,


편하게 사용하기 위해 attr을 선언해주면 된다.


먼저 TextView를 상속 받은 OutlineTextView를 만든다.


public class OutlineTextView extends TextView {

	private boolean hasStroke = false;
	private float mStrokeWidth = 0.0f;
	private int mStrokeColor;

	public OutlineTextView(Context context) {
		super(context);
	}

	public OutlineTextView(Context context, AttributeSet attrs) {
		super(context, attrs);
		initView(context, attrs);
	}

	public OutlineTextView(Context context, AttributeSet attrs, int defStyle) {
		super(context, attrs, defStyle);
		initView(context, attrs);
	}

	@Override
	protected void onDraw(Canvas canvas) {
		if (hasStroke) {
			ColorStateList states = getTextColors();
			getPaint().setStyle(Style.STROKE);
			getPaint().setStrokeWidth(mStrokeWidth);
			setTextColor(mStrokeColor);
			super.onDraw(canvas);

			getPaint().setStyle(Style.FILL);
			setTextColor(states);
		}
		super.onDraw(canvas);
	}

	private void initView(Context context, AttributeSet attrs) {
		TypedArray typeArray = context.obtainStyledAttributes(attrs, R.styleable.OutlineTextView);
		hasStroke = typeArray.getBoolean(R.styleable.OutlineTextView_textStroke, false);
		mStrokeWidth = typeArray.getFloat(R.styleable.OutlineTextView_textStrokeWidth, 0.0f);
		mStrokeColor = typeArray.getColor(R.styleable.OutlineTextView_textStrokeColor, 0xffffffff);
	}
}


그리고 attr을 선언해준다. xml 파싱과정에서 관련된 value들을 받기 위해선 필수!

(\values\attrs.xml 에 선언해주면 된다.)


아래와 같이 선언해 놓으면 OutlineTextView를 사용할 때 해당 attribute를 사용할 수 있게 된다.

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="OutlineTextView">
        <attr name="textStroke" format="boolean"/>
        <attr name="textStrokeWidth" format="dimension"/>
        <attr name="textStrokeColor" format="color"/>
    </declare-styleable>
</resources>


마지막으로 layout에 추가해주면 된다.

* xmlns의 이름 부분에는 xml에서 사용할 이름을 지정하면 된다.

* 패키지명은 반드시 앱 패키지 명과 동일해야 한다.

<linearlayout xmlns:android="http://schemas.android.com/apk/res/android" 
	xmlns:@@이름@@="http://schemas.android.com/apk/res/@@ 패키지명 @@" 
	android:layout_width="fill_parent" 
	android:layout_height="fill_parent" 
	android:orientation="vertical">
	<com.fimtrus.flicktalk.view.OutlineTextView
		android:id="@+id/outlineTextView1" 
		android:layout_width="match_parent" 
		android:layout_height="wrap_content" 
		android:gravity="center_horizontal" 
		android:layout_above="@+id/relativeLayout1" 
		android:layout_centerhorizontal="true" 
		android:textsize="50sp" 
		android:layout_marginbottom="20dp" 
		android:text=" " 
		android:textcolor="@color/white" 
		android:padding="5dp" 
		android:singleline="false" 
		@@이름@@:textstroke="true" 
		@@이름@@:textstrokecolor="#000000" 
		@@이름@@:textstrokewidth="7.0">
	</com.fimtrus.flicktalk.view.OutlineTextView>
</linearlayout>


이 댓글을 비밀 댓글로
    • 2015.12.11 14:10
    비밀댓글입니다
  1. 조금더 보태자면 <attr name="textStrokeWidth" format="float">
    textStrokeWidth를 dimension으로 변경하고,
    mStrokeWidth = typeArray.getFloat(R.styleable.OutlineTextView_textStrokeWidth, 0.0f);
    getFloat -> getDimension으로 하시면 dp 값으로 적용 가능합니다.

[Android] 안드로이드에서 httpPost multiparts로 전송하기(멀티파트, 멀티파츠)

Posted by Find my true self Fimtrus
2014. 6. 24. 16:10 Programming/Android

안드로이드에서는 httpClient의 버전이 낮아 multiparts를 지원하지 않는다.


보내고 싶다면 httpConnection을 열고, buffer를 통해서 전송해야 하는데,


만들기가 여간 귀찮은 것이 아니다.


apache에서 httpComponents를 제공하고 있는데, 해당 라이브러리를 사용하면,


별다른 구현을 하지 않더라도 multiparts로 전송할 수 있게 된다.


물론 약 1메가 정도의...라이브러리가 추가되긴 하지만..



아파치 사이트로 이동하여 httpClient 최신버전을 다운받는다.(전 4.3.X 버전 사용중)


Download Page(Click)


당연히 jar 파일이 필요하기 때문에 binary를 클릭해서 받아준다.




다운후 압축을 해제하게 되면, examples, lib, tutorial 폴더가 나오는데,


lib에 있는 jar파일들을 안드로이드 프로젝트의 libs 폴더로 복사하면 된다.


이제 multiparts로 전송하기 위한 준비는 다 되었고, 아래의 코드를 이용하여 보내면 된다.


//Multipart 객체를 선언한다.
MultipartEntityBuilder builder = MultipartEntityBuilder.create() //객체 생성...
	.setCharset(Charset.forName("UTF-8")) //인코딩을 UTF-8로.. 다들 UTF-8쓰시죠?
	.setMode(HttpMultipartMode.BROWSER_COMPATIBLE); 
builder.addPart("content",  new FileBody(== 파일객체 ==) ); //빌더에 FileBody 객체에 인자로 File 객체를 넣어준다.
builder.addPart("testKey",  "testData" ); //스트링 데이터..

HttpClient client = AndroidHttpClient.newInstance("Android");

HttpPost post = new HttpPost(== url ==); //전송할 URL 
try {
	post.setEntity(builder.build()); //builder.build() 메쏘드를 사용하여 httpEntity 객체를 얻는다.
	HttpResponse httpRes;
	httpRes = client.execute(post);
	HttpEntity httpEntity = httpRes.getEntity();
	if (httpEntity != null) {
		response = EntityUtils.toString(httpEntity);
	}
} catch (UnsupportedEncodingException e) {
} catch (ClientProtocolException e1) {
} catch (IOException e1) {
} catch (ParseException e) {
}


위와 같이 전송하게 되면, 내부적으로 Stream을 이용하여 서버로 전송하게 되어


따로 작업을 하지 않더라도 multiparts 형태로 전송할 수 있다.


이 댓글을 비밀 댓글로
    • huhu
    • 2015.12.19 22:16
    예제 소스 파일좀 부탁드리겠습니다. 아무리해도 적용이 안됩니다.;

[Android, Hybrid] JavascriptInterface 사용법.

Posted by Find my true self Fimtrus
2014. 6. 24. 14:21 Programming/Hybrid App

아이폰의 경우 Native와 Web간의 통신을 위해서 scheme를 이용하지만 


안드로이드에서는 JavascriptInterface를 이용하여 더욱 편하게 데이터를 주고 받을 수 있다.

예제로 간단한 Toast를 보여주는 인터페이스를 만들어 보겠다.


먼저 웹뷰에 추가 시킬 JavascriptInterface 클래스를 만든다.


public class WebViewInterface {

	private WebView mAppView;
	private Activity mContext;

	/**
	 * 생성자.
	 * @param activity : context
	 * @param view : 적용될 웹뷰
	 */
	public WebViewInterface(Activity activity, WebView view) {
		mAppView = view;
		mContext = activity;
	}
	/**
	 * 안드로이드 토스트를 출력한다. Time Long.
	 * @param message : 메시지
	 */
	@JavascriptInterface
	public void toastLong (String message) {
		Toast.makeText(mContext, message, Toast.LENGTH_LONG).show();
	}
	/**
	 * 안드로이드 토스트를 출력한다. Time Short.
	 * @param message : 메시지
	 */
	@JavascriptInterface
	public void toastShort (String message) { // Show toast for a short time
		Toast.makeText(mContext, message, Toast.LENGTH_SHORT).show();
	}
}

안드로이드 4.3.X 젤리빈 이상부터 "@JavascriptInterface" annotation을 붙이지 않을 경우

해당 메쏘드는 동작하지 않기 때문에 반드시 붙여줘야한다.(킷캣이상인가??;;)



그리고 Activity의 onCreate 혹은 Fragment의 onCreateView 에서 loadUrl이 불리기전에

WebView 객체의 addJavascriptInterface 메쏘드를 이용해 연결시켜 주면 바로 사용할 수 있다.

무지 간단하다!

public class MainActivity {

	private WebView mWebView = null;
	private WebViewInterface mWebViewInterface;

	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		getWindow().requestFeature(Window.FEATURE_PROGRESS);
		setContentView(R.layout.activity_main);
		mWebView = (WebView) findViewById(R.id.webview); //웹뷰 객체
		mWebViewInterface = new WebViewInterface(MainActivity.this, mWebView); //JavascriptInterface 객체화
		mWebView.addJavascriptInterface(mWebViewInterface, "Android"); //웹뷰에 JavascriptInterface를 연결
	}
}

addJavascriptInterface를 보면 인터페이스 객체와, 웹에서 사용될 객체 명을 넣어준다.

위와 같이 연결을 하게 되면, 웹페이지에 window.Android 객체가 생성되고, WebViewInterface에 정의된

모든 메쏘드를 사용할 수 있게 된다.


웹페이지에 아래와 같이 입력하게 되면, 안드로이드 Toast를 통해 "JavascriptInterface Test"라는 문구가 보이게 된다.

window.Android.toastShort( "JavscriptInterface Test" );


이 댓글을 비밀 댓글로

[Web] window.print() 로 원하는 영역 인쇄하기.

Posted by Find my true self Fimtrus
2014. 6. 19. 10:47 Programming/Web

window.print 함수를 사용하여 인쇄할 때의 영역은 

document.body 의 innerHTML이 잡히게 된다.

흔히 많이 사용하는 것중에 하나로,

원하는 영역의 html을 body에 넣어서 인쇄하는 방법이다.

하지만 single page 기반이나, jsp를 사용하지 않는 순수한 html의 경우

이방법을 사용하였을 때, 페이지가 거침없이 깨지는 경우가 대부분이다.

그래서 새창을 통해 인쇄하는 방법을 사용한다.


먼저 팝업 윈도우하나를 선언한다.

이때 새창이 생기게 되고, 정상적으로 열렸다면 popupWindow에는

새창에 대한 window 객체가 들어오게 된다. 팝업 차단으로 인해 열리지 않았을 경우

popupWindow 에는 undefined가 리턴되게 된다.



var popupWindow = window.open("", "_blank" );


대부분 개발자들은 jquery를 사용한다.(아마도??)

그 중에 jquery ui를 쓰는 사람도 적지 않다.

그러면 당연히 새창에서도 화면 구성에 필요한 js, css 등

plugin 들을 importing 해줘야 정상적으로 화면이 뜰 것이다.

그래서 아래의 코드로 헤더를 추가해준다.

- write 함수의 경우 document 객체에 직접 html을 추가해주는 역할을 한다.

- $('head')를 통해 헤더 객체를 얻고, html 함수를 사용하여 모든 헤더정보를 불러온다.



popupWindow.document.write( "<헤드태그>"); //head 제대로 쓰니까..티스토리 에러가...
popupWindow.document.write( $('head').html() );
popupWindow.document.write( '<헤드태그 닫기>' ); 


헤더를 추가한 후, 실제 표시될 컨텐츠를 추가해주면

새창에 원하는 컨텐츠가 추가되게 된다.


var $table = $("화면에 표시할 컨텐츠");

popupWindow.document.write( '<바디태그>' );
popupWindow.document.write( '
' ); popupWindow.document.write( $table.html() ); popupWindow.document.write( '
<바디태그 닫기>' );


컨텐츠 추가 완료 후 document를 close 시킨 후(반드시 close 함수를 호출해야한다)

새 창에서 print 함수를 호출해주면 인쇄창이 뜬다.


popupWindow.document.close();

//popupWindow 의 print 이다. 가끔 document.print 를 치시는 분들이..
popupWindow.print();


위의 코드들은 크롬 기반에서 테스트 하였으며, 익스플로러의 경우 정상적으로 동작하지 않을 수 있다.

이 댓글을 비밀 댓글로

My UserAgent 유저에이전트 알아내기

Posted by Find my true self Fimtrus
2014. 5. 8. 14:18 Programming

한줄 끝!

window.navigator.userAgent



UserAgent is :


이 댓글을 비밀 댓글로

[HTML5] audio, video tag 지원 유무 확인

Posted by Find my true self Fimtrus
2014. 4. 28. 18:17 Programming/Hybrid App

if ( document.createElement("video").canPlayType ) {console.log("true")} //지원
else { console.log( "false" );} //미지원
이 댓글을 비밀 댓글로

[Javascript] input file 이미지 미리보기, 썸네일 보기, Thumbnail

Posted by Find my true self Fimtrus
2013. 7. 10. 14:11 Programming/Hybrid App
/**
  * 이미지 썸네일을 불러오는 function
  * @param html : input 필드의 dom을 인자로 받는다. 물론 타입은 file
  * @param $target : 불러온 이미지를 적용할 jquery 객체.
  **/
function getThumbnail(html, $target) {
	if (html.files && html.files[0]) {
		var reader = new FileReader();
		reader.onload = function (e) {
			$target.css('background-image', 'url(\"' + e.target.result + '\")');
		}
		reader.readAsDataURL(html.files[0]);
	}
}


냉무.
이 댓글을 비밀 댓글로
  1. 안녕하세요 혹시 위 소스 사용법좀 알수있을까요?
    아래와 같이 코딩해서 테스트해보니 html.files 에서 에러가 발생하더라구여
    dom 객체를 어떤식으로 넘겨 주어야 하나요?
    감사합니다. 좋은하루되세요.
    ===============================================
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    function getThumbnail(html, $target) {
    if (html.files && html.files[0]) {

    var reader = new FileReader();
    reader.onload = function (e) {
    $target.css('background-image', 'url(\"' + e.target.result + '\")');
    }
    reader.readAsDataURL(html.files[0]);
    }
    }
    function filechange(){
    var $target = $("#test");
    var html = document.getElementById("file1");
    getThumbnail(html,$target);

    }
    </script>
    <div id="test"></div>
    <input id="file1" type="file" onchange="javascript:filechange();">
    • 제가 이제 봤네요...한동안 너무 바쁘게 지내서 블로그를 돌볼 시간이 없었어요.

      해결하셨다고 생각하지만 답변드릴께요.

      getThumbnail 이라는 function은 두개의 인자를 받습니다.

      첫번째는 input tag의 input document 객체, 즉 document.querySelector('input') 하였을때 나오는 객체를 말합니다.
      file dom을 말하는거죠..
      두번째인자인 target은 jquery 객체를 말하는건데....
      소스 보시면 알겠지만 읽어 들인 파일의 thumbnail을 표시할 객체입니다.
      img tag일수도 있고, background를 주기 위한 division일 수도 있습니다.
      저는 division에 background-image로 적용하였습니다.

      결론을 말씀드리면, html은 input tag의 dom 객체를 넘기면 됩니다.

      더 궁금하신게 있으시다면 답변바랍니다.