Webbrowser im TabControl

[Thiemo Melhorn]

Hallo zusammen, 

könnt ihr mir sagen, wie man einen Webserver in ein Tab sowie ein Button m einer TextBox unterbringen kann?

Mit freundlichen Grüßen 

Thiemo!

[Alan Hendry]

HI,

I presume you want to add a WebView into a Tab

If you start by taking the Basic Example in CreateTabs

https://symdstools.github.io/Docs/docs/app/CreateTabs.htm

To add a WebView to the first tab

tab1.AddWebView(1,0.5)

See Examples and Methods on on https://symdstools.github.io/Docs/docs/app/CreateWebView.htm

You can't put a Button inside a Text Box, you can put them next to each other,

or have a Text box  with text and fontawesome icons inside it.

https://symdstools.github.io/Docs/docs/app/CreateButton.htm

https://symdstools.github.io/Docs/docs/app/CreateText.htm

Regards, ah

[Thiemo Melhorn]

Damit fange ich nichts an. Ich brauche um das zu verstehen,  ein kleines Beispiel. 

[Alan Hendry]

HI,

For a tab with a webview of a website, take Example Basic from 

https://symdstools.github.io/Docs/docs/app/CreateTabs.htm

before  

app.AddLayout( lay ); 

add

web = app.AddWebView(tab1,1,0.5) // full screen width, half screen height
web.LoadUrl( "https://droidscript.org/" ); // load web page

For a text box with text and an icon

txt = app.AddText(tab1,"Hello [fa-smile-o]",-1,-1,"fontawesome")

See https://fontawesome.com/v4/cheatsheet/ for a list of fontawesome icons

Regards, ah

[Thiemo Melhorn]

Kannst du mir ein Beispiel mit einer SPK Datei machen?

[Alan Hendry]

function OnStart() {
    lay = app.CreateLayout( "linear", "VCenter,FillXY" );
    var tabs = app.CreateTabs( "Tab 1,Tab 2,Tab 3", 0.8, 0.8, "VCenter" );
    lay.AddChild( tabs );
    tab1 = tabs.GetLayout( "Tab 1" );
    tab1.SetBackGradient( "red", "green", "", "left-right" );
    tab2 = tabs.GetLayout( "Tab 2" );
    tab2.SetBackGradient( "green", "blue", "", "left-right" );
    tab3 = tabs.GetLayout( "Tab 3" );
    tab3.SetBackGradient( "blue", "red", "", "left-right" );

web = app.AddWebView(tab1,1,0.5) // full screen width, half screen height
web.LoadUrl( "https://droidscript.org/" ); // load web page

txt = app.AddText(tab1,"Hello [fa-smile-o]",-1,-1,"fontawesome")

    app.AddLayout( lay );
}

[Thiemo Melhorn]

Danke erstmal für das Beispiel. 

Wie kann ich nun eine TextBox erstellen, wo ich dann eine Adresse eingeben kann, sodass der Webbrowser zu dieser Adresse geht bzw. auch ein Button zum absenden der Anfrage?

[Alan Hendry]

HI,

To open google.com by touching text box

txt = app.AddText(tab1,"Google.com [fa-smile-o]",-1,-1,"fontawesome")
txt.SetOnTouchDown(function () {web.LoadUrl("http://google.com");})

Regards, ah

[Thiemo Melhorn]

Könntest du mir bitte ein Beispiel machen mit einer SPK Datei machen, wo das alles drinnen ist?

[Alan Hendry]

function OnStart() {
    lay = app.CreateLayout( "linear", "VCenter,FillXY" );
    var tabs = app.CreateTabs( "Tab 1,Tab 2,Tab 3", 0.8, 0.8, "VCenter" );
    lay.AddChild( tabs );
    tab1 = tabs.GetLayout( "Tab 1" );
    tab1.SetBackGradient( "red", "green", "", "left-right" );
    tab2 = tabs.GetLayout( "Tab 2" );
    tab2.SetBackGradient( "green", "blue", "", "left-right" );
    tab3 = tabs.GetLayout( "Tab 3" );
    tab3.SetBackGradient( "blue", "red", "", "left-right" );

web = app.AddWebView(tab1,1,0.5) // full screen width, half screen height
web.LoadUrl( "https://droidscript.org/" ); // load web page

//txt = app.AddText(tab1,"Hello [fa-smile-o]",-1,-1,"fontawesome")

txt = app.AddText(tab1,"Google.com [fa-smile-o]",-1,-1,"fontawesome")
txt.SetOnTouchDown(function () {web.LoadUrl("http://google.com");})

    app.AddLayout( lay );
}

[Thiemo Melhorn]

Anscheinend verstehst du mich nicht ganz. 

Ich möchte eine Möglichkeit haben, dass man selbst eine URL eingeben kann bzw. einen Button zum Absenden hat. 

[Alan Hendry]

HI,

Do you want the user to type in any address and then open that page?

They could do that with the browser without your app.

Or do you want to give them a list of sites and let them pick one?

Regards, ah

[Thiemo Melhorn]

Ich möchte das erste tun, was du mich als erstes gefragt hast. 

[Alan Hendry]

HI,

The user can type any address, when they touch the enter key, It'll change the web page.

Regards, ah

function OnStart() {
    lay = app.CreateLayout( "linear", "VCenter,FillXY" );

    var tabs = app.CreateTabs( "Tab 1,Tab 2,Tab 3", 1,1, "VCenter" );

    lay.AddChild( tabs );
    tab1 = tabs.GetLayout( "Tab 1" );
    tab1.SetBackGradient( "red", "green", "", "left-right" );
    tab2 = tabs.GetLayout( "Tab 2" );
    tab2.SetBackGradient( "green", "blue", "", "left-right" );
    tab3 = tabs.GetLayout( "Tab 3" );
    tab3.SetBackGradient( "blue", "red", "", "left-right" );

web = app.AddWebView(tab1,1,0.5) // full screen width, half screen height
web.LoadUrl( "https://droidscript.org/" ); // load web page

txt = app.AddTextEdit(tab1,"http://google.com",1,-1,"SingleLine")
txt.SetOnEnter(function () {web.LoadUrl(txt.GetText());})

    app.AddLayout( lay );
}

