App Inventor and HTML/JavaScript

A powerful Label Alternative including touch gestures using the Webviewer, some HTML/jQuery and Hammer.js

There have been questions like this in the forum: I'm trying to find out how to format the text in a Label. I would like to be able to, at least, make certain words bold and use various font-sizes. Ideally, I would like to have HTML-style markup or similar.

Yes, we can use the Webviewer component and some HTML and get a nice Label alternative! And together with Hammer.js we can add touch gestures to our webviewer, which means, as I set it up in the example, a swipe left shows the next page, a swipe right shows the previous page and tap displays a notifier.

Screenshots

What does this solution offer?

• You can pass any HTML-style markup to the webviewer and display it during runtime of the app. And if you like, add your own CSS styles, issue 602 is no issue anymore!
• This is a fast solution, because the html page is stored as asset inside the app!
• You can zoom in/zoom out the text.
• You also can use this solution to scroll inside your "HTML label", which means, also issue 494 is no issue anymore! You can adjust the height and width of the webviewer to your needs.
• You can handle events like swipe left, swipe right, tap and press. And this is only a very basic hammer.js example!

App Inventor Blocks

In the example below I first read a text file using the File component with the pages to display. Each row of the text file represents one page. There are 3 rows in the text file.

<h1>Lorem Ipsum</h1><h2>Page 1</h2><p><img src="1.png" width="48" height="48" alt="" title="">Lorem ipsum dolor sit amet...</p>
<h1>Lorem Ipsum</h1><h2>Page 2</h2><p><img src="2.png" width="48" height="48" alt="" title="">Maecenas consectetur ...</p>
<h1>Lorem Ipsum</h1><h2>Page 3</h2><p><img src="3.png" width="48" height="48" alt="" title="">Cras felis ligula,...</p>
      

The text was created using the text generator at www.lipsum.com.
The tools extension offers the method PathToAssets which always returns the correct path to the assets.

HTML/JavaScript

After buying the example, you will see, how the HTML/Javascript file looks like. This file is essential for the app to be able to work correctly, but you do not have to worry about: for your own app you only have to provide the text file with some HTML tags.

Are you currently not familiar with HTML/CSS/JavaScript?

• Learn HTML/CSS with w3schools.com or codecademy.com

Test the functionality of the "A powerful Label Alternative" example project

The test app is available in Google Play. You can test the example following these steps

1. Follow the opt-in URL to get access to the app and to be able to download it to your device. It might take a few hours for Google to enable you as beta tester!
2. Start testing.

Buy the source code for App Inventor

You can buy the source code of this project.
With your payment you accept the terms and conditions below.

Payment options

After having received your payment I will be happy to send the download link to you. Please let me know your Google account! I usually will send the download link not later than 24 hours after having received your payment.

Thank you! Taifun

Terms and Conditions

• You have tested the example successfully on your device before buying it.
• There are a lot of different Android devices available in the market. I'm not able to test the example on all these devices and therefore also can not guarantee, that the example is running on your device.
• THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Back to top of page ...