[CUBA-component] Wizard - preview

Hi,

I created a CUBA application component that you can use. It is in preview mode currently. Before releasing it “officially” i would like to get your feedback on it. It is open source (Apache 2 license) and you can find it on Github:

CUBA component - Wizard

This application component let’s you create UI wizards through a specific UI component DSL.

A UI wizard should be used in case of:

  • multi step input
  • complex decision workflows
  • the user needs to be guided through the process

For more information on this topic see: Wizard design pattern

Installation

  1. wizard is available in the CUBA marketplace
  2. Select a version of the add-on which is compatible with the platform version used in your project:
Platform Version Add-on Version
6.8.x 0.1.x

The latest version is: Download

Add custom application component to your project:

  • Artifact group: de.diedavids.cuba.wizard
  • Artifact name: wizard-global
  • Version: add-on version
dependencies {
  appComponent("de.diedavids.cuba.wizard:wizard-global:*addon-version*")
}

Using the application component

Add a XML namespace wizard to the window tag of your screen like this:

<window xmlns="http://schemas.haulmont.com/cuba/window.xsd"
    xmlns:wizard="http://schemas.diedavids.de/wizard/0.1/ui-component.xsd">

Then add your wizard component to the screen:

    <wizard:wizard id="myWizard">
        <wizard:step caption="Step 1" screen="example-1-step-1" />
        <wizard:step caption="Step 2" screen="example-1-step-2" />
    </wizard:wizard>

Example usage

To see this application component in action, check out this example: cuba-example-using-wizard.

Example: Checkout Wizard

4 Likes

Hi @mario,

I plan to use the wizard soon in my 6.10 based application.

The addin compatibility states 6.x-6.10 so for now it’s fine. But what about version 7, I plan to update sooner or later, will this break my application?

If not, do you have any plans to update this update this component? Or does the component become redundant due to version 7 features?

regards,
Tom

The component won’t work on 7 @tom.monnier, not until the component is updated. But you are more than welcome to raise a pull request to its github repo when you do get it to work.

1 Like

Hi @abdul.qoyyuum and @mario,
I did a first attempt at upgrading the component.

At first sight it seems to work (I have not yet used the new UI api yet, so hopefully I used it correctly) The approach I took here is use cuba 7 UI components (I made the abstractWizardStep extend ScreenFragment instead of AbstractFrame)

At least for the sample it seems to work with reasonable changes (eg. notifications). Is this ok or would you prefer to also fully support the old api for backwards compatibility?

One thing I didn’t get working yet is upgrading the notifications on onActivate, but that might be unrelated to the component and just bad usage of the events on my side.

Could one of you have a short look at the code (i made a pull request) so I know I’m on the right track?
Also, don’t forget to answer wether or not the existing api should remain for compatibility.

regards,
Tom

–> edit, just noticed someone already made an attempt in february using the old api.

Hi @tom.monnier ,

thanks for taking the time to update the component. I will take a look at your PR.

Generally i have no problems with breaking changes in this stage (0.3.0) of the app component. In particular because it is an update to a new major version.

Thanks. I will give it a try and comment in the PR later.

Bye
Mario

I just released version 0.4.0 of the app component “wizard” for CubaPlatform with CUBA 7.0 support. Check it out: GitHub - mariodavid/cuba-component-wizard: This application component let's you create UI wizards through a specific UI component DSL

Thanks for all the people helping porting it to 7.0!

giphy-downsized

3 Likes

Hello!
Is suitable the latest Wizard’s version 0.4.0 for Cuba Platform 7.1.0.BETA3 ?

hi,

help your users with user-guided wizard screens instead of CRUD! 7.1.x support for @CubaPlatform app component “wizard” is now available. Check it out: GitHub - mariodavid/cuba-component-wizard: This application component let's you create UI wizards through a specific UI component DSL

wizard

Hello Mario!
Thank you for “wizard” functionality :pray:
I have just few questions.
Do you have some kind of instruction a kind one like step-by-step description to create a simple wizard? (I’ve started making my own wizard using “cuba-example-using-wizard-master” as an example but failed. My cuba don’t want to start after I created one-step wizard).

Does your wizard-solution allow to call wizard by button on object screen?
For example I open a user record and from there I can start a wizard (not from menu).

Thank you in advance.

Hi,

Thanks. Glad you like it.

Can you elaborate a little what did not work?

Bye
Mario

Hello!
Sorry for delay.
So in generaly I added wizard addon and created one-step wizard. After this during start of my cuba project I’ve got an error from catalina:

09:48:58.204 ERROR c.h.c.c.s.AbstractWebAppContextLoader - Error initializing application
org.springframework.beans.factory.BeanDefinitionStoreException: Unexpected exception parsing XML document from class path resource [com/haulmont/cuba/web-spring.xml]; nested exception is org.springframework.context.annotation.ConflictingBeanDefinitionException: Annotation-specified bean name ‘cuba_DataManager’ for bean class [com.haulmont.cuba.core.app.DataManagerBean] conflicts with existing, non-compatible bean definition of same name and class [com.haulmont.cuba.client.sys.DataManagerClientImpl]
at org.springframework.beans.factory.xml.XmlBeanDefinitionReader.doLoadBeanDefinitions(XmlBeanDefinitionReader.java:419) ~[spring-beans-5.1.6.RELEASE.jar:5.1.6.RELEASE]

