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?

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="file:///android_asset/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="file:///android_asset/2.png" width="48" height="48" alt="" title="">Maecenas consectetur ...</p>
<h1>Lorem Ipsum</h1><h2>Page 3</h2><p><img src="file:///android_asset/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.



Do you need help with your App Inventor project?

I can help you: for one hour I charge 25 USD.
Please contact me at info [at] puravidaapps [dot] com for details!
For questions about App Inventor, please use the App Inventor forum. Thank you.

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?

Download

You can test with the apk file, which is available for download here: Download apk file

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

1. Paypal

Please transfer 10 USD via Paypal
to Pura Vida Apps

2. Bitcoin

After having received your payment I will be happy to send the source code to you.
Thank you! Taifun


Please check your spam folder in case you did not receive the example!
I usually will send the project not later than 24 hours after having received your payment.

 

Terms and Conditions

Back to top of page ...


Home | Snippets | Tutorials | Extensions | News | Forums | Links | Search | Contact