Simple Guide: Show Online/Offline HTML Pages in Your App
Examples
Blocks :
Aia file example :
lostConnectionPage.aia (22.0 KB)
Goal:
To display different, visually appealing HTML pages within your app depending on whether the user’s device has an active internet connection. We’ll check the status on screen initialization and whenever the network connection changes using common components found in many block-based Android builders.
What We’re Doing: Showing a nice “You’re Online” page when the internet works, and an “Offline” page when it doesn’t.
What You Need:
- Network Checker: A tool/component in your builder to see if the phone is connected to the internet.
- HTML Viewer: A tool/component to display HTML code inside your app (like a mini web browser area). A way to load raw HTML text is best.
- HTML Code: Two simple HTML pages (text files): one for “Online”, one for “Offline”. You can ask an AI (like ChatGPT) to make these for you.
Steps:
-
Get Your HTML Pages
- Ask an AI (or write) the HTML for your “Online” screen (e.g., green checkmark, “You’re Online!” text).
- Ask an AI (or write) the HTML for your “Offline” screen (e.g., red warning sign, “You’re Offline” text).
- Keep this HTML code ready (copy/paste it).
- (Example: Use the HTML code provided in previous examples)
-
Set Up Your App Screen:
- Add a Layout Area (like a
VerticalArrangement
or similar) to your screen. Make it fill the space where you want the online/offline message to appear. Give it a name (e.g.,StatusArea
). - Add the Network Checker component to your screen (it might be invisible).
- Add the HTML Viewer component/tool to your screen (also might be invisible if it just loads HTML into the layout).
Use this extension :
com.ahmed.zoombt.remover.dev.zoombtnremover.aix (16.1 KB)
- Add a Layout Area (like a
-
Make It Work (Blocks/Code):
- Store HTML: Create two text variables:
onlinePageHTML
(paste your online HTML here) andofflinePageHTML
(paste your offline HTML here). - Create a Function: Make a reusable function called
UpdateStatusDisplay
. - Inside
UpdateStatusDisplay
:- Use an
IF
block. - IF the Network Checker says
IsConnected
is TRUE:- Tell the HTML Viewer to load the
onlinePageHTML
into theStatusArea
.
- Tell the HTML Viewer to load the
- ELSE (if not connected):
- Tell the HTML Viewer to load the
offlinePageHTML
into theStatusArea
.
- Tell the HTML Viewer to load the
- Use an
- When App Starts: Find the “Screen Initialize” (or similar) event block. Inside it, call your
UpdateStatusDisplay
function. - When Network Changes: Find the “Network Changed” event block from your Network Checker. Inside it, call your
UpdateStatusDisplay
function again.
- Store HTML: Create two text variables:
-
Test:
- Run the app with WiFi/Data ON. You should see the “Online” page.
- Turn WiFi/Data OFF. The app should change to show the “Offline” page.
- Turn WiFi/Data back ON. It should switch back to the “Online” page.
That’s the basic idea! You check the connection and show the right HTML page accordingly, both when the app starts and whenever the connection status changes.