Animation and Material Design in Xojo Desktop Apps

General
1

Hi all,
since I am a good-designed-apps addicted (I love Material Design), I was wondering how to achieve Material Design feelings on Xojo Desktop Apps.
I am not very experienced with Xojo, but I just love its clean and easy interface, so now it’s my main IDE.
I thought that I could get animation and Material Design lookings using CSS and HTML (I found some examples around the web), but how do I embed them in a Xojo App?
Do you have another solution or ideas?

Have a good weekend!
Manuel

2

I am not that much into HTML and CSS, but why would you want to design your desktop controls using HTML? Do you want to render them on a HTMLViewer?

As a different idea: Have you checked out http://www.jeremieleroy.com/products/customui.php ?
He talks about a custom UI Builder so I think you can design your own controls – in fact many of the included designs base on freely available design sets.

It’s even part of the current Omegabundle, in case you want some more inspiration for possible implementations – I’m sure the complete collection of XDev magazines has something in it.

3

Yeah, my first idea was to render them on a HTMLViewer because I found some Material Design animations on the internet using HTML and CSS, do you think it’s possible to implement?

Thank you for the links about Custom UI and Omegabundle, I’ll check them out and see if there are some examples or something I can use.

4

You can indeed use elaborate HTML/CSS/JavaScript in an HTMLViewer. The main issue will be to communicate with the Xojo part. You can send data to the HTML with ExecuteJavaScript, and retrieve variables by changing the title of the viewer and getting that in the StatusChanged event. And of course you can have a full site on your disk.

5

I would suspect this to be not the fastest of all solutions. On the other hand, as I’ve written I’m not that much into HTML so I am curious about the performance if you implement your methods this way. Please keep me informed!

6

Interaction back to the underlying xojo code will definitely be the biggest issue

7

I am going to begin very very soon this project and I will update this thread with my progresses (if any :smiley: ).
I always like challenges, so let’s try that solution!

8

[quote=165576:@Manuel Romei]I am going to begin very very soon this project and I will update this thread with my progresses (if any :smiley: ).
I always like challenges, so let’s try that solution![/quote]
Hi Manuel (and others),

any updates on this? I’m too very interested to build at least my prototype in Xojo using Material Design but I wonder how to get that look and feel (or more the behavior). Is there any chance to use the new “web components” of Google’s Project Polymer in Xojo?

More info about it here: https://www.polymer-project.org/

9

I’ve played around with material design and adding responsive design(layouts that adjust for mobile/tablet/desktop using a grid system) for several projects.

Google just came out with a new helper library for material design
http://gizmodo.com/google-just-made-it-super-easy-to-build-a-website-with-1716102821

I’ve also played around with materializecss but I’ve found it conflicts with a lot of the built in controls so I’ve had to use a script to prepend all the CSS Classes with an addition class tag so they don’t conflict.
http://materializecss.com/

I’ve messed with polymer a bit but never got very far as it relies on a lot of external files to work for each control.

As @Norman Palardy mentioned the trick will be hooking up events, and that will definitely be the case if you decide to build custom controls yourself that mimic material design.

I have a Jquery library that makes this all easier you want to check it out:
https://forum.xojo.com/19039-jqueryui-library-drag-drop-animations-custom-menus/0#p199142
It atleast gives you autocomplete so you don’t mess up your Jquery:

myControl.jquery.css("width","50%").css("margin","5px").script.run

There’s also a CSS class in there with an example on how to build responsive design which helps a ton for creating mobile friendly websites.

10

I through together a quick example today of starting to use Google’s new MeterializeDesignLite package

https://www.dropbox.com/s/ly8bidvut0cwjjk/MaterialDesignLite2015-07-08.zip?dl=0