Modernization Tutorial

Avaa ChatGPT:ssä

Tämä opas käy läpi olemassa olevan Java Swing -sovelluksen modernisoinnin integroimalla se webforJ:hen WebswingConnectorin avulla. Opit, miten perinteisestä työpöytäsovelluksesta tehdään web-pohjainen, ja lisätään vähitellen moderneja verkkotoimintoja, kuten web-pohjaisia dialogeja ja interaktiivisia lomakkeita webforJ-komponenttien avulla.

Ehdot

Ennen tämän oppaan aloittamista, suorita Asetus ja konfigurointi -vaiheet Webswing-palvelimen ja CORS-asetusten konfiguroimiseksi.

Lähdekoodi

Tämän oppaan täydellinen lähdekoodi on saatavilla GitHubissa: webforj/webforj-webswing-integration-tutorial

Tilannekuva

Kuvittele, että sinulla on asiakkuudenhallintasovellus, joka on rakennettu Swingillä ja ollut tuotannossa vuosia. Se toimii hyvin, mutta käyttäjät odottavat nyt verkkopääsyä ja modernia käyttöliittymää. Sen sijaan, että kirjoittaisit sovelluksen kokonaan uusiksi, hyödynnät Webswingiä tehdäksesi siitä heti verkkopohjaisen ja lisäät vähitellen moderneja web-toimintoja, kuten web-pohjaisia dialogeja ja lomakkeita webforJ-komponenttien avulla.

Lähtöpiste: Swing-sovellus

Esimerkkiswing-sovellus on asiakastaulukko, jossa on tyypilliset CRUD-toiminnot. Kuten monet yritysten Swing-sovellukset, se noudattaa vakiomalleja:

public class Application {
  private List<Customer> customers;
  private DefaultTableModel model;
  private JTable table;

  private void createTable() {
    String[] columnNames = { "Nimi", "Yritys", "Sähköposti" };
    model = new DefaultTableModel(columnNames, 0) {
      @Override
      public boolean isCellEditable(int row, int column) {
        return false;
      }
    };

    table = new JTable(model);
    table.setRowHeight(30);
    table.setRowSelectionAllowed(true);

    table.addMouseListener(new MouseAdapter() {
      @Override
      public void mouseClicked(MouseEvent e) {
        if (e.getClickCount() == 2) {
          // Käsittele kaksoisnapsautus muokkaamiseen
        }
      }
    });
  }

  private void showEditDialog(Customer customer) {
    JTextField nameField = new JTextField(customer.getName());
    JTextField companyField = new JTextField(customer.getCompany());
    JTextField emailField = new JTextField(customer.getEmail());

    Object[] fields = {
        "Nimi:", nameField,
        "Yritys:", companyField,
        "Sähköposti:", emailField
    };

    int result = JOptionPane.showConfirmDialog(null, fields, "Muokkaa asiakasta",
        JOptionPane.OK_CANCEL_OPTION, JOptionPane.PLAIN_MESSAGE);
  }
}

Tämä sovellus toimii erinomaisesti työpöytäsovelluksena, mutta sillä ei ole verkkopääsyä. Käyttäjien on asennettava Java ja suoritettava JAR-tiedosto paikallisesti.

Vaihe 1: Webswing-tietoisuuden lisääminen

Ensimmäinen askel on tehdä Swing-sovelluksesta tietoinen siitä, onko se käynnissä Webswingissä. Tämä mahdollistaa sen käyttäytymisen mukauttamisen ilman työpöytäyhteensopivuuden rikkomista.

Webswing-ympäristön tunnistaminen

Lisää Webswing API -riippuvuus Swing-projektiisi:

<dependency>
  <groupId>org.webswing</groupId>
  <artifactId>webswing-api</artifactId>
  <version>25.1</version>
</dependency>

Muokkaa sitten sovellustasi tunnistamaan Webswing-aika:

private void initWebswing() {
  api = WebswingUtil.getWebswingApi();
  isWebswing = api != null;

  if (isWebswing) {
    setupWebswingListeners();
  }
}

Keskeinen oivallus on, että WebswingUtil.getWebswingApi() palauttaa null, kun sovellus toimii tavallisena työpöytäsovelluksena, mikä mahdollistaa kaksitaitoisen yhteensopivuuden ylläpitämisen.

Käyttäytymisen mukauttaminen verkkodeploytausta varten

Kun tunnistus on paikallaan, voit nyt mukauttaa sovelluksen käyttäytymistä. Tärkein muutos on se, miten käyttäjäinteraktiot käsitellään:

