-=MAPLE GALAXY=-

zhajingyu

Partial Page Rendering Using Hidden Iframe
Partial Page Rendering Using Hidden IFrame
Executive Summary:
Partial-page rendering removes the need for the entire web page to be refreshed as the result of a postback. Instead, only individual zones of the page that have changed are updated. As a result, users do not look the whole page reload with each postback, which makes user interaction with the Web page more seamless.
Developers that ambition to add such behaviors to their web pages are constantly faced with a difficult determination. All of these actions can be implemented using a quite simple solution: by refreshing the plenary page in response to the user interaction. However this solution is easy but not forever desirable. The full page refresh can be slow, giving the user the impression that the application is unresponsive. Another alternative is to implement such actions using JavaScript (or other client-side scripting technologies). This results in faster response periods, at the outlay of more intricate, fewer portable code. JavaScript may be a nice choice for simple actions, such as updating an image. However, for more complicated actions, such as scrolling via data in a table, book custom JavaScript code can be a quite challenging undertaking.
This paper provides a solution which avoids the drawbacks of the full page activate and custom JavaScript solutions. In this paper prejudiced page rendering functionality provides the aptitude to re-render a limited part of a page. As in the full page render solution, partial page rendering sends a request behind to the petition ashore the middle-tier to fetch the fashionable contents. However, when partial page rendering is used to update the page, only the modified contents are sent back to the browser. This paper gives the solution using a secret IFrame and uncomplicated JavaScript to incorporate the new contents behind into the web page. The end result namely that the page is updated without custom JavaScript code, and without the loss of context that typically occurs with a full page reanimate.
Introduction:
Web pages typically advocate a variety of actions, such as entering and submitting form data and navigating to different pages. Many web pages also aid another type of action, which is to grant the user to make modifications to the contents of the web page itself without actually navigating to a different page. Some examples of such actions include.
Clicking on a link could update an image on the same page. For example, an car configuration application might update an image of a motorcar as the user chooses different options, such as the accepted color.
Selecting an item from a choice box might result in modifications to other fields on the same page. For example,[link widoczny dla zalogowanych], selecting a car make might update the set of obtainable car models that are displayed.
Clicking a interlock or electing an item from a alternative could be used to scroll to a new page of data in a table. Clicking a button in a table might add a new row to the table.
All of these movements are alike in that they outcome in the same page creature re-rendered in a slightly different state. Ideally, these alterations ought be implemented as seemlessly for possible, so that the user does not experience a loss of environment which could distract from the task by hand.
Partial page rendering can be implemented with very simple solution using a hidden IFrame and minimal JavaScript. Any part of the page can be partially rendered with using a div or table tags in HTML.
Page Elements That May Change During PPR:
?Re-Render Data: The same fields are redrawn merely their file is updated. Examples comprise the Refresh Data action button, alternatively recalculate absolutes in a chart.
?Re-render Dependent Fields: Fields may be added, cleared, or change series, and data may be updated. Examples include the Country choice account,[link widoczny dla zalogowanych], which may display different residence fields, and toggling between Simple and Advanced Search.
?Hide/Show Content: Both fields and data toggle in and out of view.
Page Elements That Do Not Change During PPR:
Some page elements are always associated with a page, regardless of the content displayed on the page.
As a general rule of thumb,[link widoczny dla zalogowanych], elements on the page title (except information boxes) remain constant and do not change situation, though elements in footer constant but may migrate up or down the page to adjust changes to page content. The emulating elements never change when PPR is initiated:
?Branding
?Global buttons
?Tabs, Horizontal Navigation, SubTabs
?Locator elements: Breadcrumbs,[link widoczny dla zalogowanych], Train,[link widoczny dla zalogowanych], Next/Back Locator
?Quick links
?Page titles (premier level header)
?Page footer
?Separator lines between the Tabs and Page Title
In maximum cases the following elements ambition also not change, additional than moving up or down the page to accommodate changed elements. Nevertheless, in certain cases actions on the page may require them to be redrawn:
?Side Navigation, unless it contains a Hide/Show control.
?Subtabs
?Contextual message
?Page-level action/navigation buttons
?Page-level Instruction txt
?Page-level Page stamps
?Page-level Key Notation
In all above scenarios this solution can be used to achieve the good performance and user interaction of the web pages.
Contexts in Which PPR Should Not Be Used:
When PPR is implemented correctly, it significantly improves application rendition. When performance improvement is not possible with PPR, it should not be implemented, accordingly dodging unnecessary code bloat,[link widoczny dla zalogowanych], PPR can��t be used when navigating to variant page (with a different title).
Partial Page Rendering Solution:
Solution provided to the Partial Page Rendering using simple hidden iframe and JavaScript, this can be used as a generalized solution to always the Partial Page Rendering scenarios.
Below is the main html (Table 1.1), which will have two buttons an is to show a simple table which will be generated by the server, and another button to remove the table.
[html]
[head]
[title] Main Document [/title]
[script language="JavaScript"]
[!--
function showTable()
hiframe.location="./table.htm";
function removeTable() {
file.getElementById("tableId").innerHTML="";
}
//--]
[/script]
[/head]
[body]
[iframe id="hiframe" style="visibility:hidden;display:none"][/iframe]
[table]
[tr]
[td]Table::[/td]
[td][/td]
[/tr]
[tr]
[td colspan="2"][div id="tableId"][/div][/td]
[/tr]
[tr]
[td][input type="button" value="Show Table" onclick="showTable()"][/td]
[td][input type="clasp" value="Remove Table" onclick="removeTable()"][/td]
[/tr]
[/table]
[/body]
[/html]
Table 1.1
[iframe id="hiframe" style="visibility:hidden;display:none"][/iframe]
This iframe tag is used as target to the Partial Page Rendering Request.
The tag [input type="button" value="Show Table" onclick="showTable()"] gives the user action to get the contents of a table from the server, in this solution specimen html is catered to render the table,[link widoczny dla zalogowanych], which conceived to be generated by the server.
The tag [input type="button" value="Remove Table" onclick="removeTable()"] gives the user to remove the table from the user interface.
The JavaScript
function showTable()
hiframe.location="./table.htm";
Is used to obtain the contents from the waiter, the line hiframe.location="./table.htm"; sends the GET request to the server, and as a feedback iframe gets the HTML.
If the prerequisite insists to send a POST request as Partial Page rendering Response, that can be achieved at setting the html fashion ingredient target attribute as the appoint of hidden iframe.
The code for the post request looks like
[form method=��post�� action=��/myaction�� target=��hiframe��]
Partial Page Rendering Server Response:
Table 1.2 shows the sample response from the server for Partial Page Rendering. This response has the JavaScript code to transfer the HTML from hidden iframe to main page.
[html]
[head]
[script language="JavaScript"]
[!--
function iframeLoad()
parent.document.getElementById("tableId").innerHTML = document.getElementById("tableId").innerHTML;
//--]
[/script]
[/head]
[body onload="iframeLoad()"]
[div id="tableId"]
[table]
[tr]
[td]1[/td]
[td]One[/td]
[/tr]
[tr]
[td]2[/td]
[td]Two[/td]
[/tr]
[/table]
[/div]
[/body]
[/html]
Table 1.2
The label [div id="tableId"] encloses the content to transmit from hidden iframe to chief page.
[table]
[tr]
[td]1[/td]
[td]One[/td]
[/tr]
[tr]
[td]2[/td]
[td]Two[/td]
[/tr]
[/table]
This is the content to show the table to user.
The code [body onload="iframeLoad()"] is used for triggering the action to transfer the content.
function iframeLoad()
parent.document.getElementById("tableId").innerHTML = document.getElementById("tableId").innerHTML;
This JavaScript function does the transferring data from the hidden iframe to main page.
parent.document.getElementById("tableId").innerHTML This chapter refers to tag div html id in main page and this part document.getElementById("tableId").innerHTML refers the HTML of the Partial Page Response.
Conclusion:
Improve the user experience with Web pages that are richer,[link widoczny dla zalogowanych], that are more responsive to user actions, and that behave favor orthodox consumer applications. Reduce full-page refreshes and avoid page flicker. Partial page rendering using iframe is a very simple solution.
References:
1.http://ajax.asp.net/docs/overview/PartialPageRenderingOverview.aspx
2.http://www.w3schools.com/htmldom/dom_obj_document.asp
3.http://www.w3schools.com/tags/tag_iframe.asp
4.http://www.oracle.com/technology/tech/blaf/specs/ppr.html
5.http://download-west.oracle.com/otn_hosted_doc/jdeveloper/904preview/uixhelp/uixdevguide/partialpage.html