Share variables between html and DS app??
656 views
Skip to first unread message
JAUREGUI
Nov 20, 2015, 11:38:45 PM11/20/15
to DroidScript
I am trying to represent some data en a webview control, To include variables in the html seems to be OK,
but I try to include some 'form input' like this:
<form>
price:<br>
<input type="text" name="price">
<br>
Quantity:<br>
<input type="text" name="Qty">
</form>
How can I put the data to a variable that I could use in the rest of my app (outside of the html codes)?
stamja
Nov 22, 2015, 7:56:11 PM11/22/15
to DroidScript
Load DroidScript's app.js in your html <head> section:
Add a button to your html form, e.g.,
Add a <script> to your html with a function to send the data to your app:
(Note: For the above to work, you should change the name attributes in the text inputs to id attributes.)
In your DroidScript app, add a global function to receive the data:
Using this kind of technique together with the JSON object should help get all sorts of complex data out of a WebView.
Hope this helps. Cheers.
<script src="file:///android_asset/app.js"></script>
Add a button to your html form, e.g.,
<input type="button" id="btnSend" name="btnSend" value="Send" onclick="btnSend_OnClick()">
Add a <script> to your html with a function to send the data to your app:
function btnSend_OnClick() {
var rec = {};
rec.price = document.getElementById("price").value;
rec.Qty = document.getElementById("Qty").value;
appExec(
"ReceiveWebviewData(\"" + JSON.stringify(rec).escString() + "\");"
);
}
var rec = {};
rec.price = document.getElementById("price").value;
rec.Qty = document.getElementById("Qty").value;
appExec(
"ReceiveWebviewData(\"" + JSON.stringify(rec).escString() + "\");"
);
}
(Note: For the above to work, you should change the name attributes in the text inputs to id attributes.)
In your DroidScript app, add a global function to receive the data:
function ReceiveWebviewData( rec ) {
rec = JSON.parse(rec);
// Do stuff with the retrieved record, for example...
txtPrice.SetText( rec.price );
txtQty.SetText( rec.Qty );
}
rec = JSON.parse(rec);
// Do stuff with the retrieved record, for example...
txtPrice.SetText( rec.price );
txtQty.SetText( rec.Qty );
}
Using this kind of technique together with the JSON object should help get all sorts of complex data out of a WebView.
Hope this helps. Cheers.
stamja
Nov 22, 2015, 8:03:57 PM11/22/15
to DroidScript
Sorry, almost forgot that you should include the following prototype in the html <script>:
This will 'escape' reserved symbols such as double-quote and backslash encoded by the JSON object.
String.prototype.escString=function() {
return this.replace(/\\/g, "\\\\").replace(/"/g, '\\"');
}
return this.replace(/\\/g, "\\\\").replace(/"/g, '\\"');
}
This will 'escape' reserved symbols such as double-quote and backslash encoded by the JSON object.
stamja
Nov 22, 2015, 8:10:09 PM11/22/15
to DroidScript
Sorry again... and the appExec() in my first reply should be app.Execute().
JAUREGUI
Nov 22, 2015, 9:58:52 PM11/22/15
to DroidScript
Thanks for your answer as soon as I can I will try it, it is exactly what I was looking for, I am new in this so is kind of confusing but I know it will work... thanks again.
Dave Smart
Nov 23, 2015, 10:30:48 AM11/23/15
to DroidScript
It's worth mentioning that you can also use the following methods to simply share data (but not trigger actions):-
app.SaveText();
app.SaveNumber();
app.SaveSaveBoolean();
and their corresponding app.Load* methods
JAUREGUI
Nov 24, 2015, 9:41:51 AM11/24/15
to DroidScript
(Hi stamja, I am working in your suggestion too, it is very interesting but I need to
read a little bit more about html and json, if you have a chance could you grab this
codes and adapt them to your way? if possible if not don't worry I understand 'this is
good to learn a little more about this.. thanks)
(I copy the example from a Steve replay post he did a while ago, I tried to adapt it)
this is the the codes that I am experiment with.
var P="";
var Q="";
function OnStart()
{
var form='<form> price:<br><input type="text" id="price"><br>'+
' Quantity:<br><input type="text" id="Qty"></form>';
var s='<script src="file:///android_asset/app.js"></script>'+
'<script type="text/javascript">'+
' '+
' app.SaveText("webvarP",document.getElementById("price").value);'+
' app.SaveText("webvarQ",document.getElementById("Qty").value);'+
'function myboo(id,field,deflt){ app.Execute("boo()")'+
'}</script>'
lay = app.CreateLayout("Absolute");
bt=app.CreateButton("esta esta detras",1,.5);
web = app.CreateWebView(0.8, 0.8);
web.LoadHtml(form+s +"<button onclick=myboo()>podria ser que si</button>");
lay.AddChild(web);
// lay.AddChild(bt);
app.AddLayout(lay);
}
function boo()
{
P=app.LoadText("webvarP","0");
Q=app.LoadText("webvarQ","0");
app.ShowPopup("Price="+P+"\nQty="+Q);
};
stamja
Nov 25, 2015, 8:09:15 AM11/25/15
to DroidScript
Hi JAUREGUI
I've attached a basic demo of the approach I've been using.
It demonstrates sending data both to and from a webview using the Execute() methods of the app and webview objects.
I hope it's reasonably straightforward to understand.
Note the use of javascript's global JSON object to facilitate sending data records between the app and webview processes. This is perhaps the most challenging aspect of the technique to get your head around, so I recommend you read up on the JSON object.
Have fun. Cheers.
I've attached a basic demo of the approach I've been using.
It demonstrates sending data both to and from a webview using the Execute() methods of the app and webview objects.
I hope it's reasonably straightforward to understand.
Note the use of javascript's global JSON object to facilitate sending data records between the app and webview processes. This is perhaps the most challenging aspect of the technique to get your head around, so I recommend you read up on the JSON object.
Have fun. Cheers.
JAUREGUI
Nov 25, 2015, 3:48:13 PM11/25/15
to DroidScript
Thanks stamja, great it took me a while figure out where to find the form.html, I was checking and is great 'still I have a lot to learn'
**I was playing a little with the codes that i posted and my problem was that I left the variables out of the function part, so it worked fine,
later I was trying if were possible to pass values directly back and forth and seems that works fine too...
Here are the codes I was playing with, maybe it is not the right way to do it but worked just find. if you have a chance try it,
(thanks for your codes will be very useful to me to learn more about json and html)
var P="";
var Q="";
function OnStart()
{
//////////////////////////////////////////////////
var form2='<br>descount 15%:<br><input type="text" id="desc"><br>'+
' Total:<br><input type="text" id="total">';
var form=' price:<br><input type="text" id="price"><br>'+
' Quantity:<br><input type="text" id="Qty">';
var s='<script src="file:///android_asset/app.js"></script>'+
'<script type="text/javascript">'+
' '+
'function receivefromDS(val1, val2){'+
'document.getElementById("price").value=val1;'+
'document.getElementById("Qty").value=val2; '+
'myfunct();'+
'}'+
'function myfunct(id,field,deflt){'+
'var a=document.getElementById("price").value;'+
'var b=document.getElementById("Qty").value;'+
'var d=document.getElementById("desc").value=a*b*.15;'+
'document.getElementById("total").value=b*a-d;'+
' app.SaveText("webvarP",document.getElementById("price").value);'+
' app.SaveText("webvarQ",document.getElementById("Qty").value);'+
'app.Execute("datafromweb("+a+","+b+")");'+
'}</script>';
boton='<button onclick=myfunct()>Send to DS</button>';
web = app.CreateWebView(1, 0.4);
web.LoadHtml(form+form2+s +boton);
lay = app.CreateLayout("Linear","VCenter,FillXY");
ep=app.CreateTextEdit("",1,.1);ep.SetHint("Price Here");
eq=app.CreateTextEdit("",1,.1);;eq.SetHint("Qty Here");
btoweb=app.CreateButton("Send to web");
btoweb.SetOnTouch(sendtoweb);
lay.AddChild(ep);
lay.AddChild(eq);
lay.AddChild(btoweb);
lay.AddChild(web);
app.AddLayout(lay);
}
function datafromweb(val1,val2)
{
ep.SetText(val1);
eq.SetText(val2);
}
/*function boo(bc)
{
app.ShowPopup(bc);
P=app.LoadText("webvarP","0");
Q=app.LoadText("webvarQ","0");
ep.SetText(P);
eq.SetText(Q);
}; */
function na()
{
return name;
}
function sendtoweb()
{
web.Execute('receivefromDS('+ep.GetText()+','+eq.GetText()+')');
}
stamja
Nov 25, 2015, 4:50:58 PM11/25/15
to DroidScript
The DroidScript Chrome App allows you to open and edit all files in a project including html. Highly recommended.
JAUREGUI
Nov 26, 2015, 12:54:47 AM11/26/15
to DroidScript
Just to close this up, I was trying my codes but only work with numeric values, so the only solution that could find
is to make what stamja did, keeping the html file separate so in this case I put it in Html assets, and now works
with text and numerical values.(Is worth mention that I tried Dave suggestion with text save and load method and
worked excellent too), well for now at least for me there are 3 ways to share variables or data between DS and Html
(Thanks guys for your time, I have learned a lot about this issue...)
***this is my spk file...
Steve Garman
Nov 26, 2015, 1:08:22 AM11/26/15
to DroidScript
JAUREGUI,
Your spk throws a script error: "datafromweb is not defined"
My guess is the html file is intended to run in a JavaScript app, inside a WebView but you have sent us an spk of an HTML app instead.
stamja
Nov 26, 2015, 1:40:20 AM11/26/15
to DroidScript
Hi JAUREGUI
Your code only works with numeric values because the parameters you are sending are not enclosed in quotes.
To send those parameters as string values, you would embed the values in quotes something like this:
The reason for using the JSON object, as in my demo, is that it allows one to send fairly complex data structures as a single string that can be parsed at the receiving function.
Cheers.
Your code only works with numeric values because the parameters you are sending are not enclosed in quotes.
web.Execute( 'receivefromDS(' + ep.GetText() + ', ' + eq.GetText() + ')' );
To send those parameters as string values, you would embed the values in quotes something like this:
web.Execute( 'receivefromDS("' + ep.GetText() + '", "' + eq.GetText() + '")' );
The reason for using the JSON object, as in my demo, is that it allows one to send fairly complex data structures as a single string that can be parsed at the receiving function.
Cheers.
JAUREGUI
Nov 26, 2015, 3:01:46 PM11/26/15
to DroidScript
Good Day Guys,,,, I am really sorry for my mistake, I have some files in which I am experimenting with and I grabbed the wrong one, I am sorry for that....
**Hi stamja I agree 100% with you, I still learning, as soon as I can I will get more into this issue, but for now I am just
experimenting, about your observation, you're right that is why I include in the Html asset the webform.html file because I try to do what you say but because was already inside of '.....' (in the html part) I couldn't do that there, at the DS part yes I did the same that you say and works fine. (when you have a chance check the this spk),,,
Ok. Steve this is what I should have send...
THANKS FOR YOUR TIME AND PATIENT GUYS...
JAUREGUI
Nov 28, 2015, 9:21:41 AM11/28/15
to DroidScript
This is another demo that I just improve, *Had a hard time trying to figure out how to rotate the text properly --I am not good in arithmetic-- so if someone can
make it better and can make it work please post your codes... Thanks
Reply all
Reply to author
Forward
0 new messages