Posts

Errors and Bugs are Important!

Image
Hey, guys welcome to another developer blog. I promise this one will be a short one. In a previous blog, I wrote about Which Programming language is best for you to learn if you haven't read it go ahead and read "There is no best programming language".
In the life of a programmer, Errors and Bugs are important aspects where some programmers hate it as well as love it (not everyone). I know when you are writing a code and gets an error then you might get frustrated (the same thing happen to every programmer). Then why errors are important? Well, the answer is we cannot learn each and every method and feature of a particular language even if we decided to master that programming language. So we learn on the go like if you are building some project and you need some feature include in that project then you can search for that feature and can see documentation of that feature. And when you are learning something new there is no way that you do it in the first try so errors oc…

There is No Best Programming Language

Image
Hey, what’s going on guys welcome to developer blog this one will be a short one. In this blog, I want to talk about what is the best programming language. I know when we want to learn new programming language we indeed search on google and also watch some YouTube videos on “Best Programming Language” (I did the same). So I am just sharing my opinion about this, what really need to do and which programming language you should start with.

In my opinion, there is no best programming language in a general sense. I bring this up because of a lot of videos on YouTube and blogs out there on “Top Best Programming Language”. I am not targeting anything just in general sense which I have come to realize it’s pretty stupid because languages are used for different things. To give an example, PHP and C++ are very good programming languages, now C++ and PHP are not used even remotely similar to each other. C++ is very low level and very high-performance language which is used to create Games, Kerne…

How to write JavaFX CSS for tab pane

Image
We are writing code for this result 

First, we have to change our side of tab pane so just select tab pane and change side of tab pane as shown in the figure.

Then clear all text from tabs in tab pane.

Offers on Dell Vostro 3468 Core i3 7th gen 14-inch Laptop (4GB/1TB/Windows 10/Black/1.75kg)

Create CSS file on your computer/laptop and add CSS file in your tab pane.



Now download icons you want to add in your tab pane. Already downloaded ;)


Let’s add CSS syntax for tab pane. Set height and width of tabs using width and height syntax.
.tab-pane {      -fx-tab-min-height: 9em;     -fx-tab-max-height: 9em;     -fx-tab-min-width: 4em;     -fx-tab-max-width: 4em;     -fx-padding: 0 -1 -1 0 }

Apple MacBook Air Core i5 13.3-inch Laptop (8GB/128GB/MacOS Sierra/Silver/1.35kg)
Now add ImageView in each tab.

Basic of JavaFX CSS Syntax

Image
In previous post we have learn what is JavaFX CSS and Basic Syntax so visit that post
Introduction to JavaFX CSS.

1. Change Background Color
To change background color of any component simply we have to use this syntax.

-fx-background-color: #333333;





2. Add Image to background
 To add background image to any component first you have to download any image you want to  add as background image then you have to put this image in CSS folder and you have to add this        CSS syantax into your CSS file.

   -fx-background-image:url("logo3.png");




   But you can see in above image the image is not set properly. so remove this we have to add another syntax.

 -fx-background-size: cover;



 3. Change Background Radius  Background radius can be used to change component corners like make rounded button in JavaFX. to change the background radius just use below syntax.
-fx-background-radius:50%;   



 4. Change Font family To change font family such as you want to change button font or label font to ar…

Introduction to JavaFX CSS

What is CSS?
Cascading Style Sheets also referred to as CSS, is a simple design language intended to simplify the process of making web pages presentable. CSS handles the look and feel part of a web page. Using CSS, you can control the color of the text, style of fonts, the spacing between paragraphs, size of columns and layout. Apart from these, you can also control the background images or colors that are used, layout designs, variations in the display for different devices and screen sizes as well as a variety of other effects.
Here is an CSS Syntax -:  selector { property: value }
In above Syntax, 
Selector − A selector is an HTML tag at which a style will be applied. This could be button, label, tab-pane, etc
Property − A property is a type of attribute of the HTML tag. In simpler terms, all the HTML attributes are converted into CSS properties. They could be color, border, etc.
Value− Values are assigned to properties. For example, a color property can have value either red or #F3F3F…

How to add JavaFX CSS in your SceneBuilder

Image
Step 1:  Create CSS file on your Computer with a dot(.) CSS extension.


Step 2: Open your Scene Builder

Step 3: Create new fxml file on your Computer.
Step 4: Add components in fxml e.g. Anchorpane,button etc.

Step 5: In SceneBuilder choose a component that you want to add CSS e.g I want to add CSS to a button then go to properties of the component and click on Stylesheets button. then select CSS file you already created. 

Step 6: Now edit your style.css file using any editor and add JavaFX CSS Syntax.


- Happy Coding ;)

How I made GUI Design in JavaFX?

Image
Challenge to make this design in JavaFX


Step 1: I am using Adobe XD to find out color codes from the image. so find out color codes from the image using any method.




Step 2: Learn some JavaFX CSS code   https://docs.oracle.com/javafx/2/api/javafx/scene/doc-files/cssref.html


Step 3: Now you have to download icons. I used Icon 8 website to download icons for my Design.






Step 4: Make a simple design or layout.




Step 5: add CSS part to design make the GUI beautiful.




  And We done.😍




Watch Video


                 Download file  Click here to download file