JavaFX Controller not properly loading FXML file - nullpointerexception

I am programming a GUI for a ground base for piloting a drone using an FXML file created with Scene Builder. The Main file looks like this:
public class Main extends Application {
#Override
public void start(Stage primaryStage) throws Exception {
FXMLLoader loader = new FXMLLoader(getClass().getResource("/ground/view/HMI.fxml"));
loader.setController(new RadarView());
Parent root = loader.load();
//Parent root = FXMLLoader.load(getClass().getResource("/ground/view/HMI.fxml"));
Scene scene = new Scene(root);
primaryStage.setScene(scene);
primaryStage.setTitle("HMI");
primaryStage.setResizable(false);
primaryStage.show();
}
/**
* #param args the command line arguments
*/
public static void main(String[] args) {
//Test adding lines
launch(args);
}
}
As I set the controller at the Main file, I do not set it on the FXML code. The FXML file is quite complex and extended, but its generic structure is an AnchorPane which is the parent of a HBox that subdivides the GUI in three columns:
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.ChoiceBox?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.TextArea?>
<?import javafx.scene.control.TitledPane?>
<?import javafx.scene.control.ToolBar?>
<?import javafx.scene.effect.ColorInput?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.ColumnConstraints?>
<?import javafx.scene.layout.GridPane?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.RowConstraints?>
<?import javafx.scene.layout.VBox?>
<?import javafx.scene.text.Font?>
<AnchorPane id="HMIpane" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="1080.0" prefWidth="1920.0" xmlns="http://javafx.com/javafx/8.0.171" xmlns:fx="http://javafx.com/fxml/1">
<children>
<HBox maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="1080.0" prefWidth="1920.0">
<children>
<VBox id="Left_Column" minHeight="1080.0" minWidth="500.0" style="-fx-background-color: GREY;">
<children>
<TitledPane id="autoPilotPanel" collapsible="false" minHeight="150.0" minWidth="500.0" text="Autopilot Modes">
<content>
<AnchorPane id="autoPilotPanelPane" minHeight="120.0" minWidth="496.0" style="-fx-background-color: GREY;">
<children>
<Button id="apSpeedBtn" fx:id="apSpeedBtn" disable="true" layoutX="14.0" layoutY="14.0" minHeight="40.0" minWidth="140.0" mnemonicParsing="false" style="-fx-background-color: GREY; -fx-border-color: BLACK;" text="SPEED" AnchorPane.leftAnchor="0.0" AnchorPane.topAnchor="0.0" />
<Button id="apAltBtn" fx:id="apAltBtn" disable="true" layoutX="178.0" layoutY="14.0" minHeight="40.0" minWidth="140.0" mnemonicParsing="false" style="-fx-background-color: GREY; -fx-border-color: BLACK;" text="ALTITUDE" AnchorPane.topAnchor="0.0" />
<Button id="apVSBtn" fx:id="apVSBtn" disable="true" layoutX="342.0" layoutY="14.0" minHeight="40.0" minWidth="140.0" mnemonicParsing="false" style="-fx-background-color: GREY; -fx-border-color: BLACK;" text="VERTICAL SPEED" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0" />
<Button id="apDisengageBtn" fx:id="apDisengageBtn" layoutX="276.0" layoutY="61.0" minHeight="40.0" minWidth="140.0" mnemonicParsing="false" style="-fx-background-color: #6e0000; -fx-border-color: BLACK;" text="DISENGAGE" textFill="RED" AnchorPane.bottomAnchor="0.0" />
<Button id="apEngageBtn" fx:id="apEngageBtn" layoutX="80.0" layoutY="72.0" minHeight="40.0" minWidth="140.0" mnemonicParsing="false" style="-fx-background-color: #0a3c00; -fx-border-color: BLACK;" text="ENGAGE" textFill="#2fff00" />
</children>
</AnchorPane>
</content>
</TitledPane>
<TitledPane id="DLCommandLinePanel" collapsible="false" minHeight="565.0" minWidth="500.0" style="-fx-background-color: BLACK;" text="Data Link Command Line">
<content>
<AnchorPane id="DLCommandLinePanelPane" minHeight="532.0" minWidth="519.0" style="-fx-background-color: BLACK;">
<children>
<TextArea id="DataLinkCommandLog" fx:id="DataLinkCommandLog" editable="false" layoutX="18.6" layoutY="19.6" minHeight="400.0" minWidth="480.0" style="-fx-border-color: GREY;" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
<effect>
<ColorInput />
</effect>
</TextArea>
</children>
</AnchorPane>
</content>
</TitledPane>
<TitledPane id="PFDPanel" collapsible="false" minHeight="365.0" minWidth="500.0" text="Primary Flight Data">
<content>
<AnchorPane id="PFDPanelPane" minHeight="125.0" minWidth="500.0" style="-fx-background-color: GREY;">
<children>
<GridPane id="PFDGrid" layoutX="64.0" layoutY="38.0" minHeight="175.0" minWidth="260.0" style="-fx-background-color: GREY;" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
<columnConstraints>
<ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
<ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
<ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
<ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
</columnConstraints>
<rowConstraints>
<RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
<RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
<RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
<RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
<RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
<RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
</rowConstraints>
<children>
<Label id="IASlabel" alignment="CENTER" contentDisplay="CENTER" prefHeight="79.0" prefWidth="120.0" style="-fx-border-color: WHITE;" text="IAS" textAlignment="CENTER" textFill="WHITE">
<font>
<Font size="15.0" />
</font>
</Label>
<Label id="altitudeLabel" alignment="CENTER" contentDisplay="CENTER" prefHeight="79.0" prefWidth="120.0" style="-fx-border-color: WHITE;" text="ALTITUDE" textAlignment="CENTER" textFill="WHITE" GridPane.rowIndex="1">
<font>
<Font size="15.0" />
</font>
</Label>
<Label id="VSlabel" alignment="CENTER" contentDisplay="CENTER" prefHeight="79.0" prefWidth="120.0" style="-fx-border-color: WHITE;" text="VS" textAlignment="CENTER" textFill="WHITE" GridPane.rowIndex="2">
<font>
<Font size="15.0" />
</font>
</Label>
<Label id="headingLabel" alignment="CENTER" contentDisplay="CENTER" prefHeight="79.0" prefWidth="120.0" style="-fx-border-color: WHITE;" text="HEADING" textAlignment="CENTER" textFill="WHITE" GridPane.rowIndex="3">
<font>
<Font size="15.0" />
</font>
</Label>
<Label id="AoAlabel" alignment="CENTER" contentDisplay="CENTER" prefHeight="79.0" prefWidth="120.0" style="-fx-border-color: WHITE;" text="AoA" textAlignment="CENTER" textFill="WHITE" GridPane.rowIndex="4">
<font>
<Font size="15.0" />
</font>
</Label>
<Label id="QNHlabel" alignment="CENTER" contentDisplay="CENTER" prefHeight="79.0" prefWidth="120.0" style="-fx-border-color: WHITE;" text="QNH" textAlignment="CENTER" textFill="WHITE" GridPane.rowIndex="5">
<font>
<Font size="15.0" />
</font>
</Label>
<Label id="IASvalue" alignment="CENTER" contentDisplay="CENTER" prefHeight="79.0" prefWidth="120.0" style="-fx-border-color: WHITE;" textAlignment="CENTER" textFill="WHITE" GridPane.columnIndex="1">
<font>
<Font size="15.0" />
</font>
</Label>
<Label id="altitudeValue" alignment="CENTER" contentDisplay="CENTER" prefHeight="79.0" prefWidth="120.0" style="-fx-border-color: WHITE;" textAlignment="CENTER" textFill="WHITE" GridPane.columnIndex="1" GridPane.rowIndex="1">
<font>
<Font size="15.0" />
</font>
</Label>
<Label id="VSvalue" alignment="CENTER" contentDisplay="CENTER" prefHeight="79.0" prefWidth="120.0" style="-fx-border-color: WHITE;" textAlignment="CENTER" textFill="WHITE" GridPane.columnIndex="1" GridPane.rowIndex="2">
<font>
<Font size="15.0" />
</font>
</Label>
<Label id="headingValue" alignment="CENTER" contentDisplay="CENTER" prefHeight="79.0" prefWidth="120.0" style="-fx-border-color: WHITE;" textAlignment="CENTER" textFill="WHITE" GridPane.columnIndex="1" GridPane.rowIndex="3">
<font>
<Font size="15.0" />
</font>
</Label>
<Label id="AoAvalue" alignment="CENTER" contentDisplay="CENTER" prefHeight="79.0" prefWidth="120.0" style="-fx-border-color: WHITE;" textAlignment="CENTER" textFill="WHITE" GridPane.columnIndex="1" GridPane.rowIndex="4">
<font>
<Font size="15.0" />
</font>
</Label>
<Label id="QNHvalue" alignment="CENTER" contentDisplay="CENTER" prefHeight="79.0" prefWidth="120.0" style="-fx-border-color: WHITE;" textAlignment="CENTER" textFill="WHITE" GridPane.columnIndex="1" GridPane.rowIndex="5">
<font>
<Font size="15.0" />
</font>
</Label>
<Label id="IAStarget" alignment="CENTER" contentDisplay="CENTER" prefHeight="76.0" prefWidth="134.0" style="-fx-background-color: GREY; -fx-border-color: WHITE;" textAlignment="CENTER" textFill="#ea00ff" GridPane.columnIndex="2">
<font>
<Font size="15.0" />
</font>
</Label>
<Label id="altitudeTarget" alignment="CENTER" contentDisplay="CENTER" prefHeight="76.0" prefWidth="134.0" style="-fx-background-color: GREY; -fx-border-color: WHITE;" textAlignment="CENTER" textFill="#ea00ff" GridPane.columnIndex="2" GridPane.rowIndex="1">
<font>
<Font size="15.0" />
</font>
</Label>
<Label id="VStarget" alignment="CENTER" contentDisplay="CENTER" prefHeight="76.0" prefWidth="134.0" style="-fx-background-color: GREY; -fx-border-color: WHITE;" textAlignment="CENTER" textFill="#ea00ff" GridPane.columnIndex="2" GridPane.rowIndex="2">
<font>
<Font size="15.0" />
</font>
</Label>
<Label id="headingTarget" alignment="CENTER" contentDisplay="CENTER" prefHeight="76.0" prefWidth="134.0" style="-fx-background-color: GREY; -fx-border-color: WHITE;" textAlignment="CENTER" textFill="#ea00ff" GridPane.columnIndex="2" GridPane.rowIndex="3">
<font>
<Font size="15.0" />
</font>
</Label>
<Label id="bankAngleLabel" alignment="CENTER" contentDisplay="CENTER" prefHeight="79.0" prefWidth="120.0" style="-fx-border-color: WHITE;" text="BANK ANGLE" textAlignment="CENTER" textFill="WHITE" GridPane.columnIndex="2" GridPane.rowIndex="4">
<font>
<Font size="15.0" />
</font>
</Label>
<Label id="QFElabel" alignment="CENTER" contentDisplay="CENTER" prefHeight="79.0" prefWidth="120.0" style="-fx-border-color: WHITE;" text="QFE" textAlignment="CENTER" textFill="WHITE" GridPane.columnIndex="2" GridPane.rowIndex="5">
<font>
<Font size="15.0" />
</font>
</Label>
<Label id="bankAngleValue" alignment="CENTER" contentDisplay="CENTER" prefHeight="79.0" prefWidth="120.0" style="-fx-border-color: WHITE;" textAlignment="CENTER" textFill="WHITE" GridPane.columnIndex="3" GridPane.rowIndex="4">
<font>
<Font size="15.0" />
</font>
</Label>
<Label id="QFEvalue" alignment="CENTER" contentDisplay="CENTER" prefHeight="79.0" prefWidth="120.0" style="-fx-border-color: WHITE;" textAlignment="CENTER" textFill="WHITE" GridPane.columnIndex="3" GridPane.rowIndex="5">
<font>
<Font size="15.0" />
</font>
</Label>
</children>
</GridPane>
</children>
</AnchorPane>
</content>
<VBox.margin>
<Insets />
</VBox.margin>
</TitledPane>
</children>
</VBox>
<VBox id="Center_Column" minHeight="1080.0" minWidth="920.0" style="-fx-background-color: BLACK;">
<children>
<TitledPane id="HNAVPanel" collapsible="false" minHeight="1040.0" minWidth="920.0" style="-fx-background-color: BLACK;" text="HNAV Panel">
<content>
<AnchorPane id="HNAVPanelPane" fx:id="HNAVPanelPane" minWidth="920.0" style="-fx-background-color: BLACK;" />
</content></TitledPane>
<ToolBar id="toolBar" minHeight="40.0" minWidth="920.0" style="-fx-background-color: BLACK;">
<items>
<Button id="checkListBtn" fx:id="a6" minHeight="26.0" minWidth="223.0" mnemonicParsing="false" style="-fx-border-color: #434343; -fx-background-color: BLACK;" text="CheckList" textFill="WHITE" />
<Button id="flightPlanBtn" fx:id="a7" minHeight="26.0" minWidth="223.0" mnemonicParsing="false" style="-fx-border-color: #434343; -fx-background-color: BLACK;" text="Flight Plan" textFill="WHITE" />
<Button fx:id="a8" minHeight="26.0" minWidth="223.0" mnemonicParsing="false" style="-fx-border-color: #434343; -fx-background-color: BLACK;" styleClass="dataLinkBtn" text="Data Link Status" textFill="WHITE" />
<Button id="weatherBtn" minHeight="26.0" minWidth="223.0" mnemonicParsing="false" style="-fx-border-color: #434343; -fx-background-color: BLACK;" text="Weather" textFill="WHITE" />
</items>
</ToolBar>
</children>
</VBox>
<VBox id="Right_Column" minHeight="1080.0" minWidth="500.0" style="-fx-background-color: GREY;">
<children>
<TitledPane id="VNAVPanel" collapsible="false" minHeight="500.0" minWidth="500.0" text="VNAV Panel">
<content>
<AnchorPane id="VNAVPanelPane" minHeight="180.0" minWidth="200.0" style="-fx-background-color: BLACK;" />
</content>
</TitledPane>
<TitledPane id="alertPanel" collapsible="false" minHeight="240.0" minWidth="500.0" text="Alert Panel">
<content>
<AnchorPane id="alertPanelPane" minHeight="209.0" minWidth="498.0" style="-fx-background-color: GREY; -fx-border-color: YELLOW;" />
</content>
</TitledPane>
<TitledPane id="actionPanel" collapsible="false" minHeight="340.0" minWidth="500.0" prefHeight="340.0" prefWidth="500.0" text="Action Panel">
<content>
<AnchorPane id="actionPanelPane" minHeight="310.0" minWidth="500.0" style="-fx-background-color: GREY;">
<children>
<Button id="directToBtn" fx:id="a11" layoutX="14.0" layoutY="14.0" minHeight="40.0" minWidth="150.0" mnemonicParsing="false" style="-fx-background-color: GREY; -fx-border-color: BLACK;" text="DIRECT TO" AnchorPane.leftAnchor="0.0" />
<Button id="headToBtn" fx:id="a12" layoutX="14.0" layoutY="66.0" minHeight="40.0" minWidth="150.0" mnemonicParsing="false" style="-fx-background-color: GREY; -fx-border-color: BLACK;" text="HEAD TO" AnchorPane.leftAnchor="0.0" />
<Button id="climbToBtn" fx:id="a13" layoutX="14.0" layoutY="118.0" minHeight="40.0" minWidth="150.0" mnemonicParsing="false" style="-fx-background-color: GREY; -fx-border-color: BLACK;" text="CLIMB TO" AnchorPane.leftAnchor="0.0" />
<Button id="descentToBtn" fx:id="a14" layoutX="14.0" layoutY="171.0" minHeight="40.0" minWidth="150.0" mnemonicParsing="false" style="-fx-background-color: GREY; -fx-border-color: BLACK;" text="DESCENT TO" AnchorPane.leftAnchor="0.0" />
<Button id="speedAtBtn" fx:id="a15" layoutX="14.0" layoutY="223.0" minHeight="40.0" minWidth="150.0" mnemonicParsing="false" style="-fx-background-color: GREY; -fx-border-color: BLACK;" text="SPEED AT" AnchorPane.leftAnchor="0.0" />
<ChoiceBox id="directToChoice" disable="true" layoutX="174.0" layoutY="14.0" minHeight="40.0" minWidth="315.0" style="-fx-background-color: GREY; -fx-border-color: BLACK;" AnchorPane.rightAnchor="0.0" />
<ChoiceBox id="headToChoice" disable="true" layoutX="174.0" layoutY="66.0" minHeight="40.0" minWidth="315.0" style="-fx-background-color: GREY; -fx-border-color: BLACK;" AnchorPane.rightAnchor="0.0" />
<ChoiceBox id="climbToChoice" disable="true" layoutX="174.0" layoutY="118.0" minHeight="40.0" minWidth="315.0" style="-fx-background-color: GREY; -fx-border-color: BLACK;" AnchorPane.rightAnchor="0.0" />
<ChoiceBox id="descentToChoice" disable="true" layoutX="174.0" layoutY="171.0" minHeight="40.0" minWidth="315.0" style="-fx-background-color: GREY; -fx-border-color: BLACK;" AnchorPane.rightAnchor="0.0" />
<ChoiceBox id="speedAtChoice" disable="true" layoutX="174.0" layoutY="223.0" minHeight="40.0" minWidth="315.0" style="-fx-background-color: GREY; -fx-border-color: BLACK;" AnchorPane.rightAnchor="0.0" />
<Button id="submitBtn" fx:id="a10" disable="true" layoutX="339.0" layoutY="271.0" minHeight="35.0" minWidth="150.0" mnemonicParsing="false" style="-fx-background-color: GREY; -fx-border-color: YELLOW;" text="SUBMIT" textFill="YELLOW" AnchorPane.rightAnchor="0.0" />
<Button id="cancelBtn" fx:id="a9" disable="true" layoutX="14.0" layoutY="271.0" minHeight="35.0" minWidth="150.0" mnemonicParsing="false" style="-fx-background-color: GREY; -fx-border-color: #ff9100;" text="CANCEL" textFill="#ff9100" AnchorPane.leftAnchor="0.0" />
</children>
</AnchorPane>
</content>
</TitledPane>
</children>
</VBox>
</children>
</HBox>
</children>
</AnchorPane>
GUI: the middle HNAVPanel should display a map which the Controller "RadarView()" loads and builds
Finally, the controller tries to load a map with a series of beacon on it. It worked propperly on its own, but when trying to add this "map" feature in the center column's AnchorPane "HNAVPanelPane" in my FXML GUI, it crashes raising the following exception:
Output:
Exception in Application start method
java.lang.reflect.InvocationTargetException
at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:62)
at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43)
at java.lang.reflect.Method.invoke(Method.java:498)
at com.sun.javafx.application.LauncherImpl.launchApplicationWithArgs(LauncherImpl.java:389)
at com.sun.javafx.application.LauncherImpl.launchApplication(LauncherImpl.java:328)
at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:62)
at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43)
at java.lang.reflect.Method.invoke(Method.java:498)
at sun.launcher.LauncherHelper$FXHelper.main(LauncherHelper.java:873)
Caused by: java.lang.RuntimeException: Exception in Application start method
at com.sun.javafx.application.LauncherImpl.launchApplication1(LauncherImpl.java:917)
at com.sun.javafx.application.LauncherImpl.lambda$launchApplication$1(LauncherImpl.java:182)
at java.lang.Thread.run(Thread.java:750)
Caused by: java.lang.NullPointerException
at ground.view.RadarView.<init>(RadarView.java:37)
at build.Main.start(Main.java:23)
at com.sun.javafx.application.LauncherImpl.lambda$launchApplication1$8(LauncherImpl.java:863)
at com.sun.javafx.application.PlatformImpl.lambda$runAndWait$7(PlatformImpl.java:326)
at com.sun.javafx.application.PlatformImpl.lambda$null$5(PlatformImpl.java:295)
at java.security.AccessController.doPrivileged(Native Method)
at com.sun.javafx.application.PlatformImpl.lambda$runLater$6(PlatformImpl.java:294)
at com.sun.glass.ui.InvokeLaterDispatcher$Future.run(InvokeLaterDispatcher.java:95)
at com.sun.glass.ui.win.WinApplication._runLoop(Native Method)
at com.sun.glass.ui.win.WinApplication.lambda$null$4(WinApplication.java:185)
... 1 more
Exception running application build.Main
Java Result: 1
The controller code looks like this:
public class RadarView extends Pane{
#FXML
private AnchorPane HNAVPanelPane;
private IvyManager IM;
public RadarView(){
System.out.println("Initialized");
// Breaks after this point
// Its not appearing on HMI
HNAVPanelPane.getChildren().add(this);
// HNAV MAP
CartographyManagerXanthane cartography = new CartographyManagerXanthane();
Airspace myAirspace = new Airspace(cartography);
Map<String, IBeacon> beacons = myAirspace.getBeaconsByNameMap();
IBaseMap baseMap = cartography.loadBaseMap();
BaseMapView BMV = new BaseMapView(baseMap);
BeaconView BV = null;
this.getChildren().add(BMV);
SelfTraffic ST = new SelfTraffic(0, 0);
try{
IM = new IvyManager(ST);
}
catch(IvyException e){
throw new RuntimeException("Ivy bus had a failure...");
}
for(IBeacon beacon: beacons.values()){
BV = new BeaconView(beacon);
BMV.getChildren().add(BV);
}
SelfTrafficMarker aircraft = new SelfTrafficMarker(ST);
BMV.getChildren().add(aircraft.getMarker()); //discuss layers
panManager pM = new panManager(BMV);
dragManager dM = new dragManager(BMV);
zoomManager zM = new zoomManager(BMV);
}
}

