First, you must create new window application, and then embed webbrowser control to your window application with some method you prepare to use to control your application.
Step 1: Create the new Windows Forms Application project
Step 2: Add
[ComVisible(true)] attribute before your class
Collapse | Copy Code// This nested class must be ComVisible for the JavaScript to be able to call it.
[ComVisible(true)]
public partial class frmMain : Form
{
}
Step 3: Add web browser with your method you need and hide it in your application. In this code I was created the instance of WebBrowser and create a function to show message when you
call
showMessage('test'); it will execute and callback to displaymessage(string msg).namespace RemoteAppUsingFireBase
{
[ComVisible(true)]
public partial class Main : Form
{
//Declare your embed browser in your app
private WebBrowser wbMain;
public Main()
{
InitializeComponent();
//Create new instance
wbMain = new WebBrowser();
//Using this code will be make callback from the javascript
wbMain.ObjectForScripting = this;
//Declare function to callback when javascript execute
wbMain.DocumentText = "<html>" +
"<head>" +
"<script type='text/javascript'>" +
"function showMessage(msg)" +
"{" +
"window.external.displayMessage(msg);" +
"}"+
"</script>" +
"</head>" +
"<body>" +
"</body>" +
"</html>";
//Hide web browser
wbMain.Visible = false;
//Add web browser to windows application
this.Controls.Add(wbMain);
}
//This function will be fire when showMessage function execute
public void displayMessage(string msg)
{
if (!string.IsNullOrEmpty(msg))
MessageBox.Show(msg);
}
}
}
Step 4: Reference firebase script, in the head tag and init the data when application start.
namespace RemoteAppUsingFireBase
{
[ComVisible(true)]
public partial class Main : Form
{
private WebBrowser wbMain;
public Main()
{
InitializeComponent();
wbMain = new WebBrowser();
wbMain.ObjectForScripting = this;
wbMain.DocumentText = "<html>" +
"<head>" +
//Refence firebase script
"<script src='https://cdn.firebase.com/js/client/1.1.1/firebase.js'></script>" +
"<script type='text/javascript'>" +
//Create new object to work with firebase database
"var dataRef = new Firebase('https://qym1img70kf.firebaseio-demo.com/thang');" +
//Set empty value to node 'thang' with property value in message property
"dataRef.set({message: ''});" +
//subscribe event when data in message was changed
"dataRef.on('value', function(snapshot) {" +
"var data = snapshot.val();" +
//Execute callback C# function
"showMessage(data.message);" +
"});" +
"function showMessage(msg)" +
"{" +
"window.external.displayMessage(msg);" +
"}"+
"</script>" +
"</head>" +
"<body>" +
"</body>" +
"</html>";
wbMain.Visible = false;
this.Controls.Add(wbMain);
}
public void displayMessage(string msg)
{
if (!string.IsNullOrEmpty(msg))
MessageBox.Show(msg);
}
}
}
On line 25, this is the script of firebase you must reference to you some function of firebase
<script src='https://cdn.firebase.com/js/client/1.1.1/firebase.js'></script>
Next line 27, the link '
https://qym1img70kf.firebaseio-demo.com/' is a database in your firebase, replace it with your database, thang after the link https://qym1img70kf.firebaseio-demo.com/ is a node in the database. If you open this link you will see the data in it.
Line 28, when application start I will set reset the data with empty value, and my data only have one property value is
message
Line 29 to line 32, this is the event we subcribe when the data on
message change, I will get the data and execute the function showMessage. In this function will display the message data we modifiy in firebase database.
Step 3: In your testing, you open multiple application and change the data in the
message you will see the message display in all application you already opened before.
Step 4: Create your html file to change the message and see how it interaction with your application.
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>FireBase Demo</title>
<script src='https://cdn.firebase.com/js/client/1.1.1/firebase.js'></script>
</head>
<body>
<input id="tbxMessage" type="text" /><input onclick="sendMessage();" value="Update" type="button" />
<script type='text/javascript'>
var dataRef = new Firebase('https://qym1img70kf.firebaseio-demo.com/thang');
function sendMessage() {
dataRef.set({ message: document.getElementById('tbxMessage').value });
}
</script>
</body>
</html>
Step 5: Open your application and then open your html.
- In your html file enter text and click button 'Submit'
- See the result in your application, it will show the message with your input in the html file.
Source collected from Codeproject.com
No comments :
Post a Comment