JavaFX Tutorial | Search Bar and TableView filter result as you search

Video Statistics and Information

Video

Captions Word Cloud

Reddit Comments

Captions

Hey everyone! Today I am going to show you how to create an effective and dynamic search app which displays search result as you type the keyword we will be using IntelliJ for our IDE and Scene Builder to build our User Interface then a quick work in MySQL WorkBench Alright! We will start with MySQL i will show you our table and sample data here I have a table named Product let's go over the Product Table Definition our table structure has only 6 fields it is more than enough for our needs then let's check our sample data as you can see had already inserted 20 rows of sample data now let's create another SELECT but with fields on it we are going to use it later Description FROM Product and execute query alright these are just sample data and you may use your own they can be replace by any value so long it matches the data type now let's go and open IntelliJ IDEA this code should work with other IDE too New Project and we are on openjdk version 16 name it as ProductFinder first order of business is to rename our files here start with sample.fxml we will rename it to productsearch.fxml it's something descriptive good next we will rename the Controller Refactor Rename let's call it ProductSearchController ok good now we are going to setup our Project Structure need to add the JavaFX SDK's and it should be where you save them we just need these four ok and we need to remove that add my MySQL jconnector as wellb open Apply and Ok Next we are going to Design our UI we are going to open and use this fxml in Scene Builder go tob Scene Builder and Open Project and look for that fxml sample... there you go. productsearch.fxml Open and remove that. replace this with Pane search for that just drag it here adjust the size to 1080 x 600 then add a TableView and we need to adjust the size as well to 1020 x 502 that's right about add a label and position just above the TableView set Text as "Search Product" adjust the Font size and style next we need a TextField just drag it here adjust the length matching the TableView set prompt text as "Keywords..." let's setup this TableView, we need to add more columns to match the number of fields we have in the table set text s as ID next is Brand add 4 more TableColumns look for that. There you go drag it here... another one more alright. then...b Model Number Model Year Product name and Description you may adjust the column widths accordingly it depends on your preferences now we are going to assign FX ID's to the objects we need you may follow your own naming conventions, ofcourse set TableView FXID as productTableView ID TableColumn as ProductID brandTableColumn modelNumberTableColumn modelYearTableColumn and... productNameTableColumn and lastly descriptionTableColumn then here in the controller you can check the FXID's we will set the Controller class as sample.ProductSearchController the Controller we use in our project see that save it If you check the productsearch.fxml you will see updated fx:controller there you go and... the FX:ID's are set as well now let's Preview this and see how it looks like good search "Playstation 5" looks good, we are nowready to proceed to next part close this Now let's go back to IntelliJ our next step is to create module-info.java right now we just need the javafx.controls, fxml fxml and... graphics there is another one but we will just add it later now let's go to main.java change the SetTitle to "Product - Search" then update the setScene using the layout size of Pane in Scene Builder click the Pane then layout copy the Width and Height and change this to 1080 x 600 now we are ready to run and see how it looks like there you go looks good, the way we want it. we are now ready to proceed with coding the next step is to create a new class to handle the JDBC operation we will use this to establish connection to our MySQL Database this one here so we can access this Product Table Create a new Java Class Name it as DatabaseConnection.java now we are going to add the last piece we need in our module-info.java requires java.sql we need this for our database connection and operation this is pretty basic Connection class I leave the Database and user information blank you need to fill it up with what you have I always keep my code readable as much as I can for example, I use extra variables where technically you can code the databaseLink in a single line if you really want it alright don't forget to fill up databasename and user info before you run Next, we will build our SQL Query just a simple SELECT statement with fields that follow these TableView column order let's go to MySQL New Query and SELECT ProductID Brand ModelNumber ModelYear ProductName and Description FROM Product table Execute this query there you go, our sample data 20 rows and 6 columns arrange in order similar to our TableView next, we will create another Class name it as ProductSearchModel.java this will represent our data we will declare our variables that represents our fields or columns it will have the same data type and order that way when we generate our Constructor the parameters are in a correct order as well Now we just need to generate our Getter alright, next our Setter all of this, ok looks good finally we are good to go and code here in the ProductSearchController we start with annotation @FXML and it was automatically imported above We are going to annotate what we need from our productsearch.fxml using these FX:ID's we set these are the ones we assigned in Scene Builder this one these are all of them we start with TableView followed by the TableColumns just import the TableView class and we need to do the same with TableColumns after import the TableColumn class as well then annotate the remaining TableColumns just copy and paste next we need an ObservableList which allow our listener to track any changes one of a factor in making our Search dynamic and use our ProductSearchModel as Object Data Type then name it as "productSearchModelObservableList" assign as ObservableArrayList next, we are going to create Initialize method then Implement Initializable Interface if you are not aware the Initialize the only existing method under Initializable Interface we do this so the initialize method is called and executed after the controller elements were completely processed implements Initializable then just need to override Initialize method just to over simplify, when the main.java runs it loaded this and the Controller initialize execute the codes within it here we need our Database Connection and our SQL Query, we can use the SELECT statement we created in MySQL. This one, just copy it. next we implement Try and Catch with SQL Exception and a logger and if you notice the imports keep growing now we execute query and handle the result we are going to use WHILE here just copy over the variable we use for the query also the corresponding imports are added here now we just need to handle the query result and loop around it next now we are going to pupulate our observablelist we can do it here a single line like this but i prefer manageable and readable code even it will be multiple line of codes so we are going to declare Variables for our 6 fields and set them on equivalent data type just copy them we only have two integer and the rest are stringsb now it will just simply lining them up on the same order manageable and readable we are just populating the productSearchModelOBservableList with data from our query result which is the 20 rows sample data let me put some comments here for reference and in our SQL query as well at this point, the setcellfactory can be assigned Cells of these columns theFX:ID's for tablecolumns has been set and annotated too so we can use it here and instantiate PropertyVaueFactory for all the columns we got our ProductSearchmodel for that will just line up here the fields we need and work it out for each tablecolumns model year, productname, description Ill leave another comment for reference now we ready for our productTableView this one here we are going to assign our ObservableArrayList to our "setItems()" attribute and just to refresh and simplify it our ObservableArrayList is populated here with rows from our SQL query result which in turn we set for our productTableView as you recall our ObservableTableList uses the data model we implement which we apply to our table column CellValueFactory here we utilize the structure of our model class which we reflect it back here accordingly now let's run this and see how it looks with rows of data and there you go our TableView has been populated with our sample data however, at this time, you can consider this just a static list we are yet to tie this up to our search TextField let's see... how the search will look like Playstation 5 of course! there is no Playstation 5, did you found any? kidding aside let's complete our code and bind this texfield to our TableView We are going to utilized FilteredList this is another key component for our dynamic search this is where our model class become so useful and handy as it become a central basis of our data and finally we will work our way with the searchTextfield keywordTextField make sure to import this here and annotate as well textProperty().addListener and... will use addListener here to capture any changes in our seach TextField and observable oldValue and newValue and ofcourse using Lambda expression, we will set the Predicate for our filtered list and we are going to use that ProductSearchModel another Lambda expression we are going to have a nested if to handle our search first we will check if the searchTextField is either Empty Blank or Null and return true if it match atleast one of them let's put a note here for reference we will convert our searchkeyword to lowercase to simplify our search we are going to start with Product Name then we will check if there is any matches to our searchKeyword indexof start at position 0 hence anything greater than -1 means a match has been found or you can use not equal to -1 as well with similar result we return True here and filteredData will changed accordingly followed by Description this will be the same for Brand, Model Number and Model year will need to be converted using toString in order to be included as well as it is on Integer Type if no match is found it will return false and it has nothing to display then we are going to wrap and sort our filteredData as sortedData Now we are going to bind the sortedlist to the productTableView this way both are in sync. The TableView display the changes we do to our FilteredData or technically the SortedList finally we set items for our TableView this is loaded during initialization Now let's run this and see the final output I am going to search for "Apple" and there you go, it only shows rows with apple on it same for Sony let's try that and we got it as you notice as well, our search result changes dynamically it displays rows that contains our search keyword for example for example search this XBOX here the display changes as you type this search is so useful and user friendly what's hapenning here is that when you type in the textfield our listener take that as new value in our filtered list, we check it by row product name, description and others contain that new value if there is a match, TableView display the matching rows else it shows nothings because if there is a match it return TRUE then the FilteredList filter itself with only those matching rows and doing so will trigger the BINDING we made between sorted list and tableview and that trigger the TableView to refresh itself display matching rows that way it make the TableView look dynamic it refresh the display as you type whethere there is match or not alright! that's all I have if you have any question just leave a comment Just a quick snap of the entire code we use in this demo you can just simply pause the video if you want to look closely thank you for watching.

Info

Channel: tookootek

Views: 2,437

Rating: undefined out of 5

Keywords: javafx tableview, javafx scene builder, javafx filteredlist, javafx filter tableview, javafx lambda expression, javafx listener, javafx search box, JavaFX, javafx tutorial, javafx tutorial for beginners, javafx intellij, javafx project, JavaFX project, javafx mysql, java mysql, javafx database, javafx table, javafx control javafx, javafx scene builder tutorial, javafx dynamic tableview from database, javafx mysql connection, javafx search bar tableview, javafx sortedlist

Id: 2M0L6w3tMOY

Channel Id: undefined

Length: 20min 8sec (1208 seconds)

Published: Mon Jul 12 2021