Refactor View and ViewModel to Control and Skin

HMCL/src/main/java/org/jackhuang/hmcl/ui/AdvancedListItem2.java

@@ -17,80 +17,59 @@
  */
 package org.jackhuang.hmcl.ui;
 
-import com.jfoenix.controls.JFXButton;
+import javafx.beans.property.ObjectProperty;
-import javafx.geometry.Insets;
+import javafx.beans.property.ObjectPropertyBase;
-import javafx.geometry.Pos;
+import javafx.beans.property.StringProperty;
-import javafx.scene.control.Label;
+import javafx.event.ActionEvent;
-import javafx.scene.image.ImageView;
+import javafx.event.EventHandler;
-import javafx.scene.layout.BorderPane;
+import javafx.geometry.Rectangle2D;
-import javafx.scene.layout.HBox;
+import javafx.scene.control.Control;
-import javafx.scene.layout.StackPane;
+import javafx.scene.control.Skin;
-import javafx.scene.layout.VBox;
+import javafx.scene.image.Image;
-import javafx.scene.text.TextAlignment;
-import org.jackhuang.hmcl.setting.Theme;
 
-import java.util.Optional;
+public abstract class AdvancedListItem2 extends Control {
 
-public class AdvancedListItem2 extends StackPane {
+    public abstract ObjectProperty<Image> imageProperty();
 
-    public AdvancedListItem2(AdvancedListItemViewModel viewModel) {
+    public ObjectProperty<Rectangle2D> viewportProperty() {
-        BorderPane root = new BorderPane();
+        return null;
-        root.setPickOnBounds(false);
+    }
 
-        HBox left = new HBox();
+    public abstract StringProperty titleProperty();
-        left.setAlignment(Pos.CENTER);
-        left.setMouseTransparent(true);
 
-        StackPane imageViewContainer = new StackPane();
+    public abstract StringProperty subtitleProperty();
-        FXUtils.setLimitWidth(imageViewContainer, 32);
-        FXUtils.setLimitHeight(imageViewContainer, 32);
 
-        ImageView imageView = new ImageView();
+    public final ObjectProperty<EventHandler<ActionEvent>> onActionProperty() {
-        FXUtils.limitSize(imageView, 32, 32);
+        return onAction;
-        imageView.setPreserveRatio(true);
+    }
-        imageView.imageProperty().bind(viewModel.imageProperty());
-        Optional.ofNullable(viewModel.viewportProperty())
-                .ifPresent(imageView.viewportProperty()::bind);
-        imageViewContainer.getChildren().setAll(imageView);
 
-        VBox vbox = new VBox();
+    public final void setOnAction(EventHandler<ActionEvent> value) {
-        vbox.setAlignment(Pos.CENTER_LEFT);
+        onActionProperty().set(value);
-        vbox.setPadding(new Insets(0, 0, 0, 10));
+    }
 
-        Label title = new Label();
+    public final EventHandler<ActionEvent> getOnAction() {
-        title.textProperty().bind(viewModel.titleProperty());
+        return onActionProperty().get();
-        title.setMaxWidth(90);
+    }
-        title.setStyle("-fx-font-size: 15;");
-        title.setTextAlignment(TextAlignment.JUSTIFY);
-        vbox.getChildren().add(title);
 
-        if (viewModel.subtitleProperty() != null) {
+    private ObjectProperty<EventHandler<ActionEvent>> onAction = new ObjectPropertyBase<EventHandler<ActionEvent>>() {
-            Label subtitle = new Label();
+        @Override
-            subtitle.textProperty().bind(viewModel.subtitleProperty());
+        protected void invalidated() {
-            subtitle.setMaxWidth(90);
+            setEventHandler(ActionEvent.ACTION, get());
-            subtitle.setStyle("-fx-font-size: 10;");
-            subtitle.setTextAlignment(TextAlignment.JUSTIFY);
-            vbox.getChildren().add(subtitle);
         }
 
-        left.getChildren().setAll(imageViewContainer, vbox);
+        @Override
-        root.setLeft(left);
+        public Object getBean() {
+            return AdvancedListItem2.this;
+        }
 
-        HBox right = new HBox();
+        @Override
-        right.setAlignment(Pos.CENTER);
+        public String getName() {
-        right.setPickOnBounds(false);
+            return "onAction";
+        }
+    };
 
-        JFXButton settings = new JFXButton();
+    @Override
-        FXUtils.setLimitWidth(settings, 40);
+    protected Skin<?> createDefaultSkin() {
-        settings.setOnMouseClicked(e -> viewModel.action());
+        return new AdvancedListItemSkin(this);
-        settings.getStyleClass().setAll("toggle-icon4");
-        settings.setGraphic(SVG.gear(Theme.blackFillBinding(), -1, -1));
-        right.getChildren().setAll(settings);
-        root.setRight(right);
-
-        setStyle("-fx-padding: 10 16 10 16;");
-        getStyleClass().setAll("transparent");
-        setPickOnBounds(false);
-        getChildren().setAll(root);
     }
 }

HMCL/src/main/java/org/jackhuang/hmcl/ui/AdvancedListItemSkin.java

@@ -0,0 +1,102 @@
+/*
+ * Hello Minecraft! Launcher.
+ * Copyright (C) 2017  huangyuhui <huanghongxun2008@126.com>
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see {http://www.gnu.org/licenses/}.
+ */
+package org.jackhuang.hmcl.ui;
+
+import com.jfoenix.controls.JFXButton;
+import javafx.geometry.Insets;
+import javafx.geometry.Pos;
+import javafx.scene.control.Label;
+import javafx.scene.control.SkinBase;
+import javafx.scene.image.ImageView;
+import javafx.scene.layout.BorderPane;
+import javafx.scene.layout.HBox;
+import javafx.scene.layout.StackPane;
+import javafx.scene.layout.VBox;
+import javafx.scene.text.TextAlignment;
+import org.jackhuang.hmcl.setting.Theme;
+
+import java.util.Optional;
+
+public class AdvancedListItemSkin extends SkinBase<AdvancedListItem2> {
+
+    public AdvancedListItemSkin(AdvancedListItem2 skinnable) {
+        super(skinnable);
+
+        StackPane stackPane = new StackPane();
+
+        BorderPane root = new BorderPane();
+        root.setPickOnBounds(false);
+
+        HBox left = new HBox();
+        left.setAlignment(Pos.CENTER);
+        left.setMouseTransparent(true);
+
+        StackPane imageViewContainer = new StackPane();
+        FXUtils.setLimitWidth(imageViewContainer, 32);
+        FXUtils.setLimitHeight(imageViewContainer, 32);
+
+        ImageView imageView = new ImageView();
+        FXUtils.limitSize(imageView, 32, 32);
+        imageView.setPreserveRatio(true);
+        imageView.imageProperty().bind(skinnable.imageProperty());
+        Optional.ofNullable(skinnable.viewportProperty())
+                .ifPresent(imageView.viewportProperty()::bind);
+        imageViewContainer.getChildren().setAll(imageView);
+
+        VBox vbox = new VBox();
+        vbox.setAlignment(Pos.CENTER_LEFT);
+        vbox.setPadding(new Insets(0, 0, 0, 10));
+
+        Label title = new Label();
+        title.textProperty().bind(skinnable.titleProperty());
+        title.setMaxWidth(90);
+        title.setStyle("-fx-font-size: 15;");
+        title.setTextAlignment(TextAlignment.JUSTIFY);
+        vbox.getChildren().add(title);
+
+        if (skinnable.subtitleProperty() != null) {
+            Label subtitle = new Label();
+            subtitle.textProperty().bind(skinnable.subtitleProperty());
+            subtitle.setMaxWidth(90);
+            subtitle.setStyle("-fx-font-size: 10;");
+            subtitle.setTextAlignment(TextAlignment.JUSTIFY);
+            vbox.getChildren().add(subtitle);
+        }
+
+        left.getChildren().setAll(imageViewContainer, vbox);
+        root.setLeft(left);
+
+        HBox right = new HBox();
+        right.setAlignment(Pos.CENTER);
+        right.setPickOnBounds(false);
+
+        JFXButton settings = new JFXButton();
+        FXUtils.setLimitWidth(settings, 40);
+        settings.getStyleClass().setAll("toggle-icon4");
+        settings.setGraphic(SVG.gear(Theme.blackFillBinding(), -1, -1));
+        right.getChildren().setAll(settings);
+        root.setRight(right);
+
+        stackPane.setStyle("-fx-padding: 10 16 10 16;");
+        stackPane.getStyleClass().setAll("transparent");
+        stackPane.setPickOnBounds(false);
+        stackPane.getChildren().setAll(root);
+
+        getChildren().setAll(stackPane);
+    }
+}

HMCL/src/main/java/org/jackhuang/hmcl/ui/AdvancedListItemViewModel.java

@@ -1,38 +0,0 @@
-/*
- * Hello Minecraft! Launcher.
- * Copyright (C) 2017  huangyuhui <huanghongxun2008@126.com>
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU General Public License as published by
- * the Free Software Foundation, either version 3 of the License, or
- * (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU General Public License for more details.
- *
- * You should have received a copy of the GNU General Public License
- * along with this program.  If not, see {http://www.gnu.org/licenses/}.
- */
-package org.jackhuang.hmcl.ui;
-
-import javafx.beans.property.ObjectProperty;
-import javafx.beans.property.StringProperty;
-import javafx.geometry.Rectangle2D;
-import javafx.scene.image.Image;
-
-public abstract class AdvancedListItemViewModel {
-
-    public abstract void action();
-
-    public abstract ObjectProperty<Image> imageProperty();
-
-    public ObjectProperty<Rectangle2D> viewportProperty() {
-        return null;
-    }
-
-    public abstract StringProperty titleProperty();
-
-    public abstract StringProperty subtitleProperty();
-}

HMCL/src/main/java/org/jackhuang/hmcl/ui/Controllers.java

@@ -27,15 +27,13 @@ import org.jackhuang.hmcl.Metadata;
 import org.jackhuang.hmcl.setting.Settings;
 import org.jackhuang.hmcl.task.Task;
 import org.jackhuang.hmcl.task.TaskExecutor;
-import org.jackhuang.hmcl.ui.account.AccountListView;
+import org.jackhuang.hmcl.ui.account.AccountList;
-import org.jackhuang.hmcl.ui.account.AccountListViewModel;
 import org.jackhuang.hmcl.ui.account.AuthlibInjectorServersPage;
 import org.jackhuang.hmcl.ui.construct.InputDialogPane;
 import org.jackhuang.hmcl.ui.construct.MessageBox;
 import org.jackhuang.hmcl.ui.construct.MessageDialogPane;
 import org.jackhuang.hmcl.ui.construct.TaskExecutorDialogPane;
-import org.jackhuang.hmcl.ui.versions.GameListView;
+import org.jackhuang.hmcl.ui.versions.GameList;
-import org.jackhuang.hmcl.ui.versions.GameListViewModel;
 import org.jackhuang.hmcl.util.FutureCallback;
 import org.jackhuang.hmcl.util.JavaVersion;
 
@@ -50,8 +48,8 @@ public final class Controllers {
     private static MainPage mainPage = null;
     private static SettingsPage settingsPage = null;
     private static VersionPage versionPage = null;
-    private static GameListView gameListView = null;
+    private static GameList gameListPage = null;
-    private static AccountListView accountListView = null;
+    private static AccountList accountListPage = null;
     private static AuthlibInjectorServersPage serversPage = null;
     private static LeftPaneController leftPaneController;
     private static Decorator decorator;
@@ -72,17 +70,17 @@ public final class Controllers {
     }
 
     // FXThread
-    public static GameListView getGameListView() {
+    public static GameList getGameListPage() {
-        if (gameListView == null)
+        if (gameListPage == null)
-            gameListView = new GameListView(new GameListViewModel());
+            gameListPage = new GameList();
-        return gameListView;
+        return gameListPage;
     }
 
     // FXThread
-    public static AccountListView getAccountListView() {
+    public static AccountList getAccountListPage() {
-        if (accountListView == null)
+        if (accountListPage == null)
-            accountListView = new AccountListView(new AccountListViewModel());
+            accountListPage = new AccountList();
-        return accountListView;
+        return accountListPage;
     }
 
     // FXThread
@@ -202,7 +200,7 @@ public final class Controllers {
         decorator = null;
         stage = null;
         scene = null;
-        gameListView = null;
+        gameListPage = null;
-        accountListView = null;
+        accountListPage = null;
     }
 }

HMCL/src/main/java/org/jackhuang/hmcl/ui/LeftPaneController.java

@@ -25,8 +25,10 @@ import javafx.scene.Node;
 import javafx.scene.layout.Region;
 import javafx.scene.layout.VBox;
 import javafx.scene.paint.Color;
-
+import org.jackhuang.hmcl.event.EventBus;
-import org.jackhuang.hmcl.event.*;
+import org.jackhuang.hmcl.event.ProfileChangedEvent;
+import org.jackhuang.hmcl.event.ProfileLoadingEvent;
+import org.jackhuang.hmcl.event.RefreshedVersionsEvent;
 import org.jackhuang.hmcl.game.HMCLGameRepository;
 import org.jackhuang.hmcl.game.ModpackHelper;
 import org.jackhuang.hmcl.mod.Modpack;
@@ -35,10 +37,10 @@ import org.jackhuang.hmcl.setting.*;
 import org.jackhuang.hmcl.task.Schedulers;
 import org.jackhuang.hmcl.task.Task;
 import org.jackhuang.hmcl.task.TaskExecutor;
-import org.jackhuang.hmcl.ui.account.AccountAdvancedListItemViewModel;
+import org.jackhuang.hmcl.ui.account.AccountAdvancedListItem;
 import org.jackhuang.hmcl.ui.account.AddAccountPane;
 import org.jackhuang.hmcl.ui.construct.*;
-import org.jackhuang.hmcl.ui.versions.GameAdvancedListItemViewModel;
+import org.jackhuang.hmcl.ui.versions.GameAdvancedListItem;
 import org.jackhuang.hmcl.upgrade.UpdateChecker;
 import org.jackhuang.hmcl.util.Lang;
 
@@ -56,8 +58,10 @@ public final class LeftPaneController {
     public LeftPaneController(AdvancedListBox leftPane) {
         this.leftPane = leftPane;
 
-        AdvancedListItem2 accountListItem = new AdvancedListItem2(new AccountAdvancedListItemViewModel());
+        AdvancedListItem2 accountListItem = new AccountAdvancedListItem();
-        AdvancedListItem2 gameListItem = new AdvancedListItem2(new GameAdvancedListItemViewModel());
+        accountListItem.setOnAction(e -> Controllers.navigate(Controllers.getAccountListPage()));
+        AdvancedListItem2 gameListItem = new GameAdvancedListItem();
+        gameListItem.setOnAction(e -> Controllers.navigate(Controllers.getGameListPage()));
 
         IconedItem launcherSettingsItem = new IconedItem(SVG.gear(Theme.blackFillBinding(), 20, 20));
 

HMCL/src/main/java/org/jackhuang/hmcl/ui/account/AccountAdvancedListItem.java

@@ -29,19 +29,18 @@ import org.jackhuang.hmcl.auth.yggdrasil.YggdrasilAccount;
 import org.jackhuang.hmcl.game.AccountHelper;
 import org.jackhuang.hmcl.setting.Accounts;
 import org.jackhuang.hmcl.task.Schedulers;
-import org.jackhuang.hmcl.ui.AdvancedListItemViewModel;
+import org.jackhuang.hmcl.ui.AdvancedListItem2;
-import org.jackhuang.hmcl.ui.Controllers;
 import org.jackhuang.hmcl.ui.FXUtils;
 
 import static org.jackhuang.hmcl.util.i18n.I18n.i18n;
 
-public class AccountAdvancedListItemViewModel extends AdvancedListItemViewModel {
+public class AccountAdvancedListItem extends AdvancedListItem2 {
     private final ObjectProperty<Image> image = new SimpleObjectProperty<>();
     private final ObjectProperty<Rectangle2D> viewport = new SimpleObjectProperty<>(AccountHelper.getViewport(4));
     private final StringProperty title = new SimpleStringProperty();
     private final StringProperty subtitle = new SimpleStringProperty();
 
-    public AccountAdvancedListItemViewModel() {
+    public AccountAdvancedListItem() {
 
         FXUtils.onChangeAndOperate(Accounts.selectedAccountProperty(), account -> {
             if (account == null) {
@@ -65,8 +64,8 @@ public class AccountAdvancedListItemViewModel extends AdvancedListItemViewModel
     }
 
     @Override
-    public void action() {
+    protected void layoutChildren() {
-        Controllers.navigate(Controllers.getAccountListView());
+        super.layoutChildren();
     }
 
     @Override

HMCL/src/main/java/org/jackhuang/hmcl/ui/account/AccountList.java

@@ -17,21 +17,23 @@
  */
 package org.jackhuang.hmcl.ui.account;
 
-import javafx.beans.property.ListProperty;
+import javafx.beans.property.*;
-import javafx.beans.property.ObjectProperty;
-import javafx.beans.property.SimpleListProperty;
-import javafx.beans.property.SimpleObjectProperty;
 import javafx.collections.FXCollections;
+import javafx.scene.control.Control;
+import javafx.scene.control.Skin;
 import javafx.scene.control.ToggleGroup;
 import org.jackhuang.hmcl.auth.Account;
 import org.jackhuang.hmcl.setting.Accounts;
 import org.jackhuang.hmcl.ui.Controllers;
+import org.jackhuang.hmcl.ui.wizard.DecoratorPage;
 import org.jackhuang.hmcl.util.MappedObservableList;
 
 import static org.jackhuang.hmcl.ui.FXUtils.onInvalidating;
+import static org.jackhuang.hmcl.util.i18n.I18n.i18n;
 
-public class AccountListViewModel {
+public class AccountList extends Control implements DecoratorPage {
-    private final ListProperty<AccountListItemViewModel> items = new SimpleListProperty<>(FXCollections.observableArrayList());
+    private final StringProperty title = new SimpleStringProperty(i18n("account.manage"));
+    private final ListProperty<AccountListItem> items = new SimpleListProperty<>(FXCollections.observableArrayList());
     private ObjectProperty<Account> selectedAccount = new SimpleObjectProperty<Account>() {
         {
             items.addListener(onInvalidating(this::invalidated));
@@ -46,25 +48,35 @@ public class AccountListViewModel {
 
     private ToggleGroup toggleGroup;
 
-    public AccountListViewModel() {
+    public AccountList() {
         toggleGroup = new ToggleGroup();
 
         items.bindContent(MappedObservableList.create(
                 Accounts.accountsProperty(),
-                account -> new AccountListItemViewModel(toggleGroup, account)));
+                account -> new AccountListItem(toggleGroup, account)));
 
         selectedAccount.bindBidirectional(Accounts.selectedAccountProperty());
         toggleGroup.selectedToggleProperty().addListener((o, a, toggle) -> {
             if (toggle == null || toggle.getUserData() == null) return;
-            selectedAccount.set(((AccountListItemViewModel) toggle.getUserData()).getAccount());
+            selectedAccount.set(((AccountListItem) toggle.getUserData()).getAccount());
         });
     }
 
+    @Override
+    protected Skin<?> createDefaultSkin() {
+        return new AccountListSkin(this);
+    }
+
     public void addNewAccount() {
         Controllers.dialog(new AddAccountPane());
     }
 
-    public ListProperty<AccountListItemViewModel> itemsProperty() {
+    public ListProperty<AccountListItem> itemsProperty() {
         return items;
     }
+
+    @Override
+    public StringProperty titleProperty() {
+        return title;
+    }
 }

HMCL/src/main/java/org/jackhuang/hmcl/ui/account/AccountListItem.java

@@ -19,6 +19,8 @@ package org.jackhuang.hmcl.ui.account;
 
 import javafx.beans.property.*;
 import javafx.geometry.Rectangle2D;
+import javafx.scene.control.Control;
+import javafx.scene.control.Skin;
 import javafx.scene.control.ToggleGroup;
 import javafx.scene.image.Image;
 import org.jackhuang.hmcl.auth.Account;
@@ -32,7 +34,7 @@ import org.jackhuang.hmcl.task.Schedulers;
 
 import static org.jackhuang.hmcl.util.i18n.I18n.i18n;
 
-public class AccountListItemViewModel {
+public class AccountListItem extends Control {
     private final Account account;
     private final ToggleGroup toggleGroup;
     private final StringProperty title = new SimpleStringProperty();
@@ -41,7 +43,7 @@ public class AccountListItemViewModel {
     private final ObjectProperty<Image> image = new SimpleObjectProperty<>();
     private final ObjectProperty<Rectangle2D> viewport = new SimpleObjectProperty<>();
 
-    public AccountListItemViewModel(ToggleGroup toggleGroup, Account account) {
+    public AccountListItem(ToggleGroup toggleGroup, Account account) {
         this.account = account;
         this.toggleGroup = toggleGroup;
 
@@ -67,6 +69,11 @@ public class AccountListItemViewModel {
         }
     }
 
+    @Override
+    protected Skin<?> createDefaultSkin() {
+        return new AccountListItemSkin(this);
+    }
+
     public ToggleGroup getToggleGroup() {
         return toggleGroup;
     }

HMCL/src/main/java/org/jackhuang/hmcl/ui/account/AccountListItemSkin.java

@@ -22,6 +22,7 @@ import com.jfoenix.controls.JFXButton;
 import com.jfoenix.controls.JFXRadioButton;
 import com.jfoenix.effects.JFXDepthManager;
 import javafx.geometry.Pos;
+import javafx.scene.control.SkinBase;
 import javafx.scene.image.ImageView;
 import javafx.scene.layout.BorderPane;
 import javafx.scene.layout.HBox;
@@ -33,15 +34,19 @@ import org.jackhuang.hmcl.ui.TwoLineListItem;
 
 import static org.jackhuang.hmcl.util.i18n.I18n.i18n;
 
-public class AccountListItemView extends BorderPane {
+public class AccountListItemSkin extends SkinBase<AccountListItem> {
+
+    public AccountListItemSkin(AccountListItem skinnable) {
+        super(skinnable);
+
+        BorderPane root = new BorderPane();
 
-    public AccountListItemView(AccountListItemViewModel viewModel) {
         JFXRadioButton chkSelected = new JFXRadioButton();
         BorderPane.setAlignment(chkSelected, Pos.CENTER);
-        chkSelected.setUserData(viewModel);
+        chkSelected.setUserData(skinnable);
-        chkSelected.selectedProperty().bindBidirectional(viewModel.selectedProperty());
+        chkSelected.selectedProperty().bindBidirectional(skinnable.selectedProperty());
-        chkSelected.setToggleGroup(viewModel.getToggleGroup());
+        chkSelected.setToggleGroup(skinnable.getToggleGroup());
-        setLeft(chkSelected);
+        root.setLeft(chkSelected);
 
         HBox center = new HBox();
         center.setSpacing(8);
@@ -53,36 +58,38 @@ public class AccountListItemView extends BorderPane {
 
         ImageView imageView = new ImageView();
         FXUtils.limitSize(imageView, 32, 32);
-        imageView.imageProperty().bind(viewModel.imageProperty());
+        imageView.imageProperty().bind(skinnable.imageProperty());
-        imageView.viewportProperty().bind(viewModel.viewportProperty());
+        imageView.viewportProperty().bind(skinnable.viewportProperty());
         imageViewContainer.getChildren().setAll(imageView);
 
         TwoLineListItem item = new TwoLineListItem();
         BorderPane.setAlignment(item, Pos.CENTER);
         center.getChildren().setAll(imageView, item);
-        setCenter(center);
+        root.setCenter(center);
 
         HBox right = new HBox();
         right.setAlignment(Pos.CENTER_RIGHT);
         JFXButton btnRefresh = new JFXButton();
-        btnRefresh.setOnMouseClicked(e -> viewModel.refresh());
+        btnRefresh.setOnMouseClicked(e -> skinnable.refresh());
         btnRefresh.getStyleClass().add("toggle-icon4");
         btnRefresh.setGraphic(SVG.refresh(Theme.blackFillBinding(), -1, -1));
         JFXUtilities.runInFX(() -> FXUtils.installTooltip(btnRefresh, i18n("button.refresh")));
         right.getChildren().add(btnRefresh);
 
         JFXButton btnRemove = new JFXButton();
-        btnRemove.setOnMouseClicked(e -> viewModel.remove());
+        btnRemove.setOnMouseClicked(e -> skinnable.remove());
         btnRemove.getStyleClass().add("toggle-icon4");
         BorderPane.setAlignment(btnRemove, Pos.CENTER);
         btnRemove.setGraphic(SVG.delete(Theme.blackFillBinding(), -1, -1));
         JFXUtilities.runInFX(() -> FXUtils.installTooltip(btnRefresh, i18n("button.delete")));
         right.getChildren().add(btnRemove);
-        setRight(right);
+        root.setRight(right);
 
-        setStyle("-fx-background-color: white; -fx-padding: 8 8 8 0;");
+        root.setStyle("-fx-background-color: white; -fx-padding: 8 8 8 0;");
-        JFXDepthManager.setDepth(this, 1);
+        JFXDepthManager.setDepth(root, 1);
-        item.titleProperty().bind(viewModel.titleProperty());
+        item.titleProperty().bind(skinnable.titleProperty());
-        item.subtitleProperty().bind(viewModel.subtitleProperty());
+        item.subtitleProperty().bind(skinnable.subtitleProperty());
+
+        getChildren().setAll(root);
     }
 }

HMCL/src/main/java/org/jackhuang/hmcl/ui/account/AccountListSkin.java

@@ -19,25 +19,23 @@ package org.jackhuang.hmcl.ui.account;
 
 import com.jfoenix.controls.JFXButton;
 import javafx.beans.binding.Bindings;
-import javafx.beans.property.SimpleStringProperty;
-import javafx.beans.property.StringProperty;
 import javafx.geometry.Insets;
 import javafx.geometry.Pos;
 import javafx.scene.control.ScrollPane;
+import javafx.scene.control.SkinBase;
 import javafx.scene.layout.StackPane;
 import javafx.scene.layout.VBox;
 import org.jackhuang.hmcl.setting.Theme;
 import org.jackhuang.hmcl.ui.FXUtils;
 import org.jackhuang.hmcl.ui.SVG;
-import org.jackhuang.hmcl.ui.wizard.DecoratorPage;
-import org.jackhuang.hmcl.util.MappedObservableList;
 
-import static org.jackhuang.hmcl.util.i18n.I18n.i18n;
+public class AccountListSkin extends SkinBase<AccountList> {
 
-public class AccountListView extends StackPane implements DecoratorPage {
+    public AccountListSkin(AccountList skinnable) {
-    private final StringProperty title = new SimpleStringProperty(i18n("account.manage"));
+        super(skinnable);
+
+        StackPane root = new StackPane();
 
-    public AccountListView(AccountListViewModel viewModel) {
         ScrollPane scrollPane = new ScrollPane();
         {
             scrollPane.setFitToWidth(true);
@@ -47,8 +45,7 @@ public class AccountListView extends StackPane implements DecoratorPage {
             accountList.setSpacing(10);
             accountList.setStyle("-fx-padding: 10 10 10 10;");
 
-            Bindings.bindContent(accountList.getChildren(),
+            Bindings.bindContent(accountList.getChildren(), skinnable.itemsProperty());
-                    MappedObservableList.create(viewModel.itemsProperty(), AccountListItemView::new));
 
             scrollPane.setContent(accountList);
         }
@@ -66,16 +63,13 @@ public class AccountListView extends StackPane implements DecoratorPage {
             btnAdd.getStyleClass().setAll("jfx-button-raised-round");
             btnAdd.setButtonType(JFXButton.ButtonType.RAISED);
             btnAdd.setGraphic(SVG.plus(Theme.whiteFillBinding(), -1, -1));
-            btnAdd.setOnMouseClicked(e -> viewModel.addNewAccount());
+            btnAdd.setOnMouseClicked(e -> skinnable.addNewAccount());
 
             vBox.getChildren().setAll(btnAdd);
         }
 
-        getChildren().setAll(scrollPane, vBox);
+        root.getChildren().setAll(scrollPane, vBox);
-    }
 
-    @Override
+        getChildren().setAll(root);
-    public StringProperty titleProperty() {
-        return title;
     }
 }

HMCL/src/main/java/org/jackhuang/hmcl/ui/construct/AdvancedListBox.java

@@ -23,6 +23,7 @@ import javafx.scene.control.ScrollPane;
 import javafx.scene.layout.Pane;
 import javafx.scene.layout.StackPane;
 import javafx.scene.layout.VBox;
+import org.jackhuang.hmcl.ui.AdvancedListItem2;
 import org.jackhuang.hmcl.ui.FXUtils;
 
 public class AdvancedListBox extends ScrollPane {
@@ -42,7 +43,7 @@ public class AdvancedListBox extends ScrollPane {
     }
 
     public AdvancedListBox add(Node child) {
-        if (child instanceof Pane)
+        if (child instanceof Pane || child instanceof AdvancedListItem2)
             container.getChildren().add(child);
         else {
             StackPane pane = new StackPane();

HMCL/src/main/java/org/jackhuang/hmcl/ui/versions/GameAdvancedListItem.java

@@ -29,13 +29,12 @@ import org.jackhuang.hmcl.event.ProfileChangedEvent;
 import org.jackhuang.hmcl.event.RefreshedVersionsEvent;
 import org.jackhuang.hmcl.setting.Profile;
 import org.jackhuang.hmcl.setting.Settings;
-import org.jackhuang.hmcl.ui.AdvancedListItemViewModel;
+import org.jackhuang.hmcl.ui.AdvancedListItem2;
-import org.jackhuang.hmcl.ui.Controllers;
 import org.jackhuang.hmcl.ui.WeakListenerHelper;
 
 import java.io.File;
 
-public class GameAdvancedListItemViewModel extends AdvancedListItemViewModel {
+public class GameAdvancedListItem extends AdvancedListItem2 {
     private final ObjectProperty<Image> image = new SimpleObjectProperty<>();
     private final StringProperty title = new SimpleStringProperty();
     private final WeakListenerHelper helper = new WeakListenerHelper();
@@ -43,7 +42,7 @@ public class GameAdvancedListItemViewModel extends AdvancedListItemViewModel {
     private Profile profile;
     private InvalidationListener listener = o -> loadVersion();
 
-    public GameAdvancedListItemViewModel() {
+    public GameAdvancedListItem() {
         helper.add(EventBus.EVENT_BUS.channel(ProfileChangedEvent.class).registerWeak(event -> {
             JFXUtilities.runInFX(() -> loadProfile(event.getProfile()));
         }));
@@ -77,11 +76,6 @@ public class GameAdvancedListItemViewModel extends AdvancedListItemViewModel {
         title.set(version);
     }
 
-    @Override
-    public void action() {
-        Controllers.navigate(Controllers.getGameListView());
-    }
-
     @Override
     public ObjectProperty<Image> imageProperty() {
         return image;

HMCL/src/main/java/org/jackhuang/hmcl/ui/versions/GameList.java

@@ -18,11 +18,10 @@
 package org.jackhuang.hmcl.ui.versions;
 
 import com.jfoenix.concurrency.JFXUtilities;
-import javafx.beans.property.BooleanProperty;
+import javafx.beans.property.*;
-import javafx.beans.property.ListProperty;
-import javafx.beans.property.SimpleBooleanProperty;
-import javafx.beans.property.SimpleListProperty;
 import javafx.collections.FXCollections;
+import javafx.scene.control.Control;
+import javafx.scene.control.Skin;
 import javafx.scene.control.ToggleGroup;
 import org.jackhuang.hmcl.event.EventBus;
 import org.jackhuang.hmcl.event.ProfileChangedEvent;
@@ -33,21 +32,24 @@ import org.jackhuang.hmcl.setting.Profile;
 import org.jackhuang.hmcl.setting.Settings;
 import org.jackhuang.hmcl.ui.Controllers;
 import org.jackhuang.hmcl.ui.download.DownloadWizardProvider;
+import org.jackhuang.hmcl.ui.wizard.DecoratorPage;
 import org.jackhuang.hmcl.util.VersionNumber;
+import org.jackhuang.hmcl.util.i18n.I18n;
 
 import java.util.List;
 import java.util.stream.Collectors;
 
 import static org.jackhuang.hmcl.util.i18n.I18n.i18n;
 
-public class GameListViewModel {
+public class GameList extends Control implements DecoratorPage {
+    private final StringProperty title = new SimpleStringProperty(I18n.i18n("version.manage"));
     private final BooleanProperty loading = new SimpleBooleanProperty(true);
-    private final ListProperty<GameListItemViewModel> items = new SimpleListProperty<>(FXCollections.observableArrayList());
+    private final ListProperty<GameListItem> items = new SimpleListProperty<>(FXCollections.observableArrayList());
 
     private Profile profile;
     private ToggleGroup toggleGroup;
 
-    public GameListViewModel() {
+    public GameList() {
         EventBus.EVENT_BUS.channel(RefreshedVersionsEvent.class).register(event -> {
             if (event.getSource() == profile.getRepository())
                 loadVersions((HMCLGameRepository) event.getSource());
@@ -69,24 +71,29 @@ public class GameListViewModel {
 
     private void loadVersions(HMCLGameRepository repository) {
         toggleGroup = new ToggleGroup();
-        List<GameListItemViewModel> children = repository.getVersions().parallelStream()
+        List<GameListItem> children = repository.getVersions().parallelStream()
                 .filter(version -> !version.isHidden())
                 .sorted((a, b) -> VersionNumber.COMPARATOR.compare(VersionNumber.asVersion(a.getId()), VersionNumber.asVersion(b.getId())))
-                .map(version -> new GameListItemViewModel(toggleGroup, profile, version.getId()))
+                .map(version -> new GameListItem(toggleGroup, profile, version.getId()))
                 .collect(Collectors.toList());
         JFXUtilities.runInFX(() -> {
             if (profile == repository.getProfile()) {
                 loading.set(false);
                 items.setAll(children);
-                children.forEach(GameListItemViewModel::checkSelection);
+                children.forEach(GameListItem::checkSelection);
             }
             toggleGroup.selectedToggleProperty().addListener((o, a, toggle) -> {
-                GameListItemViewModel model = (GameListItemViewModel) toggle.getUserData();
+                GameListItem model = (GameListItem) toggle.getUserData();
                 model.getProfile().setSelectedVersion(model.getVersion());
             });
         });
     }
 
+    @Override
+    protected Skin<?> createDefaultSkin() {
+        return new GameListSkin(this);
+    }
+
     public void addNewGame() {
         Controllers.getDecorator().startWizard(new DownloadWizardProvider(0), i18n("install.new_game"));
     }
@@ -103,11 +110,16 @@ public class GameListViewModel {
         // Controllers.navigate();
     }
 
+    @Override
+    public StringProperty titleProperty() {
+        return title;
+    }
+
     public BooleanProperty loadingProperty() {
         return loading;
     }
 
-    public ListProperty<GameListItemViewModel> itemsProperty() {
+    public ListProperty<GameListItem> itemsProperty() {
         return items;
     }
 }

HMCL/src/main/java/org/jackhuang/hmcl/ui/versions/GameListItem.java

@@ -18,6 +18,8 @@
 package org.jackhuang.hmcl.ui.versions;
 
 import javafx.beans.property.*;
+import javafx.scene.control.Control;
+import javafx.scene.control.Skin;
 import javafx.scene.control.ToggleGroup;
 import javafx.scene.image.Image;
 import org.jackhuang.hmcl.download.LibraryAnalyzer;
@@ -31,7 +33,7 @@ import static org.jackhuang.hmcl.util.StringUtils.removePrefix;
 import static org.jackhuang.hmcl.util.StringUtils.removeSuffix;
 import static org.jackhuang.hmcl.util.i18n.I18n.i18n;
 
-public class GameListItemViewModel {
+public class GameListItem extends Control {
     private final Profile profile;
     private final String version;
     private final boolean isModpack;
@@ -41,7 +43,7 @@ public class GameListItemViewModel {
     private final BooleanProperty selected = new SimpleBooleanProperty();
     private final ObjectProperty<Image> image = new SimpleObjectProperty<>();
 
-    public GameListItemViewModel(ToggleGroup toggleGroup, Profile profile, String id) {
+    public GameListItem(ToggleGroup toggleGroup, Profile profile, String id) {
         this.profile = profile;
         this.version = id;
         this.toggleGroup = toggleGroup;
@@ -66,6 +68,11 @@ public class GameListItemViewModel {
             image.set(new Image("/assets/img/grass.png"));
     }
 
+    @Override
+    protected Skin<?> createDefaultSkin() {
+        return new GameListItemSkin(this);
+    }
+
     public ToggleGroup getToggleGroup() {
         return toggleGroup;
     }

HMCL/src/main/java/org/jackhuang/hmcl/ui/versions/GameListItemSkin.java

@@ -21,6 +21,7 @@ import com.jfoenix.concurrency.JFXUtilities;
 import com.jfoenix.controls.*;
 import com.jfoenix.effects.JFXDepthManager;
 import javafx.geometry.Pos;
+import javafx.scene.control.SkinBase;
 import javafx.scene.image.ImageView;
 import javafx.scene.layout.BorderPane;
 import javafx.scene.layout.HBox;
@@ -32,15 +33,19 @@ import org.jackhuang.hmcl.ui.TwoLineListItem;
 
 import static org.jackhuang.hmcl.util.i18n.I18n.i18n;
 
-public class GameListItemView extends BorderPane {
+public class GameListItemSkin extends SkinBase<GameListItem> {
+
+    public GameListItemSkin(GameListItem skinnable) {
+        super(skinnable);
+
+        BorderPane root = new BorderPane();
 
-    public GameListItemView(GameListItemViewModel viewModel) {
         JFXRadioButton chkSelected = new JFXRadioButton();
         BorderPane.setAlignment(chkSelected, Pos.CENTER);
-        chkSelected.setUserData(viewModel);
+        chkSelected.setUserData(skinnable);
-        chkSelected.selectedProperty().bindBidirectional(viewModel.selectedProperty());
+        chkSelected.selectedProperty().bindBidirectional(skinnable.selectedProperty());
-        chkSelected.setToggleGroup(viewModel.getToggleGroup());
+        chkSelected.setToggleGroup(skinnable.getToggleGroup());
-        setLeft(chkSelected);
+        root.setLeft(chkSelected);
 
         HBox center = new HBox();
         center.setSpacing(8);
@@ -52,13 +57,13 @@ public class GameListItemView extends BorderPane {
 
         ImageView imageView = new ImageView();
         FXUtils.limitSize(imageView, 32, 32);
-        imageView.imageProperty().bind(viewModel.imageProperty());
+        imageView.imageProperty().bind(skinnable.imageProperty());
         imageViewContainer.getChildren().setAll(imageView);
 
         TwoLineListItem item = new TwoLineListItem();
         BorderPane.setAlignment(item, Pos.CENTER);
         center.getChildren().setAll(imageView, item);
-        setCenter(center);
+        root.setCenter(center);
 
         JFXListView<String> menu = new JFXListView<>();
         menu.getItems().setAll(
@@ -74,34 +79,34 @@ public class GameListItemView extends BorderPane {
             popup.hide();
             switch (menu.getSelectionModel().getSelectedIndex()) {
                 case 0:
-                    viewModel.modifyGameSettings();
+                    skinnable.modifyGameSettings();
                     break;
                 case 1:
-                    viewModel.rename();
+                    skinnable.rename();
                     break;
                 case 2:
-                    viewModel.remove();
+                    skinnable.remove();
                     break;
                 case 3:
-                    viewModel.export();
+                    skinnable.export();
                     break;
                 case 4:
-                    viewModel.browse();
+                    skinnable.browse();
                     break;
                 case 5:
-                    viewModel.launch();
+                    skinnable.launch();
                     break;
                 case 6:
-                    viewModel.generateLaunchScript();
+                    skinnable.generateLaunchScript();
                     break;
             }
         });
 
         HBox right = new HBox();
         right.setAlignment(Pos.CENTER_RIGHT);
-        if (viewModel.canUpdate()) {
+        if (skinnable.canUpdate()) {
             JFXButton btnUpgrade = new JFXButton();
-            btnUpgrade.setOnMouseClicked(e -> viewModel.update());
+            btnUpgrade.setOnMouseClicked(e -> skinnable.update());
             btnUpgrade.getStyleClass().add("toggle-icon4");
             btnUpgrade.setGraphic(SVG.update(Theme.blackFillBinding(), -1, -1));
             JFXUtilities.runInFX(() -> FXUtils.installTooltip(btnUpgrade, i18n("version.update")));
@@ -111,17 +116,19 @@ public class GameListItemView extends BorderPane {
         JFXButton btnManage = new JFXButton();
         btnManage.setOnMouseClicked(e -> {
             menu.getSelectionModel().select(-1);
-            popup.show(this, JFXPopup.PopupVPosition.TOP, JFXPopup.PopupHPosition.RIGHT, 0, this.getHeight());
+            popup.show(root, JFXPopup.PopupVPosition.TOP, JFXPopup.PopupHPosition.RIGHT, 0, root.getHeight());
         });
         btnManage.getStyleClass().add("toggle-icon4");
         BorderPane.setAlignment(btnManage, Pos.CENTER);
         btnManage.setGraphic(SVG.dotsVertical(Theme.blackFillBinding(), -1, -1));
         right.getChildren().add(btnManage);
-        setRight(right);
+        root.setRight(right);
 
-        setStyle("-fx-background-color: white; -fx-padding: 8 8 8 0;");
+        root.setStyle("-fx-background-color: white; -fx-padding: 8 8 8 0;");
-        JFXDepthManager.setDepth(this, 1);
+        JFXDepthManager.setDepth(root, 1);
-        item.titleProperty().bind(viewModel.titleProperty());
+        item.titleProperty().bind(skinnable.titleProperty());
-        item.subtitleProperty().bind(viewModel.subtitleProperty());
+        item.subtitleProperty().bind(skinnable.subtitleProperty());
+
+        getChildren().setAll(root);
     }
 }

HMCL/src/main/java/org/jackhuang/hmcl/ui/versions/GameListSkin.java

@@ -21,11 +21,10 @@ import com.jfoenix.controls.JFXButton;
 import com.jfoenix.controls.JFXSpinner;
 import com.jfoenix.effects.JFXDepthManager;
 import javafx.beans.binding.Bindings;
-import javafx.beans.property.SimpleStringProperty;
-import javafx.beans.property.StringProperty;
 import javafx.geometry.Insets;
 import javafx.scene.Node;
 import javafx.scene.control.ScrollPane;
+import javafx.scene.control.SkinBase;
 import javafx.scene.layout.BorderPane;
 import javafx.scene.layout.HBox;
 import javafx.scene.layout.StackPane;
@@ -33,12 +32,9 @@ import javafx.scene.layout.VBox;
 import org.jackhuang.hmcl.setting.Theme;
 import org.jackhuang.hmcl.ui.FXUtils;
 import org.jackhuang.hmcl.ui.SVG;
-import org.jackhuang.hmcl.ui.wizard.DecoratorPage;
-import org.jackhuang.hmcl.util.MappedObservableList;
 import org.jackhuang.hmcl.util.i18n.I18n;
 
-public class GameListView extends BorderPane implements DecoratorPage {
+public class GameListSkin extends SkinBase<GameList> {
-    private final StringProperty title = new SimpleStringProperty(I18n.i18n("version.manage"));
 
     private static Node wrap(Node node) {
         StackPane stackPane = new StackPane();
@@ -47,7 +43,11 @@ public class GameListView extends BorderPane implements DecoratorPage {
         return stackPane;
     }
 
-    public GameListView(GameListViewModel viewModel) {
+    public GameListSkin(GameList skinnable) {
+        super(skinnable);
+
+        BorderPane root = new BorderPane();
+
         {
             HBox toolbar = new HBox();
             toolbar.getStyleClass().setAll("jfx-tool-bar-second");
@@ -59,7 +59,7 @@ public class GameListView extends BorderPane implements DecoratorPage {
             btnAddNewGame.textFillProperty().bind(Theme.foregroundFillBinding());
             btnAddNewGame.setGraphic(wrap(SVG.plus(Theme.foregroundFillBinding(), -1, -1)));
             btnAddNewGame.setText(I18n.i18n("install.new_game"));
-            btnAddNewGame.setOnMouseClicked(e -> viewModel.addNewGame());
+            btnAddNewGame.setOnMouseClicked(e -> skinnable.addNewGame());
             toolbar.getChildren().add(btnAddNewGame);
 
             JFXButton btnImportModpack = new JFXButton();
@@ -67,7 +67,7 @@ public class GameListView extends BorderPane implements DecoratorPage {
             btnImportModpack.textFillProperty().bind(Theme.foregroundFillBinding());
             btnImportModpack.setGraphic(wrap(SVG.importIcon(Theme.foregroundFillBinding(), -1, -1)));
             btnImportModpack.setText(I18n.i18n("install.modpack"));
-            btnImportModpack.setOnMouseClicked(e -> viewModel.importModpack());
+            btnImportModpack.setOnMouseClicked(e -> skinnable.importModpack());
             toolbar.getChildren().add(btnImportModpack);
 
             JFXButton btnRefresh = new JFXButton();
@@ -75,7 +75,7 @@ public class GameListView extends BorderPane implements DecoratorPage {
             btnRefresh.textFillProperty().bind(Theme.foregroundFillBinding());
             btnRefresh.setGraphic(wrap(SVG.refresh(Theme.foregroundFillBinding(), -1, -1)));
             btnRefresh.setText(I18n.i18n("button.refresh"));
-            btnRefresh.setOnMouseClicked(e -> viewModel.refresh());
+            btnRefresh.setOnMouseClicked(e -> skinnable.refresh());
             toolbar.getChildren().add(btnRefresh);
 
             JFXButton btnModify = new JFXButton();
@@ -83,10 +83,10 @@ public class GameListView extends BorderPane implements DecoratorPage {
             btnModify.textFillProperty().bind(Theme.foregroundFillBinding());
             btnModify.setGraphic(wrap(SVG.gear(Theme.foregroundFillBinding(), -1, -1)));
             btnModify.setText(I18n.i18n("settings.type.global.manage"));
-            btnModify.setOnMouseClicked(e -> viewModel.modifyGlobalGameSettings());
+            btnModify.setOnMouseClicked(e -> skinnable.modifyGlobalGameSettings());
             toolbar.getChildren().add(btnModify);
 
-            setTop(toolbar);
+            root.setTop(toolbar);
         }
 
         {
@@ -103,23 +103,16 @@ public class GameListView extends BorderPane implements DecoratorPage {
             gameList.setSpacing(10);
             gameList.setStyle("-fx-padding: 10 10 10 10;");
 
-            Bindings.bindContent(gameList.getChildren(),
+            Bindings.bindContent(gameList.getChildren(), skinnable.itemsProperty());
-                    MappedObservableList.create(viewModel.itemsProperty(), model -> {
-                        GameListItemView view = new GameListItemView(model);
-                        return view;
-                    }));
 
             scrollPane.setContent(gameList);
 
-            FXUtils.onChangeAndOperate(viewModel.loadingProperty(),
+            FXUtils.onChangeAndOperate(skinnable.loadingProperty(),
                     loading -> center.getChildren().setAll(loading ? spinner : scrollPane));
 
-            setCenter(center);
+            root.setCenter(center);
         }
-    }
 
-    @Override
+        getChildren().setAll(root);
-    public StringProperty titleProperty() {
-        return title;
     }
 }