Introduction to RSP for the VFP developer

**hmischel@diligentsystems.com** · 2013-04-14, 08:44

I was waxing poetic about Lianja to some old VFP cohorts of mine. It seems that some only want to use the Canvas page to drag and drop fields onto forms - staying in a familiar comfort zone.
While that is certainly going to work for many, they are not embracing the full power of what Lianja has to offer.

I got the impression that they are not looking at RSP for solutions.

I think an introduction video incorporating Data/javascript objects will be helpful to many.

Herb

**HankFay** · 2013-04-14, 14:38

Here's a tip to help get folks started, answering the question "how do I design my .rsp."

Using a tip from Barry ("create a web view section and put the editor into it") I did the following:

1) created a dummy page in the app I was building.

2) added a webview section.

3) set the following attribute in the webview section:

url: lib:/ckeditor.rsp

That's all you need to do.

Design the page as you want it, and when you have what you want, switch to Source view, copy and paste that into the Body section of an RSP page.

Now, in this particular page, I was displaying only, so I integrated the data into the page. In editing view, my data sections were marked with << and >>, the familiar textmerge() brackets from VFP (and now in Lianjga). My body section looks like this:

Code:

<body style="font-family:Verdana;" >
<%
lcPage = ""


lnMileage = nvl(curvan.vs_odom,0)
text raw to lcPage
<table align="center" border="0" cellpadding="1" cellspacing="1" style="width: 500px ">
    <tbody>
        <tr>
            <td>
                <span style="font-size:90%;">Van #</span></td>
            <td>
                <span style="font-size:90%;">&lt;&lt;m.cVanNo&gt;&gt;</span></td>
            <td>
                <span style="font-size:90%;"><span style="color:#ffffff;">MM</span></span></td>
            <td>
                <span style="font-size:90%;">Mileage</span></td>
            <td>
                <span style="font-size:90%;">&lt;&lt;lnMileage&gt;&gt;</span></td>
        </tr>
        <tr>
            <td>
                <span style="font-size:90%;">Make</span></td>
            <td>
                <span style="font-size:90%;">&lt;&lt;trim(curvan.make)&gt;&gt;</span></td>
            <td>
                &nbsp;</td>
            <td>
                <span style="font-size:90%;">VIN</span></td>
            <td>
                <span style="font-size:90%;">&lt;&lt;trim(curvan.vh_vin)&gt;&gt;</span></td>
        </tr>
        <tr>
            <td>
                <span style="font-size:90%;">Model</span></td>
            <td>
                <span style="font-size:90%;">&lt;&lt;trim(curvan.model)&gt;&gt;</span></td>
            <td>
                &nbsp;</td>
            <td>
                <span style="font-size:90%;">Lic #</span></td>
            <td>
                <span style="font-size:90%;">&lt;&lt;trim(curvan.vh_licno)&gt;&gt;</span></td>
        </tr>
        <tr>
            <td>
                <span style="font-size:90%;">Year</span></td>
            <td>
                <span style="font-size:90%;">&lt;&lt;transform(curvan.vh_year)&gt;&gt;</span></td>
            <td>
                &nbsp;</td>
            <td>
                <span style="font-size:90%;">Lic State</span></td>
            <td>
                <span style="font-size:90%;">&lt;&lt;curvan.vh_licst&gt;&gt;</span></td>
        </tr>
    </tbody>
</table>
endtext


lcPage = strtran(lcPage,"&lt;&lt;","<<")
lcPage = strtran(lcPage,"&gt;&gt;",">>")
lcPage = textmerge(lcPage)


? lcPage
%>
</body>

