WebView custom Gadget [examples]

<%@ Language=VFP %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
</head>
<%
timeofday()
if len(database())=0
	open database southwind
endif
 
// get the column descriptions
use example in 0 current
astore(afieldList, fldlist(), ',')
declare afieldDesc[ fldcount() ]
adesc(afieldDesc)
use
 
// perform the query
tmpfile = sys(2015)	
select * from example order by state save as [&tmpfile]
use [&tmpfile] in 0 current
declare afieldList[ fldcount() ]
 
// declare some special symbols (html uses ampersand so do we)	
amp = chr(38) 
nbsp = amp + "nbsp;"  
 
// generate the html output
? ('<table width="100%" height="100%" cellpadding="5" cellspacing="0" bgcolor="white" border=0px>') 
? ('<tr bgcolor="gray">')
? ('<td align="center" colspan="&(fldcount())">')
? ('</td>')
? ('</tr>')  
 
// display column headings
? ('<tr bgcolor="#eaeaea">')
	for j=1 to fldcount()
		? ('<td halign=center valign=top>')
		? ('<b><font color="gray">' + afieldDesc[j] + '</font></b>')
		? ('</td>')
    next
? ('</tr>') 
? ('<tr bgcolor="darkgray" height="1px">' + replicate('<td></td>', fldcount()) + '</tr>')
 
// group subtotals by the STATE field 
last_state = state 
declare subtotals[3]
subtotals[1] = 0.0  	// limit
subtotals[2] = 0.0	// balance
subtotals[3] = 0.0	// available
m_limit = 0.0
m_balance = 0.0
m_available = 0.0 
 
// scan through the records generating the table rows and columns
goto top
 
// for all records...	   
for i=1 to reccount()+2
	if mod(i,2) = 0
    	rowcolor = "#f9f9f9"
    	altcolor = "#FFFFFF"
	else
		rowcolor = "#FFFFFF"        	
		altcolor = "#f9f9f9"
    endif
 
	// check for subtotal break
	if (state != last_state and i > 1) or (i > reccount())
		? ('<tr bgcolor="lightgray" height="1px">' + replicate('<td></td>', fldcount()) + '</tr>')
 
		// display subtotals
		? ('<tr bgcolor="#f5f5f5" color="gray">')
 
		if i <= reccount()+1
			? ('<td colspan="3" halign=left><b><font color="gray">Sub-total for state: ' + last_state + '</font></b>')
			? (replicate('<td>&(nbsp)</td>', 5))
		elseif i = reccount()+2
			? ('<td color="gray" halign=left><b>Totals:</b>')
			? (replicate('<td>&(nbsp)</td>', 7))
        endif
 
		? ('<td align=right>')
        tmpfld = currency(subtotals[1])
        fld = 'tmpfld'
		? ('<b><font color="gray">' + etos(&fld)+'&(nbsp)&(nbsp)' + '</font><b>')
		? ('</td>')
 
		? ('<td align=right>')
        tmpfld = currency(subtotals[2])
        fld = 'tmpfld'
		? ('<b><font color="gray">' + etos(&fld)+'&(nbsp)&(nbsp)' + '</font><b>')
		? ('</td>')
 
		? ('<td align=right>')
        tmpfld = currency(subtotals[3])
        fld = 'tmpfld'
		? ('<b><font color="gray">' + etos(&fld)+'&(nbsp)&(nbsp)' + '</font><b>')
		? ('</td>') 
		? (replicate('<td>&(nbsp)</td>', 1))
 
		? ('</tr>')
 
		? ('<tr bgcolor="white" height="1px">' + replicate('<td></td>', fldcount()) + '</tr>')
		if i > reccount()+1
			? ('<tr bgcolor="white" height="1px">' + replicate('<td></td>', fldcount()) + '</tr>')
			? ('<tr bgcolor="black" height="1px">' + replicate('<td></td>', fldcount()) + '</tr>')
        endif
 
		? ('<tr colspan="&(fldcount())" bgcolor="&altcolor">')
		? (replicate('<td>&(nbsp)</td>', fldcount()))
		? ('</tr>') 
 
		if i = reccount()+1			
		    subtotals[1] = m_limit  		// limit
		    subtotals[2] = m_balance		// balance
		    subtotals[3] = m_available		// available
        	loop
        endif
 
	    subtotals[1] = 0.0  	// limit
	    subtotals[2] = 0.0		// balance
	    subtotals[3] = 0.0		// available
 
		if i > reccount()+1
        	exit
        endif
    endif
 
	// save subtotal values       	
   	last_state = state 
   	subtotals[1] = subtotals[1] + limit
   	subtotals[2] = subtotals[2] + balance
   	subtotals[3] = subtotals[3] + available 
   	m_limit  = m_limit + limit
   	m_balance = m_balance + balance
   	m_available = m_available + available
 
	// for all columns...
	? ('<tr bgcolor="&rowcolor">')
	for j=1 to fldcount()
		fld = afieldlist(j)
		if (upper(fld) = 'LIMIT' or upper(fld) = 'BALANCE' or upper(fld) = 'AVAILABLE')
        	tmpfld = currency(&fld)
        	fld = 'tmpfld'
			? ('<td valign=top align=right>')
		else            	
			? ('<td valign=top align=left>')
        endif
		? (etos(&fld)+"&(nbsp)&(nbsp)")
		? ('</td>')
    next   
 
	? ('</tr>')
	skip