private void handleDoubleClick(MouseEvent e) {
  int row = table.rowAtPoint(e.getPoint());
  if (row >= 0 && row < customers.size()) {
    Customer customer = customers.get(row);

    if (isWebswing) {
      api.sendActionEvent("select-customer", gson.toJson(customer), null);
    } else {
      showEditDialog(customer);
    }
  }
}

Jakamalla käyttäytymistä isWebswing-arvon mukaan, koodipohja voi käsitellä molempia ympäristöjä.

Vaihe 2: webforJ-kääreen luominen

Nyt kun Swing-sovellus voi kommunikoida tapahtumien kautta, luodaan webforJ-sovellus, joka upottaa Swing-sovelluksen ja lisää moderneja web-toimintoja, kuten web-pohjaisia dialogeja ja lomakkeita.

Yhteyden muodostamisen asetukset

WebswingConnector-komponentti upottaa Webswingissä isännöidyn sovelluksesi webforJ-näkymään:

@Route("/")
public class CustomerTableView extends Composite<FlexLayout> {
  private FlexLayout self = getBoundComponent();

  public CustomerTableView(@Value("${webswing.connector.url}") String webswingUrl) {
    WebswingConnector connector = new WebswingConnector(webswingUrl);
    connector.setSize("100vw", "100vh");

    self.add(connector);
  }
}

Liitin yhdistää Webswing-palvelimeesi ja luo kaksisuuntaisen viestintäkanavan.

Tapahtumien käsittely Swingistä

Kun Swing-sovellus lähettää tapahtumia (kuten kun käyttäjä kaksoisnapsauttaa riviä), liitin vastaanottaa ne:

connector.onAction(event -> {
  switch (event.getActionName()) {
    case "select-customer":
      event.getActionData().ifPresent(data -> {
        JsonObject customer = JsonParser.parseString(data).getAsJsonObject();
        CustomerForm dialog = new CustomerForm(customer);
        self.add(dialog);
        dialog.onSave(() -> {
          Gson gson = new Gson();
          connector.performAction("update-customer", gson.toJson(customer));
        });
      });
      break;
  }
});

Nyt käyttäjät näkevät modernin web-lomakkeen, joka on rakennettu webforJ-komponenteilla, sen sijaan että he näkisivät Swing-dioja.

Vaihe 3: kaksisuuntainen viestintä

Integraatiosta tulee voimakas, kun viestintä tapahtuu molempiin suuntiin. WebforJ-sovellus voi lähettää päivityksiä takaisin Swing-sovellukseen, pitäen molemmat käyttöliittymät synkronoituna.

Päivitysten lähettäminen Swingiin

Kun käyttäjä muokkaa asiakasta webforJ-dialogissa:

dialog.onSave(() -> {
  // Lähetä päivitetty asiakas takaisin Swingiin
  connector.performAction("update-customer", gson.toJson(customer));
});

Päivitysten käsittely Swingissä

Swing-sovellus kuuntelee näitä päivityksiä ja päivittää näyttönsä:

private void setupWebswingListeners() {
  api.addBrowserActionListener(event -> {
    if ("update-customer".equals(event.getActionName())) {
      Customer updated = gson.fromJson(event.getData(), Customer.class);
      updateCustomer(updated);
    }
  });
}

Arkkitehtuurin hyödyt

Tämä lähestymistapa tarjoaa useita etuja verrattuna täysin uusiksi kirjoittamiseen:

Välitön verkkodeploy

Swing-sovelluksesi on heti verkkopohjainen ilman koodimuutoksia. Käyttäjät voivat käyttää sitä selaimen kautta, kun työskentelet parannusten parissa.

Vähittäinen parantaminen

Aloita vain muokkausdialogin korvaamisesta, ja vaihda sitten vähitellen lisää komponentteja:

1. Vaihe 1: Upota koko Swing-sovellus, korvaten vain muokkausdialogi
2. Vaihe 2: Lisää webforJ-navigointi ja valikot upotetun sovelluksen ympärille
3. Vaihe 3: Korvaa taulukko webforJ-taulukolla, pitäen Swingin korvattavissa ominaisuuksissa
4. Vaihe 4: Lopulta korvata kaikki Swing-komponentit

Riskien vähentäminen

Koska alkuperäinen Swing-sovellus pysyy toiminnassa, voit:

• Palata työpöytädeployantoon tarvittaessa
• Testata uusia ominaisuuksia olemassa olevien rinnalla
• Siirtää käyttäjiä vähitellen
• Säilyttää saman liiketoimintalogiikan