Develop Reference

Edit->Find for WebView2 UI Component (WPF/C#/javascript)

I need to implement "Edit->Find" function for a WebView2 UI Component using WPF/C#/javascript... Below you will find two examples: One that is made for a TextBox UI Control called MainWindow1, and the other that is implemented for a WebView2 UI Control that is called MainWindows2. I'm giving both examples because I need to work the same way for each one. The TextBox example is working, but the WebView2 example is missing some javascript code to finish it and maybe requires some tweeting of the C# calls to WebView2.
First, I implemented a "Find Forward" button for a TextBox that I can click multiple times to find the next string matching the search pattern in the textbox. And Here's my XML and C# for it:
MainWindow1 GUI:
MainWindow1 XML:
<Window x:Class="WpfApp1.MainWindow1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:WpfApp1"
mc:Ignorable="d"
Loaded="Window_Loaded"
Title="MainWindow1" Height="450" Width="800">
<DockPanel LastChildFill="True">
<StackPanel Orientation="Horizontal"
DockPanel.Dock="Top" Background="Aqua">
<TextBox Name="TboxFind" Width="80" Text="id"/>
<Button Name="FindForward" Content="FindForward"
Click="FindForward_Click"/>
</StackPanel>
<TextBox Name="textbox1" VerticalScrollBarVisibility="Auto"/>
</DockPanel>
</Window>
MainWindow1 C#:
using System.Text.RegularExpressions;
using System.Windows; using System.Windows.Controls;
namespace WpfApp1 {
public partial class MainWindow1 : Window {
public MainWindow1() {InitializeComponent();}
private void Window_Loaded(object sender, RoutedEventArgs e) {
string text1 = "";
for (int i = 0; i < 10000; i++) {
text1 = text1 + "id" + i.ToString() + "\n";}
textbox1.Text = text1;textbox1.Focus();textbox1.CaretIndex = 0;
}
private void TextBoxGotoLine(TextBox textbox1, int linenum) {
var target_cpos
= textbox1.GetCharacterIndexFromLineIndex(linenum);
var target_char_rect
= textbox1.GetRectFromCharacterIndex(target_cpos);
var first_char_rect = textbox1.GetRectFromCharacterIndex(0);
textbox1.ScrollToVerticalOffset(target_char_rect.Top
- first_char_rect.Top);
}
private void FindForward_Click(object sender, RoutedEventArgs e) {
string pattern = #"(?i)(" + Regex.Escape(TboxFind.Text) + #")";
string text1 = textbox1.Text.Substring(
textbox1.CaretIndex + textbox1.SelectionLength);
var match1 = Regex.Match(text1, pattern);
if (match1.Success) {
textbox1.Focus();
textbox1.Select(textbox1.CaretIndex
+ textbox1.SelectionLength
+ match1.Index, match1.Groups[0].Length);
} //if
} //function
}/*class*/ }/*namespace*/
The problem I'm having is that I also need this same feature for a WebView2 UI Control.
So I install the WebView2 UI Control:
WebView2 Install:
PM > Install-Package Microsoft.Web.WebView2
Add to XML: xmlns:wv2="clr-namespace:Microsoft.Web.WebView2.Wpf;assembly=Microsoft.Web.WebView2.Wpf"
using Microsoft.Web.WebView2.Core;
And here's my corresponding XML and C# demo code that should work the same as the first example I have given:
MainWindow2 GUI:
MainWindows2 XML:
<Window x:Class="WpfApp1.MainWindow2"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:wv2
="clr-namespace:Microsoft.Web.WebView2.Wpf;assembly=Microsoft.Web.WebView2.Wpf"
xmlns:local="clr-namespace:WpfApp1"
mc:Ignorable="d"
Loaded="Window_Loaded"
Title="MainWindow2" Height="450" Width="800" >
<DockPanel LastChildFill="True">
<StackPanel Orientation="Horizontal"
DockPanel.Dock="Top" Background="Aqua">
<TextBox Name="SearchStr" Width="80" Text="id"/>
<Button Name="FindForward"
Content="FindForward" Click="FindForward_Click"/>
</StackPanel>
<wv2:WebView2 Name="webview2" CoreWebView2InitializationCompleted
="webview2_CoreWebView2InitializationCompleted" />
</DockPanel>
</Window>
MainWindow2 C#:
using System.Windows; using System.Threading;
using Microsoft.Web.WebView2.Core;
namespace WpfApp1 {
public partial class MainWindow2 : Window {
public MainWindow2() {InitializeComponent(); SearchStr.Focus(); }
private async void Window_Loaded(object sender, RoutedEventArgs e) {
await webview2.EnsureCoreWebView2Async();
}
private void webview2_CoreWebView2InitializationCompleted(
object sender, CoreWebView2InitializationCompletedEventArgs e)
{
string html = "";
for (int i = 0; i < 100; i++) {
string id = "id" + i.ToString();
html = html + "<b>" + id + "</b><br/>";
}
webview2.CoreWebView2.NavigateToString(html);
}
private async Tasks.Task<string> Find(string pattern) {
string js = "";
js = js + "var m1 = document.getElementById(""body"")";
js = js + "/*... ??? what goes here ??? */";
// Find and highlight one at a time, and scroll into view ...
// repeat find from beginning of html body when done ...
// See MainWindow1 example with TextBox for desired behavior here.
return await webview2.ExecuteScriptAsync(js);
}
private void async FindForward_Click(object s, RoutedEventArgs e) {
await Find(SearchStr.Text);
}
}/*class*/ }/*namespace*/
How to use WebBrowser UI Control to do a:
Menu->Edit->Find "SearchStr1"
When I click FindForward Button? I'm thinking it has something to do with executing Javascript on the DOM? each time the button is pressed?

JavaScript cannot calling to Android

This is html code.
<button class="rechangeMember">
Recharge
</button>
<script src="http://121.42.9.33:8080/statics/common/js/jquery.min.js"></script>
<script>
$(function(){
$('.rechangeMember').click(function(){
if(typeof myObj != 'undefined')
{
myObj.rechargeMember();
}
else
{
rechargeMember();
}
});
})
</script>
Then I want calling this button in Android, code below
member_level_show.getSettings().setJavaScriptEnabled(true);
member_level_show.getSettings().setDomStorageEnabled(true);
member_level_show.setWebChromeClient(new WebChromeClient());
member_level_show.addJavascriptInterface(new Recharge(), "rechargeMember");
member_level_show.loadUrl(Constants.URL_MEMBER_LEVEL + CurrentUserBean.getCurrentUser().getToken());
Recharge class
class Recharge{
#JavascriptInterface
private void rechargeMember() {
log("recharge");
}
}
then I click this button in webview, logcat is
"Uncaught ReferenceError: rechargeMember is not defined"

My code is error.
class Recharge{
#JavascriptInterface
private void rechargeMember() {
log("recharge");
}
}
should be changed to
class Recharge{
#JavascriptInterface
public void rechargeMember() {
log("recharge");
}
}
private can't be called outside, thank's for #Bemmu's comment.Second error is :
member_level_show.addJavascriptInterface(new Recharge(), "rechargeMember");
"rechargeMember" should be "myObj", JavaScript code is:
<script>
$(function(){
$('.rechangeMember').click(function(){
if(typeof myObj != 'undefined')
{
myObj.rechargeMember();
}
else
{
rechargeMember();
}
});
})
So Android function is called.

The name you specify in addJavaScriptInterface() becomes the name of the object. So you have to use
rechargeMember.rechargeMember();

How to manipulate webpage by weBrowser control after JS is executed?

I have webpage which gets data by json and then generates html from that data. I want to be able to do element.invokeMember("click"); (webBrowser winForms control) on source generated by JS. How to do that in c#?
I can see the source in firebug only.
What have I already done: ( _ie from here: How to make WebBrowser wait till it loads fully?)
public partial class Form1 : Form
{
public Form1()
{
InitializeComponent();
webBrowser1.ProgressChanged += new WebBrowserProgressChangedEventHandler(_ie);
}
private void _ie(object sender, WebBrowserProgressChangedEventArgs e)
{
int max = (int)Math.Max(e.MaximumProgress, e.CurrentProgress);
int min = (int)Math.Min(e.MaximumProgress, e.CurrentProgress);
if (min.Equals(max))
{
Console.Write("complete");
var menus = webBrowser1.Document.GetElementsByTagName("menu");
Console.Write(menus.Count);
var votes = new List<HtmlElement>();
foreach (HtmlElement menu in menus)
{
Console.Write("found");
var ass = menu.GetElementsByTagName("a");
foreach (HtmlElement a in ass)
{
if (a.GetAttribute("class").Contains("vote-up"))
{
a.InvokeMember("click");
}
}
}
}
}
private void button1_Click(object sender, EventArgs e)
{
webBrowser1.Navigate("xxxxx");
}
}
HTML:
http://pastebin.com/0KGCwtqs
copied from firebug, so some tags are collapsed. I want only <menu>-><footer>-> <a class="vote-up ...">
Console.Write("found") is not executed. So webBrowser can not even find <menu>
solved
Just use tricky JS
var elements=document.getElementsByClassName('vote-up');for (index = 0; index < elements.length; index++) {elements[index].click();}

solved
Just use some js and invoke it from browser
var elements=document.getElementsByClassName('vote-up');
for (index = 0; index < elements.length; index++) {elements[index].click();}

Listview containing checkbox and text is getting reset on scrolling

I have drawn a customized navigation drawer with ListView and header but when i scroll the List the checkbox in the List are getting unchecked.
Secondly when i click on the reset button in the header part I want that all the checkbox in the Listview should get get unchecked. I have been trying this to get it working but unable to find any solution..
The snippets are
public class NavigationDrawer extends Fragment{
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.filter_navigation_drawer, container,false);
drawerListView= ( ListView ) view.findViewById( R.id.listDrawer );
drawerListView.setOnItemClickListener(new FilterDrawerItemClickListener());
dataList.add(new FilterDrawerItem("sample1",true));
dataList.add(new FilterDrawerItem("sample2",true));
dataList.add(new FilterDrawerItem("sample3",true));
dataList.add(new FilterDrawerItem("sample4",true));
dataList.add(new FilterDrawerItem("sample5",true));
dataList.add(new FilterDrawerItem("sample2",true));
dataList.add(new FilterDrawerItem("sample2",true));
dataList.add(new FilterDrawerItem("sample2",true));
dataList.add(new FilterDrawerItem("sample2",true));
adapter = new FilterCustomDrawerAdapter(getActivity(), R.layout.drawer_filter,dataList,drawerStatus);
drawerListView.setAdapter(adapter);
adapter.getFilterList();
resetBtn = (TextView)view.findViewById(R.id.filterby_reset);
if(resetBtn != null){
resetBtn.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
application.setFilterStatus("reset");
for(int i=0; i<dataList.size(); i++){
dataList.get(i).setCheckBoxId(false);
}
adapter.notifyDataSetChanged();
// this.onCreateView();
}
});
}
return view;
}
}
FilterCustomDrawerAdapter.java
public class FilterCustomDrawerAdapter extends ArrayAdapter<FilterDrawerItem> {
Context context;
List<FilterDrawerItem> drawerItemList;
int layoutResID;
int item = 0;
String status;
List<Integer> filterList = new ArrayList<Integer>();
DrawerStatus drawerStatus;
StataApplication application = StataApplication.getInstance();
HashMap<Integer, Boolean> checked; // newly added code
public FilterCustomDrawerAdapter(Context context, int layoutResourceID,
List<FilterDrawerItem> listItems,DrawerStatus drawerStatus) {
super(context, layoutResourceID, listItems);
this.context = context;
this.drawerItemList = listItems;
this.layoutResID = layoutResourceID;
this.drawerStatus = drawerStatus;
checked = new HashMap<Integer, Boolean>(getCount());
}
public FilterCustomDrawerAdapter(Context context, int layoutResourceID,
List<FilterDrawerItem> listItems) {
super(context, layoutResourceID, listItems);
this.context = context;
this.drawerItemList = listItems;
this.layoutResID = layoutResourceID;
}
#Override
public View getView(final int position, View convertView, ViewGroup parent) {
// TODO Auto-generated method stub
final FilterDrawerItemHolder drawerHolder;
View view = convertView;
if (view == null) {
LayoutInflater inflater = ((Activity) context).getLayoutInflater();
drawerHolder = new FilterDrawerItemHolder();
view = inflater.inflate(layoutResID, parent, false);
drawerHolder.ItemName = (TextView) view.findViewById(R.id.drawer_filterName);
drawerHolder.checkBox = (CheckBox) view.findViewById(R.id.drawer_cbox);
view.setTag(drawerHolder);
} else {
drawerHolder = (FilterDrawerItemHolder) view.getTag();
}
FilterDrawerItem dItem = (FilterDrawerItem) this.drawerItemList.get(position);
drawerHolder.ItemName.setText(dItem.getItemName());
TextView resetView = (TextView)view.findViewById(R.id.filterby_reset);
CheckBox checkBox = (CheckBox) view.findViewById(R.id.drawer_cbox);
// Newly added code
Boolean isChecked = checked.get(position);
checkBox.setChecked(isChecked == null ? false : isChecked);
// if(application.getFilterStatus() != null) {
if(checkBox.isChecked()){
drawerHolder.checkBox.setChecked(false);
}
// }
checkBox.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
#Override
public void onCheckedChanged(CompoundButton buttonView,boolean isChecked) {
if (isChecked) {
filterList.add(new Integer(position));
checked.put(position, true);
} else {
filterList.remove(new Integer(position));
checked.put(position, false);
}
}
});
drawerHolder.checkBox.setTag(position);
Log.d("FILTER_LIST_SIZE",String.valueOf(filterList.size()));
return view;
}
private static class FilterDrawerItemHolder {
TextView ItemName;
CheckBox checkBox;
}
public List<Integer> getFilterList(){
return filterList;
}
}
In the image below when I scroll the list and if i make the checkbox sample1 and sample 2 checked it becomes unchecked on scrolling.
and also on clicking reset button in the header i want all my checkbox to be unchecked..
Not able to get this working ...
UPDATE 1
resetBtn.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
List<FilterDrawerItem> adapterDataList = adapter.getDrawerItemList();
for(int i=0; i<adapterDataList.size(); i++){ // At this place i am getting the size as 9
adapterDataList.get(i).setCheckBoxId(false);
}
adapter.setDrawerItemList(adapterDataList);
adapter.notifyDataSetChanged();
}
});

