ReactJS: A complex alert box

This entry is part 16 of 35 in the series React JS

https://codepen.io/gaearon/pen/gwZbYa

function FancyBorder(props) {
  return (
    <div className={'FancyBorder FancyBorder-' + props.color}>
      {props.children}
    </div>
  );
}

function Dialog(props) {
  return (
    <FancyBorder color="blue">
      <h1 className="Dialog-title">
        {props.title}
      </h1>
      <p className="Dialog-message">
        {props.message}
      </p>
      {props.children}
    </FancyBorder>
  );
}

class SignUpDialog extends React.Component {
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
    this.handleSignUp = this.handleSignUp.bind(this);
    this.state = {login: ''};
  }

  render() {
    return (
      <Dialog title="Mars Exploration Program"
              message="How should we refer to you?">
        <input value={this.state.login}
               onChange={this.handleChange} />
        <button onClick={this.handleSignUp}>
          Sign Me Up!
        </button>
      </Dialog>
    );
  }

  handleChange(e) {
    this.setState({login: e.target.value});
  }

  handleSignUp() {
    alert(`Welcome aboard, ${this.state.login}!`);
  }
}

ReactDOM.render(
  <SignUpDialog />,
  document.getElementById('root')
);

JavaFX: Creating a second stage to show alert

This entry is part 34 of 55 in the series JavaFX

We have always used alert box to show an alert message in web development but for JavaFX, we have to roll out our own alert box.

The usual method for most JavaFX developers is to create a second stage as shown in the example below.

In this example, we will create an AlertBox class and put the class in a separate JavaFX class file.

Main Application
package javafxapplication26;

import javafx.application.*;
import javafx.stage.*;
import javafx.scene.*;
import javafx.scene.layout.*;
import javafx.scene.control.*;

public class JavaFXApplication26 extends Application {

    @Override
    public void start(Stage stage) {

        Button btn = new Button();
        btn.setText("Click Me");
        btn.setOnAction(e -> buttonClick());

        BorderPane pane = new BorderPane();
        pane.setCenter(btn);

        Scene scene = new Scene(pane, 500, 400);

        stage.setScene(scene);
        stage.setTitle("Show Alert");
        stage.show();
    }

    public void buttonClick() {

        AlertBox.show("This Is An Alert!", "Alert!");

    }

    public static void main(String[] args) {
        launch(args);
    }

}

You can add a class file and name the file as AlertBox.java shown below.

AlertBox.java
package javafxapplication26;

import javafx.stage.*;
import javafx.scene.*;
import javafx.scene.layout.*;
import javafx.scene.control.*;
import javafx.geometry.*;

public class AlertBox       
{
    public static void show(String message, String title)    
    {
        Stage stage = new Stage();       
        stage.initModality(Modality.APPLICATION_MODAL);       
        stage.setTitle(title);       
        stage.setMinWidth(400);       
        stage.setMinHeight(300);

        Label lbl = new Label();       
        lbl.setText(message);

        Button btnOK = new Button();       
        btnOK.setText("OK");
        btnOK.setMinWidth(60);
        btnOK.setOnAction(e -> stage.close());       

        VBox pane = new VBox(20);       
        pane.getChildren().addAll(lbl, btnOK);
        pane.setAlignment(Pos.CENTER);       

        Scene scene = new Scene(pane);       
        stage.setScene(scene);
        stage.showAndWait();       
    }
}

alert

 

jQuery UI & Dialog: Modal Dialog Box Alert

This entry is part 2 of 6 in the series jQuery UI Dialog

jQuery UI Dialog – Modal message

Use a modal dialog to explicitly acknowledge information or an action before continuing their work.

Set the modal option to true, and specify a primary action (Ok) with the buttons option.

<!doctype html>
<html lang='en'>
<head>
    <meta charset='utf-8'>
    <title>jQuery UI Dialog - Modal message</title>
    <link rel='stylesheet' href='//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css'>
    <script src='//code.jquery.com/jquery-1.9.1.js'></script>
    <script src='//code.jquery.com/ui/1.10.4/jquery-ui.js'></script>
    <link rel='stylesheet' href='https://codecrawl.com/code/jqueryui/jqueryui_style.css'>
    <script>
        $(function () {
            $('#dialog-message').dialog({
                modal: true,
                buttons: {
                    Ok: function () {
                        $(this).dialog('close');
                    }
                }
            });
        });
    </script>
</head>
<body>

<div id='dialog-message' title='Download complete'>
    <p>
        <span class='ui-icon ui-icon-circle-check' style='float:left; margin:0 7px 50px 0;'></span>
        Your files have downloaded successfully into the My Downloads folder.
    </p>

    <p>
        Currently using <b>36% of your storage space</b>.
    </p>
</div>

<p>Modal Dialog Box Alert Demo</p>

</body>
</html>
Try The Code