Announcement

Collapse
No announcement yet.

I miss the old PageBuilder stuff

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • rjh
    replied
    GIve me an outline of what your page looks like and I will see if I can put together a framework as an example. To me, doing HTML pages is WAY better than the old way. I can put together a working page in a fraction of the time I could before. Maybe a video will help that shows the steps? The JUI controls are only for a basic settings page, which is really simple. I would guess you are trying to do a feature page using HTML?

    Originally posted by rmasonjr View Post
    I put a great deal of time into the old clsPageBuilder stuff when HS3 came out. Several other plugin authors used their own HTML and now I understand why.

    On Friday, I spent 10h designing a simple page with the Jui controls and I'm still not done. I just dont know if it's worth having mobile support in my plugins for this large learning curve.

    Leave a comment:


  • rmasonjr
    replied
    I put a great deal of time into the old clsPageBuilder stuff when HS3 came out. Several other plugin authors used their own HTML and now I understand why.

    On Friday, I spent 10h designing a simple page with the Jui controls and I'm still not done. I just dont know if it's worth having mobile support in my plugins for this large learning curve.

    Leave a comment:


  • lpitman
    replied
    Nothing works, if we are to make HS4 native pages, we need more help, examples, and documentation. All the logic in my plugin's convert pretty straight forward, web pages suck!!

    Leave a comment:


  • lpitman
    replied
    Would be much easier if I could just load a new page.html, I do a lot of processing and reading of XML file to build the list page shown above. When I click for example the edit button it should pass the the record number to edit using 'btnEditEvent56' which is the 56th record in file. With that info passed to PostBackProc I should be able to build an EditEvent.html page with textbox inputs for the record being edited, then save and return to EventList.html page.

    So is the
    response = "PAGE_NEWPAGE,EditEvent.html
    in-correct syntax then?

    Just for the record I'm not using pagebuilder anything, I just created my own code to imitate HS3 stuff, but attempting to use only HS4 code.

    Leave a comment:


  • rjh
    replied
    If your postback is in a pagebuilder class you can use these calls to things like update divs, etc.:

    https://help.homeseer.com/help/HS3SD...#.pagecommands
    https://help.homeseer.com/help/HS3SD...m#.divtoupdate

    Note that HS4 only supports:

    divtoupdate
    newpage
    refresh
    popmessage

    I can add more if needed. The commands are in the ajaxpost function in page_common.js file in the html/bootstrap/js folder.

    I will need to investigate the guided process but you should be able to get a postback on each step and then just update the divs that need new content.


    Originally posted by shill View Post

    I can't find any documentation on the return values of postback (like this PAGE_REFRESH stuff you reference), or about how you can update a div in HS4.

    I've got a guided setup process and need some of the info from a previous step before I can populate a list to choose from in a subsequent step; how do I dynamically change the contents? I can't just put the PluginFunction tag in there because it fires on load...

    Leave a comment:


  • shill
    replied
    Originally posted by rjh View Post
    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.
    I can't find any documentation on the return values of postback (like this PAGE_REFRESH stuff you reference), or about how you can update a div in HS4.

    I've got a guided setup process and need some of the info from a previous step before I can populate a list to choose from in a subsequent step; how do I dynamically change the contents? I can't just put the PluginFunction tag in there because it fires on load...

    Leave a comment:


  • lpitman
    replied
    Button ID's are created like:

    Code:
            For i = 0 To gMaxRecords - 1
    
                If tmpRecords(i).Category = "Holiday" Or tmpRecords(i).Category = "US-Holiday" Then
    
                    ' Show Only EVENTS no Holidays.
    
                Else
    
                    stb.AppendHTML(HTML_StartRow)
    
                    '------Edit Button
                    stb.AppendHTML(HTML_StartForm("frmEditEvent", "EditEvent", "Post"))
                    stb.AppendHTML(HTML_StartCell(strClass, 10, HTML_Align.CENTER))
                    stb.AppendHTML(AddButton("btnEditEvent" & i.ToString, "waves-effect waves-dark btn btn-sm btn-secondary", "Edit"))
                    '------Delete Button
                    stb.AppendHTML(AddButton("btnDeleteEvent" & i.ToString, "waves-effect waves-dark btn btn-sm btn-secondary", "Delete"))
                    stb.AppendHTML(HTML_EndCell)
                    stb.AppendHTML(HTML_EndForm)
    and postbackproc looks like this:

    Code:
                Case "CalEvents.html"
                    name = parts("id")
                    value = parts(name)
    
                    Try
                        '===========================================
                        '===========================================
                        '-------------------------------------------
                        '        BUTTON ADD NEW EVENT
                        '-------------------------------------------
                        If name = "btnAddEvent" Then
                            value = parts(name)
    
                            OutputHSLog(LOG_DEBUG, "HSPI.PostBackProc-btnAddEvent BUTTON PRESSED.")
    
                            xmlAddRecord = Nothing
                            response = "PAGE_NEWPAGE,AddEvent.html"
    
                        End If
    
                        For i = 0 To gMaxRecords
                            '--------------------------------------
                            '        BUTTON EDIT EVENT
                            '--------------------------------------                      
                            If name = "btnEditEvent" & i Then
                                value = parts(name)
    
                                OutputHSLog(LOG_DEBUG, "HSPI.PostBackProc-btnEditEvent" & i.ToString & "  BUTTON PRESSED.")
    
                                gRecordSelected = i
                                BuildEditEventPage()
                                response = "PAGE_NEWPAGE,EditEvent.html"
    
                            End If
                            '---------------------------------------
                            '         BUTTON DELETE EVENT
                            '---------------------------------------
                            If name = "btnDeleteEvent" & i Then
                                value = parts(name)
    
                                OutputHSLog(LOG_DEBUG, "HSPI.PostBackProc-btnDeleteEvent" & i.ToString & "  BUTTON PRESSED.")
    
                                gRecordSelected = i
                                DeleteEventByName(EVENTFILE, xmlRecords(gRecordSelected).EventName)
                                SaveAllXMLRecords(EVENTFILE)
                                response = "PAGE_REFRESH,TRUE"
                            End If
                        Next
    The output from OutputHSLog shows the button that was pressed, but nothing happens.

    also I created my own AddButton code:
    Code:
        Public Function AddButton(ByVal strID As String, ByVal strClass As String, ByVal strBtnText As String) As String
            Dim RetString = ""
    
            RetString &= "<div id='" & strID & "_div'>" & Environment.NewLine
    
            RetString &= "<button type='button' "
    
            If strClass IsNot Nothing AndAlso Not String.IsNullOrEmpty(strClass) Then
                RetString &= "class='" & strClass & "' "
            End If
    
            If strID IsNot Nothing AndAlso Not String.IsNullOrEmpty(strID.Trim) Then
                RetString &= "id='" & strID & "' "
            End If
    
            RetString &= "onclick='" & strID & "()'"
    
            'RetString &= "action='button_press'"
    
            If strBtnText IsNot Nothing AndAlso Not String.IsNullOrEmpty(strBtnText.Trim) Then
                RetString &= "> " & strBtnText
            End If
    
            RetString &= "</button>" & Environment.NewLine
    
            RetString &= "</div>"
    
            Return RetString
    
        End Function
    The Delete Button works fine though.

    Leave a comment:


  • rjh
    replied
    What I do is add something to the actual button so I know which button was pressed in my postback handler, that way I don't have to deal with the javascript. For example, on your button add:

    action="dosomething"

    When the button is pressed you will get the "action" value in in your query string. You can then act on the button, so some work, and then go to another page, or refresh the page. Our default ajax handler will parse a few json responses. For redirecting to another page just return the following from your postback handler:

    ["PAGE_newpage","devices.html"]

    Originally posted by lpitman View Post
    Okay how do I modify JavaScript
    Code:
     <script type="text/JavaScript">
    
    $(document).on('click', 'button', {}, 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, "Calendar/CalEvents.html");
    
    });
    
    </script>
    to react to a specific button? For example, in my EventList feature page, I have several buttons that should call other feature pages using button id's such as 'btnAddEvent' or 'btnEditEvent', example:

    Click image for larger version Name:	EventList.png Views:	0 Size:	184.4 KB ID:	1346668
    how can I react to specific buttons and possibly use "location.assign("AddEvent.html") or similar call?

    Forgot to mention, each button posts back to a PostBackProc that modifies variables then returns 'response=PAGE_NEWPAGE, new_pageurl'

    Leave a comment:


  • lpitman
    replied
    Anybody???

    Leave a comment:


  • lpitman
    replied
    Okay how do I modify JavaScript
    Code:
        <script type="text/JavaScript">
    
            $(document).on('click', 'button', {}, 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, "Calendar/CalEvents.html");
    
            });
    
        </script>
    to react to a specific button? For example, in my EventList feature page, I have several buttons that should call other feature pages using button id's such as 'btnAddEvent' or 'btnEditEvent', example:

    Click image for larger version  Name:	EventList.png Views:	0 Size:	184.4 KB ID:	1346668
    how can I react to specific buttons and possibly use "location.assign("AddEvent.html") or similar call?

    Forgot to mention, each button posts back to a PostBackProc that modifies variables then returns 'response=PAGE_NEWPAGE, new_pageurl'

    Leave a comment:


  • lpitman
    replied
    Thanks Rich, that works perfectly.
    Code:
     
     $(document).on('click', 'button', {}, function (e) {

    Leave a comment:


  • rjh
    replied
    Ok, I suspect that your feature html file does not need to detect clicks on "<a>" tags so modify this:

    Code:
     
     $(document).on('click', 'button,a,i', {}, function (e) {
    To This:

    Code:
     
     $(document).on('click', 'button,i', {}, function (e) {
    The "i" tag is for detecting clicks on images. If you do not have any image buttons, you can remove that also so:

    Code:
     
     $(document).on('click', 'button', {}, function (e) {
    Originally posted by lpitman View Post
    I will try the <a> tag, but I do not know JavaScript, so I don't know how to look for a class. The JavaScript I'm using was supplied earlier in this thread by you, which I do appreciate because I at least got most of it to work.

    Leave a comment:


  • lpitman
    replied
    I will try the <a> tag, but I do not know JavaScript, so I don't know how to look for a class. The JavaScript I'm using was supplied earlier in this thread by you, which I do appreciate because I at least got most of it to work.

    Leave a comment:


  • rjh
    replied
    In your javascript you are capturing a click on an "<a>" tag. Do you need that? The log menu option is an "<a>" tag also:

    Code:
    <a class="dropdown-item waves-effect waves-light" href="/log.html">Log</a>
    Remove the "a" from the "a" tag from this and see if it then works ok:

    Code:
     
     $(document).on('click', 'button,a,i', {}, function (e) {
    If so and you need to detect clicks on this tag then narrow down the .on handler to maybe it looks for a class instead.

    Originally posted by lpitman View Post
    Okay, finally got a working page, that refreshes with new data from button presses. But after viewing page and pressing a button that correctly refreshes page, if go to HS4 menu and select log, it only flashes and goes away repeatedly, but if I select any other menu first such as devices then select log everything works with out flashing, until I load my page again. What am i doing wrong, I suspect it has something to do with my javascript. But attached are a couple of snippets.

    From postBackProc:
    Code:
     If name = "btnPrevYear" Then
    value = parts(name)
    
    OutputHSLog(LOG_DEBUG, "HSPI.PostBackProc-btnPrevYear....Value is: " & value & ".")
    
    gCalDate = DateAdd("yyyy", -1, objDate)
    BuildCalendar()
    response = "page_refresh,true"
    JavaScript in Web Page:
    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'>
    
    {{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'}}
    
    <script type="text/JavaScript">
    
    $(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
    }
    
    location.reload(true);
    
    AjaxPost(data, "Calendar/Calendar.html");
    });
    
    </script>
    
    </body>
    
    </html>

    Leave a comment:


  • lpitman
    replied
    Okay, finally got a working page, that refreshes with new data from button presses. But after viewing page and pressing a button that correctly refreshes page, if go to HS4 menu and select log, it only flashes and goes away repeatedly, but if I select any other menu first such as devices then select log everything works with out flashing, until I load my page again. What am i doing wrong, I suspect it has something to do with my javascript. But attached are a couple of snippets.

    From postBackProc:
    Code:
                    If name = "btnPrevYear" Then
                        value = parts(name)
    
                        OutputHSLog(LOG_DEBUG, "HSPI.PostBackProc-btnPrevYear....Value is: " & value & ".")
    
                        gCalDate = DateAdd("yyyy", -1, objDate)
                        BuildCalendar()
                        response = "page_refresh,true"
    JavaScript in Web Page:
    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'>
    
            {{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'}}
    
        <script type="text/JavaScript">
    
            $(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
                }
    
                location.reload(true);
    
                AjaxPost(data, "Calendar/Calendar.html");
            });
    
        </script>
    
    </body>
    
    </html>

    Leave a comment:

Working...
X