درس : إضافة webview وفتحة لموقع معين في تطبيقك الخاص

اليوم لربما موضوع بعيد عن الاخبار التي نعرفها في عرب #أندرويد اليوم سوف نقوم بتقديم درس لاطلما اراد العديد من المبرمجين عملة لمواقعم الشخصية ولكن يجدون صعوبة في هذا الامر طبعاً برمجة تطبيقات نظام #أندرويد تعتمد بشكل كلي على لغة Java والبعض يستطيع برمجتها بلغات اخرى ولكن الافضل برمجة التطبيقات في هذة اللغة اللي قمت بدكرها من سابق .

 درس اليوم عبارة عن متصفح بسيط وصفحة اخرى يوجد بها معلومات عن التطبيق ، الفكرة من الدرس هوا كيفية انشاء التطبيق لمواقعنا بشكل اساسي وكيفية عرضها وليس تطبيق متكامل بالاصل هي الفكرة وبعد ذلك تستطيع تطوير الفكرة بشكل كامل بما يناسبك .

للتنوية : البرنامج المستخدم في برمجة تطبيقات الاندرويد بشكل عام هوا eclipse تستطيع الحصول علية بشكل مجاني طبعاً مع تنزيل حزمة SDK المناسبة لبيئة التطوير الخاصة بك

أولاً : نقوم بفتح برنامج eclipse ونقوم بعمل مشروع جديد بالذهاب الى التالي :-

File > New > Android Application Project

تانياً : نقوم بتمسية مشروعنا كما نريد حيت موضح بالصورة التالية:-

1. Application Name :WebAndroid
2. Project Name : WebAndroid
3. Package Name : net.androidar.aburetaj.Tutorial

بعد الانتهاء من الخطوة الاولى يجب علينا ان ننتقل الان الى تظمين الاكواد في تطبيقنا اولاً يجب علينا الدهاب الى ملف MainActivity.java  ونقوم بإضافة الكود التالي :-

package net.androidar.aburetaj.Tutorial;

import android.os.Bundle;
import android.app.Activity;
import android.content.Intent;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;

public class MainActivity extends Activity {

	// Declare Variables
	Button Standardbtn;
	Button Custombtn;

	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		// Get the view from activity_main.xml
		setContentView(R.layout.activity_main);

		// Locate buttons in activity_main.xml
		Standardbtn = (Button) findViewById(R.id.standard);
		Custombtn = (Button) findViewById(R.id.custom);

		// Capture first Button click
		Standardbtn.setOnClickListener(new OnClickListener() {

			public void onClick(View arg0) {
				// Open StandardWebView.class
				Intent intent = new Intent(MainActivity.this,
						StandardWebView.class);
				startActivity(intent);
			}
		});

		// Capture second Button click
		Custombtn.setOnClickListener(new OnClickListener() {

			public void onClick(View arg0) {
				// Open CustomWebView.class
				Intent intent = new Intent(MainActivity.this,
						CustomWebView.class);
				startActivity(intent);
			}
		});

	}

}

بعد تظمين الخطوة السابقة وتصحيح الاخطاء إن ظهرت ننتقل الى اضافة ملف ملف Android.xml لتصميم واجة العرض عن طريق الذهاب الى مجلد  res > layout بالضغط على الزر الايسر على الماوس ويتم إضافة الملف Android.xml ويتم تسميتة activity_main كما هوا موضح بالصورة التانية :-

تستطيع ان تقوم بسحب الادوات واعادة كتابة الكود ولكن يفضل كتابة الكود يدوياً لكي لانقع في اي اخطاء في التطبيق  وتكون النتيجة كما في الصورة التالية:-

الان الخطوة التي يجب علينا القيام بها وهي عملية عرض الـWebView نقوم بإضافة  Class جديد عن طريق الخطوات File > New > Class  ونقوم بتسمية الـ Class بهذا الاسم StandardWebView.java وطبعاً يجب ان نتأكد ان يكون اسم package الخاص بالتطبيق والذي هوا  net.androidar.aburetaj.Tutorial بعد إنشاء ملف Java نقوم بكتابة الكود التالي :-

package  net.androidar.aburetaj.Tutorial;

