For those who ask themselves: ” Which types of libraries can i use within Scriptcase? “, in this post you’ll find the answer. On the following post, we will present you some libraries used to customize the themes.
First I’d like to tell you that any library can be included within Scriptcase, you just need to know how to include them and how to use correctly. I will give you a very simple example and one of the most used library, which is the Bootstrap.
As you already know, Bootstrap is a front-end framework that makes it easy for programmers to create websites and web systems without having to enter a single line of CSS code. In our case, within Scriptcase we use more to customize the themes of our applications, as it already contemplates us with the code of the application ready and customized, so we just give it the final visual adjustments.
There are also other libraries, less known and used. But my mission today is to present you the ones we use. So let’s get down to what really matters …
The principle of any library will be to download its content on the website and create an external library with this content within. Although there are many tutorials showing how to create and use the external library, in the video below i will show you how to do this, so let’s focus on “How to use the libraries”, ok?
Animate: This library, as its name suggests, has animations for your system or website, its simple and easy to use. The site has several animations, you just need the creativity when it’s time to use.
In the following example, I’ve created a “single record” form and put the following code in the onScriptInit event:
First I made the necessary file call up, so that the animate library would work, then I created a small script that when the mouse goes over the “New” button, it will include two classes (animated tada – animated is the default class that always needs to be included and Tada is the class that will make the animation happen) and when you take the mouse over the button, it will remove the class of the animation, so that whenever we move the mouse over, the animation happens. To see which animations are there, go to: https://daneden.github.io/animate.css/.
How you use the creativity to add this library to your project is up to you,
The creativity of how to add this library to the project is up to you, but I use a lot to animate the logo on the login screens, to animate error or alert messages, among other things …
Pace JS: It’s a Javascript library and CSS used to automatically add beautiful progress and activity indicators for page loads and AJAX browsing, it’s free. On their website there are some models created for use, check it here: http://github.hubspot.com/pace/docs/welcome/.
In the example below, I created a “query” type grid, and put in the onHeader event the following code:
To use this library, call the file “pace.js” which is the default file and the CSS file for the theme you want to use, in the example above I used the “Corner Indicator” theme, that’s why file “pace-theme -corner-indicator.css “.
Where the “data-pace-options='{“ghostTime”:2000}’“, the customized style will be set to run for 2 seconds.
If you want to use another theme, simply change the filename “.css”. For instance:
- Minimal – “pace-theme-minimal.css”
- Loading bar – “pace-theme-loading-bar.css”
- Center atom – “pace-theme-center-atom.css”
Now you can take advantage of this library in the best way, its up to you. Ah! I almost forgot, you can still change the themes colors, click on “Choose a color” button and select the desired one, for the color to change you’ll have to download it on the “Download” button.
A CSS code will be shown, you can copy that code and replace it within the theme file that is in the external library or remove the call-up from the “.css” file and add the code within the event (depends on the application) in the application used.
Paste the code and click “Save”.
Now it’s up to you, study how to make better use of the library, and include it on your projects as well.
EChats: This one is a charts library, developed by chinese and its really good to use. It contains clean and interesting charts.
Many people know FusionCharts, GoogleCharts, HigthCharts, among others … But this library is very easy to integrate to your site or project.
Well, yes, this code is a bit more complex, but its not a big deal. I’ll try to explain briefly so you can understand. In the example above we will show you a chart with total sum of notes by subject.
First i’ve createad two variables and informed that both of them will receive an array, then i searched the database for the desired values. I created a loop so i was able to mount my array with the values from the database. Then i’ve merged along with the array to string conversion. The php’s implode function disassembles an array separating the values by what you in between the quotes, in case of matter i’ve separated the value by “,” (double quotation marks – double quotes) and in the case of note i separated only by ,(comma). Note also that before and after the implode function i have merged a value (brackets), so that i wont need to merge anything in JAVASCRIPT, only the PHP value.
So, I closed the php code and added the call up to the ECharts external library file, then it includes a DIV that is responsible for receiving the chart(this div is mandatory because the chart is included in the “main” ID).Below we have the code responsible for assembling our chart, this example is simple and i just threw the values in the correct places. Note that I didnt have to make any ajax requests or pass values through json, I simply pulled the PHP variables to JAVASCRIPT.
You can use other graphic models and still study a bit about their features. I believe that this code will open your mind to other things in the future.
By clicking HERE you’ll learn how to call up the library and by clicking HERE you’ll be able to see the models that it disposes.
I hope all of you enjoyed this post, you can leave some tips for our future posts in the comments below and we will work on the ones that were most voted. How about that? See you guys!
Visit our blog and see more posts!
By
Camila Moreira,
Web Developer Fullstack. I work in the area for at least five years. I program and work with Scriptcase and as an independent consultant, I also manage developed systems, custom front-end development in Scriptcase and I share content with the Scriptcase community.
July 28, 2017
You might also like…