نمایش نتیجه اجرای کد HTML در یک activity ، با WebView در برنامه نویسی اندروید
نمایش نتیجه اجرای کد HTML در یک activity ، با WebView در برنامه نویسی اندروید
در این آموزش، یک برنامه اندروید می سازیم که اولین صفحه آن (activity اصلی)، یک WebView است که برای مشاهده نتیجه اجرای یک سری کد HTML به کار می رود. دقت کنید که هیچ فایلی برای کدهای HTML ، به کار نخواهیم برد و کدهای HTML را درون خود فایل java مربوط به activity می نویسیم.
در برنامه eclipse ، ابتدا یک پروژه اندروید با نام iran-eng.com_WebView_HTML می سازیم (نام package را برابر com.iran-eng.webview_html قرار می دهیم. نام activity اصلی را برابر MainActivity انتخاب می کنیم و فایل xml متناظر آن را هم، activity_main قرار می دهیم).
ابتدا فایل activity_main.xml را باز می کنیم. این فایل، به صورت گرافیکی، همانند شکل زیر می باشد :
TextView موجود در فایل xml را حذف می کنیم و سپس، مطابق گزینه های مشخص شده در شکل زیر، یک WebView را به درون فایل xml وارد می کنیم :
شکل حاصل، به صورت زیر خواهد بود :
WebView را بزرگتر می کنیم (با کشیدن مرزهای آن) :
در properties مربوط به TextView ، نگاه می کنیم تا ببینیم id مربوط به TextView چیست :
بنابراین id مربوط به TextView ، برابر webView1 می باشد.
خوب، اکنون فایل MainActivity.java که همان activity اصلی می باشد را باز می کنیم. کدهای آن به صورت زیر می باشد :
کد:
[COLOR=#000000][FONT=Tahoma][FONT=monospace][B]package[/B] [COLOR=#006699]com.iran-eng.webview_html[/COLOR][COLOR=#339933];[/COLOR]
[B]import[/B] [COLOR=#006699]android.os.Bundle[/COLOR][COLOR=#339933];[/COLOR]
[B]import[/B] [COLOR=#006699]android.app.Activity[/COLOR][COLOR=#339933];[/COLOR]
[B]import[/B] [COLOR=#006699]android.view.Menu[/COLOR][COLOR=#339933];[/COLOR]
[B]public[/B] [B]class[/B] MainActivity [B]extends[/B] Activity [COLOR=#009900]{[/COLOR]
@Override
[B]protected[/B] [COLOR=#000066][B]void[/B][/COLOR] onCreate[COLOR=#009900]([/COLOR]Bundle savedInstanceState[COLOR=#009900])[/COLOR] [COLOR=#009900]{[/COLOR]
[B]super[/B].[COLOR=#006633]onCreate[/COLOR][COLOR=#009900]([/COLOR]savedInstanceState[COLOR=#009900])[/COLOR][COLOR=#339933];[/COLOR]
setContentView[COLOR=#009900]([/COLOR]R.[COLOR=#006633]layout[/COLOR].[COLOR=#006633]activity_main[/COLOR][COLOR=#009900])[/COLOR][COLOR=#339933];[/COLOR]
[COLOR=#009900]}[/COLOR]
@Override
[B]public[/B] [COLOR=#000066][B]boolean[/B][/COLOR] onCreateOptionsMenu[COLOR=#009900]([/COLOR][COLOR=#003399]Menu[/COLOR] menu[COLOR=#009900])[/COLOR] [COLOR=#009900]{[/COLOR]
[COLOR=#666666][I]// Inflate the menu; this adds items to the action bar if it is present.[/I][/COLOR]
getMenuInflater[COLOR=#009900]([/COLOR][COLOR=#009900])[/COLOR].[COLOR=#006633]inflate[/COLOR][COLOR=#009900]([/COLOR]R.[COLOR=#006633]menu[/COLOR].[COLOR=#006633]main[/COLOR], menu[COLOR=#009900])[/COLOR][COLOR=#339933];[/COLOR]
[B]return[/B] [COLOR=#000066][B]true[/B][/COLOR][COLOR=#339933];[/COLOR]
[COLOR=#009900]}[/COLOR]
[COLOR=#009900]}[/COLOR]
[/FONT]
[/FONT][/COLOR]
کدها را به صورت زیر تغییر می دهیم :
کد:
[COLOR=#000000][FONT=Tahoma][FONT=monospace][B]package[/B] [COLOR=#006699]com.iran-eng.webview_html[/COLOR][COLOR=#339933];[/COLOR]
[B]import[/B] [COLOR=#006699]android.app.Activity[/COLOR][COLOR=#339933];[/COLOR]
[B]import[/B] [COLOR=#006699]android.os.Bundle[/COLOR][COLOR=#339933];[/COLOR]
[B]import[/B] [COLOR=#006699]android.view.Menu[/COLOR][COLOR=#339933];[/COLOR]
[B]import[/B] [COLOR=#006699]android.webkit.WebView[/COLOR][COLOR=#339933];[/COLOR]
[B]public[/B] [B]class[/B] MainActivity [B]extends[/B] Activity [COLOR=#009900]{[/COLOR]
@Override
[B]protected[/B] [COLOR=#000066][B]void[/B][/COLOR] onCreate[COLOR=#009900]([/COLOR]Bundle savedInstanceState[COLOR=#009900])[/COLOR] [COLOR=#009900]{[/COLOR]
[B]super[/B].[COLOR=#006633]onCreate[/COLOR][COLOR=#009900]([/COLOR]savedInstanceState[COLOR=#009900])[/COLOR][COLOR=#339933];[/COLOR]
setContentView[COLOR=#009900]([/COLOR]R.[COLOR=#006633]layout[/COLOR].[COLOR=#006633]activity_main[/COLOR][COLOR=#009900])[/COLOR][COLOR=#339933];[/COLOR]
WebView webView [COLOR=#339933]=[/COLOR] [COLOR=#009900]([/COLOR]WebView[COLOR=#009900])[/COLOR] findViewById[COLOR=#009900]([/COLOR]R.[COLOR=#006633]id[/COLOR].[COLOR=#006633]webView1[/COLOR][COLOR=#009900])[/COLOR][COLOR=#339933];[/COLOR]
[COLOR=#003399]String[/COLOR] html_code [COLOR=#339933]=[/COLOR] [COLOR=#0000FF]"<html><body>some <b>text<b>. <p>this is a paragraph.</p></body></html>"[/COLOR][COLOR=#339933];[/COLOR]
webView.[COLOR=#006633]loadData[/COLOR][COLOR=#009900]([/COLOR]html_code, [COLOR=#0000FF]"text/html"[/COLOR], [COLOR=#000066][B]null[/B][/COLOR][COLOR=#009900])[/COLOR][COLOR=#339933];[/COLOR]
[COLOR=#009900]}[/COLOR]
@Override
[B]public[/B] [COLOR=#000066][B]boolean[/B][/COLOR] onCreateOptionsMenu[COLOR=#009900]([/COLOR][COLOR=#003399]Menu[/COLOR] menu[COLOR=#009900])[/COLOR] [COLOR=#009900]{[/COLOR]
[COLOR=#666666][I]// Inflate the menu; this adds items to the action bar if it is present.[/I][/COLOR]
getMenuInflater[COLOR=#009900]([/COLOR][COLOR=#009900])[/COLOR].[COLOR=#006633]inflate[/COLOR][COLOR=#009900]([/COLOR]R.[COLOR=#006633]menu[/COLOR].[COLOR=#006633]main[/COLOR], menu[COLOR=#009900])[/COLOR][COLOR=#339933];[/COLOR]
[B]return[/B] [COLOR=#000066][B]true[/B][/COLOR][COLOR=#339933];[/COLOR]
[COLOR=#009900]}[/COLOR]
[COLOR=#009900]}[/COLOR][/FONT]
[/FONT][/COLOR]
کد HTML را در رشته ای با نام html_code ذخیره کرده ایم و سپس آن را در WebView اجرا کرده ایم.
برنامه اندروید آماده است و می توانید آن را به شیوه دلخواه خود، اجرا کنید و نتیجه را ببینید.
با اجرای برنامه اندروید، بر روی یک گوشی، صفحه زیر نمایش داده می شود :
فایل های پروژه اندروید را می توانید از لینک های زیر دریافت کنید :