In your FilterDrawerItem class, make a boolean variable isChecked.
Now in your adapter class, write something like this:
if(dItem.isChecked){
drawerHolder.checkBox.setChecked(true);
}
else{
drawerHolder.checkBox.setChecked(false);
}
and in your OnCheckedChangeListener:
if (isChecked) {
//your other code
dItem.setChecked(true);
notifyDataSetChanged();
} else {
//your other code
dItem.setChecked(false);
notifyDataSetChanged();
}
#Orest Savchak's answer is also right, but keeping track of checkboxes in your POJO classes will help you to retrieve the checked items later and also do other things easier, like you want to uncheck all the checkboxes on click of "Reset" button. For that, in onClick() on reset button, you'll just need to do:
for(int i=0; i<FilterDrawerItem.size; i++){
FilterDrawerItem.get(i).setChecked(false);
}
adapterObject.notifyDataSetChanged();
EDIT 1:
Create getter setter for drawerItemList in your adapter and then in onClick() of reset button, in place of dataList, do as following:
List<FilterDrawerItem> adapterDataList=adapter.getDataList();
for(int i=0; i<adapterDataList.size(); i++){
adapterDataList.get(i).setCheckBoxId(false);
}
adapter.setDataList(adapterDataList);
adapter.notifyDataSetChanged();

