Android Tutorial [B4X] [B4XPages] Pleroma / Mastodon Client

Roughly speaking, Mastodon is an open source, distributed, social network a bit similar to Twitter:

Mastodon - Decentralized social media

Learn more about Mastodon, the radically different, free and open-source decentralized social media platform.

joinmastodon.org

Pleroma is a lightweight implementation of Mastodon with some extensions: https://blog.soykaf.com/post/what-is-pleroma/

I'm building an open source client for Pleroma / Mastodon. It will be a good demonstration of B4X features. There are already several products that came out of this project, including B4XPages framework, which is one of the most important features added to B4X.

The focus is on the mobile clients. The B4J client is very useful for development.



It is based on B4XPages and all of the code is shared between the three platforms.
Most of the code is based on components that can be reused in other apps.

Features:

• The rich text content is displayed using BCTextEngine + BBListItem. BBListItem is based on BBCodeView, without the ScrollView and built for lazy loading where only the visible lines are drawn.
• The text is drawn asynchronously (in the background).
• The list itself is a xCLV.
• Items are loaded when needed and the layouts are reused.
• A lot of work was done related to images. Loading hundreds of images from the internet with no control on their size is a challenging task.
  • Images usage is carefully tracked.
  • Unused images are removed from the cache and are recycled in B4A.
  • Images are loaded asynchronously in B4A and B4i.
  • Images are downsampled if larger than the maximum allowed size.
• The html from the feed is parsed using MiniHtmlParser class. The output is a tree of nodes. The tree is then converted to BBCode (only a few tags are supported).
• Supports images, animated gifs and videos. Video playback is only implemented in B4A and B4i.

Classes:

• ListOfStatus - A class that manages a list of statuses. Does many things including: managing the feed reader, the status views, the visibility of all elements and the zoomable image view. Note that the list can appear inside a dialog and in the main page.
• B4XMainPage - Main page.
• ImagesCache - Manages the images, including downloading from the internet, managing a cache and updating the reference counters.
• BitmapsAsync - Class that loads images asynchronously (in B4A and B4i). This is now implemented as a library.
• StatusView - The status custom view.
• BBListItem - A modified version of BBCodeView, mainly without the built-in ScrollView which is not needed here.
• MiniHtmlParser - Html parser. Implemented as a library.
• TextUtils - Converts the parsed html data to BBCode.
• PleromaFeed - Downloads and parses the Pleroma / Mastodon feeds.
• ViewsCache - Manages the video players
• RequestsManager - Cross platform class that can be used to cancel currently running HttpJob requests.
• OAuth - Implements the authentication.
• DrawerManager - Manages the left drawer.
• AccountView - Shows the account item. Can appear inside the list or in a dialog.
• StubView - A simple view that can be added to the statuses list (currently only used to show the "no more items" item but can be extended).
• StackManager - Manages the stack of timelines. Used for the implementation of the back feature and more.
• HtmlToRuns - Converts the parsed html tree to text runs for BCTextEngine.

This project depends on several recent libraries. To make things simpler, the cross platform libraries are attached.
You will also need to download other resources as explained in these links:

- B4XGifView v1.11+: https://www.b4x.com/android/forum/threads/b4x-b4xgifview-cross-platform-animated-gif-view.118550/
- (B4A) ExoPlayer v1.42+: https://www.b4x.com/android/forum/threads/exoplayer-mediaplayer-videoview-alternative.72652/#content
- WebP: https://www.b4x.com/android/forum/threads/b4x-webp-images.119990/#post-750224
- KSCrash (B4i - if using local builder): https://www.b4x.com/android/forum/t...erful-crash-reports-framework.120644/#content


The performance is very good. Better than several other clients I've tested. Make sure to test performance in release mode.

Compiled APK: www.b4x.com/android/files/Pleroma.apk

Warning: Some of the content is for adults only. Don't download if under 18 or are offended from such images. This is a distributed, open source network which means that the content is not moderated.
Don't post any image in the forum that is not appropriate for kids.

Source code: https://github.com/AnywhereSoftware/B4X-Pleroma

 

[Erel]

 

[Rubsanpe]

Hi. This sample need the current BCTextEngine 1.80 version? it is giving me a compilation error, and the library download link is downloading the 1.77 version.

Thank you

Rubén

 

[DonManfred]

This sample need the current BCTextEngine 1.80 version?

Yes

Must use BCTextEngine v1.80+: https://www.b4x.com/android/forum/attachments/bctextengine-b4xlib.96157/

 

[Rubsanpe]

Sorry, my error. I downloaded
it at wrong folder.

Rubén

 

[mading1309]

Works well
I think this gets an excellent example for the use of B4Xpages and to illustrate the benefits of coding with B4X
Thanks to Erel and his efforts and his talent

 

[Erel]

v1.02 is released with many improvements including: support for video playback and animated gifs, better handling of StatusViews, asynchronous text drawing and more.

 

[Erel]

Added a link to a compiled APK. This is an important example for anyone who is handling large number of images and rich content.
Please don't miss the warning about the feed content.

 

[Alexander Stolte]

The package name should be changed from b4a.examples to something else, I can't install the app because I probably already have an app with this package name on my phone.

 

[AnandGupta]

The package name should be changed from b4a.examples to something else,

Agree.
I generally change it always to the name of the example, like b4x.Pleroma here.
Hope Erel makes it that way now onward.

Regards,

Anand

 

[Toky Olivier]

Woooow. All is very well implemented!
Thank you! It's a very good example.

 

[Erel]

The package name should be changed from b4a.examples to something else

I've changed it for the next update. You can run the source code and change the package name.

 

[Erel]

V1.03 released. Images can be zoomed using the new ZoomImageView library.

 

[Erel]

V1.04: Adds support for WebP images based on the new WebP library.

 

[Erel]

V1.05: more sophisticated handling of the image requests. Visible images have higher priority. Downloads of items that are no longer visible are cancelled.

This is done using the new RequestsManager class. Note that it depends on a new version of OkHttpUtils2 which will be included in the upcoming versions of B4A, B4i and B4J.
This class can be reused in other projects. You need to add HU2_PUBLIC to the build configuration symbols.

You will see red stack traces in B4J when a download is canceled. Ignore it.

 

[Erel]

V1.06: many improvements including:
- User authentication.
- Left drawer.
- KeyValueStore with user and server information.
- Support for multiple servers.
- Lazier handling of images. The images are only set to the ImageViews when they become visible.

 

[asales]

V1.06

The APK is up to date, but the source code not (1.05)

 

[Erel]

Fixed.

 

[Puthut Wibowo]

I encountered an error while running the code

B4A Version: 10.0
Java Version: 8
Parsing code.    (0.35s)
Building folders structure.    (0.06s)
Running custom action.    (0.04s)
Compiling code.    Error
Error compiling program.
Error description: Unknown member: isplaying
Error occurred on line: 187
Dim IsPlaying As Boolean =  player.IsPlaying
Word: isplaying

 

[Erel]

You need to update ExoPlayer. There is a link in the first post.