Using Framework7 UI in Thunkable X

If you want a beautiful and functional interface for Thujnkable X applications, you can use Framework7 (https://framework7.io/).

If you are not familiar with programming, it may seem too difficult, but the documentation Framework7 there are many examples that you can simply copy and use in your project.

https://x.thunkable.com/projects/5d9658445c779729604c857b/project/properties/designer/

2 Likes

Hi there,
There’s no denying that this site can be useful for the app design,but I will recommend Dribbble,Pinterest these platform which often shared by the user.
I take a look at them frequently,and they are work great.

1 Like

Thanks! :smile:
It’s very helpful site :+1:

I use this too! :grin:


@actech I have edited the topic’s category from #thunkable-cross to #creator-lounge :blush:
It’s helpful for everyone :slight_smile:

Framework7 - is a tool for developers, Dribbble and Pinterest - it is for designers. I do not really understand, what does Dribbble and Pinterest has to Framework7?

My example - is cloud communications between App and Web Viewer on Thunkable X, which loaded a template to work with Framework7.

2 Likes

I think @BlueWhaleYT saw the designs only :sweat_smile:

I also first saw that framework is a design website :laughing:
Later I saw your App, and came to know that it’s for developing :smile:

That’s why he posted Dribble & Pinterest :slight_smile:

Thanks! :blush:

I really like how you can use animations. So for this to work do you just create a website as such, hosted with them and then plug the domain name into Thunkable? I am lost about that! Definitely something I am going to try out!

1 Like

>So for this to work do you just create a website as such, hosted with them and then plug the domain name into Thunkable?

If I understand you correctly, it will explain a bit more.

Framework7 project can be used to create the site. In this case, it will have little to modify (remove unnecessary scroll bars, etc.).

How do I recommend working with my project? First you create a design and functionality in html- page, and check out her work in a browser (for correct operation Framework7 pages to run using a local or remote web-server). If everything works well, then you copy HTML-markup and Javascript in Thunkable X. project

For cloud communication I use Firebase public account and for this reason I do not recommend forwarding from the App in WebViewer confidential information. I do not mean that anyone will be able to see the data, but the developers do not recommend using Firebase Javascript API config data in public projects. I use it because there is no other way to ensure the exchange of data between App and WebViewer in Thunkable X.

2 Likes

Okay, I get you now.

I was looking into this more with PhoneGap, and I managed to get a Framework 7 project running with Phonegap, so my phone was a live test, like Thunkable Live app. But I know nothing about html, css, and js. I would love to learn about this though, and code my own apps, as I plan on moving on from Thunkable and doing that. Do you recommend any online resources?

Thanks.

1 Like

I have not read the books on html and Javascript and do not know what new good books there. But first, you can do so: on the search site type “The best Javascript book for beginners” (for example - https://hackr.io/blog/javascript-books) or find online Javascript book (https://freefrontend.com/javascript-books/)

https://createwebsite.pro/best-html-book/

2 Likes

Okay, thanks for that information. I was checking out https://www.theodinproject.com. It is an a-z course on web development. Is using Framework7 similar to actual web development?

Thanks

1 Like

Yes, Framework7 - is a framework with which you can create and Web-based interfaces. But you must understand that Framework7 for the web will look specifically and have the features.

I made a new project in which data from AirTable loaded into the Web Viewer, and when an item’s name is passed within the App.

https://x.thunkable.com/projects/5d985be951256a303fd157e7/project/properties/designer/

Have you seen this demonstration?

https://framework7.io/docs/kitchen-sink.html

I really like it!

1 Like

The cards on iOS and Materiel are very nice. This would be great for a Facebook style news feed. Could you load 400 or so cards with high quality images no issue with Framework7 imported into Thunkable?

1 Like

If you want to download 400 images at a time, then it will not work even with small images, because each image to download a separate service request is created on the web-server and the number of requests is limited. For this reason, the server creates one large image, which contains all the images. Read the information on CSS-sprites for better understanding of the operation of the mechanism.

There is another option - a virtual lists. In these images are loaded as needed.

2 Likes

Great one, thnks for this helpful answers

2 Likes

Would it be possible to make a simple HTML and JS website loaded in locally to Thunkable App and let Thunkable pull a list of image urls, and make a virtual list locally like that? Or is something like that not possible.

Thanks.

The exchange between the App and the local website in WebViewer is only possible with the help of my way through Firebase.

You need to make the local site, and then add the Firebase Javascript API in it. There are more ways.

https://firebase.google.com/docs/web/setup

And when you add the “local website” as the URL for WebViewer, do you just use the join block in some way to give it the JS and HTML?

You can import html in the project and provide a link to it in the Web Viewer URL.

Firebase - a buffer exchange between the Web Viewer and App. You can even create site pages dynamically.

Hii I have write my app with framework 7 if I place the index file to webviewer okay but how do I connect the script files and all the other one ?

I could host on mu domain and add it in a webview but I’dont know they gona see that …

If I download the app with webview it feels and looks like a native app ( i would ad native things like native form from thunkable and things like that.

Because I would like to connect some button to some native pages but how can I HREF THEM ?

Here a simple sample app Thunkable

pls help me thanks

Hey @Dany_Coimbra,

nice idea to include Framework 7 :slight_smile: unfortunately I think at the moment you might run into several issues…

For example there is not yet a (native) way to exchange data between your app and the webview. But it seems changes to the webviewer component have been made recently but they don’t show up in the changelog yet - so I can’t tell if this is maybe already supported by now.

Usually you would just upload your files to the app and link them with their name just like they are all in the same folder with the webview url block. E.g. if your site is intro.html you would just enter it like that. The problem is that there are some issues with local files and webviewer. It does not work on some devices (can’t remember if the issue was iOS or Android).

Again, idk if this issues were fixed with the latest updates due to missing changelog.

Best, Chris

1 Like