Related

swiper-thumbs-gallery-loop-react not working in react js

I'm facing an issue I want to create a swiper thumb gallery slider. the issue is that when I copy code from swiper js and paste it into my react app it's not working and getting an error called The above error occurred in the component:
while the same code is working in the code sandbox. Please help me to create the gallery thumb slider.
import React, { useRef, useState } from "react";
// Import Swiper React components
import { Swiper, SwiperSlide } from "swiper/react";
// Import Swiper styles
import "swiper/css";
import "swiper/css/free-mode";
import "swiper/css/navigation";
import "swiper/css/thumbs";
// import required modules
import { FreeMode, Navigation, Thumbs } from "swiper";
function App () {
const [thumbsSwiper, setThumbsSwiper] = useState(null);
return (
<>
<Swiper
loop={true}
spaceBetween={10}
navigation={true}
thumbs={{ swiper: thumbsSwiper }}
modules={[FreeMode, Navigation, Thumbs]}
className="mySwiper2"
>
<SwiperSlide>
<img src="https://swiperjs.com/demos/images/nature-1.jpg" />
</SwiperSlide>
<SwiperSlide>
<img src="https://swiperjs.com/demos/images/nature-2.jpg" />
</SwiperSlide>
<SwiperSlide>
<img src="https://swiperjs.com/demos/images/nature-3.jpg" />
</SwiperSlide>
<SwiperSlide>
<img src="https://swiperjs.com/demos/images/nature-4.jpg" />
</SwiperSlide>
<SwiperSlide>
<img src="https://swiperjs.com/demos/images/nature-5.jpg" />
</SwiperSlide>
<SwiperSlide>
<img src="https://swiperjs.com/demos/images/nature-6.jpg" />
</SwiperSlide>
<SwiperSlide>
<img src="https://swiperjs.com/demos/images/nature-7.jpg" />
</SwiperSlide>
<SwiperSlide>
<img src="https://swiperjs.com/demos/images/nature-8.jpg" />
</SwiperSlide>
<SwiperSlide>
<img src="https://swiperjs.com/demos/images/nature-9.jpg" />
</SwiperSlide>
<SwiperSlide>
<img src="https://swiperjs.com/demos/images/nature-10.jpg" />
</SwiperSlide>
</Swiper>
<Swiper
onSwiper={setThumbsSwiper}
loop={true}
spaceBetween={10}
slidesPerView={4}
freeMode={true}
watchSlidesProgress={true}
modules={[FreeMode, Navigation, Thumbs]}
className="mySwiper"
>
<SwiperSlide>
<img src="https://swiperjs.com/demos/images/nature-1.jpg" />
</SwiperSlide>
<SwiperSlide>
<img src="https://swiperjs.com/demos/images/nature-2.jpg" />
</SwiperSlide>
<SwiperSlide>
<img src="https://swiperjs.com/demos/images/nature-3.jpg" />
</SwiperSlide>
<SwiperSlide>
<img src="https://swiperjs.com/demos/images/nature-4.jpg" />
</SwiperSlide>
<SwiperSlide>
<img src="https://swiperjs.com/demos/images/nature-5.jpg" />
</SwiperSlide>
<SwiperSlide>
<img src="https://swiperjs.com/demos/images/nature-6.jpg" />
</SwiperSlide>
<SwiperSlide>
<img src="https://swiperjs.com/demos/images/nature-7.jpg" />
</SwiperSlide>
<SwiperSlide>
<img src="https://swiperjs.com/demos/images/nature-8.jpg" />
</SwiperSlide>
<SwiperSlide>
<img src="https://swiperjs.com/demos/images/nature-9.jpg" />
</SwiperSlide>
<SwiperSlide>
<img src="https://swiperjs.com/demos/images/nature-10.jpg" />
</SwiperSlide>
</Swiper>
</>
);
}
export default App;
Is it working in react?
What about next js?
use this
<BrowserRouter>
<App />
</BrowserRouter>
instead of
<React.StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
</React.StrictMode>
This is the final solution for this problem
import React, { useLayoutEffect, useRef, useState } from "react";
import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/css";
import "swiper/css/free-mode";
import "swiper/css/navigation";
import "swiper/css/thumbs";
import SwiperClass from "swiper/types/swiper-class";
import SwiperCore, { FreeMode, Navigation, Thumbs, Controller } from "swiper";
export default function AdSwiper() {
const [thumbsSwiper, setThumbsSwiper] = useState<SwiperCore>();
const [firstSwiper, setFirstSwiper] = useState<SwiperClass>();
const [secondSwiper, setSecondSwiper] = useState<SwiperClass>();
const swiper1Ref = useRef<React.MutableRefObject<null>>(null);
const swiper2Ref = useRef();
useLayoutEffect(() => {
if (swiper1Ref.current !== null) {
swiper1Ref.current.controller.control = swiper2Ref.current;
}
}, []);
return (
<div className="h-[550px] ">
<Swiper
onSwiper={(swiper) => {
if (swiper1Ref.current !== null) {
swiper1Ref.current = swiper;
}
}}
preloadImages={false}
controller={{ control: secondSwiper }}
spaceBetween={10}
slidesPerView={1}
grabCursor={true}
navigation={true}
thumbs={{
swiper: thumbsSwiper && !thumbsSwiper.destroyed ? thumbsSwiper : null,
}}
modules={[FreeMode, Navigation, Thumbs, Controller]}
className="w-[848px] h-[454px] rounded-xl"
>
<SwiperSlide>
<img src="https://a.d-cd.net/9634e6s-960.jpg" />
</SwiperSlide>
<SwiperSlide>
<img src="https://a.d-cd.net/a5634e6s-960.jpg" />
</SwiperSlide>
<SwiperSlide>
<img src="https://a.d-cd.net/13634e6s-960.jpg" />
</SwiperSlide>
<SwiperSlide>
<img src="https://a.d-cd.net/e3634e6s-960.jpg" />
</SwiperSlide>
<SwiperSlide>
<img src="http://carsot.com/images/daewoo-nubira-ii-1999-2003-sedan-interior-2.jpg" />
</SwiperSlide>
<SwiperSlide>
<img src="https://www.4tuning.ro/images/elemente-caroserie-din-dezmembrari-daewoo-nubira/elemente-caroserie-din-dezmembrari-daewoo-nubira-8fd6c1475ef586f2cf-1100-615-2-85-1.jpg" />
</SwiperSlide>
<SwiperSlide>
<img src="https://a.d-cd.net/5283186s-480.jpg" className="w-full" />
</SwiperSlide>
<SwiperSlide>
<img src="https://a.d-cd.net/JCAAAgGDAuA-960.jpg" />
</SwiperSlide>
<SwiperSlide>
<img src="https://a.d-cd.net/a5634e6s-960.jpg" />
</SwiperSlide>
</Swiper>
<Swiper
controller={{ control: firstSwiper }}
loop={false}
spaceBetween={10}
slidesPerView={8}
watchSlidesProgress
touchRatio={0.2}
preloadImages={false}
lazy
slideToClickedSlide={true}
onSwiper={setThumbsSwiper}
modules={[Navigation, Thumbs, Controller]}
className="h-[100.4px] w-[848px] mt-[20px] rounded-xl"
>
<SwiperSlide className="w-[70px]">
<img
src="https://a.d-cd.net/9634e6s-960.jpg"
className=" rounded-xl h-[70px]"
/>
</SwiperSlide>
<SwiperSlide className="w-[70px]">
<img
src="https://a.d-cd.net/a5634e6s-960.jpg"
className=" rounded-xl h-[70px]"
/>
</SwiperSlide>
<SwiperSlide className="w-[70px]">
<img
src="https://a.d-cd.net/13634e6s-960.jpg"
className=" rounded-xl h-[70px]"
/>
</SwiperSlide>
<SwiperSlide className="w-[70px]">
<img
src="https://a.d-cd.net/e3634e6s-960.jpg"
className=" rounded-xl h-[70px]"
/>
</SwiperSlide>
<SwiperSlide className="w-[70px]">
<img
src="http://carsot.com/images/daewoo-nubira-ii-1999-2003-sedan-interior-2.jpg"
className=" rounded-xl h-[70px]"
/>
</SwiperSlide>
<SwiperSlide className="w-[70px]">
<img
className=" rounded-xl h-[70px]"
src="https://www.4tuning.ro/images/elemente-caroserie-din-dezmembrari-daewoo-nubira/elemente-caroserie-din-dezmembrari-daewoo-nubira-8fd6c1475ef586f2cf-1100-615-2-85-1.jpg"
/>
</SwiperSlide>
<SwiperSlide className="w-[70px]">
<img
className=" rounded-xl h-[70px]"
src="https://a.d-cd.net/5283186s-480.jpg"
/>
</SwiperSlide>
<SwiperSlide className="w-[70px]">
<img
className=" rounded-xl h-[70px]"
src="https://a.d-cd.net/JCAAAgGDAuA-960.jpg"
/>
</SwiperSlide>
<SwiperSlide className="w-[70px]">
<img
src="https://a.d-cd.net/a5634e6s-960.jpg"
className=" rounded-xl h-[70px]"
/>
</SwiperSlide>
</Swiper>
</div>
);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Flowbite plugin not working in RouterView

I am currently building a dashboard app and I am facing an issue I canĀ“t solve.
App.vue
<template>
<div class="flex flex-row min-h-screen w-screen">
<SideBar />
<div class="flex flex-col w-full bg-gray-300 shrink min-w-0">
<TopBar />
<RouterView />
</div>
</div>
</template>
Dropdown fragment in TopBar component (flowbite acts normal):
<button
type="button"
class="flex mr-3 text-sm md:mr-0 items-center"
id="user-menu-button"
aria-expanded="false"
data-dropdown-toggle="user-menu"
>
<span class="sr-only">Open user menu</span>
<img
class="w-8 h-8 rounded-full border-green"
src="https://picsum.photos/200"
alt="user photo"
/>
<span class="ml-3 text-medium text-gray-500"
>Hallo, <span class="font-semibold">Leon!</span></span
>
</button>
<!-- Dropdown menu -->
<div
class="
hidden
z-50
my-4
text-base
list-none
bg-white
rounded
divide-y divide-gray-100
shadow
dark:bg-gray-700 dark:divide-gray-600
"
id="user-menu"
style="
position: absolute;
inset: auto auto 0px 0px;
margin: 0px;
transform: translate(1246px, 723px);
"
data-popper-reference-hidden=""
data-popper-escaped=""
data-popper-placement="top"
>
Start of at the RouterView injected Component:
<template>
<main class="w-full h-full py-5 px-5">
<CardStatus />
<Card class="max-w-3xl max-h-80 p-5">
<div class="mb-4 flex flex-row justify-between">
<h5
class="
text-xl
font-semibold
tracking-tight
text-gray-900
dark:text-white
"
>
Dropdown fragment in CardStatus component (flowbite not working):
<button
id="dropdownDefault"
data-dropdown-toggle="dropdown"
class="
text-white
bg-blue-700
hover:bg-blue-800
focus:ring-4 focus:outline-none focus:ring-blue-300
font-medium
rounded-lg
text-sm
px-4
py-2.5
text-center
inline-flex
items-center
dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800
"
type="button"
>
Dropdown button
<svg
class="w-4 h-4 ml-2"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M19 9l-7 7-7-7"
></path>
</svg>
</button>
<!-- Dropdown menu -->
<div
id="dropdown"
class="
z-10
hidden
bg-white
divide-y divide-gray-100
rounded
shadow
w-44
dark:bg-gray-700
"
>
<ul
class="py-1 text-sm text-gray-700 dark:text-gray-200"
aria-labelledby="dropdownDefault"
>
I have no idea why it acts like this. I imported and installed everything like explained in the documentation.
Thanks

How to refactor Bootstrap 4 radiobuttons to Bootstrap 5 uinsg Intellij's Structural Replace

I am trying to update some Java Server Pages/Spring Webflow views from Twitter Bootstrap 4 to Bootstrap 5.
I have lots of radiobuttons and the requisite HTML boilerplate has changed quite a bit from v4 to v5. This seems like a good use-case for IntelliJ's "Structural Replace" but I can't get it to work.
Here is what I am trying:
I just end up with:
I have tried adding filters to the variables ie:
And I have tried changing the "search target" (to label [for example])...
None of these work.
I find Jetbrains' (normally good) doco woeful for this feature.
[edit...example code]
<div class="row mt-2">
<div class="col-4">
<div class="form-check">
<label class="custom-control custom-radio">
<form:radiobutton path="type" value="wdpp" cssClass="custom-control-input"/>
<span class="custom-control-indicator"></span>
<span class="custom-control-description">Wires: Pole to Pole</span>
</label>
</div>
<div class="form-check">
<label class="custom-control custom-radio">
<form:radiobutton path="type" value="wdpb" cssClass="custom-control-input"/>
<span class="custom-control-indicator"></span>
<span class="custom-control-description">Wires: Pole to Building</span>
</label>
</div>
<div class="form-check">
<label class="custom-control custom-radio">
<form:radiobutton path="type" value="transformer" cssClass="custom-control-input"/>
<span class="custom-control-indicator"></span>
<span class="custom-control-description">Transformer</span>
</label>
</div>
<div class="form-check">
<label class="custom-control custom-radio">
<form:radiobutton path="type" value="meterBox" cssClass="custom-control-input"/>
<span class="custom-control-indicator"></span>
<span class="custom-control-description">Meter Box</span>
</label>
</div>
<div class="form-check">
<label class="custom-control custom-radio">
<form:radiobutton path="type" value="pole" cssClass="custom-control-input"/>
<span class="custom-control-indicator"></span>
<span class="custom-control-description">Pole</span>
</label>
</div>
[...more radios elided...]
</div>
</div>
[edit...a different UI appears sometimes]
Actually, I think that this UI always appears and is then quickly overlayed with the earlier one (the one with the "Find Options..." link)
[wondering about taking this to Jetbrains bug-tracker...]
And the template is:
<replaceConfiguration name="Unnamed" text="<label class="custom-control custom-radio">
<form:radiobutton path="$path$" value="$value$" cssClass="custom-control-input"/>
<span class="custom-control-indicator"></span>
<span class="custom-control-description">$label$</span>
</label>" recursive="false" type="XML" dialect="HTML" search_injected="false" reformatAccordingToStyle="false" shortenFQN="false" replacement="<form:radiobutton id="$path$-$value$" path="$path$" value="$value$" cssClass="form-check-input"/>
<label class="form-check-label" for="$path$-$value$">$label$</label>">
<constraint name="__context__" within="" contains="" />
<constraint name="path" within="" contains="" />
<constraint name="value" within="" contains="" />
<constraint name="label" within="" contains="" />
</replaceConfiguration>
Any thoughts/suggestions/pointers gratefully received.
It appears you are running into a bug, where it is impossible to match JSP tags inside HTML tags. Maybe you can use the following 2-step workaround. First replace the JSP tag with a fake HTML tag:
<replaceConfiguration name="Unnamed" text="<form:radiobutton path="$type$" value="$transformer$" cssClass="custom-control-input"/>" recursive="false" type="Qt UI file" dialect="JSP" reformatAccordingToStyle="false" shortenFQN="false" replacement="<form-radiobutton path="$type$" value="$transformer$" cssClass="custom-control-input"/>">
<constraint name="__context__" within="" contains="" />
<constraint name="type" within="" contains="" />
<constraint name="transformer" within="" contains="" />
</replaceConfiguration>
And then perform an HTML replacement with the new construct:
<replaceConfiguration name="Unnamed" text="<label class="custom-control custom-radio">
<form-radiobutton path="$path$" value="$value$" cssClass="custom-control-input"/>
<span class="custom-control-indicator"></span>
<span class="custom-control-description">$label$</span>
</label>" recursive="false" type="HTML" reformatAccordingToStyle="false" shortenFQN="false" replacement="<form:radiobutton id="$path$-$value$" path="$path$" value="$value$" cssClass="form-check-input"/>
<label class="form-check-label" for="$path$-$value$">$label$</label>">
<constraint name="__context__" within="" contains="" />
<constraint name="path" within="" contains="" />
<constraint name="value" within="" contains="" />
<constraint name="label" within="" contains="" />
</replaceConfiguration>

How to retrieve the css property of an element whose css value is dynamically changing?

In our browser developer tools there is no id, so we are using css value. But css value (css=#estimateTable[_ngcontent-c20].highlighted[_ngcontent-c20]) is changing dynamically. so we are getting an error message stating
Element with locator css=#estimateTable[_ngcontent-c20].highlighted[_ngcontent-c20] not found.
<tr _ngcontent-c5="" class="item-name highlighted" tabindex="0">
<td _ngcontentc5="">
<div _ngcontent-c5="" class="svg-size cursor" style="text-align:center;
padding-top:12px;">
<mat-icon _ngcontent-c5="" class="mat-icon" role="img" svgicon="common:estimatetmp" aria-hidden="true">
<svg viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fit="" height="100%" width="100%" preserveAspectRatio="xMidYMid meet" focusable="false">
<desc>Created with Sketch.</desc>
<defs>
</defs>
<g id="__26Nzx83__estimate-tmp-icon" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="__26Nzx83__Group-2">
<rect id="__26Nzx83__Rectangle-4-Copy-2" fill="#FFFFFF" x="0" y="0" width="32" height="32"></rect>
<g id="__26Nzx83__Group" transform="translate(4.000000, 4.000000)">
<rect id="__26Nzx83__Rectangle-3" fill="#9013FE" opacity="0.25" x="0" y="0" width="24" height="24" rx="2">
</rect>
<text id="__26Nzx83__E" font-family="OpenSans-ExtraBold, Open Sans" font-size="18" font-weight="600" fill="#FFFFFF">
<tspan x="7" y="19">E</tspan>
</text>
</g>
</g>
</g>
</svg>
</mat-icon>
</div>
</td>
<td _ngcontent-c5="" class="fontStyle" data-placement="top" title="Untitled Estimate 74"> Untitled Estimate 74 </td>
<td _ngcontent-c5="" class="fontStyle">venkatesh kumar</td>
<td _ngcontent-c5="" class="fontStyle">Oct 31 2018 11:28 AM</td>
<td _ngcontent-c5="">
<div _ngcontent-c5="" class="dropdown">
<div _ngcontent-c5="" class="options more-icon item-name" data-placement="top" data-toggle="dropdown" style="color: black; font-size: 24px;">
</div>
</div>
</td>
</tr>
How to handle this? Shall we tried using class name"(class=item.highlighted) instead of css and id but couldn't locate.

highlightedColor in selected TableViewRow gets stuck

See my screencast for an example of what I mean. You see the problem about 20 seconds into the video.
It seems to mostly happen when scrolling the tableview causes the selected row to go off screen. When you scroll to bring that row back onto the screen and then select a new row the previously selected row's highlightedColor stays instead of switching back to the regular color. It doesn't happen every time, but this is the the best way I've found to replicate. Here's my Allow code:
recipe_list.xml
<Alloy>
<View class="container">
<TableView id="categories" class="master">
<TableViewRow class="category_row">
<Label class="category" text="Appetizers" />
<View class="separator" />
</TableViewRow>
<TableViewRow class="category_row">
<Label class="category" text="Drinks that are extremely complex" />
<View class="separator" />
</TableViewRow>
<TableViewRow class="category_row">
<Label class="category" text="Entrees" />
<View class="separator" />
</TableViewRow>
<TableViewRow class="category_row">
<Label class="category" text="Desserts" />
<View class="separator" />
</TableViewRow>
<TableViewRow class="category_row">
<Label class="category" text="Appetizers" />
<View class="separator" />
</TableViewRow>
<TableViewRow class="category_row">
<Label class="category" text="Drinks that are extremely complex" />
<View class="separator" />
</TableViewRow>
<TableViewRow class="category_row">
<Label class="category" text="Entrees" />
<View class="separator" />
</TableViewRow>
<TableViewRow class="category_row">
<Label class="category" text="Desserts" />
<View class="separator" />
</TableViewRow>
<TableViewRow class="category_row">
<Label class="category" text="Appetizers" />
<View class="separator" />
</TableViewRow>
<TableViewRow class="category_row">
<Label class="category" text="Drinks that are extremely complex" />
<View class="separator" />
</TableViewRow>
<TableViewRow class="category_row">
<Label class="category" text="Entrees" />
<View class="separator" />
</TableViewRow>
<TableViewRow class="category_row">
<Label class="category" text="Desserts" />
<View class="separator" />
</TableViewRow>
<TableViewRow class="category_row">
<Label class="category" text="Appetizers" />
<View class="separator" />
</TableViewRow>
<TableViewRow class="category_row">
<Label class="category" text="Drinks that are extremely complex" />
<View class="separator" />
</TableViewRow>
<TableViewRow class="category_row">
<Label class="category" text="Entrees" />
<View class="separator" />
</TableViewRow>
<TableViewRow class="category_row">
<Label class="category" text="Desserts" />
<View class="separator" />
</TableViewRow>
</TableView>
<View id="vertical_separator" />
</View>
</Alloy>
recipe_list.tss
".container": {
backgroundColor: "white",
height: Titanium.UI.FILL,
top: 0
}
".master": {
top: 0,
left: 0,
width: 320,
// height: Titanium.UI.FILL,
backgroundColor: "#ebeced",
separatorColor: "#d7d7d7",
allowsSelection: true
}
".category_row": {
selectionStyle: Titanium.UI.iPhone.TableViewCellSelectionStyle.BLUE,
selectedBackgroundColor: "#34c2d8"
}
".category": {
font: {fontFamily: "Open Sans [Regular]", fontSize: "20"},
textAlign: Titanium.UI.TEXT_ALIGNMENT_CENTER,
color: "#464646",
highlightedColor: "#fafdff",
top: 15,
bottom: 15,
height: Titanium.UI.SIZE
}
".separator": {
top: 0,
height: 1,
width: Titanium.UI.FILL,
backgroundColor: "#f6f6f7"
}
"#vertical_separator": {
left: 320,
width: 1,
height: Titanium.UI.FILL,
backgroundColor: "#cbcdcf"
}