next  
 
? ('</table>')
? ('** End of report elapsed time '+timeofday(4)+' seconds **')
erase '&tmpfile..dbf'
erase '&tmpfile..dbt'  
%>
</body>
</html>

https://www.lianja.com/doc/index.php/Example_webview_gadget_rsp_script


PHP:

// Lianja PHP WebView
//
echo '<html>';
echo '<head>';
echo '<style>';
echo '.tablecaption { background: gray; font-weight: bold; color: white; height:26px; }';
echo '.smallfont { font-size:small; }';
echo 'body { padding: 0px; margin: 0px; border: 1px solid lightgray; border-top: 1px solid white;}';
echo '</style>';
echo '</head>';
echo '<body>'; 
 
// open the southwind database
$db = Lianja::openDatabase("southwind");
 
// Open a recordset
$rs = $db->openRecordSet("select * from example"); 
 
// main table
echo '<table cellpadding="5">'; 
echo '<caption class="tablecaption">Example PHP Report</caption>';
 
// print table headings 
$rs->movefirst(); 
 
echo '<tr bgcolor="lightgray" class="smallfont">';
for ($j=0; $j<$rs->fcount(); ++$j) 
{
	echo '<th><font color="white">' . $rs->fields($j)->name . '</font></th>';
}
echo "</tr>";
 
 
// Traverse the recordset and write the output into the Webview section.
for ($i=0; $i<$rs->reccount(); ++$i)
{
	if (($i%2) == 0)
	{
    	$rowcolor = "#f1f6fe";
    	$altcolor = "#FFFFFF";
	}
	else
	{
		$rowcolor = "#FFFFFF";        	
		$altcolor = "#f1f6fe";
	}
 	echo '<tr bgcolor="' . $rowcolor . '" color="darkgray" class="smallfont" valign="top">';
	for ($j=0; $j<$rs->fcount(); ++$j)
	{
		$name = $rs->fields($j)->name;
		$value = $rs->fields($j)->value;
		if (in_array($name, array('LIMIT', 'AVAILABLE', 'BALANCE')))
		{
			echo '<td align="right">$' . sprintf("%-8.2f", $value) . '</td>';
		}
		else
		{
			echo '<td>' . $value . '</td>';
		}
	}
	echo '</tr>';
	$rs->movenext(); 
}
 
// end of table
echo '</table>';
 
 
// Close the recordset	
$rs->close(); 
 
// end of report
echo '<hr />Report complete at <b>' . date("r", time()) . '</b>'; 
 
// Close off HTML tags
echo '</body>';
echo '</html>';

Python:

#
# Lianja Custom Python WebView
#
#
import Lianja
import time
 
# The output of the "print" command will be redirected into the WebView.
print "<html>"
print "<head>"
print "<style>"
print ".tablecaption { background: gray; font-weight: bold; color: white; \
  height:26px; }"
