Announcement
Collapse
No announcement yet.
I miss the old PageBuilder stuff
Collapse
X
-
To answer the JS question, yes, you will need some Javascript in your HTML file to handle the postback. You can call the AjaxPost that we provide in the page_common.js file. If you need any JS samples, we can provide some. I posted one handler that can handle most posts. You can also look in the HTML folder in HS4 as the entire HS4 UI is there and each HTML file has some JS in it.
-
Wow, best explanation so far, thanks. This gives me something to work with, and a couple ideas.
Leave a comment:
-
Originally posted by alexbk66 View Post
In HS3 the clsJQuery classes were adding their JS code, so the developers didn't have to know JS. Do I understand correctly - now we have to add JS ourselves?
For HS4, I took the classes verbatim, I instantiate the class like I did in HS3, there were only 3 changes:
1/ In GetPagePlugin I removed these 2 calls
at the beginning Me.AddHeader(hs.GetPageHeader(pageName, "Sonos Configuration", "", "", False, True))
at the end Me.AddFooter(hs.GetPageFooter)
2/ When the weblinks were created you would register them using a variable that held a handle to the instantiated class, something like
hs.RegisterPage(ConfigPage, sIFACE_NAME, MainInstance)
In HS4 you now register a link, pointing to an HTML file you have now in your homedirectory, something like this:
myHomeSeerSystem.RegisterFeaturePage(tIFACE_NAME, sonosPlayerTablePageFileName, "Player Table")
3/ In the html file you now have, there is not really anything in it, except a call to "GetPagePlugin" which returns a built page including all the JS etc. In the example here, I call PagePreLoad in my PI which dishes out which page it is that needs building.
Code:[COLOR=#808080]<![/COLOR][COLOR=#569cd6]DOCTYPE[/COLOR][COLOR=#9cdcfe]html[/COLOR][COLOR=#808080]>[/COLOR] [COLOR=#808080]<[/COLOR][COLOR=#569cd6]html[/COLOR][COLOR=#9cdcfe]lang[/COLOR][COLOR=#d4d4d4]=[/COLOR][COLOR=#ce9178]"en"[/COLOR][COLOR=#808080]>[/COLOR] [COLOR=#808080]<[/COLOR][COLOR=#569cd6]head[/COLOR][COLOR=#808080]>[/COLOR] [COLOR=#808080]<[/COLOR][COLOR=#569cd6]meta[/COLOR][COLOR=#9cdcfe]charset[/COLOR][COLOR=#d4d4d4]=[/COLOR][COLOR=#ce9178]"utf-8"[/COLOR][COLOR=#808080]>[/COLOR] [COLOR=#808080]<[/COLOR][COLOR=#569cd6]meta[/COLOR][COLOR=#9cdcfe]http-equiv[/COLOR][COLOR=#d4d4d4]=[/COLOR][COLOR=#ce9178]"X-UA-Compatible"[/COLOR][COLOR=#9cdcfe]content[/COLOR][COLOR=#d4d4d4]=[/COLOR][COLOR=#ce9178]"IE=edge"[/COLOR][COLOR=#808080]>[/COLOR] [COLOR=#808080]<[/COLOR][COLOR=#569cd6]meta[/COLOR][COLOR=#9cdcfe]name[/COLOR][COLOR=#d4d4d4]=[/COLOR][COLOR=#ce9178]"viewport"[/COLOR][COLOR=#9cdcfe]content[/COLOR][COLOR=#d4d4d4]=[/COLOR][COLOR=#ce9178]"width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no"[/COLOR][COLOR=#808080]>[/COLOR] [COLOR=#808080]<[/COLOR][COLOR=#569cd6]meta[/COLOR][COLOR=#9cdcfe]name[/COLOR][COLOR=#d4d4d4]=[/COLOR][COLOR=#ce9178]"description"[/COLOR][COLOR=#9cdcfe]content[/COLOR][COLOR=#d4d4d4]=[/COLOR][COLOR=#ce9178]""[/COLOR][COLOR=#808080]>[/COLOR] [COLOR=#808080]<[/COLOR][COLOR=#569cd6]meta[/COLOR][COLOR=#9cdcfe]name[/COLOR][COLOR=#d4d4d4]=[/COLOR][COLOR=#ce9178]"author"[/COLOR][COLOR=#9cdcfe]content[/COLOR][COLOR=#d4d4d4]=[/COLOR][COLOR=#ce9178]"Dirk Corsus"[/COLOR][COLOR=#808080]>[/COLOR] [COLOR=#d4d4d4] {{includefile 'bootstrap/css/page_common.css'}}[/COLOR] [COLOR=#808080]<[/COLOR][COLOR=#569cd6]title[/COLOR][COLOR=#808080]>[/COLOR][COLOR=#d4d4d4]Sonos Player Table[/COLOR][COLOR=#808080]</[/COLOR][COLOR=#569cd6]title[/COLOR][COLOR=#808080]>[/COLOR] [COLOR=#808080]</[/COLOR][COLOR=#569cd6]head[/COLOR][COLOR=#808080]>[/COLOR] [COLOR=#808080]<[/COLOR][COLOR=#569cd6]body[/COLOR][COLOR=#9cdcfe]class[/COLOR][COLOR=#d4d4d4]=[/COLOR][COLOR=#ce9178]"homeseer-skin"[/COLOR][COLOR=#808080]>[/COLOR] [COLOR=#d4d4d4] {{includefile 'header.html'}}[/COLOR] [COLOR=#d4d4d4] {{includefile 'navbar.html'}}[/COLOR] [COLOR=#808080]<[/COLOR][COLOR=#569cd6]div[/COLOR][COLOR=#9cdcfe]class[/COLOR][COLOR=#d4d4d4]=[/COLOR][COLOR=#ce9178]"container"[/COLOR][COLOR=#9cdcfe]id[/COLOR][COLOR=#d4d4d4]=[/COLOR][COLOR=#ce9178]"main_content"[/COLOR][COLOR=#808080]>[/COLOR] [COLOR=#d4d4d4] {{ [/COLOR] [COLOR=#d4d4d4] parms = ['sonosplayertableconfig', queries] [/COLOR] [COLOR=#d4d4d4] }}[/COLOR] [COLOR=#d4d4d4] {{plugin_function 'SonosV4' 'PagePreLoad' parms }}[/COLOR] [COLOR=#808080]</[/COLOR][COLOR=#569cd6]div[/COLOR][COLOR=#808080]>[/COLOR] [COLOR=#6a9955]<!--{{includefile 'bootstrap/js/page_common.js'}}-->[/COLOR] [COLOR=#808080]</[/COLOR][COLOR=#569cd6]body[/COLOR][COLOR=#808080]>[/COLOR] [COLOR=#808080]</[/COLOR][COLOR=#569cd6]html[/COLOR][COLOR=#808080]>[/COLOR]
Code:Function PagePreLoad(FunctionID As String, Query As Dictionary(Of String, String)) As String If piDebuglevel > DebugLevel.dlErrorsOnly Then Log("PagePreLoad called with FunctionID = " & FunctionID, LogType.LOG_TYPE_INFO) Try Select Case FunctionID Case "upnpdevicetable" Dim queryString = ConvertDictionaryToQueryString(Query) Return UPnPViewerPage.GetPagePlugin("UPNPViewer", "", 0, queryString) Case "sonoslinkgroupconfig" Return linktablePage.GetPagePlugin(sonosLinkGroupPageFileName, "", 0, Query) Case "sonosplayertableconfig" Return playerTablePage.GetPagePlugin(sonosPlayerTablePageFileName, "", 0, Query) End Select Catch ex As Exception If piDebuglevel > DebugLevel.dlOff Then Log("Error in PagePreLoad with FunctionID = " & FunctionID & " and Error = " & ex.Message, LogType.LOG_TYPE_ERROR) End Try Return "" End Function
Dirk
Leave a comment:
-
Originally posted by rjh View PostBased on your post you don't have any javascript to handle clicking on your elements. Does the BuildCalendar function return HTML that includes javascript that handles the postbacks?
The page_common.js file includes the Ajax postback function that you need to call with your page variables. If you have that in your calendar code, then, yes remove it from your file. But you will need to adjust it per below.
To detect a click on this button I added a javascript function that listens for button clicks. I have this generic function I like to use, it will post back all the attributes that are included with the button and it will also post back all form variables that are on the same form as the button. When the button is clicked this function is called and the data is posted back to your plugin postbackproc. The key is the AjaxPost call as it includes your plugin name and page. If your calendar code includes the Ajax call, adjust it as below. Note that this call works the same as it did in HS3 and you can also return HTML that updates divs.
So in your postback, you can either update a div, or refresh the page with a response like:
["PAGE_REFRESH","TRUE"]
The div update and page refresh work the same as they did in HS3.
Leave a comment:
-
So I assume something like this in PostBackProc:
Code:Select Case page Case "Calendar.html" name = parts("id") value = parts(name) If gTrace Then OutputHSLog(LOG_DEBUG, "HSPI.PostBackProc....Name is: " & name & ", Value is: " & value & ".") End If If name = "btnPrevYear" Then value = parts(name) If value = "Submit" Then value = parts(name) gCalDate = DateAdd("yyyy", -1, objDate) End If ElseIf name = "btnPrevMonth" Then value = parts(name) If value = "Submit" Then gCalDate = DateAdd("m", -1, objDate) End If ... ... response = "PAGE_REFRESH,TRUE"
Leave a comment:
-
Yes the function BuildCalendar does use stb.Append( html code) to create the page very much like the old HS3, the only difference is I am using the modified sample-blank.html as a wrapper and calling it via the
{{plugin_function 'Calendar' 'BuildCalendar' ['']}}
All the processing is perform in plugin prior to, or during the creation of the html page, such as current date, checking for events for for each day and displaying an icon and message if holiday or event day. The page then has 5 buttons across top for Previous Year, Previous Month, ToDay, Next Month, Next Year. Each button would cause PostBackProc to recalculate and refresh the page with new month or year etc...
Leave a comment:
-
Originally posted by rjh View PostNot sure Dirk has the correct answer. Based on your post you don't have any javascript to handle clicking on your elements. Does the BuildCalendar function return HTML that includes javascript that handles the postbacks?
Leave a comment:
-
Not sure Dirk has the correct answer. Based on your post you don't have any javascript to handle clicking on your elements. Does the BuildCalendar function return HTML that includes javascript that handles the postbacks?
The page_common.js file includes the Ajax postback function that you need to call with your page variables. If you have that in your calendar code, then, yes remove it from your file. But you will need to adjust it per below.
Here is an example that might help. I added a button to the sample page like so:
Code:<button type="button" class="btn btn-default" action="button_press">Save</button>
Code:<script> $(document).on('click','button,a,i', {} ,function(e){ var data; $(this.attributes).each(function() { var parts = this.nodeName+"="+this.nodeValue; if(data==null) { data = parts; } else { data = data+"&"+parts; } }); var fdata = $(this.form).serialize(); if(fdata != null) { data = data+"&"+fdata } AjaxPost(data,"HomeSeerSamplePlugin/sample-blank.html"); }); </script>
["PAGE_REFRESH","TRUE"]
The div update and page refresh work the same as they did in HS3.
Leave a comment:
-
Originally posted by lpitman View PostHow do I use PostBackProc to modify variables and perform modifications and then refresh the page? Return response in some of your examples does not work for me? I am using a modified sample-blank.html and modified as follows:
Code:<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!--This maintains the scale of the page based on the scale of the screen--> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="author" content="HomeSeer Technologies"> <!--This liquid tag loads all of the necessary css files for HomeSeer--> {{includefile '/bootstrap/css/page_common.css'}} <link rel='Stylesheet' type='text/css' href='css/Calendar.css'> <title>Calendar</title> </head> <body class='body homeseer-skin'> <!--These liquid tags add the HomeSeer header and navbar to the top of the page when appropriate--> {{includefile 'header.html'}} {{includefile 'navbar.html'}} <!--Primary container for the page content The .container class ensures the page content is fit and centered to the screen--> <div class='container' id='main_content'> <!--This is an intentionally blank page that you can use as a blueprint to create feature pages from--> {{plugin_function 'Calendar' 'BuildCalendar' ['']}} </div> <!-- Bootstrap core JavaScript ================================================== --> <!-- Placed at the end of the document so the pages load faster --> {{includefile 'bootstrap/js/page_common.js'}} </body> </html>
Try to remove this line
{{includefile 'bootstrap/js/page_common.js'}}
Leave a comment:
-
How do I use PostBackProc to modify variables and perform modifications and then refresh the page? Return response in some of your examples does not work for me? I am using a modified sample-blank.html and modified as follows:
Code:<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!--This maintains the scale of the page based on the scale of the screen--> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="author" content="HomeSeer Technologies"> <!--This liquid tag loads all of the necessary css files for HomeSeer--> {{includefile '/bootstrap/css/page_common.css'}} <link rel='Stylesheet' type='text/css' href='css/Calendar.css'> <title>Calendar</title> </head> <body class='body homeseer-skin'> <!--These liquid tags add the HomeSeer header and navbar to the top of the page when appropriate--> {{includefile 'header.html'}} {{includefile 'navbar.html'}} <!--Primary container for the page content The .container class ensures the page content is fit and centered to the screen--> <div class='container' id='main_content'> <!--This is an intentionally blank page that you can use as a blueprint to create feature pages from--> {{plugin_function 'Calendar' 'BuildCalendar' ['']}} </div> <!-- Bootstrap core JavaScript ================================================== --> <!-- Placed at the end of the document so the pages load faster --> {{includefile 'bootstrap/js/page_common.js'}} </body> </html>
Leave a comment:
-
Please do not use the pagebuilder for your feature pages. The pages created with that will not display properly on a mobile device.
Let me know where you are having an issue. The sample plugins include some blank HTML pages that you can use to get started with your feature page. I use the Pinegrow bootstrap editor to build a page and then use the templates to create dynamic content. I am happy to help with this if needed.
Also, if really want to build your pages in code, you can simply generate the page using bootstrap formatted controls and then return the HTML. I can help getting you the raw controls HTML if needed. Note that all the controls we use are documented here:
https://mdbootstrap.com/
We use the material design format. From there you can get the HTML for any control you want to use.
Leave a comment:
-
Would it be possible for HomeSeer to publish a copy of theclsPageBuilder
Leave a comment:
-
Originally posted by lpitman View PostI still hate this new web crap, having so much trouble trying to untangle everything. It's going to take months just to redo web pages that were pretty in HS3. Nothing like re-inventing the wheel.
- Likes 2
Leave a comment:
Leave a comment: