Differences
This shows you the differences between two versions of the page.
|
wizard [2012/04/02 15:15] srdjan.lukovic [GUI Code] |
wizard [2012/07/09 10:46] (current) srdjan.lukovic [GUI Code] |
||
|---|---|---|---|
| Line 1: | Line 1: | ||
| - | ====== Wizard Sample ====== | + | ====== Wizard ====== |
| - | This sample demonstrates simple wizard. | + | |
| + | **Wizard** is a [[SOLoist Sample Applications|SOLoist sample application]] that demonstrates a classical wizard pattern. Introduces the dialog component (//GUIDialogComponent//). | ||
| ==== Live example ==== | ==== Live example ==== | ||
| [[http://soloistdemo.org/SampleApplications/wizard.html]] | [[http://soloistdemo.org/SampleApplications/wizard.html]] | ||
| + | |{{screen:wizard.png?250}}| | ||
| ===== UML Model ===== | ===== UML Model ===== | ||
| Line 18: | Line 20: | ||
| import rs.sol.soloist.helpers.init.Initializer; | import rs.sol.soloist.helpers.init.Initializer; | ||
| import rs.sol.soloist.helpers.init.InitializerFailedException; | import rs.sol.soloist.helpers.init.InitializerFailedException; | ||
| - | import rs.sol.soloist.server.builtindomains.builtindatatypes.Boolean; | ||
| - | import rs.sol.soloist.server.builtindomains.builtindatatypes.Text; | ||
| import rs.sol.soloist.server.guiconfiguration.components.GUIApplicationComponent; | import rs.sol.soloist.server.guiconfiguration.components.GUIApplicationComponent; | ||
| import rs.sol.soloist.server.guiconfiguration.components.GUIButtonComponent; | import rs.sol.soloist.server.guiconfiguration.components.GUIButtonComponent; | ||
| Line 36: | Line 36: | ||
| public void init() throws InitializerFailedException { | public void init() throws InitializerFailedException { | ||
| GUIApplicationComponent application = new GUIApplicationComponent(); | GUIApplicationComponent application = new GUIApplicationComponent(); | ||
| - | application.name.set(Text.fromString("WizardSample")); | + | application.setName("WizardSample"); |
| SoloistServiceServlet.registerApplication(application); | SoloistServiceServlet.registerApplication(application); | ||
| Line 42: | Line 42: | ||
| GUILabelComponent title = GUILabelComponent.create(root, "Wizard"); | GUILabelComponent title = GUILabelComponent.create(root, "Wizard"); | ||
| - | title.styleName.set(Text.fromString("titleStyle")); | + | title.setStyle("titleStyle"); |
| GUIPanelComponent topPanel = GUIPanelComponent.createFlow(root); | GUIPanelComponent topPanel = GUIPanelComponent.createFlow(root); | ||
| - | topPanel.styleName.set(Text.fromString("topPanel")); | + | topPanel.setStyle("topPanel"); |
| - | GUIPanelComponent blackScreen = GUIPanelComponent.createFlow(root); // background panel which is shown when wizard dialog pops up, aids visual effect | + | // background panel which is shown when wizard dialog pops up, aids visual effect |
| - | blackScreen.styleName.set(Text.fromString("blackScreen")); | + | GUIPanelComponent blackScreen = GUIPanelComponent.createFlow(root); |
| + | blackScreen.setStyle("blackScreen"); | ||
| GUIDialogComponent dialog = new GUIDialogComponent(); | GUIDialogComponent dialog = new GUIDialogComponent(); | ||
| - | dialog.modal.set(Boolean.TRUE); | + | dialog.setModal(true); |
| - | dialog.application.set(root.getApplication()); | + | application.addDialog(dialog); |
| - | dialog.caption.set(Text.fromString("SOLoist Wizard")); | + | dialog.setCaption("SOLoist Wizard"); |
| GUIPanelComponent dialogPanel = GUIPanelComponent.createFlow(dialog); | GUIPanelComponent dialogPanel = GUIPanelComponent.createFlow(dialog); | ||
| - | dialogPanel.styleName.set(Text.fromString("dialogPanel")); | + | dialogPanel.setStyle("dialogPanel"); |
| Wizard wizard = new Wizard(dialogPanel, dialog, blackScreen); | Wizard wizard = new Wizard(dialogPanel, dialog, blackScreen); | ||
| - | // panels which will be shown as steps in wizard | + | // Panels which will be shown as steps in wizard |
| GUIPanelComponent p1 = new GUIPanelComponent(); | GUIPanelComponent p1 = new GUIPanelComponent(); | ||
| - | p1.layout.set(new FlowLayout()); | + | p1.setLayout(new FlowLayout()); |
| GUIPanelComponent p2 = new GUIPanelComponent(); | GUIPanelComponent p2 = new GUIPanelComponent(); | ||
| - | p2.layout.set(new FlowLayout()); | + | p2.setLayout(new FlowLayout()); |
| GUIPanelComponent p3 = new GUIPanelComponent(); | GUIPanelComponent p3 = new GUIPanelComponent(); | ||
| - | p3.layout.set(new FlowLayout()); | + | p3.setLayout(new FlowLayout()); |
| - | // content can arbitrarily complex | + | // The content can arbitrarily complex |
| - | GUILabelComponent.create(p1, "1").styleName.set(Text.fromString("largeText")); | + | GUILabelComponent.create(p1, "1/3").setStyle("largeText"); |
| - | GUILabelComponent.create(p2, "2").styleName.set(Text.fromString("largeText")); | + | GUILabelComponent.create(p2, "2/3").setStyle("largeText"); |
| - | GUILabelComponent.create(p3, "3").styleName.set(Text.fromString("largeText")); | + | GUILabelComponent.create(p3, "3/3").setStyle("largeText"); |
| - | // add pages to wizard in order | + | // Add pages to wizard in order |
| wizard.addPage(p1); | wizard.addPage(p1); | ||
| wizard.addPage(p2); | wizard.addPage(p2); | ||
| wizard.addPage(p3); | wizard.addPage(p3); | ||
| - | // generate wizard GUI | + | // Generate the wizard GUI |
| wizard.generate(); | wizard.generate(); | ||
| GUIButtonComponent cmdStart = GUIButtonComponent.create(topPanel, "Start wizard"); | GUIButtonComponent cmdStart = GUIButtonComponent.create(topPanel, "Start wizard"); | ||
| - | GUIComponentBinding.create(cmdStart.click, wizard.getBufferDarkenBackground().send); | + | GUIComponentBinding.create(cmdStart.opClick(), wizard.getBufferDarkenBackground().ipSend()); |
| - | GUIComponentBinding.create(cmdStart.click, wizard.getFirstChild().showInParent); | + | GUIComponentBinding.create(cmdStart.opClick(), wizard.getFirstChild().ipShowInParent()); |
| - | GUIComponentBinding.create(cmdStart.click, wizard.getFirstButtonChild().showInParent); | + | GUIComponentBinding.create(cmdStart.opClick(), wizard.getFirstButtonChild().ipShowInParent()); |
| - | GUIComponentBinding.create(cmdStart.click, dialog.show); | + | GUIComponentBinding.create(cmdStart.opClick(), dialog.ipShow()); |
| - | GUIComponentBinding.create(cmdStart.result, dialogPanel.input); | + | GUIComponentBinding.create(cmdStart.opResult(), dialogPanel.ipRelay1()); |
| - | GUIComponentBinding.create(cmdStart.result, p1.input); | + | GUIComponentBinding.create(cmdStart.opResult(), p1.ipRelay1()); |
| - | GUIComponentBinding.create(cmdStart.result, p2.input); | + | GUIComponentBinding.create(cmdStart.opResult(), p2.ipRelay1()); |
| - | GUIComponentBinding.create(cmdStart.result, p3.input); | + | GUIComponentBinding.create(cmdStart.opResult(), p3.ipRelay1()); |
| } | } | ||
| - | + | ||
| + | } | ||
| + | </code> | ||
| + | |||
| + | <code java> | ||
| + | package rs.sol.sampleapps.wizard; | ||
| + | |||
| + | import java.util.ArrayList; | ||
| + | import java.util.List; | ||
| + | |||
| + | import rs.sol.soloist.server.builtindomains.builtindatatypes.Text; | ||
| + | import rs.sol.soloist.server.guiconfiguration.components.GUIButtonComponent; | ||
| + | import rs.sol.soloist.server.guiconfiguration.components.GUIDeckComponent; | ||
| + | import rs.sol.soloist.server.guiconfiguration.components.GUIDialogComponent; | ||
| + | import rs.sol.soloist.server.guiconfiguration.components.GUIPanelComponent; | ||
| + | import rs.sol.soloist.server.guiconfiguration.construction.GUIComponentBinding; | ||
| + | import rs.sol.soloist.server.guiconfiguration.nonvisualcompoments.GUIBufferComponent; | ||
| + | |||
| + | public class Wizard { | ||
| + | |||
| + | private List<GUIPanelComponent> pages = new ArrayList<GUIPanelComponent>(); | ||
| + | private GUIDeckComponent mainDeck; | ||
| + | private GUIDeckComponent buttonDeck; | ||
| + | private GUIDialogComponent dialog; | ||
| + | private GUIBufferComponent bufferSet; | ||
| + | private GUIBufferComponent bufferRemove; | ||
| + | private GUIPanelComponent blackScreen; | ||
| + | private GUIPanelComponent rootPanel; | ||
| + | |||
| + | public Wizard(GUIPanelComponent rootPanel, GUIDialogComponent dialog, GUIPanelComponent blackScreen) { | ||
| + | this.rootPanel = rootPanel; | ||
| + | this.dialog = dialog; | ||
| + | this.blackScreen = blackScreen; | ||
| + | } | ||
| + | |||
| + | public void addPage(GUIPanelComponent page) { | ||
| + | pages.add(page); | ||
| + | } | ||
| + | |||
| + | public void generate() { | ||
| + | |||
| + | bufferSet = GUIBufferComponent.create(rootPanel, false, Text.fromString("darkenBackground")); | ||
| + | bufferRemove = GUIBufferComponent.create(rootPanel, false, Text.fromString("darkenBackground")); | ||
| + | |||
| + | GUIComponentBinding.create(bufferSet.opOutput(), blackScreen.ipAddStyle()); | ||
| + | GUIComponentBinding.create(bufferRemove.opOutput(), blackScreen.ipRemoveStyle()); | ||
| + | |||
| + | GUIPanelComponent mainPanel = GUIPanelComponent.createFlow(rootPanel); | ||
| + | GUIPanelComponent btnPanel = GUIPanelComponent.createFlow(rootPanel); | ||
| + | |||
| + | mainDeck = GUIDeckComponent.create(mainPanel); | ||
| + | mainPanel.setStyle("wizardMain"); | ||
| + | |||
| + | buttonDeck = GUIDeckComponent.create(btnPanel); | ||
| + | btnPanel.setStyle("wizardButtons"); | ||
| + | |||
| + | for (int i = 0; i < pages.size(); i++) { | ||
| + | mainDeck.add(pages.get(i)); | ||
| + | GUIPanelComponent.createFlow(buttonDeck); | ||
| + | } | ||
| + | |||
| + | for (int i = 0; i < pages.size(); i++) { | ||
| + | |||
| + | GUIPanelComponent buttonPanel = (GUIPanelComponent) buttonDeck.get(i); | ||
| + | |||
| + | GUIButtonComponent btnCancel = GUIButtonComponent.create(buttonPanel, "Cancel"); | ||
| + | btnCancel.setStyle("cancelButton"); | ||
| + | btnCancel.setConfirmationRequired(true); | ||
| + | btnCancel.setConfirmationMessage("Cancel?"); | ||
| + | |||
| + | GUIComponentBinding.create(btnCancel.opClick(), dialog.ipHide()); | ||
| + | GUIComponentBinding.create(btnCancel.opClick(), bufferRemove.ipSend()); | ||
| + | |||
| + | if (i != 0) { | ||
| + | GUIButtonComponent btnPrev = GUIButtonComponent.create(buttonPanel, "< Back"); | ||
| + | GUIComponentBinding.create(btnPrev.opClick(), mainDeck.get(i - 1).ipShow()); | ||
| + | GUIComponentBinding.create(btnPrev.opClick(), buttonDeck.get(i - 1).ipShow()); | ||
| + | btnPrev.setStyle("previousButton"); | ||
| + | } | ||
| + | |||
| + | if (i == pages.size() - 1) { | ||
| + | GUIButtonComponent btnFinish = GUIButtonComponent.create(buttonPanel, "Finish"); | ||
| + | btnFinish.setStyle("finishButton"); | ||
| + | btnFinish.setConfirmationMessage("Finish?"); | ||
| + | btnFinish.setConfirmationRequired(true); | ||
| + | GUIComponentBinding.create(btnFinish.opClick(), dialog.ipHide()); | ||
| + | GUIComponentBinding.create(btnFinish.opClick(), bufferRemove.ipSend()); | ||
| + | } else { | ||
| + | GUIButtonComponent btnNext = GUIButtonComponent.create(buttonPanel, "Next >"); | ||
| + | btnNext.setStyle("nextButton"); | ||
| + | GUIComponentBinding.create(btnNext.opClick(), mainDeck.get(i + 1).ipShow()); | ||
| + | GUIComponentBinding.create(btnNext.opClick(), buttonDeck.get(i + 1).ipShow()); | ||
| + | } | ||
| + | } | ||
| + | } | ||
| + | |||
| + | public GUIBufferComponent getBufferDarkenBackground() { | ||
| + | return bufferSet; | ||
| + | } | ||
| + | |||
| + | public GUIPanelComponent getFirstChild() { | ||
| + | return (GUIPanelComponent) mainDeck.get(0); | ||
| + | } | ||
| + | |||
| + | public GUIPanelComponent getFirstButtonChild() { | ||
| + | return (GUIPanelComponent) buttonDeck.get(0); | ||
| + | } | ||
| } | } | ||
| </code> | </code> | ||