怎么学会使用mui框架中的组件

首先，我们新建一个移动APP项目。然后，分别添加4个页面：dialog-alert.html、dialog-confirm.html、dialog-prompt.html、dialog-toast.html

接下来，我们看看alert函数的写法，以及出来的效果如何。

然后，我们来看看confirm函数的写法，以及出来的效果如何。

再来看看prompt函数的写法，以及出来的效果如何。

最后，我们来看看toast函数的写法，以及出来的效果如何。(一个会自动消失的对话框，很常用)

6

当然，还有两个用法，分别为mui.closePopup()【关闭最外层对话框】 和 mui.closePopups()【关闭全部对话框】 因不太常用，所以，就不再介绍。

在Android的 addJavaScriptInterface中，需要理解这个类主要能帮助调用你的JavaScript函数中的任意活动方式。其中有如下一些需要注意的地方：

addJavaScriptInterface方式帮助我们从一个网页传递值到Android XML视图（反之亦然）。

你可以从网页调用你的活动类方式（反之亦然）。

这是一个非常有用的功能，而当WebView中的HTML是不能信赖的，这则是一个非常危险的安全问题，因为攻击者可以注入HTML执行你的代码。

除非WebView所有HTML都是你写的，否则不要使用addJavascriptInterface()。

使用代码

我们将用到一个Eclipse ID，创建一个命名为JavaScriptInterfaceDemo的新项目。创建之后，即添加user permission for internet(用户互联网权限）到 AndroidManifest.xml文件中。

&ltuses-permission android:name="android.permission.INTERNET"/>

然后创建一个命名为www的文件夹，之后在该文件夹内创建一个index.html文件。我们已经在名为main.xml的布局文件使用WebView 和textview。main.xml代码如下：

&lt?xml version="1.0" encoding="utf-8"?>

&ltLinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:orientation="vertical" >

&ltWebView

android:id="@+id/webView1"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:layout_weight="1" />

&ltLinearLayout

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:orientation="vertical"

android:layout_weight="1">

&ltTextView

android:id="@+id/textView1"

android:layout_width="wrap_content"

android:layout_height="match_parent"

android:textAppearance="?android:attr/textAppearanceLarge" />

&lt/LinearLayout>

&lt/LinearLayout>

在main.xml文件中，我们已经用到一个父布局，它是一个线性布局，如果没有它，我会用一些子控制和布局。

现在我们将写更多行到JavaScriptInterfaceDemoActivity.Java类。代码如下：

package my.demo

import my.demo.R

import android.app.Activity

import android.content.Context

import android.os.Bundle

import android.os.Handler

import android.webkit.WebView

import android.widget.TextView

import android.widget.Toast

public class JavaScriptInterfaceDemoActivity extends Activity {

private WebView Wv

private TextView myTextView

final Handler myHandler = new Handler()

/** Called when the activity is first created. */

@Override

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState)

setContentView(R.layout.main)

Wv = (WebView)findViewById(R.id.webView1)

myTextView = (TextView)findViewById(R.id.textView1)

final JavaScriptInterface myJavaScriptInterface

= new JavaScriptInterface(this)

Wv.getSettings().setLightTouchEnabled(true)

Wv.getSettings().setJavaScriptEnabled(true)

Wv.addJavascriptInterface(myJavaScriptInterface, "AndroidFunction")

Wv.loadUrl("file:///android_asset/www/index.html")

}

public class JavaScriptInterface {

Context mContext

JavaScriptInterface(Context c) {

mContext = c

}

public void showToast(String webMessage){

final String msgeToast = webMessage

myHandler.post(new Runnable() {

@Override

public void run() {

// This gets executed on the UI thread so it can safely modify Views

myTextView.setText(msgeToast)

}

})

Toast.makeText(mContext, webMessage, Toast.LENGTH_SHORT).show()

}

}

}

在Java类文件中，我们已经将一些代码写入到oncreate方式。在这个方式中，我们用findViewById方式找到webview 和textview控制。然后创建一个JavaScriptInterface类。该类有一个构建函数，该函数初始化Context类。那么，什么是Context类呢？

Context类是一个抽象类，它允许访问特定应用资源和类，以及调用应用程序级 *** 作，诸如发起活动、广播和接收意图等。

在构建函数初始化后，创建一个名为showToast的方式，该方式有一个变量的msgeToast字符串，然后创建一个名为myHandler的Handler（处理器）。该处理器有一个Post方式，在该方式的声明中，创建一个新的可运行线程类的实例，在这个类里覆盖一个运行方式，该运行方式设置textview控制的值。

现在在OnCreate方式中创建一个JavaScriptInterface实例。

在JavaScriptInterface类初始化之后，添加一行到OnCreate方式。

final JavaScriptInterface myJavaScriptInterface = new JavaScriptInterface(this)

webview提供addJavascriptInterface方式。该方式包含两项参数：

绑定到JavaScript的类实例。

用来显示JavaScript中的实例的名称。

对于webview，我们需要弟阿勇一些设置来启用JavaScript。

Wv.addJavascriptInterface(myJavaScriptInterface, "AndroidFunction")

最后，需要在webview中提供一个web URL：

Wv.loadUrl("file:///android_asset/www/index.html")

然后创建一个命名为index.html的HTML文件。该HTML有一个文本框和一个提交按钮。HTML文件代码如下：

&lt!DOCTYPE >

&lthtml xmlns="http://www.w3.org/1999/xhtml" debug="true">

&lthead>

&ltmeta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />

&ltmeta name="viewport"

content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

&ltmeta name="apple-mobile-web-app-capable" content="yes">

&ltmeta name="viewport" content="target-densitydpi=device-dpi" />

&ltscript type="text/javascript">

function init()

{

var testVal = document.getElementById('mytextId').value

AndroidFunction.showToast(testVal)

}

&lt/script>

&lt/head>

&ltbody>

&ltdiv style="float: leftwidth: 50%">

&ltinput type="text" style="width: 180px"

name="myText" id="mytextId" />

&lt/div>

&ltdiv style="clear: bothheight: 3px">&lt/div>

&ltdiv>

&ltinput value="submit" type="button" name="submit"

id="btnSubmit" onclick="javascript:return init()" />

&lt/div>

&lt/body>

&lt/html>

该HTML文件有一个JavaScript函数名为init，该函数调用活动方式。

AndroidFunction.showToast(testVal)

AndroidFunction是同样的名字，用来显示JavaScript中的实例。我们已经在addJavascriptInterface方式中给出该名字。

现在运行你的app。

---