2017년 5월 29일 월요일

Material design using Materialize


Thunkable has come a long way from the deprecated UI AppInventor has, with a fresher material design appeal. Yet, there are quite a few components that are not fully 'material' yet. Thankfully, there's a workaround using the webviewer component and a few third-party resources. (Including some idea of HTML!)

To begin with, go to http://materializecss.com/getting-started.html and download 'Materialize'. This will be our material design framework (sort of). Extract the zip and copy the css/materialize.min.css and js/materialize.min.js files to a single directory.
Create an HTML file in the same directory(you may use notepad, Adobe Brackets, anything!) For those of you who want further documentation with HTML, visit this page: http://www.w3schools.com/html/.
Copy this text into your HTML file:
materialize.txt (730 Bytes)
In the <body> section, you can add any component of your choice. I will be doing a demo on adding buttons, progress bars and cards. All other components are as easy as these. Plus, there's plenty of documentation on www.materializecss.com

Adding a button
In the <body> section of your HTML file, add the following code:
<a class="waves-effect waves-light btn teal">Test</a>
The word 'Test' will be displayed on the button. You can either go with other colors like blue, green or red or use the colour palette.
btn-large instead of just btn will give a bigger button.
Save your HTML file. Upload it to Thunkable through the upload media button on the bottom right of the screen. Also upload the materialize.min.css and materialize.min.js to Thunkable.
Next, drag and drop a webviewer component from the palette. If you're using the companion, set the home URL to:
file:///mnt/sdcard/AppInventor/assets/*NAME OF YOUR FILE*.html.
Else, use
file:///android_asset/*NAME OF YOUR HTML FILE*.html
Set the height and width of the webviewer so as to suit your needs.
I won't be going into the details of adding javascript and using the Webviewer.WebViewString to communicate with the button. There's a tutorial on this: http://puravidaapps.com/snippets.php#2webviewstring
webviewstring.aia

Screenshot:

From left: A normal button, large button and one with a different colour.
(All buttons have the signature ripple-effect as well!)

Making a progress bar
This is the same as the button, basically. Instead of adding the code for the button in the <body>, add this:
<div class="progress">
<div class="determinate" style="width: 70%"></div>
</div>

The progress bar will have a width of 70%. You can change that. Another option is to use the Webviewer.WebViewString to communicate back and forth between the app and the webviewer to increment the percentage.
Screenshot:

Progress bars at different percentages.

Cards, cards and more cards
One of material design's major highlights is the use of cards. Cards enable the user to see necessary information at a glance and also provide options for further action. Here's how to add a card:
In the <body> of your HTML file, add:
<div class="row">
<div class="col s12 m6">
<div class="card blue-grey darken-1">
<div class="card-content white-text">
<span class="card-title">Card Title</span>
<p>I am a very simple card. I am good at containing small bits of information.
I am convenient because I require little markup to use effectively.</p>
</div>
<div class="card-action">
<a href="#">BUTTON 1</a>
<a href="#">BUTTON 2</a>
</div>
</div>
</div>
</div>
Screenshot:

The possibilities are endless. Material design is finally within the reach of each and every Thunker. Please like if you found this useful!
Edit: Here's an AIA containing some examples demonstrating the use of the WebViewString and JavaScript. Feel free to modify it to your taste! (The home URL is set to the path used by the companion app. Change it before building the app!)
material_design.aia (68.6 KB)

댓글 없음:

댓글 쓰기