- YUI3 Dialog is a pop up window, similar to ALERT box.
- “panel” is the yui3 module for dialog.
- Dialog window can be animated through “transition” module.
- The YUI3 Dialog Example can be found,
http://yuilibrary.com/yui/docs/panel/dialog.html
- The “panel” module can be used by YUI.use(“panel”,function(Y){ //——–}) .
- The project structure,
- The Servlet NameServlet.java file is,
package com.sandeep.name.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class NameServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
public NameServlet() {
super();
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("text/html");
String name = request.getParameter("name");
PrintWriter out = response.getWriter();
String responseHtml = null;
if("sandeep".equalsIgnoreCase(name)){
responseHtml = "<p class='name-of-student'>NAME : "+name+"</p>" +
"<span class='mark-of-student'>MARKS : "+100+"</span>";
}else if("sangeeta".equalsIgnoreCase(name)){
responseHtml = "<p class='name-of-student'>NAME : "+name+"</p>" +
"<span class='mark-of-student'>MARKS : "+100+"</span>";
}
out.print(responseHtml);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request,response);
}
}
- Code for HTML and yui3 script panel-demo.html,
<!DOCTYPE html>
<html>
<head>
<title>YUI3 Dialog</title>
<style>
.name-of-student {
color:green;
font-weight: bold;
}
.mark-of-student {
color:blue;
font-weight: bold;
}
.aStudent {
cursor:pointer;
color:blue;
}
</style>
</head>
<body class="yui3-skin-sam">
<div class="aStudent" name="sangeeta">Sangeeta</div>
<div class="aStudent" name="sandeep">Sandeep</div>
<div class="aStudent" name="xyzabc">XYZABC</div>
<div id="studentPanel" class="yui3-widget-loading">
<div class="yui3-widget-hd">Student Result</div>
<div class="yui3-widget-bd response-ajax"></div>
</div>
<script src="http://yui.yahooapis.com/3.8.1/build/yui/yui-min.js"></script>
<script>
YUI().use('panel', 'io', 'transition', function (Y) {
var studentPanel, ioRequest,
configuration, boundingBox,
url = "./NameServlet?name=",
hideStudentResult, showStudentResult,
responseAjax = Y.one(".response-ajax");
studentPanel = new Y.Panel({
srcNode: '#studentPanel',
width: 330,
xy: [300, -300],
zIndex: 5,
modal: true,
visible: false,
render: true,
buttons: [{
value: 'Close',
section: 'footer',
action: function (e) {
e.preventDefault();
hideStudentResult();
}
}] });
boundingBox = studentPanel.get('boundingBox');
showStudentResult = function () {
studentPanel.show();
boundingBox.transition({
duration: 0.5,
top: '300px'
});
}
hideStudentResult = function () {
boundingBox.transition({
duration: 0.5,
top: '-300px'
}, function () {
studentPanel.hide();
});
}
configuration = {
method: 'POST',
headers: {
'Content-Type': 'text/html',
},
on: {
success: function (transactionid, response, arguments) {
data = response.responseText,
responseAjax.setHTML(data);
showStudentResult();
},
failure: function (transactionid, response, arguments) {
responseAjax.setHTML("<b>Failure In Data Loading.</b>");
showStudentResult();
}
}
};
Y.all('.aStudent').on('click', function (e) {
var target = e.target,
urlName = url + target.getAttribute('name');
ioRequest = Y.io(urlName, configuration);
});
});
</script>
</body>
</html>
- Output in the browser., if you click the student name “Sandeep” ,
- Firebug Inspection of html markup,
- If server is not up then the error handler will be called and look like,