Well, as a beginning I would like to understand a basic principe of creating wizard that’s why I asked about an instruction or a kind of description.
Do I understand correctly that I need:

  1. First, create a main wizard screen
  2. Then create steps screens
  3. Then add steps screen to main wizard screen

Hello,

I am using Cuba Framework 7.1.1 and wizard 0.5. I just tried creating simple Wizard with single step. When I create wizard without step, the wizard shows correctly. When I add step (as per sample project provided), I get following error -

java.lang.ClassCastException: com.haulmont.cuba.gui.components.AbstractFrame cannot be cast to de.diedavids.cuba.wizard.gui.components.AbstractWizardStep
at de.diedavids.cuba.wizard.web.gui.components.WebWizardStep.getWizardStepInstanceLoadedViaXml(WebWizardStep.java:89)
at de.diedavids.cuba.wizard.web.gui.components.WebWizardStep.getWizardStep(WebWizardStep.java:72)
at de.diedavids.cuba.wizard.web.gui.components.WebWizardStep.onActivate(WebWizardStep.java:44)
at de.diedavids.cuba.wizard.web.gui.components.WebWizard.activateStep(WebWizard.java:169)
at de.diedavids.cuba.wizard.web.gui.components.WebWizard.setCurrentStep(WebWizard.java:163)
at de.diedavids.cuba.wizard.web.gui.components.WebWizard.lambda$createLayout$0(WebWizard.java:142)
at com.haulmont.bali.events.EventHub.publish(EventHub.java:170)
at com.haulmont.cuba.web.gui.components.WebAbstractComponent.publish(WebAbstractComponent.java:92)
at com.haulmont.cuba.web.gui.components.WebTabSheet.fireTabChanged(WebTabSheet.java:600)
at com.haulmont.cuba.web.gui.components.WebTabSheet.lambda$initComponentTabChangeListener$ba8aefab$1(WebTabSheet.java:545)
at sun.reflect.GeneratedMethodAccessor117.invoke(Unknown Source)
at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43)
at java.lang.reflect.Method.invoke(Method.java:498)
at com.vaadin.event.ListenerMethod.receiveEvent(ListenerMethod.java:496)
at com.vaadin.event.EventRouter.fireEvent(EventRouter.java:273)
at com.vaadin.event.EventRouter.fireEvent(EventRouter.java:237)
at com.vaadin.server.AbstractClientConnector.fireEvent(AbstractClientConnector.java:1041)
at com.vaadin.ui.TabSheet.fireSelectedTabChange(TabSheet.java:920)
at com.vaadin.ui.TabSheet$TabSheetTabImpl.setEnabled(TabSheet.java:1260)
at com.haulmont.cuba.web.gui.components.WebTabSheet$Tab.setEnabled(WebTabSheet.java:224)
at de.diedavids.cuba.wizard.web.gui.components.WebWizard.enableTab(WebWizard.java:191)
at de.diedavids.cuba.wizard.web.gui.components.WebWizard.init(WebWizard.java:409)
at de.diedavids.cuba.wizard.gui.xml.layout.loaders.WizardLoader.lambda$loadComponent$0(WizardLoader.java:63)
at com.haulmont.cuba.gui.xml.layout.loaders.ComponentLoaderContext.executePostInitTasks(ComponentLoaderContext.java:152)
at com.haulmont.cuba.web.sys.WebScreens.createScreen(WebScreens.java:258)
at com.haulmont.cuba.web.sys.WebScreens.create(WebScreens.java:175)
at com.haulmont.cuba.gui.config.MenuItemCommands$ScreenCommand.run(MenuItemCommands.java:315)
at com.haulmont.cuba.web.sys.SideMenuBuilder$MenuCommandExecutor.accept(SideMenuBuilder.java:264)
at com.haulmont.cuba.web.sys.SideMenuBuilder$MenuCommandExecutor.accept(SideMenuBuilder.java:249)
at com.haulmont.cuba.web.gui.components.mainwindow.WebSideMenu$MenuItemImpl.menuSelected(WebSideMenu.java:569)
at com.haulmont.cuba.web.widgets.CubaSideMenu$1.menuItemTriggered(CubaSideMenu.java:90)
at sun.reflect.GeneratedMethodAccessor124.invoke(Unknown Source)
at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43)
at java.lang.reflect.Method.invoke(Method.java:498)
at com.vaadin.server.ServerRpcManager.applyInvocation(ServerRpcManager.java:153)
at com.vaadin.server.ServerRpcManager.applyInvocation(ServerRpcManager.java:115)
at com.vaadin.server.communication.ServerRpcHandler.handleInvocation(ServerRpcHandler.java:431)
at com.vaadin.server.communication.ServerRpcHandler.handleInvocations(ServerRpcHandler.java:396)
at com.vaadin.server.communication.ServerRpcHandler.handleRpc(ServerRpcHandler.java:260)
at com.vaadin.server.communication.UidlRequestHandler.synchronizedHandleRequest(UidlRequestHandler.java:82)
at com.vaadin.server.SynchronizedRequestHandler.handleRequest(SynchronizedRequestHandler.java:40)
at com.vaadin.server.VaadinService.handleRequest(VaadinService.java:1577)
at com.vaadin.server.VaadinServlet.service(VaadinServlet.java:425)
at com.haulmont.cuba.web.sys.CubaApplicationServlet.serviceAppRequest(CubaApplicationServlet.java:329)
at com.haulmont.cuba.web.sys.CubaApplicationServlet.service(CubaApplicationServlet.java:215)
at javax.servlet.http.HttpServlet.service(HttpServlet.java:741)
at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:231)
at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:166)
at org.apache.tomcat.websocket.server.WsFilter.doFilter(WsFilter.java:53)
at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:193)
at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:166)
at org.springframework.web.filter.CompositeFilter$VirtualFilterChain.doFilter(CompositeFilter.java:107)
at org.springframework.web.filter.CompositeFilter.doFilter(CompositeFilter.java:73)
at com.haulmont.cuba.web.sys.CubaHttpFilter.doFilter(CubaHttpFilter.java:93)
at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:193)
at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:166)
at org.apache.catalina.core.StandardWrapperValve.invoke(StandardWrapperValve.java:200)
at org.apache.catalina.core.StandardContextValve.invoke(StandardContextValve.java:96)
at org.apache.catalina.authenticator.AuthenticatorBase.invoke(AuthenticatorBase.java:490)
at org.apache.catalina.core.StandardHostValve.invoke(StandardHostValve.java:139)
at org.apache.catalina.valves.ErrorReportValve.invoke(ErrorReportValve.java:92)
at org.apache.catalina.valves.AbstractAccessLogValve.invoke(AbstractAccessLogValve.java:678)
at org.apache.catalina.core.StandardEngineValve.invoke(StandardEngineValve.java:74)
at org.apache.catalina.connector.CoyoteAdapter.service(CoyoteAdapter.java:343)
at org.apache.coyote.http11.Http11Processor.service(Http11Processor.java:408)
at org.apache.coyote.AbstractProcessorLight.process(AbstractProcessorLight.java:66)
at org.apache.coyote.AbstractProtocol$ConnectionHandler.process(AbstractProtocol.java:836)
at org.apache.tomcat.util.net.NioEndpoint$SocketProcessor.doRun(NioEndpoint.java:1747)
at org.apache.tomcat.util.net.SocketProcessorBase.run(SocketProcessorBase.java:49)
at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1149)
at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:624)
at org.apache.tomcat.util.threads.TaskThread$WrappingRunnable.run(TaskThread.java:61)
at java.lang.Thread.run(Thread.java:748)