In situations where you want to modify data, then node/backbone/jquery etc. would come into play; but for read-only scenarios, this is a real-time saver both in development and at runtime (although given that it's a UI operation, the amount of processing time saved is not significant).

hth,

Hank

**barrymavin** · 2013-04-14, 19:54

Best practice tip: Don't think WebViews think WebViewWidgets. These are a cornerstone of Lianja development.

The directives in an .rsp pages as just like those in .asp pages with the exception that you write in Lianja/VFP scripting. They therefore contain all the directives you would expect.

An .rsp page is just an HTML page with <%@ ... %> and <%= ... %> directives embedded within the HTML. You don't need to do any substitution of expressions or anything like that; I't all done by the page processor.

So if you are familiar for .asp, .php or .jsp pages. The page processor works like those do. The Lianja App Builder has this page processor built-in as does the Lianja Cloud Server.

If you want to get clever using JavaScript libraries, you write your .rsp pages as "WebViewWidgets" which I have blogged about and explained on the forums in numerous places. To get an example of a "WebViewWidget" and how to use JQuery or another JavaScript framework in them then I would suggest you select the "Library" workspace and open up calendar_view.rsp and calendar_controller.rsp and read through the code. Its well laid out and easy to follow.

The calendar_view.rsp file includes and uses various JavaScript libraries like this:

Code:

<%
text raw
<!-- Import the JavaScript libraries that our WebViewWidget uses -->
<link type="text/css" href="lib:/jquery/css/smoothness/jquery-ui.css" rel="stylesheet" />
<script type="text/javascript" src="lib:/jquery/js/jquery.min.js"></script>
<script type="text/javascript" src="lib:/jquery/js/jquery-ui.min.js"></script>
<link rel='stylesheet' type='text/css' href='lib:/fullcalendar/fullcalendar.css' />
<link rel='stylesheet' type='text/css' href='lib:/fullcalendar/fullcalendar.print.css' media='print' />
<script type='text/javascript' src='lib:/fullcalendar/fullcalendar.min.js'></script>
<script type="text/javascript" src="lib:/jquery/jquery-timepicker/jquery.timepicker.js"></script>
<link rel="stylesheet" type="text/css" href="lib:/jquery/jquery-timepicker/jquery.timepicker.css" />
<script type="text/javascript" src="lib:/jquery/jquery-timepicker/lib/base.js"></script>
<link rel="stylesheet" type="text/css" href="lib:/jquery/jquery-timepicker/lib/base.css" />
endtext
%>

If you want to use these libraries in many different WebViewWidgets you can put the code in another file and include it like this:

Code:

<%@ include="lib:/mylibraryfiles.rsp" %>

and if you want to hide all the code from prying eyes on the internet just use codebehind.

So, the code that Hank shared can be be written like this (as the page processor does all the work for you):

Code:

<body style="font-family:Verdana;" >

<%
lcPage = ""
lnMileage = nvl(curvan.vs_odom,0)
%>

<table align="center" border="0" cellpadding="1" cellspacing="1" style="width: 500px ">
    <tbody>
        <tr>
            <td>
                <span style="font-size:90%;">Van #</span></td>
            <td>
                <span style="font-size:90%;"><%= m.cVanNo %></span></td>
            <td>
                <span style="font-size:90%;"><span style="color:#ffffff;">MM</span></span></td>
            <td>
                <span style="font-size:90%;">Mileage</span></td>
            <td>
                <span style="font-size:90%;"><%= lnMileage %></span></td>
        </tr>
        <tr>
            <td>
                <span style="font-size:90%;">Make</span></td>
            <td>
                <span style="font-size:90%;"><%= trim(curvan.make) %></span></td>
            <td>
                &nbsp;</td>
            <td>
                <span style="font-size:90%;">VIN</span></td>
            <td>
                <span style="font-size:90%;"><%= trim(curvan.vh_vin) %></span></td>
        </tr>
        <tr>
            <td>
                <span style="font-size:90%;">Model</span></td>
            <td>
                <span style="font-size:90%;"><%= trim(curvan.model) %></span></td>
            <td>
                &nbsp;</td>
            <td>
                <span style="font-size:90%;">Lic #</span></td>
            <td>
                <span style="font-size:90%;"><%= trim(curvan.vh_licno) %></span></td>
        </tr>
        <tr>
            <td>
                <span style="font-size:90%;">Year</span></td>
            <td>
                <span style="font-size:90%;"><%= transform(curvan.vh_year) %></span></td>
            <td>
                &nbsp;</td>
            <td>
                <span style="font-size:90%;">Lic State</span></td>
            <td>
                <span style="font-size:90%;"><%= curvan.vh_licst %></span></td>
        </tr>
    </tbody>
</table>
</body>

Tip: WebViews and WebViewWidgets aren't used exclusively to build a web App. They are only one of the Visual elements of the UI. You build an App up out of pages; Build pages out of sections, of which WebViews are only one of the section types available.

**HankFay** · 2013-04-14, 21:13

So, the code that Hank shared can be be written like this (as the page processor does all the work for you):

Yes, good point. Getting rid of the textmerge() eliminates the need to process long memory strings with a relatively expensive textmerge.

The major difference is that I create rsp pages in the CKEditor, which suits my relative lack of visualization ability (bottom 10%) vs. yours (appears to be top 10%). But I can strtran() from the source back to <%= and %> and then let the page processor handle the data part. Thanks for the tip!

Hank

Thread: Introduction to RSP for the VFP developer

Thread Tools

Search Thread

Display

Introduction to RSP for the VFP developer

Bookmarks

Bookmarks

Posting Permissions

Journey into the Cloud

Join us