Why HTML Code is not Running in App Inventor

[Techno Peace]

Hello,

I have a HTML code is running in web browser truely but not running in my app inventor project. There is no thing in webviewer. The HTML code and block code and web view is attached. Please help me. Thanks for your attention and help. 

Techno Peace

[TimAI2]

The webviewer will only work with http:// / https:// urls

You will need to try embedding your html inside a properly formed page with an http:// or https: address

[ABG]

I posted a sample with an html file yesterday night at

https://groups.google.com/d/msg/mitappinventortest/TPI1-B7rbq8/ZIsoqKo7CAAJ

It works in the emulator and Companion.

The file path might need to be adjusted for a built apk.

ABG

[Chris Ward]

@Tim also works with file://

[Techno Peace]

I learnt that we can use html code in text block like the block picture I sent using " data:text/html, <YOUR HTML CODE>" . But it works until I add CSS. It works without CSS. But CSS make html goes wrong. Can I use js, css and html files as a "file:// url"? And If I can, can you give me bootstrap examples for chat app or exercises making chat app with css, javascript and html?

[Juan Antonio]

Example JavaScript and Css

http://kio4.com/appinventor/169J_javascript_paneles.htm

html:

http://kio4.com/appinventor/169C_javascript_formulario.htm

http://kio4.com/appinventor/169CC_javascript_botones.htm

[Chris Ward]

Hello Techno

Let's get a few things straight.

1) The Label (not TextBox) component accepts only very very basic HTML and no CSS. 

2) The WebViewer component (Android component, not specific to App Inventor) is a "subset" browser than can handle "regular" HTML 5, CSS and JavaScript. Not much beyond that though, so bootstrap sites may or may not display properly. Note that App Inventor v178 WebViewer currently has a display bug on Android Pie (v9) which MIT are working on now.

From the Help:

Component for viewing Web pages. The Home URL can be specified in the Designer or in the Blocks Editor. The view can be set to follow links when they are tapped, and users can fill in Web forms. Warning: This is not a full browser. For example, pressing the phone"s hardware Back key will exit the app, rather than move back in the browser history.

You can use the WebViewer.WebViewString property to communicate between your app and Javascript code running in the Webviewer page. In the app, you get and set WebViewString. In the WebViewer, you include Javascript that references the window.AppInventor object, using the methods and setWebViewString(text).

For example, if the WebViewer opens to a page that contains the Javascript command

document.write("The answer is" + window.AppInventor.getWebViewString());

and if you set WebView.WebVewString to "hello", then the web page will show

The answer is hello.

And if the Web page contains Javascript that executes the command

window.AppInventor.setWebViewString("hello from Javascript"),

then the value of the WebViewString property will be

hello from Javascript. 

3) Do a Google search for Chat App coding.

4) Also check-out the App Inventor Gallery (via App Inventor toolbar) could be chat examples there.

[Techno Peace]

@Juan

The links you've sent require permission and don't allow me to acces. 

[Techno Peace]

@Chris

Okey I got it, thanks. I hope there is a simple html - javascript code for chat app appropriate to app inventor web viewer. I supposed that I can use whole html codes when I use java language. If app inventor get troubles all time to do what I want to build, I pass to java. But for simple or intermediate apps, app inventor is good idea to use is very easy rather than java or other text based languages. 

[Taifun]

How to read a HTML page stored as asset inside of App Inventor

some more html examples https://puravidaapps.com/tutorials.php#html

Taifun

---

Trying to push the limits of App Inventor! Snippets, Tutorials and Extensions from Pura Vida Apps by Taifun. 

[Chris Ward]

Hi Techno

It's certainly one of the most useful components. I think MIT have a handle on why it might fail on Android Pie, so I hope it is a relatively easy fix.

[Taifun]

 I hope there is a simple html - javascript code for chat app appropriate to app inventor web viewer

 

what about using an extension? for example

Chat Listview Extension by Andres Daniel
Chat Interface Extension by Ben
Custom ChatBox extension by wanttobe
Chat View Extension by cttricks

see also the extensions directory here https://puravidaapps.com/extensions.php

Taifun

[Techno Peace]

Hello @Taifun

Whenever I download an aix file, the project is not compatible with my mobile phone, altough I see the project works fine with other some mobile phones. Aix files generally dont order all android release.  

[TimAI2]

In what way are extnesions "not compatible" ?

What happens ?

[Techno Peace]

It comes weird to me that when I try one phone, the extension works truly, but  when I try another phone, phone doesn't accept the aix and alert "end application". All android releases don't run aix extensions.

[Taifun]

I try another phone, phone doesn't accept the aix and alert "end application". All android releases don't run aix extensions.

what exactly means "phone doesn't accept the aix and alert end application"
which extension did you try?
is this while using the companion app? can you elaborate? or after building the app?
also what kind of device / Android version are you using for your tests?

probably you are not familiar with extensions?

See the App Inventor Extensions document about how to use an App Inventor Extension.

Taifun

[Techno Peace]

I can use aix files on mobile smart phones excluding my mobile smart phone and I am familiar to use them. My phone android version is Android 5.1.1. I can use on my phone as companion but not apk. For example Chat View Extension by cttricks extension. 

[TimAI2]

Going back to your original request:

1. I have to take back what i said in my earlier post, you can throw data:text/html,... at the webviewer, and use some css and plain javascript, so sorry for the confusion caused there.

2. Here is an example

(the \n characters are included to format the "Do It output")

and the code:

data:text/html,

<html>

<head>

<style>

p {color:green; font-size: 40;}

</style>

</head>

<body>

<div id="mytext"><p>Hello World</p></div>
<button type="button"onclick="makeRed();">Click Me!</button>

</body>

<script>

function makeRed() {

document.getElementById("mytext").style.backgroundColor="red";

}

</script>

</html>

It is just a simple test but it demonstrates what is possible. Short video of the app attached

2. I tested your example in my PC browser and that would not work with data:text/html,..., but it did work when loading the html file.

3. Extensive testing in the webviewer with the html file and the data stream showed me that there are limits with the css that can be displayed, and I don't believe jquery will work in a data stream ( Itried calling the jquery cdn from the web and locally as an asset)

4. you may be able to find plain javascript alternatives to the jquery you want to use, and to simplify your css to get what you want

[Taifun]

My phone android version is Android 5.1.1. I can use on my phone as companion but not apk. For example Chat View Extension by cttricks extension. 

you should contact the extension developer in this case then

Taifun

[Techno Peace]

Thanks for help TimAI2

My goal is sending list data from app to html and writing them in message blocks like chat apps. I'm trying to build the goal must be adjustable for messages coming so message blocks' quantity should get more.