Difference between revisions of "Using WebViewWidgets"
Yvonne.milne (Talk | contribs) (→Gallery View) |
Yvonne.milne (Talk | contribs) |
||
Line 1: | Line 1: | ||
''Under Construction'' | ''Under Construction'' | ||
− | To keep coding (NoCode) to a minimum there are many built-in WebViewWidgets that can be used with Lianja.showDialogPanel(), Lianja.showDialog() or as the URL in a WebView section or in a custom WebView object created with createObject( | + | To keep coding (NoCode) to a minimum there are many built-in WebViewWidgets that can be used with Lianja.showDialogPanel(), Lianja.showDialog() or as the URL in a WebView section or in a custom WebView object created with createObject("webview"). |
Becoming familiar with these will speed up your development so its worth spending time to get to know them. You can study the code behind these to build your own custom WebViewWidgets. | Becoming familiar with these will speed up your development so its worth spending time to get to know them. You can study the code behind these to build your own custom WebViewWidgets. | ||
Line 51: | Line 51: | ||
"CUSTOMER LIST", | "CUSTOMER LIST", | ||
"lib:/datalistview.rsp?database=southwind&table=customers&columns=customerid," + | "lib:/datalistview.rsp?database=southwind&table=customers&columns=customerid," + | ||
− | +"companyname&hyperlink=companyname§ionid=customers. | + | +"companyname&hyperlink=companyname§ionid=customers.section1"); |
</code> | </code> | ||
− | + | [[File:wvw-1.png|middle|768px|link={{filepath: wvw-1.png}}]] | |
<code lang="javascript"> | <code lang="javascript"> | ||
Line 60: | Line 60: | ||
"CUSTOMER LIST", | "CUSTOMER LIST", | ||
"lib:/datalistview.rsp?database=southwind&table=customers&columns=customerid," | "lib:/datalistview.rsp?database=southwind&table=customers&columns=customerid," | ||
− | + "companyname&hyperlink=companyname§ionid=customers. | + | + "companyname&hyperlink=companyname§ionid=customers.section1", 0, 0, true); |
</code> | </code> | ||
[[File:wvw-2.png|middle|768px|link={{filepath: wvw-2.png}}]] | [[File:wvw-2.png|middle|768px|link={{filepath: wvw-2.png}}]] | ||
− | + | ||
==PDF Document View== | ==PDF Document View== | ||
Line 86: | Line 86: | ||
</code> | </code> | ||
− | + | [[File:wvw-3.png|middle|768px|link={{filepath: wvw-3.png}}]] | |
<code lang="javascript"> | <code lang="javascript"> | ||
Line 92: | Line 92: | ||
</code> | </code> | ||
− | [[File:wvw-4.png|middle|768px|link={{filepath: wvw-4.png}}]] | + | [[File:wvw-4.png|middle|768px|link={{filepath: wvw-4.png}}]] |
==Google Chart View== | ==Google Chart View== | ||
Line 126: | Line 126: | ||
</code> | </code> | ||
− | + | [[File:wvw-5.png|middle|768px|link={{filepath:wvw-5.png}}]] | |
<code lang="javascript"> | <code lang="javascript"> | ||
− | Lianja.showDialogPanel("GOOGLE CHART","lib:/googlechart. | + | Lianja.showDialogPanel("GOOGLE CHART","lib:/googlechart.rsp", 0, 0, true); |
</code> | </code> | ||
− | + | [[File:wvw_6.png|middle|768px|link={{filepath:wvw-6.png}}]] | |
==Tree View== | ==Tree View== | ||
Line 194: | Line 194: | ||
</code> | </code> | ||
− | + | [[File:wvw-7.png|middle|768px|link={{filepath: wvw-7.png}}]] | |
<code lang="javascript"> | <code lang="javascript"> | ||
− | Lianja.showDialog("TREE VIEW","lib:/treeview. | + | Lianja.showDialog("TREE VIEW","lib:/treeview.rsp", 0, 0, true); |
</code> | </code> | ||
− | + | [[File:wvw-8.png|middle|768px|link={{filepath: wvw-8.png}}]] | |
==Google Map View== | ==Google Map View== | ||
Line 221: | Line 221: | ||
</code> | </code> | ||
− | + | [[File:wvw-9.png|middle|768px|link={{filepath:wvw-9.png}}]] | |
<code lang="javascript"> | <code lang="javascript"> | ||
− | Lianja.showDialog("CUSTOMER | + | Lianja.showDialog("CUSTOMER LOCATION","lib:/googlemap.rsp",0,0,true); |
</code> | </code> | ||
− | + | [[File:wvw-10.png|middle|768px|link={{filepath:wvw-10.png}}]] | |
==OrgChart View== | ==OrgChart View== | ||
Line 264: | Line 264: | ||
| caption | | caption | ||
| | | | ||
− | | base64_encode( | + | | base64_encode("title") |
|- | |- | ||
| description | | description | ||
Line 321: | Line 321: | ||
</code> | </code> | ||
− | + | [[File:wvw-11.png|middle|768px|link={{filepath: wvw-11.png}}]] | |
==Catalog View== | ==Catalog View== | ||
Line 475: | Line 475: | ||
</code> | </code> | ||
− | + | [[File:wvw-12.png|middle|768px|link={{filepath: wvw-12.png}}]] | |
<code lang="javascript"> | <code lang="javascript"> | ||
Line 481: | Line 481: | ||
</code> | </code> | ||
− | + | [[File:wvw-13.png|middle|768px|link={{filepath: wvw-13.png}}]] | |
==Report View== | ==Report View== | ||
Line 552: | Line 552: | ||
<code lang="javascript"> | <code lang="javascript"> | ||
− | Lianja.showDialogPanel("REPORT VIEW","lib:/report. | + | Lianja.showDialogPanel("REPORT VIEW","lib:/report.rsp", "65%") |
</code> | </code> | ||
− | + | [[File:wvw-14.png|middle|768px|link={{filepath: wvw-14.png}}]] | |
<code lang="javascript"> | <code lang="javascript"> | ||
Line 561: | Line 561: | ||
</code> | </code> | ||
− | + | [[File:wvw-15.png|middle|768px|link={{filepath: wvw-15.png}}]] | |
==Gallery View== | ==Gallery View== | ||
Line 631: | Line 631: | ||
Lianja.showDialog("GALLERY VIEW","lib:/galleryview.rsp",1000,600,true);</code> | Lianja.showDialog("GALLERY VIEW","lib:/galleryview.rsp",1000,600,true);</code> | ||
− | [[File:wvw-17.png|middle|768px|link={{filepath: wvw-17.png}}]] | + | [[File:wvw-17.png|middle|768px|link={{filepath: wvw-17.png}}]] |
==Comments View== | ==Comments View== | ||
Line 685: | Line 685: | ||
</code> | </code> | ||
− | + | [[File:wvw-18.png|middle|768px|link={{filepath:wvw-18.png}}]] | |
<code lang="javascript"> | <code lang="javascript"> | ||
Lianja.showDialog("COMMENTS VIEW","lib:/commentsview.rsp") | Lianja.showDialog("COMMENTS VIEW","lib:/commentsview.rsp") | ||
</code> | </code> | ||
− | + | ||
− | [[File:wvw-19.png|middle|768px|link={{filepath:wvw-19.png}}]] | + | [[File:wvw-19.png|middle|768px|link={{filepath:wvw-19.png}}]] |
==Calendar View== | ==Calendar View== | ||
Line 811: | Line 811: | ||
<code lang="javascript"> | <code lang="javascript"> | ||
− | Lianja.showDialogPanel("CALENDAR VIEW","lib:/calendar. | + | Lianja.showDialogPanel("CALENDAR VIEW","lib:/calendar.rsp", "65%") |
</code> | </code> | ||
− | + | [[File:wvw-20.png|middle|768px|link={{filepath: wvw-20.png}}]] | |
<code lang="javascript"> | <code lang="javascript"> | ||
− | Lianja.showDialog("CALENDAR VIEW","lib:/calendar. | + | Lianja.showDialog("CALENDAR VIEW","lib:/calendar.rsp", 1000,600) |
</code> | </code> | ||
− | [[File:wvw-21.png|middle|768px|link={{filepath: wvw-21.png}}]] | + | [[File:wvw-21.png|middle|768px|link={{filepath: wvw-21.png}}]] |
==Web Editor View== | ==Web Editor View== | ||
Line 870: | Line 870: | ||
</code> | </code> | ||
− | + | [[File:wvw-22.png|middle|768px|link={{filepath: wvw-22.png}}]] | |
<code lang="javascript"> | <code lang="javascript"> | ||
Line 876: | Line 876: | ||
</code> | </code> | ||
− | [[File:wvw-23.png|middle|768px|link={{filepath: wvw-23.png}}]] | + | [[File:wvw-23.png|middle|768px|link={{filepath: wvw-23.png}}]] |
− | + | ||
− | + |
Revision as of 05:43, 29 May 2018
Under Construction
To keep coding (NoCode) to a minimum there are many built-in WebViewWidgets that can be used with Lianja.showDialogPanel(), Lianja.showDialog() or as the URL in a WebView section or in a custom WebView object created with createObject("webview").
Becoming familiar with these will speed up your development so its worth spending time to get to know them. You can study the code behind these to build your own custom WebViewWidgets.
Let’s take a look at these.
Contents
Data List View
lib:/datalistview.rsp?parameter=value¶meter=value...
Parameter | Description | Default value |
---|---|---|
database | southwind | |
table | customers | |
columns | A comma separated list of columns to be displayed | customerid,companyname |
hyperlink | An optional column name that will be displayed as a hyperlink | customer |
sectionid | The optional page.section ID that will be searched using the hyperlink text when the hyperlink is clicked e.g. page1.section1 | page1 |
clickdelegate | The optional delegate to be called when the hyperlink is clicked. The delegate is called with one argument, the text of the hyperlink that was clicked. | |
delegatelib | The optional name of the delegate library containing the delegates. This should be written in JavaScript for Web/Mobile Apps. |
Examples:
Lianja.showDialogPanel( "CUSTOMER LIST", "lib:/datalistview.rsp?database=southwind&table=customers&columns=customerid," + +"companyname&hyperlink=companyname§ionid=customers.section1");
Lianja.showDialog( "CUSTOMER LIST", "lib:/datalistview.rsp?database=southwind&table=customers&columns=customerid," + "companyname&hyperlink=companyname§ionid=customers.section1", 0, 0, true);
PDF Document View
lib:/documentview.rsp?parameter=value¶meter=value...
Parameter | Description | Default value |
---|---|---|
file | The pdf filename to be displayed | compressed.tracemonkey-pldi-09.pd |
Examples:
Lianja.showDialogPanel("DOCUMENT VIEW","lib:/documentview.rsp?file=compressed.tracemonkey-pldi-09.pdf")
Lianja.showDialog("DOCUMENT VIEW","lib:/documentview.rsp?file=compressed.tracemonkey-pldi-09.pdf",0,0,true);
Google Chart View
lib:/googlechart.rsp?parameter=value¶meter=value...
Parameter | Description | Default value |
---|---|---|
type | The chart type; pie, map, gauge, donut, bar, column | pie |
title | The title for the chart | Untitled |
data | The data is specific to the type of Google Chart being generated | TBA |
options | The options are specific to the type of Google Chart being generated | TBA |
Examples:
Lianja.showDialogPanel("GOOGLE CHART","lib:/googlechart.rsp");
Lianja.showDialogPanel("GOOGLE CHART","lib:/googlechart.rsp", 0, 0, true);
Tree View
lib:/treeview.rsp?parameter=value¶meter=value...
Parameter | Description | Default value |
---|---|---|
database | southwind | |
table | customers | |
title | companyname | |
key | contactname | |
groupby | country,region,city | |
filter | ||
fields | * | |
expandall | false | |
clickdelegate | ||
dblclickdelegate | ||
delegatelib |
Examples:
Lianja.showDialogPanel("TREE VIEW","lib:/treeview.rsp");
Lianja.showDialog("TREE VIEW","lib:/treeview.rsp", 0, 0, true);
Google Map View
lib:/googlemap.rsp?parameter=value¶meter=value...
Parameter | Description | Default value |
---|---|---|
address | Boston,MA |
Examples:
Lianja.showDialogPanel("CUSTOMER LOCATION","lib:/googlemap.rsp");
Lianja.showDialog("CUSTOMER LOCATION","lib:/googlemap.rsp",0,0,true);
OrgChart View
lib:/orgchart.rsp?parameter=value¶meter=value...
Parameter | Description | Default value |
---|---|---|
database | southwind | |
table | employees | |
titlebackcolor | lightblue | |
columnid | employeeid | |
keycolumn | lastname | |
parentid | reportsto | |
caption | base64_encode("title") | |
description | base64_encode("trim(firstname)+' '+trim(lastname)+' '+etos(hiredate)")) | |
nodewidth | 160 | |
nodeheight | 160 | |
filter | ||
editable | ||
addcaption | ||
showcontrols | false | |
clickdelegate | ||
dblclickdelegate | ||
backcolordelegate | ||
forecolordelegate | ||
delegatelib |
Examples:
Lianja.showDialog("ORGCHART VIEW","lib:/orgchart.rsp",0,0,true);
Catalog View
lib:/catalogview.rsp?parameter=value¶meter=value...
Parameter | Description | Default value |
---|---|---|
database | southwind | |
table | customers | |
heading | ||
cellfooter | ||
cellfootertarget | ||
cellfooterkey | ||
image | ||
imagewidth | 200px | |
imageheight | 200px | |
caption | ||
subcaption | ||
captiontarget | ||
captionkey | ||
details | No details specified | |
filter | ||
gridlines | false | |
orderby | ||
columns | 1 | |
readmore | false | |
readmoresize | 0 | |
readmoresearchkey | ||
readmorelink | ||
paginate | true | |
pagenumber | 1 | |
pagesize | 8 | |
sectionid | ||
pagelinks | 10 | |
backcolor | #e5e5e5 | |
borderbottomandrightcolor | #b0b0b0 | |
bordertopandleftcolor | lightgray | |
clickdelegate | ||
dblclickdelegate | ||
delegatelib | ||
targetui | Adjust for specific target UI | Web. Valid values are web, phone, tablet |
Examples:
Lianja.showDialogPanel("CATALOG VIEW","lib:/catalogview.rsp")
Lianja.showDialog("CATALOG VIEW","lib:/catalogview.rsp",0,0,true);
Report View
lib:/report.rsp?parameter=value¶meter=value...
Parameter | Description | Default value |
---|---|---|
type | The type of report to be generated. Currently only tabular reports are supported. | tabular |
database | southwind | |
table | example | |
fields | An optional comma separated list of field names in the database table | |
groupby | An optional comma separated list of field names that the report should be grouped on when calculating sub-totals | state |
heading | An optional heading to be displayed at the top of the report | Report for all clients by state |
headings | An optional comma separated list of column headings | |
filter | An optional filter condition to be applied to the database/table records | |
hyperlinks | An optional comma separated list of field names that will be displayed as hyperlinks. See the click delegate below. | |
columns | An optional comma separated list of column ordinal positions in the database table | 2,4,3,5,6,7,8,9,10,11 |
subtotals | An optional comma separated list of column ordinal positions in the database table that subtotals will be displayed for | 9,10,11 |
gridlines | Determines whether grid lines will be displayed in the report | true |
clickdelegate | The optional delegate to be called when the hyperlink is clicked. This is called with two arguments; the field name and the hyperlink text. | |
delegatelib | The optional name of the delegate library containing the delegates. This should be written in JavaScript for Web/Mobile Apps. |
Examples:
Lianja.showDialogPanel("REPORT VIEW","lib:/report.rsp", "65%")
Lianja.showDialog("REPORT VIEW","lib:/report.rsp",0,0,true)
Gallery View
lib:/galleryview.rsp?parameter=value¶meter=value...
Parameter | Description | Default value |
---|---|---|
database | southwind | |
table | employees | |
filter | ||
orderby | ||
tiledelegate | defaultTiledelegate | |
caption | alltrim(firstname)+' '+alltrim(lastname)+' '+alltrim(address)+' '+alltrim(city)+' '+alltrim(region)+' '+alltrim(country) | |
summary | title | |
contentdelegate | defaultContentdelegate | |
heading | alltrim(firstname)+' '+alltrim(lastname) | |
content | notes | |
contenturl | ||
delegatelib |
Examples:
Lianja.showDialogPanel("GALLERY VIEW","lib:/galleryview.rsp");
Lianja.showDialog("GALLERY VIEW","lib:/galleryview.rsp",1000,600,true);
Comments View
lib:/commentsview.rsp?parameter=value¶meter=value...
Parameter | Description | Default value |
---|---|---|
database | southwind | |
table | comments | |
category | ||
childkey | childkey | |
caption | Comments about {customers.companyname} | |
topic | ||
topics | ||
username | admin | |
refreshinterval | 10 |
Examples:
Lianja.showDialogPanel("COMMENTS VIEW","lib:/commentsview.rsp", -850)
Lianja.showDialog("COMMENTS VIEW","lib:/commentsview.rsp")
Calendar View
lib:/calendar.rsp?parameter=value¶meter=value...
Parameter | Description | Default value |
---|---|---|
database | southwind | |
table | employees_calendar | |
view | Month; valid values are Month, Week or Day | |
eventtypecolumn | eventtype | |
filter | ||
titlecolumn | eventtitle | |
startcolumn | eventstart | |
endcolumn | eventend | |
alldaycolumn | eventallday | |
repeatingcolumn | eventrepeat | |
eventtypechoices | Sales Meeting:yellow:black,Meeting,Vacation:gray:lightgreen,
Sick:red:yellow,Appointment:green:white,Other | |
keyexpr | ||
keyvalue | ||
rowid | rowid | |
pageid | ||
sectionid | ||
columns | ||
readonly | false | |
hideformbar | false | |
autoheight | true | |
clickdelegate | calendar_click | |
daybackcolordelegate | ||
eventbackcolordelegate | eventbg | |
eventforecolordelegate | eventfg | |
delegatelib | ||
targetui |
Examples:
Lianja.showDialogPanel("CALENDAR VIEW","lib:/calendar.rsp", "65%")
Lianja.showDialog("CALENDAR VIEW","lib:/calendar.rsp", 1000,600)
Web Editor View
lib:/web_editor.rsp?parameter=value¶meter=value...
Parameter | Description | Default value |
---|---|---|
database | The optional database containing the table/column to be edited | |
table | The optional table containing the column to be edited | |
column | The optional column to be edited | |
rowid | The optional rowid/recno that should be edited. | |
html | The optional base64 encoded html to be edited | |
savedelegate | The optional name of the delegate to handle a save operation. It is passed with five arguments e.g. saveDelegate(database, table, column, rowid, html). The html is base64 encoded. | |
readdelegate | The optional name of the delegate to handle a read operation. It is passed with four arguments e.g. readDelegate(database, table, column, rowid). It should return the html which should be base64 encoded. | |
delegatelib | The optional name of the delegate library containing the delegates. This should be written in JavaScript for Web/Mobile Apps. |
Examples:
Lianja.showDialogPanel("EDITOR VIEW","lib:/web_editor.rsp", "65%")
Lianja.showDialog("EDITOR VIEW","lib:/web_editor.rsp", 1000, 600, true)