HIX -> Ticket Project (IV) - View

[Carles]

Hi,

Our backend file web/proc_ticket.prg is pretty basic and easy to understand. Let's try to clean up the code where we create the view, the response screen. If you check the code, you can see we build the view like this:

Code: Select all | Expand

.. .

cMessage := '<html>'
cMessage += '<h1>Request processed !</h1><hr>'
cMessage += '<h3>Hi ' + hData[ 'user_name' ] + '. Your access code is ' + (cAlias)->key + '</h3>'
cMessage += '<hr><small>' + 'This ticket was processed at ' + dtoc( date() ) + ' ' + time() + '</small>'
cMessage += '</html>'

. .. 

It's only 5 lines where we add to a variable, but when there are more lines it becomes very cumbersome to work with.

Now we're going to create a function to code the HTML in a cleaner way that makes the code easier to read. For this, we'll use the preprocessor:

Code: Select all | Expand

VIEW TO <cHtml> [PARAMS …]
.. .
ENDTEXT

First, we'll add an include at the top of the code for the header file hix.ch:

#include ‘hix.ch’

Then in the section where we define the screen, we'll create a variable cHtml that will receive the content from the function MyView(hData, cAlias). As you can see, we're passing the variables we already have: hData and cAlias.

cHtml := MyView( hData, cAlias )

The MyView() function will look like this:

Code: Select all | Expand

FUNCTION MyView( hData, cAlias ) 

	local cHtml := ""
	
	VIEW TO cHtml PARAMS hData, cAlias
<html>
	<h1>Request processed !</h1><hr>
	<h3>Hi <$ hData[ 'user_name' ] $>. Your access code is <$ (cAlias)->key $></h3>
	<hr>
	<small>This ticket was processed at  <$ dtoc( date() ) + ' ' + time() $></small>
</html>		
	ENDTEXT

RETU cHtml

You can see how inside the VIEW/ENDTEXT we can write more readable code. The only thing to remember is that to use variables inside VIEW/ENDTEXT, we need to use the tags <$ ... $>.

This will make Harbour server process the variable content.

The result is the same as what we had before, but now we need to understand one thing:

• We have a LOGIC process -- CONTROLLER

• We have a RENDERING process – VIEW

And what's sometimes so hard to understand is simply this:

Controller: Collects data, manipulates it, and prepares the response
View: Renders the screen with data from the controller

Now we're ready to make our screens look pretty...