The step screen extends AbstractWizardStep. It seems create step fail when casting to AbstractWizardStep -

public class AbstractWizard extends AbstractWindow {

public AbstractWizardStep createStep(String screenId) {
    return (AbstractWizardStep) openFrame(null, screenId);
}

}

Am I missing something? Thanks in advance.

Hi @Evgeniya_K @ninad.naik,

If i understand correctly both problems arise because of the fact that you might use CUBA 7 screens APIs for the steps.

Currently the addon supports CUBA 7, but not the new API the screens.

Have you taken a look into the example application: GitHub - mariodavid/cuba-example-using-wizard: Showcase project for using cuba-component-wizard ?

Cheers
Mario

Hi @mario,

Thanks for your response. I was able to use wizard without issue based on your suggestion.

Is there any plan to add support for new screen APIs?

Thanks in advance.

Regards,
Ninad

Hi,

I just released version 0.8.0 which supports CUBA 7 based Screen APIs as well as the use-case to identify which button was clicked before a step is changed.

Cheers
Mario

WOW… very timely… I was trying to get this done !!! I still see 0.6 in the market place. How do I get this?
Thank you !!

Hi,

not sure what is the problem, but I reached out to the CUBA people to fix it in the marketplace.

For the time being, you can add the repo manually in your build.gradle file like here: cuba-example-using-wizard/build.gradle at master · mariodavid/cuba-example-using-wizard · GitHub

and update the version number manually to 0.8.1 like here: cuba-example-using-wizard/build.gradle at master · mariodavid/cuba-example-using-wizard · GitHub

Cheers
Mario

First off … Thank you for all your work and addons and example in the community.
I’ve only had a few months with experience on CUBA so im still a bit new.

I really need a wizard add on and I tried the one from the marketplace that used legacy components.
Talk about the timing. I had tried to do my own wizard last weekend using screens and fragments. Would you please be so kind as to check it?

I see the new version doesn’t use fragments and relies on many dependency injections.
This is what I worked on last weekend. Maybe its useful on more experienced hands.
eparamowizard.zip (97.1 KB)

Hello Mario!

Have you heard about Jmix - the new major release of CUBA Platform - and its new features? (I suppose you have :ok_hand: ) Well, do you have plans to development the wizard addon for Jmix?