New guide for learning EWF

wgross · August 27, 2020, 4:37pm

Here’s the outline I’ve come up with for the web framework guide. @greg_smalter what do you think?

Prereqs:

Getting started (including database creation)
Database migration - run it with a specific script that creates a bunch of data for us. This will include
Data access - so you understand what retrieval and mod classes are

Sections of guide:

Setup - run DB script to create CustomerTypes table with two rows (business customers and personal customers) and empty Customers table with a bunch of columns of different types

Simple page construction with loop to create section for each customer type. Use row constants to vary display by type. Explain built-in UI.

Creating a second page (the customer add/edit form) and linking to it w/EwfHyperlink. Explain PageInfo/ResourceInfo concept. Form page should be child of the first page. Explain query parameters. Load customer row if in edit mode.

Explain FormState class and how it connects validations with post-backs. Explain PostBack objects.

Add controls to the form. Explain FormItemList and how it has different modes. Control types to include: text, email, numeric text, number, checkbox, drop-down, date.

Add built-in Submit button to bottom.

Go back to first page and add a table to each section to display existing customers.

Use a DataValue to create a checkbox and nest one of the controls beneath it. Then explain PageModificationValue and do a similar thing with another control to explain DisplaySetup. Also illustrate dynamic CSS classes and explain ElementClass generation.

Explain intermediate post-backs and component state, which are used for changing parts of the page. Explain why you need to tell the framework which parts of page are changing (concurrency checks, and usability when async JS post-back is implemented). Explain ethereal components and why they still need to have a location in the tree.

Durable component state: Make a customer type radio list that changes which form fields are present.

Transient component state: Make a list of input fields with a button that adds a new slot to the bottom.

Use autofocus regions to put cursor in good place after post-back.

Add user-management to the system with three roles (reference separate guide for adding user management). Show built-in user editor. Make first page accessible to two of the roles, and form accessible only to one role. Explain inherited access restrictions.

wgross · August 27, 2020, 8:08pm

@greg_smalter Also, I updated the EWF UI Page item template that is in Dropbox, so you’ll be able to use that to create the pages. I’m not going to bother publishing this template anywhere else since it’s still a Web Forms page and will need to change again when the Web Forms dependency is completely gone.

greg_smalter · September 1, 2020, 1:56am

I’m not sure that intermediate post-backs need to be in this guide. You can get a really long way without ever using them.

Also I would center it around pages. One page that shows a list of stuff. One page that shows detail about a particular thing you clicked in the list. One page that adds something to the list.

wgross · September 1, 2020, 1:43pm

I’ll publish a draft of the guide without the intermediate post-backs and component state first. But I want to cover them someplace because if people are comparing EWF with other frameworks such as Blazor, and they aren’t aware of component state, they might conclude that there is no way to have temporary application state that causes server-side changes in the UI.

I’m definitely centering the guide around pages, and just like you said, except that I’m planning on a combined create/update page instead of doing those separately.

wgross · September 2, 2020, 6:55pm

@greg_smalter I have a draft of the guide with all of the basic functionality covered. If you have a chance, can you go through it and see if it’s clear?

github.com

enduracode/enterprise-web-library/blob/branch/default/Documentation/Guides/WebFramework.md

# Using the web framework


## Setup: creating a system and database

To follow along step by step with this guide, you’ll need our example system and database.

First follow the first two sections of the [Getting Started guide](GettingStarted.md): Creating a New System and Adding a Database. Name the system **Bicycle Service Manager** and use a base namespace of `ServiceManager`. Use SQL Server for the database.

Create a `Library/Configuration/Database Updates.sql` file, paste [this script](WebFrameworkSupplements/DatabaseScript.sql) into it, and save.

Then open `Library/Configuration/Development.xml` and replace the empty `<database>` element with this block:

```XML
<database>
	<rowConstantTables>
		<table tableName="ServiceTypes" nameColumn="ServiceTypeName" valueColumn="ServiceTypeId" />
	</rowConstantTables>
	<SmallTables>
		<Table>ServiceTypes</Table>

This file has been truncated. show original

It doesn’t cover DataValue yet, or PageModificationValue for dynamic display and classes. That stuff is all coming up next.

wgross · September 8, 2020, 5:12pm

@greg_smalter I just added a new section for DataValue, called “Using temporary state during a post-back”.

wgross · September 9, 2020, 12:56am

@greg_smalter Also just added “Modifying a page on the client side”, which covers page modification values. These replace the old DisplayLinking subsystem we used to have.

wgross · September 16, 2020, 6:56pm

The guide is now complete. URL is the same:

github.com

enduracode/enterprise-web-library/blob/branch/default/Documentation/Guides/WebFramework.md

# Using the web framework

Last updated for Enterprise Web Library version 65.


## Setup: creating a system and database

To follow along step by step with this guide, you’ll need our example system and database.

First follow the first two sections of the [Getting Started guide](GettingStarted.md): Creating a New System and Adding a Database. Name the system **Bicycle Service Manager** and use a base namespace of `ServiceManager`. Use SQL Server for the database.

Create a `Library/Configuration/Database Updates.sql` file, paste [this script](WebFrameworkSupplements/DatabaseScript.sql) into it, and save.

Then open `Library/Configuration/Development.xml` and replace the empty `<database>` element with this block:

```XML
<database>
	<rowConstantTables>
		<table tableName="ServiceTypes" nameColumn="ServiceTypeName" valueColumn="ServiceTypeId" />
	</rowConstantTables>

This file has been truncated. show original

I’m sure there is more work to do but at least it now covers everything I believe it should.

@greg_smalter Looking forward to your feedback.

greg_smalter · September 19, 2020, 2:13am

Run the Website project. If you see a page that says “The page you requested is no longer available”, everything is working and you can begin building your system.

This would be sort of a funny statement even if worked.

Instead I get this.

greg_smalter · September 19, 2020, 2:15am

I never use IIS express for anything. I’m letting it (try to) use it here.

wgross · September 19, 2020, 3:28pm

It looks like somehow you ended up with an invalid URL in your browser, a mismatch between the protocol and port. The two valid combos are:

HTTP - port 8080
HTTPS - port 44300

So try http://localhost:8080/BicycleServiceManager/ and see what happens. If that works, do you have any idea why Visual Studio would have misdirected you when you ran the project?

greg_smalter · September 19, 2020, 5:32pm

That is actually the one thing I did try - it kept forcing me back to HTTPS but still on the 8080 port.

wgross · September 19, 2020, 6:06pm

Maybe that HTTPS redirect is happening because of HSTS. Read these:

And this one would explain why you’re staying on port 8080 after the https switch:

greg_smalter · October 24, 2020, 11:28pm

I got through this by switching to real IIS. We can probably chalk this one up to fluke because the error I got with IIS Express was complaining about not being able to read “the” web.config, but the path it gave was to a web.config for a completely different project which I deleted years ago so… I really have no idea what it was talking about.

greg_smalter · October 24, 2020, 11:29pm

I got an unexplained 500 error until I did Everyone => Full Control Windows Permissions at the Bicycle top folder level. I don’t see any instructions about file permissions. I think people are going to get stuck on this.

greg_smalter · October 25, 2020, 12:00am

Add a new item to the Website project and select the EWF UI Page template. Name the page ServiceOrders . This will be the list page.

I don’t see EWF UI Page as a template and I don’t know where to get it, and I don’t see any instructions that I missed involving installation/copying of templates.