CapeSoft.Com
Clarion Accessories
NetTalk
Doc Index
WebServer Tasks
CapeSoft Logo

CapeSoft NetTalk
WebServer Common Tasks

Download Latest Version
Installed Version Latest Version

NetTalk WebServer - Tasks

Introduction

The goal of this document is to describe specific tasks that you may need to do, where those tasks don't fall easily into any of the other documents.

Convert a WebServer from Frames to Pages

As described in the other documentation, it is possible to build your web application based on a Frames approach, or a Page approach. The Frames approach has the advantage of being faster in some cases, because less html is required as you move around the application, however it also has the disadvantage of not being very suitable when browsing with a small screen (such as a phone). With the improvements in CSS support, and overall template support, it is desirable in some cases to change the application from using Frames, to one using pages. Fortunately this change is straight-forward, and doesn't not involve much work in the application.

This section will describe the process, by converting example Accounts (31) to example Books (71). Since your application may be slightly different to the example you may, or may not, need to perform all these steps in your own app.

Menu Procedure / Header

  1. Rename the menu page (MenuOnLeft) procedure to PageHeaderTag. Change the template type of this new PageHeaderTag procedure from NetWebPage to NetWebSource. Tick on the option This is a HEADER, and clear the CSS setting. Tick on the Declare Globally option.
  2. Remove the Target Frame setting from all the menu options. They are likely set to something like 'right_fram' - and this needs to be removed. (Targets set to '_blank' should be left alone.) Check any other procedures you may have that set the Target Frame as well, specifically check your Login procedure if you have one. In the Accounts example the IndexPage buttons all point to '_self_' which can also be removed. You may also find references to the target in the xHtml in the  FrameHeader and FrameFooter procedures.

  3. Copy and Paste the xHtml from the FrameHeader procedure into the PageHeaderTag procedure. In the Frame version of the application the header and menu procedures are separate, but in the page based application they are combined.

  4. Go to the Menu extension, CSS tab, TaskPanel tab, set Menu Div to 'nt-left'. This causes the TaskPanel menu to float to the left hand side of the window, and the browses and forms etc to appear to the right of it.

  5. On the menu extension, CSS tab, make sure the option to Wrap Menu in Table is off.

  6. Tip: If you have other xHTML embedded in the PageHeaderTag, make sure that each xHtml entry has a Location set.

Footer Procedure

  1. If your frame app has a footer, and the footer is in its own frame, then rename the FrameFooter procedure to PageFooterTag, and change it from a NetWebPage to a NetWebSource.
  2. Make sure your footer procedure has the option This is a FOOTER on, and clear the CSS class setting. Tick on the Declare Globally option.

IndexPage

The IndexPage is the first procedure the user will see when they go to your site. This is usually a NetWebSource procedure, but it could also be a NetWebForm, NetWebBrowse, or indeed even a static page on the disk. You can inspect your FrameSet procedure to see what is currently being used as the default in the "main" frame. This is usually the starting point for the Index page.

In the Accounts example the starting page is a NetWebForm, so there is nothing to do.

However if your starting page is a NetWebPage then you will need to add the tags;
<!-- Net:PageHeaderTag --> and <!-- Net:PageFooterTag --> to the xHtml.

If your starting page is a static html page in the web folder, then you will need to add <!-- Net:PageHeaderTag --> and <!-- Net:PageFooterTag -->  to the appropriate places in the page, and make sure the page has <!-- NetWebServer --> on the first line.

Whatever the name of this first procedure, that is the name you must set in the WebServer procedure, in the Default Page setting.

WebServer Procedure

  1. In the WebServer procedure, Set the Generic Page Header Tag and Generic Page Footer Tag to '<!-- Net:PageHeaderTag -->' and '<!-- Net:PageFooterTag -->' respectively.
  2. Change the Default Page option to match the name of the site's IndexPage.
  3. Change the Form Div default style to 'nt-left'

Convert a Signature into a Bitmap

Signatures can be added to the form to allow the user to enter a free-form signature using a mouse, or (more usefully) a touch-screen with a stylus or finger. The image data as sent from the browser is a vector format. To convert the image vector format to another format a small procedure in your application is used. Note that the vector format may be extended from time to time, so it is important to keep this procedure up to date. (Changes will be announced in the Version History, and will point to this article.)

Vector Format


The vector data takes one of the following forms;

Z{XnYnWnHn-XnYnWnHn-...-XnYnWnHn}

or

Y{XnYnWnHn~XnYnWnHn~...~XnYnWnHn}
where n is a numeric number, and ... represents an unknown number of nodes. All other characters are as written.
  1. The first character in the format determines which format is being used
  2. The complete data is wrapped in { and } characters - which allows the developer to note when the data has been truncated.
  3. The drawing is represented as a variable number of nodes, each node consisting of a starting X and Y position, and an ending X and Y position (stored in W and H respectively). Connecting these nodes together effectively forms the signature.
  4. The Z format uses - as the point separator, the Y format uses ~ as the point separator. This allows the Y format to support negative X, Y, W and H values.

Sample Conversion Code

There are many ways to create images in Clarion - the exact code will vary depending on the method you choose to use. However the following annotated sample code should help regardless of the method you prefer. This example makes use of Draw and StringTheory to simplify the code required.

SigToImage PROCEDURE (String pSig, Long pWidth, Long pHeight, String pFileName)
drw        Draw
Window     WINDOW('Caption'),AT(,,200,60),GRAY
               IMAGE,AT(0,0,200,60),USE(?Draw)
           END
st         StringTheory
liner      StringTheory
ln         Long
x          Long
y          Long
w          Long
h          Long

CODE
  ! Draw will construct the image into a Clarion Image control, then save that image as a file.
  ! So start by opening a window (hidden), and setting the appropriate sized
  OPEN(window)
  window{prop:pixels} = 1
  window{prop:width} = pWidth
  window{prop:height} = pHeight
  ?Draw{prop:width} = pWidth
  ?Draw{prop:height} = pHeight
  drw.Init(?Draw)                  ! Initialize the Draw object.
  st.SetValue(pSig)                ! Copy the vector format into the StringTheory object
  IF st.Sub(1,1) = 'Z'             ! Z format, uses a - separator
    st.Remove('Z[{{')              ! remove the header part
    st.Split('-')                  ! and split the format into nodes, using the - separator.
  ELSIF st.Sub(1,1) = 'Y'          ! Y format, uses a ~ separator
    st.Remove('Y[{{')              ! remove the header part
    st.Split('~')                  ! and split the format into nodes using the ~ separator
  END
  drw.Blank(color:white)           ! put the signature on a White background
  drw.SetPenColor(color:black)     ! and write the signature in Black
  drw.SetPenWidth(1)               ! use a narrow line for the drawing.  
  LOOP ln = 1 TO st.Records()      ! Loop through all the nodes
     liner.SetValue(st.GetLine(ln)) ! Move a single node into the liner object for further parsing.
    x = liner.Between('X','Y')     ! parse out the X number
    y = liner.Between('Y','W')     ! parse out the Y number
    w = liner.Between('W','H') - x ! parse the ending X position, and subtract X to get the width
    h = liner.After('H') - y       ! parse the ending Y position, and subtract Y to get the height
    drw.Line(x,y,w,h)              ! draw the vector in the Bitmap using the Draw method.
  END
  drw.Display()                    ! Push the completed draw image into the clarion image control
  drw.WriteBMP(pFileName)          ! Save the image to disk as a bitmap.
  drw.Kill()                      
  CLOSE(window)                   




[End of this document]
Return to NetTalk Documentation Index