import android.webkit.WebChromeClient;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.os.Bundle;
import android.app.Activity;
import android.view.Window;

public class StandardWebView extends Activity {

    // Declare Variables
    WebView webview;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        // Prepare the progress bar
        requestWindowFeature(Window.FEATURE_PROGRESS);
        // Get the view from webview.xml
        setContentView(R.layout.webview);

        // Locate the WebView in webview.xml
        webview = (WebView) findViewById(R.id.webview);

        // Enable Javascript to run in WebView
        webview.getSettings().setJavaScriptEnabled(true);

        // Allow Zoom in/out controls
        webview.getSettings().setBuiltInZoomControls(true);

        // Zoom out the best fit your screen
        webview.getSettings().setLoadWithOverviewMode(true);
        webview.getSettings().setUseWideViewPort(true);

        // Load URL
        webview.loadUrl("https://android-gate.com");

        // Show the progress bar
        webview.setWebChromeClient(new WebChromeClient() {
            public void onProgressChanged(WebView view, int progress) {
                setProgress(progress * 100);
            }
        });

        // Call private class InsideWebViewClient
        webview.setWebViewClient(new InsideWebViewClient());

    }

    private class InsideWebViewClient extends WebViewClient {
        @Override
        // Force links to be opened inside WebView and not in Default Browser
        public boolean shouldOverrideUrlLoading(WebView view, String url) {
            view.loadUrl(url);
            return true;

        }

    }

}

ملاحظة مهمة

webview.loadUrl("https://android-gate.com");

[note]هذا الكود اختصاصة عرض صفحة الويب المراد فتحها نقوم بتعديلها الى الرابط الذي نريدة [/note]

والان نقوم بإنشاء Class جديد ايضاً نقوم بتسميتة  CustomWebView مع التأكد من اسم package الخاص بالتطبيق وكما ذكرتة في النقطة السابقة والنقطة الاولى بعد الانشاء نقوم بإذراج الكود التالي :-

package  net.androidar.aburetaj.Tutorial;

import android.os.Bundle;
import android.app.Activity;
import android.webkit.WebView;

public class CustomWebView extends Activity {

    // Declare Variables
    WebView webview;
    String htmlcodes;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.webview);
        webview = (WebView) findViewById(R.id.webview);

        // Custom HTML Codes
		htmlcodes = "Arabic lessons in Android Application Programming By AbuRetaj (CoderAden)";
        // Load the HTML Codes in WebView
        webview.loadData(htmlcodes, "text/html", "UTF-8");

    }

}

طبعاً الكود السابق هوا خاص بزر المعلومات الموجود في الصورة السابقة وعند الضغط علية يحولنا على صفحة فيها معلومات اكتب ما شئت في هذة الصفحة

// هذا الكود المتخصصص في الكتابة وهوا عبارة عن وسوم HTML يمكن ان تقوم بما تريد بة 
		htmlcodes = "Arabic lessons in Android Application Programming By AbuRetaj (CoderAden)";

اما الخطوة الان لتشغيل ملف “المعلومات” وعرضة لنا في تطبيقنا يجب علينا انشاء ملف Android.xml في مجلد   layout < res وبالزر الايمن نقوم بإنشاء ملف Android.xml ونقوم بتسمتية  webview ونقوم بتضمين الكود التالي فية :-

< ?xml version="1.0" encoding="utf-8"?>

الخطوة التالية لإضافة اللغة العربية او اي لغة تريدها حسب المتوفر من اللغات الموجودة نذهب الى ملف strings وندخل الى مصدر strings ونقوم بكتابة الاكواد  التالية بعد وسم  نقوم بتجرمها الى اللغة العربية

 
    WebView Tutorial
    Hello world!
    Settings
    Standard WebView
    Custom WebView

---

صور لتطبيقنا :-

اعتذر لعذم رفع الدرس الى حسابنا في YouTube لوجود مشاكل في الرفع في واخد فترة طويلة وارجو ان يكون الدرس واضح وسوف نتابع سلسلة دروس لبرمجة تطبيقات الاندرويد لكافة المستويات حيت هذا الدرس للفئة المتوسطة

Tags: Android dev webview برمجة درس