[Thiemo Melhorn]

Ich möchte mich bei dir bedanken, dass du mir dabei geholfen hast. 

Eine Frage hätte ich noch und zwar: wie kann man einen Button erstellen, der neue Tabs erstellt?

[Alan Hendry]

HI,

Tabs AddChild("Tab4",2) exists, is not documented, but doesn't work, no debug messages.

(Ditto for Tabs.RemoveChild("Tab2"))

You could try the code in my post about "DIY tabs"

qaddbut and qaddlay can add a tab and a layout at any time.

Regards, ah

[Thiemo Melhorn]

Könntest du mir bitte eine SPK fertig machen? Ich habe es schon probiert aber es funktioniert nicht ganz. 

[Alan Hendry]

HI,

On Tab2 the button will add Tab4

Regards, ah

cfg.Dark
var qbuts = [], qlays = [], qcurrent=0
const qactive="#cccccc", qinactive="#333333"
function OnStart() {
    lay = app.CreateLayout( "Linear", "Vertical,FillXY" )
    horiz1 = app.AddLayout( lay,"Linear","Horizontal" )
    but1 = qaddbut(horiz1,"Tab 1",0)
    but2 = qaddbut(horiz1,"Tab 2",1)
    but3 = qaddbut(horiz1,"Tab 3",2)
    tab1 = qaddlay(lay,0)
    tab2 = qaddlay(lay,1)
    tab3 = qaddlay(lay,2)

    tab1.SetBackGradient( "red", "green", "", "left-right" )

    t1 = app.AddText( tab1,"Text" )

    tab2.SetBackGradient( "green", "blue", "", "left-right" )

    t2 = app.AddButton( tab2,"Button to add tab" )

    tab3.SetBackGradient( "blue", "red", "", "left-right" )

    t3 = app.AddCheckBox(tab3,"Checkbox" )
//    app.SimulateTouch(but1,1,1,"Down")  // open first tab
    but1.SetBackColor(qactive)
    tab1.Show()
    t2.SetOnTouch( function() {
      but4=qaddbut(horiz1,"Tab 4",3)
      tab4=qaddlay(lay,3)
      tab4.SetBackGradient("gray","silver","","left-right")
      t4 = app.AddImage( tab4,"/Sys/Img/Droid1.png" )
    } )
    app.AddLayout( lay )
}
function qaddbut(qlay,qtxt,qidx) {
    var q = app.AddText( qlay,qtxt )
    q.Batch({
        SetBackColor_: [qinactive],
        SetTextColor: [ "#999999" ],
        SetPadding_: [20,20,20,20,"px"],
//      SetMargins_: [20,20,20,20,"px"],
//      SetTextSize: [32,""],  
        SetOnTouchDown: [q_OnTouch]
    })
    q.data.qidx = qidx
    ign = qbuts.push(q)
    return q
}
function qaddlay(qlay,qidx) {
    var q = app.AddLayout(qlay,"Linear", "FillXY")
    q.Gone()
    ign = qlays.push(q)
    return q
}    
function q_OnTouch () {
    var qidx = this.data.qidx
    if (qidx!=qcurrent) {
       qbuts[qcurrent].SetBackColor(qinactive)
       qbuts[qidx].SetBackColor(qactive)
       qlays[qcurrent].Gone()
       qlays[qidx].Show()
       qcurrent=qidx
    }
} // fn

function OnConfig(){
   lay.SetOrientation(  "Horizontal")
   horiz1.SetOrientation("Vertical")
}

[Thiemo Melhorn]

Ich möchte mich wirklich für den Code bedanken. Ich denke, nun komme ich auch alleine damit zurecht.

[Thiemo Melhorn]

Ich möchte gerne wissen, wie man die Funktion vom 27.3 hinzufügt. Kannst du mir bitte dabei helfen bzw. mir den Code schicken?

[Alan Hendry]

HI,

The code of 27 Mar allowed input of web address and a button to set a webview to that address.

The code of 30 Mar had 3 tabs, and on tab2 had a button to add another tab.

Can you tell me what you want?

Where should the button to add tabs be?

How many tabs should there be at the beginning? And what should be on them?

What should be on new tabs?

Regards, ah

[Thiemo Melhorn]

Ich möchte das Layout mit den Tabs, mit dem Layout der Webansicht vereinen  bzw. das ich die Webansicht immer im neuen Tab habe und gleich wie im ersten Tab, Website aufrufen kann. 

[Alan Hendry]

HI,

The browser (Chrome, etc) already does this. It displays a web site. You can change the address.

You can add more websites. You can swap between web sites.

Regards, ah

[Thiemo Melhorn]

Und so etwas im kleinen möchte ich programmieren..

[Thiemo Melhorn]

Dieser Browser wird nur für mich sein und wird niemals veröffentlicht. 

[Alan Hendry]

HI,

There are a lot more details to handle.

What should the tabs labels be (just Tab1, Tab2, ...) ?

What if the tabs don't fit across the screen (the current code can't scroll left/right)?

When the user types an address and presses the button, the correct Web View has to change.

The official browsers do all that and much much more 

(forward, back, favourites, history, close tab, find in page, desktop view, ...)

Regards, ah

[Thiemo Melhorn]