print ".smallfont { font-size:small; }"
print "body { padding: 0px; margin: 0px; border: 1px solid lightgray; \
  border-top: 1px solid white;}"
print "</style>"
print "</head>"
print "<body>"
 
# open a database
db = Lianja.openDatabase("southwind") 
 
# open a recordset
rs = db.openRecordSet("select * from example")
 
# main table
print "<table cellpadding=\"5\">"
print "<caption class=\"tablecaption\">Example Python Report</caption>"
 
# column headings
rs.movefirst()
print "<tr bgcolor=\"lightgray\" class=\"smallfont\">"
for j in range( rs.fcount() ):
	print "<th><font color=\"white\">" + rs.fields(j).name + "</font></th>"
print "</tr>"
 
# Traverse the recordset and write the output into the Webview section.
for i in range( rs.reccount() ):
	if ((i%2) == 0):
		rowcolor = "#f1f6fe"
		altcolor = "#FFFFFF"
	else:
		rowcolor = "#FFFFFF"       	
		altcolor = "#f1f6fe"
 	print "<tr bgcolor=\"" + rowcolor + "\" color=\"darkgray\" class=\"smallfont\" valign=top>"
	for j in range( rs.fcount() ):
		if rs.fields(j).name in [ "LIMIT", "BALANCE", "AVAILABLE" ]:
			print "<td align=right>$%.2f</td>" % rs.fields(j).value
		else:
			print "<td>%s</td>" % rs.fields(j).value
	print "</tr>"
	rs.movenext()
 
# end of table
print "</table>"
 
# Close the RecordSet	
rs.close() 
 
# End of report
print "<hr>Report complete at <b>" + time.asctime() + "</b>" 
 
# Close off HTML tags
print "</body>"
print "</html>"

https://www.lianja.com/doc/index.php/Example_webview_gadget_Python_script


JS:

<%@ Language=JavaScript %>
<html>
<head>
<style>
.tablecaption { background: gray; font-weight: bold; color: white; height:26px; }
.smallfont { font-size:small; }
body { padding: 0px; margin: 0px; border: 1px solid lightgray; border-top: 1px solid white;}
</style>
</head>
<body>
<%
db = Lianja.openDatabase("southwind");
 
// Open a recordset
rs = db.openRecordSet("select * from example");
 
// main table
print("<table cellpadding=\"5\">"); 
print("<caption class=\"tablecaption\">Example JavaScript Report</caption>");
 
// print table headings 
rs.moveFirst(); 
print("<tr bgcolor=\"lightgray\" class=\"smallfont\">");
for (j=0; j < rs.fieldcount; ++j)
{
	print("<th><font color=\"white\">" + rs.fields(j).name + "</font></th>");
}
print("</tr>");
 
// Traverse the recordset and write the output into the Webview section.
for (i=0; i < rs.reccount; ++i)
{
	if ((i%2) == 0)
	{
    	rowcolor = "#f1f6fe";
    	altcolor = "#FFFFFF";
	}
	else
	{
		rowcolor = "#FFFFFF";        	
		altcolor = "#f1f6fe";
	}
 	print("<tr bgcolor=\"" + rowcolor + "\" color=\"darkgray\" class=\"smallfont\" valign=top>");
	for (j=0; j < rs.fieldcount; ++j)
	{
		name = rs.fields(j).name;
		value = rs.fields(j).value;
		if (['LIMIT', 'AVAILABLE', 'BALANCE'].indexOf(name) >= 0)
		{
			print("<td align=right>$" + value.toFixed(2) + "</td>");
		}
		else
		{
			print("<td>" + value + "</td>");
		}
	}
	print("</tr>");
	rs.moveNext(); 
}
 
// end of table
print("</table>");
 
// Close the recordset	
rs.close(); 
 
// end of report
print("<hr>Report complete at <b>" + new Date() + "</b>"); 
%>
</body>
</html>

Gadget [examples]

 

// to set the value of an Attribute

Lianja.get("pageid.sectionid.fieldid").setAttribute("caption","Formitem1")

Note: on the desktop, the shortened form setAttr(name,value) is also available.

// to get the value of an Attribute