It because of recycling use of views in ListView. You should create some HashMap:
HashMap<Integer, Boolean> checked;
Then in your constructor do this:
checked = new HashMap<Integer, Boolean>(getCount());
After set OnCheckedChangeListener on your checkboxes, and in event method do this:
checked.put(position, yourCheckBoxCheckedState);
And in getView() method do this:
Boolean isChecked = checked.get(position);
checkBox.setChecked(isChecked == null ? false : isChecked)
Try this, I think it should help
UPDATE
resetBtn.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
adapter.deselectAll();
}
});
Then in adapter create method:
public void deselectAll() {
checked = new HashMap<Integer, Boolean>(getCount());
notifyDataSetChanged();
}

Display android DatePicker on click of a button in Javascript

Here is my requirement :
I'am loading one html file on to a WebView. I have a button in html file to select the date. When i click on that button i want to open android date picker dialog. And after selecting the date, i want to display the selected date in html file. Can anyone guide me. please.
HTML :
<input type="button" value="Select Date" onClick="openDatePickerDialog()" />
<p id = "date">--</p>
Javascript :
function openDatePickerDialog() {
AndroidFunction.openDatePickerDialog();
}
function callFromActivity(date) {
document.getElementById('date').innerHTML = date;
}
My Activity :
public class MainActivity extends Activity {
WebView myBrowser;
/** Called when the activity is first created. */
#Override
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
myBrowser = (WebView)findViewById(R.id.mybrowser);
final MyJavaScriptInterface myJavaScriptInterface = new MyJavaScriptInterface(this);
myBrowser.addJavascriptInterface(myJavaScriptInterface, "AndroidFunction");
myBrowser.getSettings().setJavaScriptEnabled(true);
myBrowser.loadUrl("file:///android_asset/test.html");
}
public class MyJavaScriptInterface
{
private int mYear;
private int mMonth;
private int mDay;
static final int DATE_DIALOG_ID = 0;
Context mContext;
MyJavaScriptInterface(Context c)
{
mContext = c;
}
public void openDatePickerDialog()
{
Calendar c = Calendar.getInstance();
mYear = c.get(Calendar.YEAR);
mMonth = c.get(Calendar.MONTH);
mDay = c.get(Calendar.DAY_OF_MONTH);
//updateDisplay();
showDialog(DATE_DIALOG_ID);
}
private void updateDisplay() {
String date = new StringBuilder().append(mMonth + 1).append("-")
.append(mDay).append("-")
.append(mYear).append(" ").toString();
Toast.makeText(getApplicationContext(), date, Toast.LENGTH_LONG).show();
myBrowser.loadUrl("javascript:callFromActivity(\""+date+"\")");
}
private DatePickerDialog.OnDateSetListener mDateSetListener =
new DatePickerDialog.OnDateSetListener() {
public void onDateSet(DatePicker view, int year,
int monthOfYear, int dayOfMonth) {
mYear = year;
mMonth = monthOfYear;
mDay = dayOfMonth;
updateDisplay();
}
};
protected Dialog onCreateDialog(int id) {
switch (id) {
case DATE_DIALOG_ID:
return new DatePickerDialog(MainActivity.this,
mDateSetListener,
mYear, mMonth, mDay);
}
return null;
}
}
}
Problem : I'am not getting DatePicker Dialog When i click on button. Where i'am going wrong ? Is my approach correct ?