Am besten sollen die Tab so heißen wie die aufgerufende URL. Das TabControl soll immer zum scrollen sein (also nach rechts bzw. nach links). Sowie ich ja gesagt habe, soll nur für mich der Browser sein und deshalb sind die anderen Funktionen, bis auf Tab schließen/Vorwärts bzw. zurück, für diesen Browser nicht relevant .

[Alan Hendry]

HI,

URLs are usually pretty long, phone/tablet screens are pretty narrow.

Showing the initial URL is pretty easy, but if the user clicks a link then the URL changes, would need a callback to change tab text.

So 1 tab text, 1 input field, 1 "go" button, 1 webview all need to work together.

WebViews include Back and Forward (needs more buttons connected to the WebView).

Tabs could be "deleted" using Gone or RemoveChild (and Delete) yet another button (connected to the tab/etc).

Seems a lot of work for an app that does only some of what the browser does.

Regards, ah

[Thiemo Melhorn]

Ok! Ich weiß, dass dieser Browser ziemlich schwierig Funktionen hat aber sowie ich ja bereits geschrieben habe, wird dieser Browser nicht veröffentlicht werden. 

[Alan Hendry]

HI,

The tabs can now scroll, and it looks a little more like Material Design.

The add button is still on tab2, where should it be (at the top?)

Where should forward, back, remove tab be?

tab4 now has input box (when you press enter it should go) and web page

Only the first tab4 really works, but if you add more then it should scroll.