cTitle = Lianja.get("pageid.sectionid.fieldid").getAttribute("caption")

Note: on the desktop, the shortened form getAttr(name) is also available.

https://www.lianja.com/doc/index.php/Chart_Gadget_Attributes


 

Custom gadget [examples]

Custom Gadgets are built using the Lianja UI Framework. When building a Custom Gadget you should subclass the Gadget class.

gadgets_vfp2

//
// Lianja custom gadget for page "page1" section "section1" gadget "gadget1"
//
//---------------------------------------------------------------------------
// Declare a namespace
namespace customgadget
 
//---------------------------------------------------------------------------
// When a namespace is active, public variables are added to the namespace
public improper, proper
 
//---------------------------------------------------------------------------
// Subclass a commandbutton so that we can define the Click event procedure
define class ProperButton as CommandButton
    proc click()
        proper.text = proper(improper.text)
    endproc
enddefine
//---------------------------------------------------------------------------
// Define the main procedure to create the gadget and return it to Lianja
// Note that this MUST be the same name as the file in which it is contained
proc gadget1
    gadget1 = createobject("Gadget") 
    gadget1.addobject("dowhat", "Label")
    gadget1.addobject("improper", "Textbox")
    gadget1.addobject("proper", "Label")
    gadget1.addobject("proper_button", "ProperButton")
    dowhat.text = "Text to convert to proper case:"
    proper_button.caption = "Convert to proper case"
return gadget1

 

gadgets3

Modifying the properties of the objects we have added to the Gadget allows us to alter their appearance. This includes the stylesheet property, which can be assigned a text string containing CSS settings or the name of a CSS file

proc gadget1
    gadget1 = createobject("Gadget") 
    gadget1.addobject("dowhat", "Label")
    gadget1.addobject("improper", "Textbox")
    gadget1.addobject("proper", "Label")
    gadget1.addobject("proper_button", "ProperButton")
    dowhat.text = "Text to convert to proper case:"
    proper_button.caption = "Convert to proper case"
    dowhat.stylesheet = "color: white; background-color: orange; border: ";
	  + "2px groove black; border-radius: 10px; opacity: 1; padding: 2px 4px"
    dowhat.alignment = 2
    dowhat.borderstyle = 1
    improper.fixedheight = 50
    improper.stylesheet = "app:/textbox.css"
    proper.fixedheight = 50
    proper.stylesheet = "color: black; background-color: white; border: ";
	  + "2px groove gray; border-radius: 10px; opacity: 1; padding: 2px 4px"
    proper_button.fixedheight = 50
    proper_button.fontsize = 14
    proper_button.stylesheet = "app:/button.css"
return gadget1

https://www.lianja.com/doc/index.php/Developing_Lianja_Custom_Gadgets_in_Visual_FoxPro


PHP:

Custom Gadget which consists of a Textbox for data entry, Labels for textual display and a CommandButton which causes the case of the data entered to be changed when it is clicked.

gadgets_php2

//
// Lianja custom gadget for page "page1" section "section1" gadget "gadget4"
//
//--------------------------------------------------------------------------
// To access outer variables from within class methods you must declare them
// global and then specify global again within the class method
global $uppertext;
global $lowertext;
//--------------------------------------------------------------------------
// Define the class we need to handle the CommandButton Click() event
class LowButton extends Lianja
{
    function __construct()
    {
        parent::__construct("CommandButton");
    }
 
    function click()
    {
        global $uppertext;
        global $lowertext;
        $upstring = $uppertext->text;
        $lowertext->text = strtolower($upstring);
    }
}
//--------------------------------------------------------------------------
// Create the gadget and add controls
$gadget4 = Lianja::createObject("Gadget");
$gadget4->addobject("how", "Label");
$gadget4->addobject("uppertext", "Textbox");
$gadget4->addobject("lowertext", "Label");
$gadget4->addobject("lowbutton", "LowButton");
$how->text="Text to convert to lower case:";
$lowbutton->caption="Convert to lower case";
//--------------------------------------------------------------------------
// Return the gadget back to Lianja
$returnvalue = $gadget4;

gadgets4

