New library Xojo-Materialize

Hello everyone.

I just published in github a new library for web. I am integrating Materialize (a library that uses Google Material Design) with Xojo. I already have three controls and visually looks very attractive.

My intention is to continue with this project and gradually integrate the entire library.

If you want to download this project this is the link:

https://github.com/gautxo/Xojo-Materialize

I await your comments.

Looks great! Good inheritance design. Easy to follow what you’re doing.

Looks Great Jose
This is just what we have needed to make our web apps look like this century!

Thank you for your support, Joseph and James.

The little time that I have free I am dedicating to this project. I hope to be able to have the most Materialize functionalities working at Xojo as soon as possible.

Mighty cool! You seem to know what you are doing, great stuff, keep it coming and don’t be too shy about asking for some cash…

Very nice!

Great works!!

New Release v0.1.2

New Buttons: Fast Access Buttons (FAB)
New type classic button round
Some changes in collections and navbar
All the classes documented in Notes

clap clap clap

New Release v0.1.3

Some changes in collections: Vertical align with Avatars. New: We can include pictures.
New Forms: Input Fields

hi jos
there is a way to hide a buttom programmatically?
can you make it responsive?
it will be very nice if you can combine your with https://forum.xojo.com/19039-jqueryui-library-drag-drop-animations-custom-menus

Hi Paolo,

I just added two methods to hide and show a button. I have already added them to this recent version in github and I have incorporated them to the example.

To make it responsive, in materialize exist the grids. I would have to think about how to adapt them to a Xojo application, although I would have to associate each control manually to each row/column, losing the power of Xojo that everything is visual.

Finally, thanks for the link, I’ll read the post. Brock is a reference and has very interesting posts.

If ever one wants to have responsive design with these controls, I am sorry, but must warn that since Xojo Web does not report adequately WebSDK controls in WebPage.ControlCount and WebPage.ControlAtIndex, current version of RubberViewsWE cannot manage automatic scaling and positioning of these controls.

It can help by providing the proper scale, but all these controls will have to be resized and repositioned with extra code.

I am working on a workaround for a future version, but have not found yet a satisfactory way of accessing the content either.

Hi Jos,
i have experience on another ide b4j: “ABMaterial”. Alain here have made a nice work. here must write rows and columns in a page bild event and associate all components manually.
In xojo i think that we can use a form with a grid with columns and rows dinamics and define all the layout…
see this https://www.b4x.com/android/forum/threads/abmaterial-framework-for-webapps.60072/page-24
you can thing about this…
rubberviewswe is not the solution…

It has nothing to do with a grid anyway. But if you want your app to autoscale on all screen sizes and windows aspect ratio, as well as manage on mobile when they rotate, it can help a lot. Because contrary to the regular web implementation of Materialize, you cannot rely on CSS to autoscale your controls.

IMHO a web app that is not able to adapt to all screen sizes is completely inadequate in Web 2.00.

i don’t understand your reply…
i’m finding a possible solution to adopt Material Design with xojo to build dynamic web pages without losing the power of xojo components visual power. responsive is not like adaptive. this is the meaning of my “rubberviewswe is not the solution…”
If we fix a way on how the components should be displayed (regardings material design rules: rows and columns) on the page whe can build a tool that do all job for us and let the the material javascript and css to arrange them on ours page on all devices!.

Good luck.

I think the only solution to define a responsive and visual layout, will have to come in a future from “Xojo”. For my part I think I could do something by naming rows and columns, and associate each control with those names. It would not be the best solution, but I think it could work. As soon as I have any results, I’ll let you know.

I’ve been trying to create a screen in responsive mode and it seems to work. For this I have created a main webpage and two secondary webpages to design the objects that would incorporate each column.

When opening the main webpage, I incorporate the elements of the secondary webpages with jquery to each column. It works, although as I said the best solution would come from the hand of “xojo”.

I leave a video so you can see the responsive mode working: https://youtu.be/FONE-H0zF1k

It is also available for download on Github.

The problem with Xojo is that elements have fixed positions, and if you look at the code it is pretty constrained. For instance a control will have for instance left, min-left and max-left the same.