(You have to type addresses like http://www.bing.com not www.bing.com not bing.com)

Still a lot to do.

Regards, ah

[Alan Hendry]

.cfg.Dark

var qbuts = [], qlays = [], qcurrent=0

const qactive="#cccccc", qinactive="#333333", qneutral="#999999"

function OnStart() {
    lay = app.CreateLayout( "Linear", "Vertical,FillXY" )

    scroll = app.CreateScroller(1,-1,"Horizontal")
    lay.AddChild(scroll)
    horiz1 = app.CreateLayout( "Linear","Horizontal" )
    scroll.AddChild(horiz1)

    but1 = qaddbut(horiz1,"Tab 1",0)
    but2 = qaddbut(horiz1,"Tab 2",1)
    but3 = qaddbut(horiz1,"Tab 3",2)
    tab1 = qaddlay(lay,0)
    tab2 = qaddlay(lay,1)
    tab3 = qaddlay(lay,2)
    tab1.SetBackGradient( "red", "green", "", "left-right" )
    t1 = app.AddText( tab1,"Text" )

    tab2.SetBackGradient( "green", "blue", "", "left-right" )
    t2 = app.AddButton( tab2,"Button to add tab" )

    tab3.SetBackGradient( "blue", "red", "", "left-right" )
    t3 = app.AddCheckBox(tab3,"Checkbox" )

//  open first tab
    qbuts[0].GetParent().SetBackColor(qactive)
    qbuts[0].SetTextColor(qactive)
    tab1.Show()
//  button to add tab

    t2.SetOnTouch( function() {
      but4=qaddbut(horiz1,"Tab 4",3)
      tab4=qaddlay(lay,3)
      tab4.SetBackGradient("gray","silver","","left-right")

//      t4 = app.AddImage( tab4,"/Sys/Img/Droid1.png" )
web = app.AddWebView(tab4,1,0.5) // full screen width, half screen height

web.LoadUrl( "https://droidscript.org/" ); // load web page

txt = app.AddTextEdit(tab4,"http://google.com",1,-1,"SingleLine")
txt.SetOnEnter(function () {web.LoadUrl(txt.GetText());})

    } )
    app.AddLayout( lay )
}
function qaddbut(qlay,qtxt,qidx) {

    var v = app.AddLayout(qlay,"Linear","Touchthru")
    v.SetBackColor(qinactive)
    v.SetPadding(0,0,0,5,"px")
    var q = app.CreateText(qtxt )
    v.AddChild(q)
    q.Batch({
        SetBackColor_: [qinactive],
        SetTextColor: [ qneutral ],

        SetPadding_: [20,20,20,20,"px"],
//      SetMargins_: [20,20,20,20,"px"],
//      SetTextSize: [32,""],  
        SetOnTouchDown: [q_OnTouch]
    })
    q.data.qidx = qidx
    ign = qbuts.push(q)
    return q
}
function qaddlay(qlay,qidx) {
    var q = app.AddLayout(qlay,"Linear", "FillXY")
    q.Gone()
    ign = qlays.push(q)
    return q
}    
function q_OnTouch () {
    var qidx = this.data.qidx
    if (qidx!=qcurrent) {

       qbuts[qcurrent].SetTextColor(qneutral)
       qbuts[qcurrent].GetParent().SetBackColor(qinactive)
       qbuts[qidx].SetTextColor(qactive)
       qbuts[qidx].GetParent().SetBackColor(qactive)

       qlays[qcurrent].Gone()
       qlays[qidx].Show()
       qcurrent=qidx

    } // if

[Thiemo Melhorn]

Ich habe soweit den Code angepasst und eigentlich funktioniert das auch. Aber noch nicht wirklich, weil wenn ich nochmal den Button mit dem "+" drücke, wird kein neuer Tab mit einem leeren Tab angezeigt, sondern irgendeine die Seite nach unten gequatscht. 

Könntest du mir bitte diesen Fehler beheben?

var qbuts = [], qlays = [], qcurrent=0

const qactive="#cccccc", qinactive="#333333", qneutral="#999999"

function OnStart() {

    lay = app.CreateLayout( "Linear", "Vertical,FillXY" )

    scroll = app.CreateScroller(1,-1,"Horizontal")

    lay.AddChild(scroll)

    horiz1 = app.CreateLayout( "Linear","Horizontal" )

    scroll.AddChild(horiz1)

    but1 = qaddbut(horiz1,"Tab 1",0)

   

    tab1 = qaddlay(lay,0)

    lay.SetBackGradient( "red", "green", "", "left-right" )

    t2 = app.AddButton( tab1,"+" )

    qbuts[0].GetParent().SetBackColor(qactive)

    qbuts[0].SetTextColor(qactive)

    tab1.Show()

    

    t2.SetOnTouch( function() {

    

web = app.AddWebView(tab1,1,0.8)

web.LoadUrl("https://google.com");

txt = app.AddTextEdit(tab1,"https://",1,-1,"SingleLine")

txt.SetOnEnter(function () {web.LoadUrl(txt.GetText());})

    } )

    app.AddLayout( lay )

}

function qaddbut(qlay,qtxt,qidx) {

    var v = app.AddLayout(qlay,"Linear","Touchthru")

    v.SetBackColor(qinactive)

    v.SetPadding(0,0,0,5,"px")

    var q = app.CreateText(qtxt )

    v.AddChild(q)

    q.Batch({

        SetBackColor_: [qinactive],

        SetTextColor: [ qneutral ],

        SetPadding_: [20,20,20,20,"px"],

      SetMargins_: [20,20,20,20,"px"],

      SetTextSize: [12,""],  

[Alan Hendry]

HI,

I got a bit further with my original code. Added a few comments.

You still have to type http:// before addresses

It doesn't hide the forward and backward buttons when they are not relevant

It puts the URL in the tab (marked //// if you want to remove it) and input box

It displays web errors in an alert (marked /// if you want to remove it)

I did some testing in Landscape, not sure what it looks like in Portrait

There's no "close tab" (it would need to hide/delete a tab, and then show a different tab)

Regards, ah

cfg.Dark
const qactive="#cccccc", qinactive="#333333", qneutral="#999999" // colours for tabs
var qbuts = [], qlays = [], qcurrent=0 // tabs buttons, layouts, current tab
var qwebs=[], qtxts=[], qcnt=-1 // webviews, text inputs, tab count
function OnStart() {
    lay = app.CreateLayout( "Linear", "Vertical,FillXY,Left" )
//  scroller for tab buttons

    scroll = app.CreateScroller(1,-1,"Horizontal")
    lay.AddChild(scroll)

    horiz1 = app.CreateLayout( "Linear","Horizontal,Left" )
    scroll.AddChild(horiz1)
//  button to add tabs
    t2 = app.AddButton( horiz1,"+" )
    t2.SetOnTouch( newtab)
// create first tab
    newtab()

//  open first tab
    qbuts[0].GetParent().SetBackColor(qactive)
    qbuts[0].SetTextColor(qactive)

    qlays[0].Show()

    app.AddLayout( lay )
}
function newtab () { // new tab
        qcnt+=1
        but4=qaddbut(horiz1,"Tab "+qcnt,qcnt)
        tab4=qaddlay(lay,qcnt)
        horiz2 = app.AddLayout(tab4,"linear","horizontal")
        back = app.AddButton(horiz2,"<-")
        back.SetOnTouch(function() {qwebs[qcurrent].Back();})
        fwrd = app.AddButton(horiz2,"->")
        fwrd.SetOnTouch(function () {qwebs[qcurrent].Forward();})
        txt = app.AddTextEdit(horiz2,"",0.85,-1,"SingleLine")
        txt.SetHint("Type URL here, starting with http://")
        qtxts[qcnt]=txt
        txt.SetOnEnter(function () {qwebs[qcurrent].LoadUrl(this.GetText());})
        web = app.AddWebView(tab4,1,0.75) // full screen width, 0.8 screen height
        web.SetOnError(function(msg) {alert(msg);}) /// web error
        web.SetOnUrl(function (url) {progress(100);this.LoadUrl(url);})
        web.SetOnProgress(progress)
        qwebs[qcnt] = web
        app.SimulateTouch(but4,0,0,"Down") // open new tab
}
function qaddbut(qlay,qtxt,qidx) { // add button for tab

    var v = app.AddLayout(qlay,"Linear","Touchthru")

    v.Batch({
        SetBackColor_: [qinactive],
        SetPadding_: [0,0,0,5,"px"]

    })
    var q = app.CreateText(qtxt )
    v.AddChild(q)
    q.Batch({
        SetBackColor_: [qinactive],
        SetTextColor: [ qneutral ],
        SetPadding_: [20,20,20,20,"px"],

        SetOnTouchDown: [q_OnTouch]
    })
    q.data.qidx = qidx
    ign = qbuts.push(q)
    return q
}

function qaddlay(qlay,qidx) { // add layout for tab

    var q = app.AddLayout(qlay,"Linear", "FillXY")
    q.Gone()
    ign = qlays.push(q)
    return q
}    

function q_OnTouch () { // touched tab button, swap active tab

    var qidx = this.data.qidx
    if (qidx!=qcurrent) {
       qbuts[qcurrent].SetTextColor(qneutral)
       qbuts[qcurrent].GetParent().SetBackColor(qinactive)
       qbuts[qidx].SetTextColor(qactive)
       qbuts[qidx].GetParent().SetBackColor(qactive)
       qlays[qcurrent].Gone()
       qlays[qidx].Show()
       qcurrent=qidx
    } // if
} // fn

function progress (percent) { // webpage loading
    if (percent == 100) {
        qbuts[qcurrent].SetText(qwebs[qcurrent].GetUrl()); //// show URL in tab button
        qtxts[qcurrent].SetText(qwebs[qcurrent].GetUrl()); // URL in input box
    }
}
function OnConfig(){ // rotate screen

[Thiemo Melhorn]

Ich kann leider keine URL öffnen.

(Siehe Bild)

[Alan Hendry]

HI,

You have to start the address with http:// (or https:// etc)

If the web page produces an error then it pops up, click OK (you can comment out the line with /// web error)

I just tested with http://youtube.de, it redirected to https://m.youtube.com/?gl=DE and worked OK

Regards, ah

[Thiemo Melhorn]

Funktioniert immer noch nicht! Nur in der Entwicklungsumgebung funktioniert es wunderbar.

[Alan Hendry]

HI,

What version of DS is this?

(AFAIK the 2.50 builder is not compatible with DS 2.51).

What works, and what doesn't work? (add tab, open web page, forward, backward, swap tabs)

Regards, ah

[Thiemo Melhorn]

Das weiß ich nicht bzw. auch nicht, wie man diese aktualisieren kann. 

Alles funktioniert, bis auf das navigieren zu der eingegeben Adresse.

[Alan Hendry]

HI,

http://google.com works in DS but after build and install the app gives me 

Web Page not available

The web page at https://google.com could not be loaded because

net::ERR_CACHE_MISS

That needs the official/technical team.

Regards, ah

[Thiemo Melhorn]

Schade!

[Steve Garman]

@Alan

Any chance you could post your test code that throws the error?

[Thiemo Melhorn]

Meinst du mich?

[Steve Garman]

@Thiemo

I was hoping that Alan had a cut-down example that showed the problem

However it would be good if you post the code if you are seeing the same problem

[Thiemo Melhorn]

Diesen Code benutze ich und irgendwie funktioniert der Code bzw. nur in der Entwicklungumgebung selber, dass ich da auch die Adresse aufrufen kann.

[Alan Hendry]

HI,

It's the code I posted 13 Apr 2022, 16:25:52

When the user types in a URL and enters - (qwebs is an array of WebViews, qcurrent is an index for the current webview, zero for first)

txt.SetOnEnter(function () {qwebs[qcurrent].LoadUrl(this.GetText());})

The webview has

        web = app.AddWebView(tab4,1,0.75) // full screen width, 0.8 screen height
        web.SetOnError(function(msg) {alert(msg);}) /// web error
        web.SetOnUrl(function (url) {progress(100);this.LoadUrl(url);})
        web.SetOnProgress(progress)

The SetOnURL and SetOnProgress are to get the URL (clicking links, forward, back) and put it in the tab and input field

Pretty sure it's loading the URL, it redirects from http://google.com  to https://google.com (the URL is put in the tab and input field)

In DS it ends up at https://www.google.com/?gws_rd=ssl 

for some sites web errors display in the alert, touching OK continues and shows the page

I've tried commenting out the SetOnError, but the problem still exists in the APK

Don't know whether to start with the Example in the docs and embellish, or start with my code and simplify.

https://stackoverflow.com/questions/30637654/android-webview-gives-neterr-cache-miss-message

looks a bit similar

Regards, ah

[Alan Hendry]

HI,

The example Remote has

 web.LoadUrl( "http:///www.google.com" );

yes, three slashes

If I build, install and run it shows the Google cookies pop-up "Before you continue" with "Read more v" button

but touching the button does nothing, can't slide the text up either.

Two slashes is the same problem.

Removing "Progress" parm and SetOnProgress fixes it.

Regards, ah

[Thiemo Melhorn]

Kannst du mir bitte bei diesem Problem helfen?

steve....@gmail.com schrieb am Samstag, 16. April 2022 um 12:57:38 UTC+2:

[Alan Hendry]

HI,

There seems to be a problem with Progress (in the Example)

You could try commenting out the line

web.SetOnProgress(progress)

But then it won't show the changed URL if you go forward or backwards

Regards, ah

[Thiemo Melhorn]

Es hat nicht funktioniert! 

[Alan Hendry]

HI,

Are you getting message  net::ERR_CACHE_MISS  ?  Can you see a spinning "progress" icon?

I can only suggest temporarily commenting out lines or deleting them (but then it will not show change of URL)

       web.SetOnError(function(msg) {alert(msg);}) /// web error
        web.SetOnUrl(function (url) {progress(100);this.LoadUrl(url);})
        web.SetOnProgress(progress)

 Regards, ah

[Thiemo Melhorn]

Ich habe diese Zeilen, die du mir geschrieben hast, auskommentiert aber außer, dass ich nun das Dialog nicht mehr sehe, funktioniert gar nichts. 

[Alan Hendry]

HI,

Not sure why, but it seems to work if after

       web.SetOnProgress(progress)
 you add 

      web.LoadUrl( "http://www.google.com" )

Regards, ah

[Thiemo Melhorn]

Irgendwie funktioniert das wieder wunderbar (auch in der erstellen APK Datei).

[Thiemo Melhorn]

Nun habe ich getestet, ob man auf URLs zugreifen kann, wenn man schon mal eine Seite geöffnet hat und es funktioniert. Warum auch immer das so ist.

[Thiemo Melhorn]

Wie kann man sozusagen, Tabs 'speichern' und sobald man die App öffnet, den Tab 'öffnen'?

[Alan Hendry]

HI,

It's possible to save the URL(s) using SaveText or SaveJson, 

then read them with LoadText or LoadJson

for every saved URL invoke function newtab with URL

modify function newtab to accept a parameter URL and if parameter is null then open http://google.com else open URL

Regards, ah

[Thiemo Melhorn]

Und wie muss die JSON Datei aussehen?

[Alan Hendry]

HI,

Your code depends on whether you want to have a button to remember one URL, one button to remember all URLs that are open, etc.

If one URL then just store the URL; 

or multiples just separate by semi-colons and use SaveText, or JSON array (e.g. https://www.w3schools.com/js/js_json_arrays.asp)

Regards, ah

[Thiemo Melhorn]

Kannst du mir bitte ein Beispiel von der JSON Datei geben?

[Alan Hendry]

HI,

Probably the easiest way to get all the URLs in JSON when the user exits the app is 

app.EnableBackKey(false)

function OnBack() {
    urls=[]
    qwebs.forEach (function (current,idx) {ign=urls.push(current.GetUrl());})
    x = JSON.stringify(urls)

    alert(x)
    app.Exit()
}

Regards, ah

[Thiemo Melhorn]

Mein Versuch eine Funktion zum Schließen der Tabs, ging nicht wirklich.

function removetab()
{
    lay.RemoveChild("Tab2")
}

[Alan Hendry]

HI,

lay.RemoveChild probable wants a reference to the object (not the name of the variable referencing the object - lay.RemoveChild(but4)

As far as I can see this will remove the button for the last tab 

(the layout for the last tab tab4, layout horiz2, button back, button frwd, textedit txt and webview web would still be there (but not visible))

To close the current tab you probably need to remove the current button - lay.RemoveChild(qbuts[qcurrent])

If the user is looking at a tab and that tab is then closed then a different tab needs to be shown,

You could switch to the first tab (but what if the first tab is closed?)

What if there are no open tabs left.

Regards, ah

[Thiemo Melhorn]

Irgendwie funktioniert das beides nicht. 

[Alan Hendry]

HI,

The buttons that switch tabs are actually under horiz1, simpler to use Hide instead of RemoveChild, after

        txt.SetOnEnter(function () {qwebs[qcurrent].LoadUrl(this.GetText());})

insert
        clos = app.AddButton(horiz2,"x")
        clos.SetOnTouch(function() {qbuts[qcurrent].Hide();})

The user can click on the tab they want to see.

(to reduce the width of the input box, change to         txt = app.AddTextEdit(horiz2,"",0.7,-1,"SingleLine")

If you hide the webviews as well          clos.SetOnTouch(function() {qbuts[qcurrent].Hide();qwebs[qcurrent].Hide();})

then in the OnBack you could ignore the webviews that are hidden

qwebs.forEach (function (current,idx) {

   if (current.GetVisibility() == "Show") ign=urls.push(current.GetUrl());

})

Regards, ah

[Thiemo Melhorn]

Ich bekomme es im Moment nicht hin.

[Alan Hendry]

cfg.Dark
const qactive="#cccccc", qinactive="#333333", qneutral="#999999" // colours for tabs
var qbuts = [], qlays = [], qcurrent=0 // tabs buttons, layouts, current tab
var qwebs=[], qtxts=[], qcnt=-1 // webviews, text inputs, tab count
function OnStart() {

app.EnableBackKey(false)

        txt = app.AddTextEdit(horiz2,"",0.7,-1,"SingleLine")

        txt.SetHint("Type URL here, starting with http://")
        qtxts[qcnt]=txt

        txt.SetOnEnter(function () {qwebs[qcurrent].LoadUrl(this.GetText());})

        clos = app.AddButton(horiz2,"x")

        clos.SetOnTouch(function() {qbuts[qcurrent].Hide();qwebs[qcurrent].Hide();})

        web = app.AddWebView(tab4,1,0.75) // full screen width, 0.8 screen height

        web.SetOnError(function(msg) {alert(msg);}) /// web error
        web.SetOnUrl(function (url) {progress(100);this.LoadUrl(url);})
        web.SetOnProgress(progress)

        web.LoadUrl( "http://www.google.com" )

        qbuts[qcurrent].SetText(qwebs[qcurrent].GetUrl()); /// show URL in tab button

        qtxts[qcurrent].SetText(qwebs[qcurrent].GetUrl()); // URL in input box
    }
}
function OnConfig(){ // rotate screen
   lay.SetOrientation(  "Horizontal")
   horiz1.SetOrientation("Vertical")
}

function OnBack() {
    urls=[]

    qwebs.forEach (function (current,idx) {
        if (current.GetVisibility() == "Show") ign=urls.push(current.GetUrl());
    })

alert(JSON.stringify(urls))
    app.Exit()
}

[Thiemo Melhorn]

Kannst du mir bitte eine richtige SPK Datei senden? 

[Alan Hendry]

HI,

You should be able to copy the code from above and paste into a new project/app.

If you need code to actually save the URLS and re-load them then I haven't written it (yet).

Regards, ah

[Alan Hendry]

HI,

Does anyone know another way of receiving the URLs of multiple webviews after clicks, redirects, back, forward etc?

I'm using WebView SetOnURL and SetOnProgress, but multiple webviews are open and OnProgress doesn't have this

so the code doesn't know which webview has just reached 100%

I don't really want to use a javascript interval to keep doing GetURL for every webview.

Regards, ah

[Steve Garman]

@Alan

You should be able to identify the WebView if you try something like this

function OnStart()
{
    lay = app.CreateLayout( "linear", "VCenter,FillXY" )

     web1 = app.CreateWebView( 1, 0.3, "Progress" )
     web1.SetOnProgress( function(p){web_OnProgess(p,web1)} )
     lay.AddChild( web1 )

     web2 = app.CreateWebView( 1, 0.3, "Progress" )
     web2.SetOnProgress( function(p){web_OnProgess(p,web2)} )
     lay.AddChild( web2 )

     app.AddLayout( lay )

     web1.LoadUrl( "https:///www.droidscript.org" )
     web2.LoadUrl( "https://droidscript.org/wiki/" )
}

function web_OnProgess( progress, w )
{
     app.Debug( "progress = " + progress+" "+w.GetUrl() );
}

[Alan Hendry]

@Steve,

That looks good, but the webviews are created dynamically by a function when the user clicks on a + icon 

(and there can be many webviews).

So for the first uses variable qweb, and the second uses variable qweb, and the third qweb, etc

Objects are not my strong point but as far as I can figure

we create the first webview in variable qweb, and set up onprogress and load url

then create another webview in variable qweb and set up onprogress and load url

Now when the first webview changes URL and progresses and invokes the onprogress function (I reckon)

it will pick up variable qweb which now points at the second webview

(So I think I need the onprogress function needs to pick up a reference to the webview whose URL changed, 

not the webview that qweb currently points at) 

Regards, ah

[Alan Hendry]

HI,

This attempts to save open URLS at close, then re-open at next run.

Because WebView Progress doesn't have this then tab headings can be flaky

(now they try to show the page title, not the URL)

Gets pretty messy if you close all tabs (so don't do that).

Regards, ah

[Thiemo Melhorn]

Und wie ist die Codezeilen zum Tab schließen?

[Thiemo Melhorn]

Ich habe ja bereits es versucht aber das funktioniert nicht so.

[Alan Hendry]

HI,

To close a tab just touch the x button, then you have to touch the tab that you want.

Regards, ah

[Thiemo Melhorn]

Ich möchte mich sehr bedanken, dass mir sehr viel geholfen wurde. DANKESCHÖN! Als nächstes werde ich alleine versuchen,  das soweit alles nach und nach anzupassen.

[Thiemo Melhorn]

Wie heißen die Codezeilen zum neu laden der Seite und zum gelangen zur Startseite bzw. zum hinzufügen einer Startseite?

Außerdem möchte ich diesen Browser auch als Standardbrowser benutzen können. Wie heißt dazu der Code?

[Alan Hendry]

Hi,

New tabs open http://google.com, just change that line for a different URL

        if (typeof url == "undefined") url = "http://www.google.com"

Regards, ah

[Thiemo Melhorn]

Ich möchte, dass ein Dialog mit einer TextBox und mit einem Button erscheint, wenn noch nichts als Startseite angegeben wurde bzw. die Startseite angezeigt wird.

Das meinte ich mit meiner ersten Frage in meinem letzten Post. 

[Alan Hendry]

HI,

Some posts seem to have been deleted.

Probably easiest would be add a tab (before the tabs for the webviews)

with an input text box, and an onenter (that would savetext the input).

Then at the beginning of the OnStart loadtext, if there is none then use http://google.com

Regards, ah

[Thiemo Melhorn]

Und wie sieht das im Code aus?

[Alan Hendry]

HI,

Before  // load saved tabs (if any) add

(a comment that this is to add a tab for the default URL)

Set defaultUrl to app.LoadText of "defaultUrl" with default value "http://google.com"

increment qcnt, create button and tab layout (qaddbut, qaddlay)

in the new tab layout add a text box, with an onchange to set defaultUrl to the value in the text box, and SaveText as "defaultUrl"

change  if (typeof url == "undefined") url = "http://www.google.com"  to use defaultUrl

Regards, ah

[Thiemo Melhorn]

Ich kann ja jeder es mal probieren. 

[Thiemo Melhorn]

Ich möchte, dass Android den Webbrowser gerne als Standardbrowser nutzt  (also, das dieser Webbrowser als Standard ausgewählt wird). 

Wie geht das bzw. wie heißt die Funktion dafür?

[Thiemo Melhorn]

const qactive="#cccccc", qinactive="#333333", qneutral="#999999" // colours for tabs

var qbuts = [], qlays = [], qcurrent=0

var qwebs=[], qtxts=[], qcnt=-1

function OnStart() {

app.SetOrientation("landscape")

app.EnableBackKey(false)

    lay = app.CreateLayout( "Linear", "Vertical,FillXY,Left" )

    // scroller for tab buttons

    scroll = app.CreateScroller(1,-1,"Horizontal")

    lay.AddChild(scroll)

    horiz1 = app.CreateLayout( "Linear","Horizontal,Left" )

    lay.SetBackGradient( "green", "blue", "red", "left-right" )

    scroll.AddChild(horiz1)

    // load saved tabs (if any)

   temp = app.LoadText("temp","")

   if (temp == "") {

       newtab()

   } else {

       urls = JSON.parse(temp)

       urls.forEach(function (current) {newtab(current);} )

   }

    qbuts[0].GetParent().SetBackColor(qactive)

    qbuts[0].SetTextColor(qactive)

    qlays[0].Show()

    

    app.AddLayout( lay )

}

// new tab

function newtab (url) {

        if (typeof url == "undefined") url = "https://www.thiemo-melhorn.de/suche/index.php"

        qcnt+=1

        but4=qaddbut(horiz1,"Tab "+qcnt,qcnt)

        tab4=qaddlay(lay,qcnt)

        horiz2 = app.AddLayout(tab4,"linear","horizontal")

        // create controls and add to layout

        back = app.AddButton(horiz2," [fa-backward]", -1, 0.09, "custom,fontawesome");

        back.SetStyle("#cccccc", "#333333", 14, "#999999", 1, 0);

        back.SetTextColor("#bada55")

        back.SetOnTouch(function() {qwebs[qcurrent].Back();})

        txt = app.AddTextEdit(horiz2,url,0.6,-1,"SingleLine")

        qtxts[qcnt]=txt

        txt.SetOnEnter(function () {qwebs[qcurrent].LoadUrl(this.GetText());})

        forward = app.AddButton(horiz2,"[fa-forward]", -1, 0.09, "custom,fontawesome");

        forward.SetStyle("#cccccc", "#333333", 14, "#999999", 1, 0);

        forward.SetTextColor("#bada55")

        forward.SetOnTouch(function () {qwebs[qcurrent].Forward();})

        btnInfo = app.CreateButton("[fa-info]", -1, 0.09, "custom,fontawesome");

        btnInfo.SetStyle("#cccccc", "#333333", 14, "#999999", 1, 0);

        btnInfo.SetTextColor("#bada55");

        btnInfo.SetTextSize(24);

        btnInfo.SetOnTouch(btnInfo_OnTouch);

        horiz2.AddChild(btnInfo);

        tab = app.AddButton(horiz2,"[fa-plus]", -1, 0.05, "custom,fontawesome");

        tab.SetStyle("#cccccc", "#333333", 14, "#999999", 1, 0);

        tab.SetTextColor("#bada55")

        tab.SetOnTouch( newtab)

        close = app.AddButton( horiz2,"[fa-minus]", -1, 0.05, "custom,fontawesome");

        close.SetStyle("#cccccc", "#333333", 14, "#999999", 1, 0);

        close.SetTextColor("#bada55")

        close.SetOnTouch(function() {qbuts[qcurrent].Hide();qwebs[qcurrent].Hide();})

        web = app.AddWebView(tab4,1,0.9)

        web.SetOnError(function(msg) {alert(msg);})

        web.SetOnUrl(function (url) {progress(100);this.LoadUrl(url);})

        web.SetOnProgress(progress)

        web.LoadUrl( url )

        qwebs[qcnt] = web

        app.SimulateTouch(but4,0,0,"Down")

}

function qaddbut(qlay,qtxt,qidx) {

    var v = app.AddLayout(qlay,"Linear","Touchthru")

    v.Batch({

        SetBackColor_: [qinactive],

        SetPadding_: [0,0,0,5,"px"]

    })

    var q = app.CreateText(qtxt )

    v.AddChild(q)

    q.Batch({

        SetBackColor_: [qinactive],

        SetTextColor: [ qneutral ],

        SetPadding_: [20,20,20,20,"px"],

        SetOnTouchDown: [q_OnTouch]

    })

    q.data.qidx = qidx

    ign = qbuts.push(q)

    return q

}

// add layout for tab

function qaddlay(qlay,qidx) {

    var q = app.AddLayout(qlay,"Linear", "FillXY")

    q.Gone()

    ign = qlays.push(q)

    return q

}

function q_OnTouch () {

    var qidx = this.data.qidx

    if (qidx!=qcurrent) {

       qbuts[qcurrent].SetTextColor(qneutral)

       qbuts[qcurrent].GetParent().SetBackColor(qinactive)

       qbuts[qidx].SetTextColor(qactive)

       qbuts[qidx].GetParent().SetBackColor(qactive)

       qlays[qcurrent].Gone()

       qlays[qidx].Show()

       qcurrent=qidx

    }

}

function progress (percent) {

    if (percent == 100) {

        qbuts[qcurrent].SetText(qwebs[qcurrent].GetUrl());

        qwebs[qcurrent].Execute("document.title",function (result) {qbuts[qcurrent].SetText(result);}) // show title in tab

        qtxts[qcurrent].SetText(qwebs[qcurrent].GetUrl());

        qwebs[qcnt].Execute("document.title",function (result) {qbuts[qcnt].SetText(result);}) // show title in tab

        qtxts[qcnt].SetText(qwebs[qcnt].GetUrl());

    }

}

// Create dialog

function btnDlg_OnTouch() {

  dlg.Dismiss();

}

function btnInfo_OnTouch() {

  dlg = app.CreateDialog("Infos", 0.8, 0.4 );

  layDlg = app.CreateLayout("linear", "VCenter,FillXY");

  layDlg.SetSize(0.7, 0.39);

  dlg.AddLayout(layDlg);

  

    var text = "<p>tmBrowser</p>" + 

    "<p>Version: 1.0</p>";

    txt = app.CreateText( text, 1., -1, "Html,Link" );

    txt.SetMargins( 0, 0.02, 0, 0 );

    txt.SetPadding( 0.03, 0.03, 0.03, 0.03 );

    txt.SetTextSize( 14 );

    layDlg.AddChild( txt );

    

  dlg.Show();

}

function OnConfig(){

   horiz1.SetOrientation("landscape")

}

function OnBack() {

    urls=[]

    qwebs.forEach (function (current,idx) {

        if (current.GetVisibility() == "Show") ign=urls.push(current.GetUrl());

    })

    temp = JSON.stringify(urls)

    app.SaveText("temp",temp)

    app.Exit()

[Alan Hendry]

HI,

http://droidscript.org/wiki/doku.php?id=plugins:building_an_apk

documents how to use build.json pathPattern to specify files (extensions) that your app can open.

I think the code receives the file as in Sample "Shared Data"

I think the user still has to use Android Settings to set the default app.

The SPK now has a tab to set the default URL.

Picking up the URL/Title after clicking link/forward/back is still flaky.

Your version has hard coded a different URL, and you've added

        qbuts[qcurrent].SetText(qwebs[qcurrent].GetUrl());

        qwebs[qcurrent].Execute("document.title",function (result) {qbuts[qcurrent].SetText(result);}) // show title in tab

        qtxts[qcurrent].SetText(qwebs[qcurrent].GetUrl());

        qwebs[qcnt].Execute("document.title",function (result) {qbuts[qcnt].SetText(result);}) // show title in tab

        qtxts[qcnt].SetText(qwebs[qcnt].GetUrl());

 This seems to update the details for the current tab and the last tab

Regards, ah

[Thiemo Melhorn]

Dankeschön dafür.

[Thiemo Melhorn]

Ich habe es sehr oft versucht, diese Version mit meiner zu vereinen aber irgendwie bekomme ich es nicht hin. 

[Thiemo Melhorn]

Ich möchte ein Dialog mit einer TextBox und mit einem Button haben, der dafür sorgt, dass die neue Startseite festgelegt wird. Und einen Button, der die zuvor definierte Startseite im geöffneten Tab angezeigt. 

[Alan Hendry]

HI,

Not sure I understand

Much simpler to touch the +, get a new tab with the old default

Then touch the first tab and change the default URL

Otherwise you need to remember the old default, code another button with an ontouch which would  newtab(olddefault)

Regards, ah