Modifying the properties of the objects we have added to the Gadget allows us to alter their appearance. This includes the stylesheet property, which can be assigned a text string containing CSS settings or the name of a CSS file. For example:

$how->stylesheet = "color: white; background-color: orange; border: 
	2px groove black; border-radius: 10px; opacity: 1; padding: 2px 4px";
$how->alignment = 2;
$how->borderstyle = 1;
$uppertext->fixedheight = 50;
$uppertext->stylesheet = "app:/textbox.css";
$lowertext->fixedheight = 50;
$lowertext->stylesheet = "color: black; background-color: white; border: 
	2px groove gray; border-radius: 10px; opacity: 1; padding: 2px 4px";
$lowbutton->fixedheight = 50;
$lowbutton->fontsize = 14;
$lowbutton->stylesheet = "app:/button.css";

Python:

Custom Gadget which consists of a Textbox for data entry, Labels for textual display and a CommandButton which causes the case of the data entered to be changed when it is clicked.

gadgets_py2

#
# Lianja custom gadget for page "page1" section "section1" gadget "gadget3"
#
#---------------------------------------------------------------------------
import Lianja
#---------------------------------------------------------------------------
# Define the class we need to handle the button click event
class SwapButton(Lianja.Commandbutton):      
    def click(self):
    	str = starttext.text
    	swapped.text = str.swapcase()
#---------------------------------------------------------------------------
# Create the gadget and add in the controls
gadget3 = Lianja.createObject("gadget3", "Gadget")
gadget3.addobject("instructions", "Label")
gadget3.addobject("starttext", "Textbox")
gadget3.addobject("swapped", "Label")
gadget3.addobject("swapbutton", "SwapButton")
instructions.text = "Text to swap case:"
swapbutton.caption = "Swap case"
#---------------------------------------------------------------------------
# Return the gadget to Lianja
returnvalue = gadget3

Modifying the properties of the objects we have added to the Gadget allows us to alter their appearance. This includes the stylesheet property, which can be assigned a text string containing CSS settings or the name of a CSS file. For example:

gadgets31

instructions.stylesheet = "color: white; background-color: orange; \
border: 2px groove black; border-radius: 10px; opacity: 1; padding: 2px 4px"
instructions.alignment = 2
instructions.borderstyle = 1
swapbutton.fixedheight = 50
swapbutton.fontsize = 14
swapbutton.stylesheet = "app:/button.css"
starttext.fixedheight = 50
starttext.stylesheet = "app:/textbox.css"
swapped.fixedheight = 50
swapped.stylesheet = "color: black; background-color: white; \
border: 2px groove gray; border-radius: 10px; opacity: 1; padding: 2px 4px"

https://www.lianja.com/doc/index.php/Developing_Lianja_Custom_Gadgets_in_Python


JS:

Custom Gadget which consists of a Textbox for data entry, Labels for textual display and a CommandButton which causes the case of the data entered to be changed when it is clicked.

gadgets_js2

//
// Lianja custom gadget for page "page1" section "section1" gadget "gadget2"
// 
//-------------------------------------------------------------------------- 
// Create the gadget object and add controls
gadget2 = createobject("gadget2","gadget"); 
gadget2.addobject("howto", "label");
gadget2.addobject("lowertext", "textbox");
gadget2.addobject("converted", "label");
gadget2.addobject("upbutton", "commandbutton");
howto.text = "Text to convert to upper case:";
upbutton.caption = "Convert to upper case";
 
//-------------------------------------------------------------------------- 
// Handle the button click() event
upbutton.click = function()
{
    lowstring = lowertext.text;
    converted.text = lowstring.toUpperCase();
};
 
//-------------------------------------------------------------------------- 
// Return the gadget back to Lianja
returnvalue = gadget2;

Modifying the properties of the objects we have added to the Gadget allows us to alter their appearance. This includes the stylesheet property, which can be assigned a text string containing CSS settings or the name of a CSS file. For example:

gadgets41

howto.stylesheet = "color: white; background-color: orange; border: " +
	"2px groove black; border-radius: 10px; opacity: 1; padding: 2px 4px";
