I created PowerWeb demo program so that you can view and try the capabilities of PowerWeb library. You can download the PowerWeb demo from the download page on my site: https://www.sd-softdesign.com/download.htm. Its too big to be attached in this post. The demo works with my PowerComHttp server which is included in the program. When you start demo program, HTTP server is created and started first. Thus, the PowerWeb demo program is all-in-one server/web application.
The demo program is created with Xbase++ V.2.0. But, since the download file contains all Xbase++ V.2.0 dlls that are needed, you can run the demo program even if you don't have Xbase++ V.2.0 installed.
The download file also contains the complete source code for the demo program and the PowerWeb library documentation. Below is a code for creating some pages in the demo program, which are displayed in the following screenshots. You can see in the code that each web UI component is created with a single-function call and its attributes are set in Xbase++ language and style, without HTML/CSS.
The PowerWeb demo can be started with mouse double-click or from Command Prompt in the following way:
PW [/addr] [/port] [/docroot]
Addr is the DNS name or the IP address to bind the HTTP server to. The default value is localhost.
Port is the port number to be used for communication. The default value is 1024.
Docroot is the document root directory used by the HTTP server. The default value is pwweb.
Examples:
1. Cmd: PW.
Browser: localhost:1024/pwweb/pw.
2. Cmd: PW / /1200.
Browser: localhost:1200/pwweb/pw.
3. Cmd: PW /172.16.54.29 /1050. 172.16.54.29 is the computer IP address.
Browser: 172.16.54.29:1050/pwweb/pw.
4. Cmd: PW /172.16.54.29 /1280 /mydoc. Rename pwweb to mydoc.
Browser: 172.16.54.29:1280/mydoc/pw.
If you connect your mobile device to your computer and start PowerWeb demo with IP address (examples 3 and 4), you can run it on a mobile device and mobile OS as well. PowerWeb demo is responsive designed. If you change the size of your browser or run the demo on a mobile device, you will see how it responds to the new browser size.
Code: Alles auswählen
FUNCTION Pw(oSrv)
**
LOCAL style, path := HAPATH(oSrv)
**
HSETCFG(path)
HSETTEXT("Segoe UI")
HASSNSET(oSrv,"Path",path + "data\car;" + path + "data\comp;" +;
path + "data\reser")
**
style = ;
"@media screen and (min-width:1250px)" +;
" {#Menubar, #Foot {width:1180px}}" + chrCRLF +;
"@media screen and (max-width:1249px)" +;
" {#Menubar, #Foot {width:98%}}" + chrCRLF +;
"@media screen and (max-width:850px)" +;
" {#Menubar, #Foot {width:95%}" +;
" #Imgbox {display:none}}"
**
RETURN HDOCBGN(,,style,,"PowerWeb library demo") +;
HDLGBGN(,{1200},"PowerWeb Library Demo",icoPower,,{,,,clrDefBG},,;
{"images/Ocean.jpg"},"C") +;
HMENU({3,3,"R"},,;
{{"Get",bmpTextBox,"PwGet"},;
{"Form",bmpForm,"PwForm"},;
{"Image",bmpImage,"PwImg"},;
{"Button",bmpPushBtn,"PwBtn"},;
{"Tool bar",bmpToolBar,"PwTBar",,{,{16,16}}},;
{"Tab set",bmpTabSet,"PwTSet"},;
{"Frame set",bmpDataView,"PwFSet"},;
{"Table",bmpTable,"PwTbl"},;
{"Browser",,,,,;
{{"Generic browser",bmpDisp,"PwBrwg"},;
{"Generic browser with gets",bmpDisp,"PwBrwgg"},;
{"Paging browser",bmpDisp,"PwBrwp"},;
{"Paging browser with gets",bmpDisp,"PwBrwpg"},;
{"Paging edit browser",icoEditTable,"PwBrwpe",,{,,,clrDefBG}}},;
{205}},;
{"Document",,,,,;
{{"DOC, RTF file",bmpWordDoc,"PwDoc"},;
{"XLS file",bmpExlDoc,"PwXls"},;
{"PDF file",bmpPDFDoc,"PwPdf"}},;
{125},{,,,clrDefBG}},;
{"Popup",,,,,;
{{"Alert message",icoWarn,"PwAlert"},;
{"Question message",icoQues,"PwQues"},;
{"Display message",icoInfo,"PwMsg"},;
{"Modal dialog",bmpForm,"PwMDlg"}},;
{160},{,,,clrDefBG}},;
{"Graph",icoGraph,"PwGrp"},;
{"Print",,,,,;
{{"Text",bmpText,"PwPText"},;
{"Image",bmpImage,"PwPImg"},;
{"Line and box",bmpLine,"PwPLine"},;
{"Shape and arc",bmpShape,"PwPShape"},;
{"Browser",bmpTable,"PwPBrw"},;
{"Graph",icoChart,"PwPGrp"}},;
{135},{,,,clrDefBG}},;
{"Mail",icoMail,"PwMail"}},;
{,,,{,,,clrDefBG}},,{"Menubar"}) +;
HPARAG({,50,"R"},{600},"PowerWeb Library Demo",;
{{"Verdana",30,"B"},{"#9B0080",clrPSeaGreen},,10,"C"},{,,,10},;
"C",,,"max-width:90%") +;
HDIVBGN({,50,"R"},{,640}) +;
HPARAG({30,40},,"Applications",{{,20,"BI"},{clrMRed}}) +;
HMENU({30,95},{250},;
{{"Car ads","images/CitroenC5.jpg","Car"},;
{"Computer shop","images/Cp000027.jpg","Comp"},;
{"Event managment","images/Business-meeting.jpg","Evt"},;
{"Order reservation","images/Cat7.bmp","Res"},;
{"Article codebook","images/Address-book.png","Cb"}},;
{{,50,55},{,14,"B"},{{clrDBlue,clrLSalmon},{clrDPurple}},;
{,{50,35}}},,,,"max-width:80%","V") +;
HIMGBOX({400,95},{400,300},"Web UI for Xbase++","images/PW.JPG",;
{,20,"BI"},{clrBlue,clrLBlue},{,{300,212},"B"},;
{,,clrRoyalBlue,5},,{"Imgbox"}) +;
HDIVEND() +;
HDIVBGN({,20,"M"},,{,{"darkcyan","palegoldenrod"},50,,"C"},{,,,10},,"C",;
{"Foot"}) +;
HHEAD(,,"Copyright © 2023, SD-SoftDesign, Negotin, Serbia" +;
HLINK({30,,"M"},,"https://www.sd-softdesign.com",icoPower,,;
{,,,clrDefBG},,"https://www.sd-softdesign.com",,"_blank"),3,,,,,;
"margin:0px") +;
HDIVEND() + HDLGEND() + HDOCEND()
*============================================================================*
FUNCTION PwTBar(oSrv)
**
LOCAL style
**
style = ;
"@media screen and (min-width:1250px)" +;
" {#Div0 {width:auto; height:500px}" +;
" #Div2 {position:absolute; left:400px; top:0px}" +;
" #Div3 {position:absolute; top:430px}}" + chrCRLF +;
"@media screen and (max-width:1249px)" +;
" {#Div0 {width:auto; height:500px}" +;
" #Div2 {position:absolute; left:400px; top:0px}" +;
" #Div3 {position:absolute; top:430px}}" + chrCRLF +;
"@media screen and (max-width:930px)" +;
" {#Div0 {width:93%; height:980px}" +;
" #Div2 {position:absolute; left:0px; top:450px}" +;
" #Div3 {position:absolute; top:850px}}"
**
RETURN HDOCBGN(,,style,,"PowerWeb - Tool bar",,,,,,,{HSETGUI(,.T.)}) +;
HDIVBGN(,{1200},{,{,clrAzure}},{,,clrRoyalBlue,10},,"C") +;
HHEAD({10,30,"M"},,"PowerWeb - Tool bar",,{,{clrBlue}}) +;
HDIVBGN({10,20,"R"},,,,,,{"Div0"}) +;
HDIVBGN({0},{380,410},{,,,,,"A"}) +;
HTOOLBAR(,,;
{{"Beverages","data/reser/Cat1.bmp"},;
{"Condiments","data/reser/Cat2.bmp"},;
{"Confections","data/reser/Cat3.bmp"},;
{"Dairy Products","data/reser/Cat4.bmp"},;
{"Grains/Cereals","data/reser/Cat5.bmp"},;
{"Meat/Poultry","data/reser/Cat6.bmp"},;
{"Produce","data/reser/Cat7.bmp"},;
{"Seafood","data/reser/Cat8.bmp"}},;
{{180,45},{{,,"BI"},{{clrBlack,clrSkyBlue,clrRoyalBlue},;
{clrBlue,clrLinen,clrBrown},,{clrBlue,clrLinen,clrBrown}},,{1,1,1,5},"L"},;
{,{50,35}}},{{3,3,3},{,clrGold,clrDRed}},,,,"V") +;
HTOOLBAR({230},,;
{{"Add"}, {"Edit"}, {"Delete"}, {"Search"},{"Save"}, {"Cancel"},;
{"Exit"}},,,,,,"V") +;
HDIVEND() +;
HDIVBGN(,{470,350},{,,,,,"A"},,,,{"Div2"}) +;
HTOOLBAR(,{400},;
{{"DOC",bmpWordDoc},;
{"XLS",bmpExlDoc},;
{"PDF",bmpPDFDoc},;
{"HTML",bmpIntDoc},;
{"XML",bmpXmlDoc},;
{"Text",bmpTextDoc},;
{"DBF",icoDbf}},;
{{45,45},{,{{clrBlack,clrBeige},clrLBox2,,clrLBox2}},;
{,,"T",clrDefBG}},;
{{2,2,0},{,clrBeige,clrGray}}) +;
HTOOLBAR({,120},{},;
{{"Cut",{"s",stdCut}},;
{"Copy",{"s",stdCopy}},;
{"Delete",{"s",stdDelete}},;
{"Replace",{"s",stdReplace}},;
{"Paste",{"s",stdPaste}},;
{"Undo",{"s",stdUndo}},;
{"Redo",{"s",stdRedo}}},;
{{60,45},{,{{clrBlack,clrPSeaGreen},clrLBox1,,clrLBox1}},{,,"T"}},;
{{2,2,0},{,clrPSeaGreen,clrLSeaGreen}}) +;
HTOOLBAR({,220},,;
{{"OK"}, {"Cancel"}, {"Exit"}},;
{,{,{clrLBox1,{clrDBlue,clrKhaki,clrMGold},,;
{clrDBlue,clrPeach,clrTan}}}},{{,,10}}) +;
HTOOLBAR({,290},,;
{{,sbmpFirst}, {,sbmpPrev}, {,sbmpNext}, {,sbmpLast},;
{,sbmpSeek}, {,sbmpNew}, {,sbmpEdit}, {,sbmpDelete},;
{,sbmpCancel}, {,sbmpClose}},;
{{46,30},{,{{,clrPeach},{,clrDCyan},,{,clrMRed}}},{{0,0}}},;
{{,,0}}) +;
HDIVEND() +;
HTOOLBAR(,,;
{{"Insert",bmpNewDoc}, {"Update",icoEditText},;
{"Delete",icoTrash}, {"Print",bmpPrint},;
{"Table",bmpTable}, {"Exit",bmpExit},;
{,bmpFirst,,40}, {,bmpRewind,,40}, {,bmpPrev,,40},;
{,bmpNext,,40}, {,bmpForward,,40}, {,bmpLast,,40}},;
{{110,30},{,{{clrDBlue,clrLBrown},{clrDPurple,clrSkyBlue},,;
{clrDPurple,clrSkyBlue}}},{,,,clrDefBG}},,{"Div3"}) +;
HDIVEND() +;
PwBack() + HDIVEND() + HDOCEND()
*============================================================================*
FUNCTION PwTSet(oSrv)
**
LOCAL style
**
style = ;
"@media screen and (min-width:1250px)" +;
" {#Div0 {width:auto; height:930px}" +;
" #Div2 {position:absolute; left:660px; top:0px}}" + chrCRLF +;
"@media screen and (max-width:1249px)" +;
" {#Div0 {width:auto; height:930px}" +;
" #Div2 {position:absolute; left:660px; top:0px}}" + chrCRLF +;
"@media screen and (max-width:1200px)" +;
" {#Div0 {width:93%; height:1300px}" +;
" #Div2 {position:absolute; left:0px; top:940px}}"
**
RETURN HDOCBGN(,,style,,"PowerWeb - Tab set",,,,,,,{HSETGUI(.T.,.T.)}) +;
HDIVBGN(,{1200},{,{,clrAzure}},{,,clrRoyalBlue,10},,"C") +;
HHEAD({10,30,"M"},,"PowerWeb - Tab set",,{,{clrBlue}}) +;
HDIVBGN({10,20,"R"},,,,,,{"Div0"}) +;
HDIVBGN({0},{650,910},{,,,,,"A"}) +;
HTABSET(,,;
{{"London","images/London.jpg",,,PwTPage1(),,;
{clrDCyan,clrLYellow,clrDGold}},;
{"Paris","images/Paris.jpg",,,PwTPage2(),,;
{clrDBlue,clrPBlue,clrRoyalBlue}},;
{"Tokyo","images/Tokyo.jpg",,,PwTPage3(),,;
{clrMRed,clrLinen,clrBrown}},;
{"Oslo","images/Oslo.jpg",,,PwTPage4(),,;
{clrDPurple,clrPSeaGreen,clrSeaGreen}}},;
{{110,40},,,{,{40,27}},{,14}}) +;
HTABSET({,40,"M"},,;
{{"London","images/London.jpg",,,PwTPage1(),,;
{clrDCyan,clrLYellow,clrDGold}},;
{"Paris","images/Paris.jpg",,,PwTPage2(),,;
{clrDBlue,clrPBlue,clrRoyalBlue}},;
{"Tokyo","images/Tokyo.jpg",,,PwTPage3(),,;
{clrMRed,clrLinen,clrBrown}},;
{"Oslo","images/Oslo.jpg",,,PwTPage4(),,;
{clrDPurple,clrPSeaGreen,clrSeaGreen}}},;
{{,60},,,{,{40,27},"T"},{,14}},,,,"V") +;
HDIVEND() +;
HDIVBGN(,{500,340},{,,,,,"A"},,,,{"Div2"}) +;
HTABSET(,{450,300},;
{{"Customer",,,,PwTForm1()},;
{"Product",,,,PwTForm2()}},{{100},,,,,{,clrPBlue}}) +;
HDIVEND() + HDIVEND() +;
PwBack() + HDIVEND() + HDOCEND()
*============================================================================*
FUNCTION PwTPage1
**
RETURN HPARAG(,,"London is the capital of England",{,,,,"C"}) +;
HIMG(,{400,266},"images/London.jpg","London",,,"C")
*============================================================================*
FUNCTION PwTPage2
**
RETURN HPARAG(,,"Paris is the capital of France",{,,,,"C"}) +;
HIMG(,{400,266},"images/Paris.jpg","Paris",,,"C")
*============================================================================*
FUNCTION PwTPage3
**
RETURN HPARAG(,,"Tokyo is the capital of Japan",{,,,,"C"}) +;
HIMG(,{407,271},"images/Tokyo.jpg","Tokyo",,,"C")
*============================================================================*
FUNCTION PwTPage4
**
RETURN HPARAG(,,"Oslo is the capital of Norway",{,,,,"C"}) +;
HIMG(,{400,266},"images/Oslo.jpg","Oslo",,,"C")
*============================================================================*
FUNCTION PwTForm1
**
RETURN HFORMBGN(,,,,,,,,,{"TForm"}) +;
HFORMTBL(,;
{{35,"Customer:",{270,,30},,,,,{,"Cust"}},;
{35,"Company:",{270,,30},,,,,{,"Comp"}},;
{35,"Address:",{270,,40},,,,,{,"Addr"}},;
{35,"City:",{270,,30},,,,,{,"City"}},;
{35,"Country:",{270,,40},,,,,{,"Cntr"}},;
{35,"EMail:",{270,,40},,,,,{,"EMail"}}},;
{90,310})
*============================================================================*
FUNCTION PwTForm2
**
RETURN HFORMTBL(,;
{{35,"Product:",{100},"CB",,{{"PowerWin","PN"},{"PowerSql","PS"},;
{"PowerWeb","PW"},{"PowerCom","PC"},{"PowerCrp","PR"},;
{"PowerUtl","PU"}},,{,"Prd"}},;
{35,"Version:",{170},"RB",,{{"V.2.0","20"},{"V.1.9","19"},;
{"V.1.8","18"}},,{,"Ver"}},;
{35,"Type:",{150},"RB",,{"Regular","Upgrade"},,{,"Type"}},;
{110,"Message:",{270,100},"ML",,,,{,"Msg"}},;
{,"",,"FS","Send",,,,,"margin-left:60px; margin-top:30px"}},;
{90,300}) +;
HFORMEND()
*============================================================================*
FUNCTION PwBrwp(oSrv)
**
LOCAL aData[0],html,;
aCols1 := {{"supplier_i","Id",,50,,,,,"R"},;
{"company_na","Company",,240},;
{"contact_na","Contact",,160},;
{"city","City",,90},;
{"country","Country",,70}},;
aCols2 := {{"car_id","Id",,70},;
{{"TRIM(car_brand) + ' ' + TRIM(car_model)",;
"'data\car\' + TRIM(SUBSTR(car_photo,2))",{,{100,70},"B"}},;
"Name and photo",,250,"C"},;
{"car_year","Year",,50},;
{"car_price","Price (€)",,70,,,,{clrDRed,clrLYellow}},;
{"car_vol","Volume",,60},;
{"car_power","Power",,70},;
{"car_fuel","Fuel",,100},;
{"car_desc","Description",,360}}
**
SET PATH TO (HASSNGET(oSrv,"Path"))
DBOPEN("FOXCDX",{{{"Supplier"},{"Supplier","id"}}})
DBOPEN("DBFNTX",{{{"Car"},{"Car"}}},,,.T.)
**
html = HDOCBGN(,,,,"PowerWeb - Paging browser") +;
HDIVBGN(,{1200},{,{,clrAzure}},{,,clrRoyalBlue,10},,"C") +;
HHEAD({10,30,"M"},,"PowerWeb - Paging browser",,{,{clrBlue}}) +;
HBRWPGN({,40,"M"},{,360},"Supplier",aCols1,{,,"SupPage"},,"Suppliers",;
{,,,,{,{,14,"BI"}}},,"C") +;
HBRWPGN({,40,"M"},{900,600},"Car",aCols2,{,,"CarPage"},5,"Car ads",;
{,,,,{,{,14,"BI"}}},,"C") +;
HBREAK() +;
PwBack() + HDIVEND() + HDOCEND()
CLOSE ALL
RETURN html
*============================================================================*
FUNCTION PBrwPart(oSrv)
**
LOCAL aCols,html,I
PRIVATE oSPrn
**
IF VALTYPE(DEFPRN()) == "O"
SET PATH TO (HAPATH(oSrv) + "data")
DBOPEN("FOXCDX",{{{"Parts"},{"Parts"}}},,,.T.)
**
aCols = {{{"partno","parttype"},"Part no;Part type",,8,"M"},;
{"partname","Part name",,15},;
{"MEMO2A('descrip',8,45,.T.)","Description (8 lines)",,32,"M"},;
{"'images\' + ALLTRIM(partname) + '.bmp'","Photo",,20}}
PBRW(,aCols,,,"PARTS LIST",{{{,"n"}}},,.F.)
**
html = HPDOC()
CLOSE
ELSE
html = HHEAD(,,"No printers",,{,,,,"C"})
ENDIF
RELEASE ALL
RETURN HDOCBGN(,,,,,,,,,,,{"window.print();"}) + html + HDOCEND()
*============================================================================*
