How-To: Create UI Process Components with Impulse in LASG

This is the final part of the 7-series tutorial on Layered Architecture Solution Guidance 2013. In this walk-through, we will be looking at the last code-generator in the family, the Impulse: User Interface Process Component Generator to create UI Controller components. Creating UI Controllers is also the final step in the LASG Code Generation process.

Before beginning this guide, please make sure that you have completed the previous tutorials on Creating Service Layer Components with Velocity in LASG and Creating Workflow Services and Activities with Vector in LASG. Please make sure that your solution is fully compilable without any errors before starting. This walk-through also uses the LeaveSample database that is part of the Layered Architecture Sample for .NET but you may use your own database to follow through.

  1. Before launching the code-generator, the Host project will need to be started. In Solution Explorer, expand the Tutorial solution, go to the Hosts folder, right-click on the Tutorial.Hosts.Web project and select Properties
  2. At the project properties page, select the Web category and uncheck the Enable Edit and Continue check box. To understand why we need to do this, please refer to this post.



    Note: I actually took this screenshot from another post. The actual port number for my project is 2381 and not 13619 (the port used in layer sample). Your port number could be different.
  3. Save the setting.
  4. In Solution Explorer, right-click on the Tutorial.Hosts.Web project, select Debug and then select Start new instance.
  5. Your browser should launch with a HTTP Error 403.14 - Forbidden page. This is normal.
  6. To test the WCF service, simply append LeaveService.svc to the end of the address i.e. http://localhost:2381/LeaveService.svc. To test the workflow service, append the address with LeaveWorkflowService.svc instead i.e. http://localhost:2381/LeaveWorkflowService.svc. You should get a result page similar to the following for both the address.


    Note: Clicking on the url on this page will lead you to the WSDL of the service. (Whole page full of XML)

    Tip: If you are curious how the host was configured, the answer lies in the web.config. As you clicked through the code-generators, bits and pieces of the settings were registered into the web.config.

  7. Stop debugging but ensure that IIS Express is still running in the background. You can confirm this by checking the system tray for the IIS Express icon.

    Note: The browser may shut down.
  8. Once you have confirmed that your services are running, we can proceed with the code-generator. In Solution Explorer, expand the Tutorial solution, go to the Presentation folder. Right-click on the Tutorial.UI.Process project to invoke the context menu and click Add User Interface Process Components...


  9. The Impulse: User Interface Process Component Generator will launch. Impulse is divided into 3 sections.


  10. By default, Impulse loads the service contract assembly for the WCF services from the centralized bin folder located under the solution (i.e. Tutorial\bin). In this exercise, the Tutorial.Services.Contracts.dll should be automatically loaded.

    Note: If the service contract project cannot be loaded, please exit Impulse and return to Visual Studio to ensure that there are service contracts in the Tutorial.Services.Contracts project and all dependent assemblies are located in the centralized bin folder. Please make sure that the project can be built successfully. You can also manually load the business project assembly by clicking the Load button and selecting the .dll file.
  11. Like previous the code-generators, Impulse supplies us with default values in the  1. Define User Interface Process Component  section. 
  12. Verify that the WCF Services radio button is selected.
  13. Verify that Leave is in the UI Process name text box. The default Suffix for UI process components is Controller. Impulse will create a component called LeaveController for us.

    Tip: Take note that although the UI process components are called controllers, they are in no way related to ASP.NET MVC controllers. 
  14. All the service contracts that are available in the service contract assembly will be listed in the Services dropdown list at the  2. Select Methods to Call  section. Verify that ILeaveService is selected.
  15. All the methods in the service contract will be shown in the list box under the Available operations check box. Check the Available operations check box to select all service operations. 
  16. Click on the button to add them to the Selected operations grid.


  17. Click the Add to Code Generation button to queue the service definitions.
  18. Return to the  1. Define User Interface Process Component  section and click on the Workflow Services radio button to load the Tutorial.Workflows.dll.

    Note: You should know the drill by now, if the workflow assembly fails to load, please exit Impulse and return to Visual Studio to make sure that there are workflows in the Tutorial.Workflows project and all dependent assemblies are located in the centralized bin folder. You will need to have at least one ReceiveActivity in your workflow to have something show-up. A blank xaml file will not do. Also make sure that the workflow project can build successfully. You can manually load the workflow project assembly by clicking the Load button and selecting the .dll file.
  19. Verify that Leave is still in the UI Process name text box and the default Suffix is still Controller. Our LeaveController component will call both the backend WCF and Workflow services.
  20. At the  2. Select Methods to Call  section, ensure that LeaveWorkflowService is selected in the Services dropdown list.
  21. All the methods defined in the Receive activities in the workflow xaml will be listed in the list box below the Available operations check box. Check the Available operations check box to select all the workflow service operations.
  22. Click on the button to add them to the Selected operations grid.

  23. Click the Add to Code Generation button to queue the definitions.
  24. Notice the reminder about Add Service Reference? We can manually Add Service Reference from Visual Studio or have Impulse launch it for us. Because we are adding both the WCF services and workflow services at the same time, we will require Impulse to launch the Add Service Reference dialog for us once for our WCF service, and we will need to manually launch it again from Visual Studio to add the Workflow service reference.

    Check the Launch Add Service dialog check box in the  3. Generate UI Process Components  section. You will notice the reminder is gone.
  25. By now, you should have the following:


  26. Click the Generate button to generate the UI controller class.
  27. Notice that you are once again reminded with instructions for Add Service Reference at the Code Generation Completed dialog, click OK.


  28. The Visual Studio Add Service Reference dialog will launch. 
  29. In the Address bar, type in the url to your LeaveService i.e. http://localhost:2381/LeaveService.svc and click GO. You should be able to see the details of the LeaveService in the Services and Operations list boxes.

    Note: If you cannot see the service, that means the host project is not running. Please make sure the host is running.
  30. Enter LeaveService in the Namespace text box.


  31. Click the Advance... button to open the Service Reference Settings dialog.
  32. In the Collection type dropdown list, select System.Collections.Generic.List. Click OK.


  33. Click OK again to let Visual Studio generate the service reference code.
  34. To manually invoke the Add Service Reference dialog again for our workflow service, expand the Tutorial.UI.Process project, right-click on References and click Add Service Reference...
  35. In the Address bar, type in the url to the LeaveWorkflowService i.e. http://localhost:2381/LeaveWorkflowService.svc and click GO. You should be able to see the details of the LeaveWorkflowService in the Services and Operations list boxes.
  36. Enter LeaveWorkflowService in the Namespace text box.


  37. Repeat step 31-32 for the LeaveWorkflowService.
  38. Click OK to let Visual Studio generate the service reference code.
  39. The Tutorial.UI.Process project should contain the generated controller class.


Ready to Go!

You can now start developing your Web UI. At this point in time, LASG does not provide any UI generator. You can easily hook up the code to your WebForm like this:

var upc = new LeaveController();
GridView1.DataSource = upc.ListLeaves(0);
GridView1.DataBind();

But before you run the Tutorial.UI.Web project, you will need to copy the configuration that was generated by Visual Studio in the Tutorial.UI.Process project. LASG provides a convenient way for you to do it.
  • Right-click on the Tutorial.UI.Process project and select Update Service Configuration to Client Projects.


Summary and Conclusion

We have finally completed the tutorial for the last code-generator in LASG, the Impulse: User Interface Process Component Generator. As with other code-generators in the family, you are welcomed to change the generated code but take note that any changes made in your code will not be reflected in the definitions stored in Impulse. Therefore, practice caution when you are regenerating code on existing code file.

Tip: In case you are wondering why all the fancy code-names for the code-generators, they were actually names mentioned in Newton speed theories. The code-generators was initially part of my own project called Project Newton before being merged into LASG.

This ends our 7 part series of walking through with LASG. I hope you find the information useful in adopting LASG. Thank You :)

No comments:

Post a Comment

Popular Post