howto.alignment = 2;
howto.borderstyle = 1;
lowertext.fixedheight = 50;
lowertext.stylesheet = "app:/textbox.css";
converted.fixedheight = 50;
converted.stylesheet = "color: black; background-color: white; border: " +
	"2px groove gray; border-radius: 10px; opacity: 1; padding: 2px 4px";
upbutton.fixedheight = 50;
upbutton.fontsize = 14;
upbutton.stylesheet = "app:/button.css";

https://www.lianja.com/doc/index.php/Developing_Lianja_Custom_Gadgets_in_JavaScript


 

Gadget

Q:

I’ve a Form Section, with a Grid Gadget.

If I try to set:
oGridGadget = lianja.get(“mypage.section.gridgadget”)
oGridGadget.clear()
oGridGadget.setattr(“controlSource”, “filterricerca”)
I get the error:
gio ott 6 10:10:16 2016
**** Lianja error ****
USE “filterricerca” IN 0
^
File ‘filterricerca.dbf’ does not exist

where filterricerca is a cursor:
create cursor filterricerca (&cursorField)
select filterricerca
append blank

Is possible to use a cursor as a datasource of a Grid Gadget?

A:

No, it expects a table name.

A2:

I believe you can also use temp tables (at least that how I understand them) instead of a cursor.

If you select into a table that has a name that starts with an underscore, it is not part of the database.
select * from a into _temp1.

You can create a temporary table that is not in the database.

I know of two ways.

1. Create table c:\tempfabio free(Firstname Char(10), Id int)

By using the word free, it keeps it standalone.

2. use a table that starts with an underscore.

Select * from masterfabio into table _tempfabio


 

Gadget

Q:
in a standard section, I’ve iserted a simple VFP Gadget, with 2 label and 2 textbox.
When I load the page, the gadget is correctly populated.
When I skip records of section, how I can refresh the gadget object?
A:
A custom gadget should have a refresh method which is called when required.
It’s a method in the gadget object.
Declare public variables and assign the objects. These public variables should be in a namespace if you edited the custom gadget through the UI.
a page with 2 section:

in the seconds section I’ve inserted a VFP Gadget:
on the “Custom filename”: gadget2.prg

Code:
//
// Lianja custom recital gadget "gadget2"
//
namespace martinelli_articoli 
        public des_web, testo_web
       
define class gadget2 as gadget
        proc init()
                // place your section "init" code here
        endproc

        proc add()
                // place your section "add" code here
        endproc

        proc delete()
                // place your "delete" code here
        endproc

        proc first()
                // place your goto "top" here
        endproc

        proc previous()
                // place your move "previous" code here
        endproc

        proc next()
                // place your move "next" code here
        endproc

        proc last()
                // place your goto "bottom" code here
        endproc

        proc watch()
                // place your "watch" code here
        endproc

        proc refresh()
                // place your "refresh" code here
                des_web.text = Q_RemoveHTMLTag(ARTICOLI.DES_WEB)
                testo_web.text = Q_RemoveHTMLTag(ARTICOLI.TESTO_WEB)           
        endproc
enddefine

proc gadget2 
        gadget2 = createobject("gadget2")

        gadget2.addobject("lbl_desweb", "Label")
        lbl_desweb.caption = "Descrizione WEB"

        gadget2.addobject("des_web", "Textbox") 
        des_web.text = Q_RemoveHTMLTag(ARTICOLI.DES_WEB)
       
        gadget2.addobject("lbl_testoweb", "Label")
        lbl_testoweb.caption = "Testo WEB"
        gadget2.addobject("testo_web", "Textbox") 
        testo_web.text = Q_RemoveHTMLTag(ARTICOLI.TESTO_WEB)
                 
        // 
return gadget2

The grid gadget example
grid Gadget Example Lianja – https://youtu.be/a0v3GYwO3h8


Q:
Actionbar. How to hide it in the grid gadget?


A:
.actionbar =.f.



 

Gadget

Q: 
Which delegate of the Custom section should I put the AddObject() method?
A:
There is no delegate involved in creating a custom gadget. Hover the mouse over the gadget header and click the keyboard icon. You will then be in the script editor for that custom gadget. That is where you create your custom gadget UI.