Here is a sample code I use do show, derived from the code here:
In the html code, add 2 javascript functions:
// Fonction d'appel calendrier Android
function f_CallCalendar(Tag)
{
MSSAndroidFunction.openDatePickerDialog(Tag);
}
// Fonction de retour de la date
function callFromActivity_RetDate(Tag, data) {
document.Form.vDate.value = data;
}
The Tag is the id of the input form to be completed. You call the javascript functions like this:
<input name="vDate" type="text" size="11" />
<input name="Submit" type="button" onclick="f_CallCalendar('vDate')" value="Calendrier*" />
And here is the java code implemented. Note that the MyJavaScriptInterface is declared inside the MainActivity:
public class MainActivity extends Activity
implements TextWatcher{
WebView MainWebView;
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
MainWebView = (WebView)findViewById(R.id.main_webview);
MainWebView.getSettings().setJavaScriptEnabled(true);
final MyJavaScriptInterface myJavaScriptInterface = new MyJavaScriptInterface(this);
MainWebView.addJavascriptInterface(myJavaScriptInterface, "MyJavaScriptInterface");
}
// Classe de prise en charge du java privé
public class MyJavaScriptInterface
{
public String m_szTagId;
Context mContext;
MyJavaScriptInterface(Context c)
{
mContext = c;
}
public void openDatePickerDialog(String szTagId)
{
m_szTagId = szTagId;
Calendar c = Calendar.getInstance();
DatePickerDialog dp = new DatePickerDialog(mContext, new OnDateSetListener() {
public void onDateSet(DatePicker view, int year,
int monthOfYear, int dayOfMonth) {
String szDate = String.format("%02d/%02d/%04d", dayOfMonth, monthOfYear+1, year);
MainWebView.loadUrl("javascript:callFromActivity_RetDate(\""+m_szTagId+"\", \""+szDate+"\")");
} }, c.get(Calendar.YEAR), c.get(Calendar.MONTH), c.get(Calendar.DAY_OF_MONTH));
dp.show();
}
} // Class MyJavaScriptInterface
} // class MainActivity
Here is it. Hope this can help.

public void openDatePickerDialog()
{
Calendar c = Calendar.getInstance();
mYear = c.get(Calendar.YEAR);
mMonth = c.get(Calendar.MONTH);
mDay = c.get(Calendar.DAY_OF_MONTH);
//updateDisplay();
DatePickerDialog dp = new DatePickerDialog(this,
mDateSetListener,
mYear, mMonth, mDay);
dp.show();
}
can you try this once.