Web object not loading external site through URL

You can use <code> blocks to display your code.

I would be happy to take a look.

Also can you confirm that you have your wifi or cellular working?

Yes i can browse the internet fine.

Sample code
Hi i am attempting to auto load a web object.
My first try was to simply fill out the url field, save my wire file and load up in fusebox.
That did not work. Should it?

The next attempt was to create a panel and nest the web tag inside of the panel. Then in the panel's onloadcomplete call i loaded the url through an action. This did not work either.

I actually then called a coworker, had him create a similar test and we both shared his result because it worked for him but still not on my ipad fusebox. I am on the latest version of fusebox and the latest ios. Can you tell me what might be wrong?

Here is my sample code.

<wire>
<main>
<panel name="web" alias="WEB" height="100%" width="100%" ypos="0" onloadcomplete="panelonloadcomplete">
<toolbar name="toolbar" height="5%" width="100%" align="left" valign="top">
<panel name="button" width="10%" height="80%" align="left" margin="10" valign="center" background="#888888" cornerradius="5" >
<text name="back" width="50%" height="50%" color="#000000" font="" size="12" align="center" valign="center" text="Back"></text>
</panel>
</toolbar>
<web name="web-panel" alias="WEBPANEL" width="100%" height="95%" valign="bottom" url="about:blank"></web>
</panel>
</main>
<actions>
<action name="panelonloadcomplete">
<load url="http://constitutioncenter.org" target="web-panel"/>
</action>
</actions>
</wire>


Interesting. A couple of things to note here.

First of all onloadcomplete will only work when a datasource is being coupled to the panel in question.

I was able to load a web page just fine using your code minus the onloadcomplete portion:

<wire>
<main>
<panel name="web" alias="WEB" height="100%" width="100%" ypos="0">
<toolbar name="toolbar" height="5%" width="100%" align="left" valign="top">
<panel name="button" width="10%" height="80%" align="left" margin="10" valign="center" background="#888888" cornerradius="5" >
<text name="back" width="50%" height="50%" color="#000000" font="" size="12" align="center" valign="center" text="Back"></text>
</panel>
</toolbar>
<web name="web-panel" alias="WEBPANEL" width="100%" height="95%" valign="bottom" url="http://cnn.com"></web>
</panel>
</main>
</wire>


Can you give me a little more detail about your device? Are you able to see your app in the fusebox list? Can you see the webview loading with a wait spinner and your toolbar or is the app not launching at all?

Ok good news!!!
I trashed the fusebox app and re-downloaded it. I also went back to the simplest form of my code. And it worked.
Thanks for you quick responses, just knowing something is supposed to work is half the battle.

Also it is good to know the panel.onloadcompletes are specifically designed for datasource related calls.

The design idea behind this wire file will be a magazine store front where web snippets may possibly load. Is it a good idea to unload these web snippets when opening other wire files from this wire file or is that sort of thing handled automatically?

Sample:

<wire>
<main>
<panel name="web" alias="WEB" height="100%" width="100%" ypos="0">
<web name="web-panel" alias="WEBPANEL" width="100%" height="95%" valign="bottom" url="http://www.sendmyad.com"></web>
</panel>
</main>
</wire>


Great, I am glad you got it working.

Our best practice is to use the action <load url="about:blank" target="WEBTAGALIAS" /> targeting your web panel anytime you plan to navigate away from it in your app, this helps keep memory to a minimum.

BTW I also noticed that without a width and height parameter the web object does not show up for me.

width="100%" height="100%"


These items were not documented in the web object wire language.
Since this object extends panel, does that mean it is safe to assume it inherits all of the same possible attributes as a panel?

Yes. The web tag can use most panel tags including all dimension parameters (height, width, xpos, ypos, etc.) and action triggers (onclickup, onswiperight, etc).

This makes the panel a VERY important object for most other objects. In the documentation we chose to call out only unique attributes outside of the extended ones. Though in this case it might make sense to list height and width as required on the web tag documentation.

Thanks!

Sorry to bombard you but i do have one more question.
Is there a way to prevent the web object from being zoomable?

I've tried attaching zoomable="no" to both the parent panel and the web object with no success.

Sample:

<wire>
<main>
<panel align="right" alias="PANEL-6LPMAT" name="Panel 1" width="30%" height="100%" zoomable="no">
<web url="http://www.sendmyad.com" alias="WEB-Z3ET2W" name="Web 1" width="100%" height="100%" zoomable="no"></web>
</panel>
<panel background="#fcf9ce" alias="PANEL-3NKX36" name="Panel 2" width="69%" height="100%">
</panel>
</main>
</wire>


Unfortunately the webview currently can't prevent zooming on its own.

I could put in a feature request to implement scalesPageToFit="No" as an option in our engine.

Let me double check to see if there isn't a solution that already exists.

Thanks, that would be great for creating static html widgets that are designed specifically for placing in panels.

If you are creating the HTML yourself, you should consider using a texttemplate , which will help you style the content and prevent it from zooming.

https://studio.rarewire.com/wordpress...

Sample:


<wire>
<datasources>
<datasource name="amazon" source="http://www.amazon.com/rss/bestsellers/books" query="//item" providertype="xml" parsenamespace="yes" />
</datasources>
<main>
<texttemplate name="reader" ><![CDATA[
<html><head><meta content="width=100%, minimum-scale=1,
maximum-scale=1, initial-scale=1" name="viewport">
<style> body{width:80%;margin:0
auto;color:#222222;font-family:Georgia;font-size:17px;line-height:1.5em;background-color:#eeeeee;padding:50px
20px 50px 10px;} h1
{color:#3b3b3c;font-size:28;line-height:1.15em;margin-top:0px;text-align:center;}
h2{margin-bottom:10px;color:#d7554b;font-size:15;font-weight:bold;font-family:helvetica;text-transform:uppercase;text-align:center;}
h3{font-size:15px;font-weight:normal;color:#898989;text-align:center;border-top:1px
solid #bbb;border-bottom:1px solid #bbb;padding:5px 0px;} h3
span{white-space:nowrap;font-style:italic;} p {text-align:justify;}img
{max-width:100% !important;} a {color:#444444;border-bottom:1px solid
#b2372c;text-decoration:none;} img {display:block;margin:0
auto;margin-bottom:25px;} span.image-rss {display:none;} </style>
</head>
<body>
<h2>Line 1</h2>
<h1>Line 2</h1>
<h3> <span>Line 3</span> </h3>
[var:content]
</body>
</html>
]]></texttemplate>
<panel name="content3" alias="CONTENT3" width="100%" height="100%" valign="bottom" align="center">
<web name="textgoeshere" alias="TEXTGOES" width="460" height="800" align="center" ypos="20" html="" pagetofit="yes" transparent="yes"></web>
</panel>
</main>
<actions>
<action name="assignContent" datasource="amazon" datasourceevent="querycomplete">
<assign property="var:content" value="[datasource:amazon.1.*[local-name()='description']]" />
<alert message="[var:content]" />
<assign property="object:TEXTGOES.html" value="[template:reader.content]" />
</action>
</actions>
</wire>