WebViewGadget()

Syntaxe

Resultat = WebViewGadget(#Gadget, x, y, Longueur, Hauteur [, Options])

Crée un nouveau gadget d'affichage Web.

Arguments

#Gadget	Le numéro d'identification du gadget. #PB_Any peut être utilisé pour générer automatiquement ce numéro.
x, y,Longueur, Hauteur	La position et les dimensions du nouveau gadget.
Options (optionnel)	Modifie le comportement du gadget : #PB_WebView_Debug : Active l'élément de menu contextuel 'Inspecter' pour afficher l'inspecteur Web et la console.

Valeur de retour

Renvoie une valeur non nulle en cas de succès, zéro sinon.

Si #PB_Any a été utilisé comme paramètre #Gadget alors la valeur de retour est le numéro de gadget généré automatiquement, en cas de succès.

Remarques

Si nécessaire, un proxy peut être défini avec WebViewProxy().

Après la création, utilisez BindWebViewCallback() pour interagir avec le code JavaScript de l'interface utilisateur.
De plus, les commandes de gadget courantes telles que ResizeGadget() ou HideGadget() peuvent également être utilisées.

Les fonctions suivantes peuvent être utilisées pour agir sur un WebViewGadget :

- SetGadgetText() : Modifie l'URL actuelle. Il peut s'agir d'un URL de fichier local tel que "file://c:/purebasic/svn/webview.html" ou d'une URL HTTP standard. Lors de l'utilisation d'un URL de fichier local, il doit s'agir du chemin d'accès complet. Vous pouvez facilement construire l'URL local en ajoutant 'file://' au chemin d'accès.

- SetGadgetItemText() : Avec #PB_WebView_HtmlCode comme 'élément', le code HTML peut être diffusé (streamé) dans le gadget. Toutefois, le code HTML est traité comme un contenu local non fiable et certaines autorisations ne sont pas autorisées.

Exemple: Utiliser des fichiers HTML et CSS locaux

  Procedure IncrementJS(ParametreJSON$)
    Static i
    Debug "IncrementJS "+ParametreJSON$
    i+1
    ProcedureReturn UTF8(~"{ \"count\": "+Str(i)+ "}")
  EndProcedure

  Procedure ComputeJS(ParametreJSON$)
    Debug "ComputeJS "+ParametreJSON$
    ProcedureReturn UTF8(~"150")
  EndProcedure

  OpenWindow(0, 100, 100, 400, 400, "Salut", #PB_Window_SystemMenu)

  WebViewGadget(0, 0, 0, 400, 400)
  SetGadgetText(0, "file://" + #PB_Compiler_Home + "examples/sources/Data/WebView/webview.html")
    
  BindWebViewCallback(0, "increment", @IncrementJS())
  BindWebViewCallback(0, "compute", @ComputeJS())

  Repeat 
    Event = WaitWindowEvent()
  Until Event = #PB_Event_CloseWindow

Exemple: En utilisant du code HTML en ligne

  Procedure IncrementJS(ParametreJSON$)
    Static i
    Debug "IncrementJS "+ParametreJSON$
    i+1
    ProcedureReturn UTF8(~"{ \"count\": "+Str(i)+ "}")
  EndProcedure

  Procedure ComputeJS(ParametreJSON$)
    Debug "ComputeJS "+ParametreJSON$
    ProcedureReturn UTF8(~"150")
  EndProcedure

  OpenWindow(0, 100, 100, 400, 400, "Salut", #PB_Window_SystemMenu)

  WebViewGadget(0, 0, 0, 400, 400)

  SetGadgetItemText(0, #PB_WebView_HtmlCode, 
                    ~"<button id=\"increment\">Cliquez moi !</button>\n"+
                    ~"<div>Vous avez cliqué <span id=\"count\">0</span> fois.</div>\n"+
                    ~"<button id=\"compute\">Calculer</button>\n"+
                    ~"<div>Resultat du calcul: <span id=\"compute-result\">0</span></div>\n"+
                    ~"<script>\n"+
                    ~"  const [incrementElement, countElement, computeElement, "+
                    ~"computeResultElement] =\n"+
                    ~"    document.querySelectorAll(\"#increment, #count, #compute, "+
                    ~"#compute-result\");\n"+
                    ~"  document.addEventListener(\"DOMContentLoaded\", () => {\n"+
                    ~"    incrementElement.addEventListener(\"click\", () => {\n"+
                    ~"      window.increment().then(result => {\n"+
                    ~"        countElement.textContent = result.count;\n"+
                    ~"      });\n"+
                    ~"    });\n"+
                    ~"    computeElement.addEventListener(\"click\", () => {\n"+
                    ~"      computeElement.disabled = true;\n"+
                    ~"      window.compute(6, 7).then(result => {\n"+
                    ~"        computeResultElement.textContent = result;\n"+
                    ~"        computeElement.disabled = false;\n"+
                    ~"      });\n"+
                    ~"    });\n"+
                    ~"  });\n"+
                    ~"</script>")
    
  BindWebViewCallback(0, "increment", @IncrementJS())
  BindWebViewCallback(0, "compute", @ComputeJS())

  Repeat 
    Event = WaitWindowEvent()
  Until Event = #PB_Event_CloseWindow

Exemple: Avec menu contextuel désactivé

  Html$ = ~"<html style=\"margin:0px;height:100%;width:100%\">"+
          ~"<body oncontextmenu=\"return false;\" style=\"margin:0px;min-height:100%;width:100%\">"+
          ~"<button id=\"displayInfo\">Info</button>"+
          ~"</body></html>\n"
  
  OpenWindow(0, 100, 100, 400, 400, "Pas de clic droit", #PB_Window_SystemMenu)

  WebViewGadget(0, 0, 0, 400, 400)
  SetGadgetItemText(0, #PB_WebView_HtmlCode, Html$)

  Repeat 
    Event = WaitWindowEvent()
  Until Event = #PB_Event_CloseWindow

Voir aussi

WebViewExecuteScript(), BindWebViewCallback(), WebViewProxy()

OS Supportés

Tous