Modernization Tutorial

Avaa ChatGPT:ssä

Tämä opas käy läpi olemassa olevan Java Swing -sovelluksen modernisoinnin integroimalla se webforJ:hin käyttäen WebswingConnector-komponenttia. Opit, kuinka perinteisestä työpöytäsovelluksesta tehdään verkko- käyttöliittymä ja lisätään vähitellen nykyaikaisia verkkotoimintoja, kuten verkkopohjaisia dialogeja ja interaktiivisia lomakkeita webforJ-komponenttien avulla.

Esivaatimukset

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

Lähdekoodi

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

Tilanne

Kuvittele, että sinulla on asiakashallintasovellus, joka on rakennettu Swingillä ja ollut tuotannossa vuosia. Se toimii hyvin, mutta käyttäjät odottavat nyt verkkoyhteyttä ja nykyaikaista käyttöliittymää. Sen sijaan, että kirjoittaisit kaiken alusta alkaen, käytät Webswingia tehdäkseen sen heti verkkoyhteensopivaksi, ja lisäät vähitellen nykyaikaisia verkkotoimintoja, kuten verkkopohjaisia dialogeja ja lomakkeita webforJ-komponetteja käyttäen.

Lähtökohta: Swing-sovellus

Esimerkkiswing-sovellus on asiakastietojen taulukko, jossa on tyypilliset CRUD-toiminnot. Kuten monissa yrityksissä käytettävissä Swing-sovelluksissa, se noudattaa tavallisia malleja:

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 muokataksesi
        }
      }
    });
  }

  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 täydellisesti työpöytäsovelluksena, mutta siinä ei ole verkkoyhteyttä. Käyttäjien on asennettava Java ja suoritettava JAR-tiedosto paikallisesti.

Vaihe 1: tee siitä Webswing-tietoista

Ensimmäinen vaihe on tehdä Swing-sovelluksesta tietoinen siitä, onko se käynnissä Webswingin alla. Tämä sallii sen mukauttaa käyttäytymistään rikkomatta työpöytäsovelluksen yhteensopivuutta.

Webswing-ympäristön havaitseminen

Lisää Webswingin API-riippuvuus Swing-projektiisi:

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

Muokkaa sitten sovellustasi havaitsemaan Webswing-aika:

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

  if (isWebswing) {
    setupWebswingListeners();
  }
}

Keskeinen oivallus tässä on, että WebswingUtil.getWebswingApi() palauttaa null, kun se on käynnissä tavallisena työpöytäsovelluksena, mikä mahdollistaa kaksitaitoisen yhteensopivuuden säilyttämisen.

Käyttäytymisen mukauttaminen verkkototeutusta varten

Havainnon jälkeen voit nyt mukauttaa sovelluksen käyttäytymistä. Tärkein muutos on, kuinka 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, koodiperusta voi käsitellä molempia ympäristöjä.

Vaihe 2: luo webforJ-kääntäjä

Nyt kun Swing-sovellus voi kommunikoida tapahtumien kautta, luo webforJ-sovellus, joka upottaa Swing-sovelluksen ja lisää nykyaikaisia verkkotoimintoja, kuten verkkopohjaisia dialogeja ja lomakkeita.

Yhdistäjän määrittäminen

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

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

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

    self.add(connector);
  }
}

Yhdistäjä yhdistää Webswing-palvelimeesi, luoden kaksisuuntaisen viestintäkanavan.

Tapahtumien käsittely Swingistä

Kun Swing-sovellus lähettää tapahtumia (kuten kun käyttäjä kaksoisnapsauttaa riviä), yhdistäjä 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 nykyaikaisen verkkolomakkeen, joka on rakennettu webforJ-komponenteilla, eikä Swing-dialogia.

Vaihe 3: kaksisuuntainen kommunikaatio

Integraatiosta tulee tehokasta, kun viestintä virtaa 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äydelliseen uudelleenkirjoittamiseen:

Välitön verkkodeployointi

Swing-sovelluksestasi tulee verkkoyhteensopiva heti ilman koodimuutoksia. Käyttäjät voivat käyttää sitä selaimen kautta samalla kun työskentelet parannusten parissa.

Progressiivinen parannus

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

1. Vaihe 1: Upota koko Swing-sovellus, vaihda vain muokkausdialogi
2. Vaihe 2: Lisää webforJ-navigaatio ja valikot upotetun sovelluksen ympärille
3. Vaihe 3: Korvaa taulukko webforJ-taulukolla, pidä Swing välttämättömissä ominaisuuksissa
4. Vaihe 4: Lopulta korvaa kaikki Swing-komponentit

Riskin vähentäminen

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

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