WorkLight allows you to create multi-page application, i wanted to try this feature, so i changed the Contact Search application that i created in
Using BusyIndicator common control entry, so that, when executes a search for contact, it returns list of contact names, user can click on one of the contact name to go to the Contact Details page and that page has button that allows user to go back to Summary page.
This is how my summary page looks like
When you click on the arrow button next to any user name it takes you to the Details page for that contact which looks like this
You can click on the Summary button on the Details page to go back to the Contact Summary page. I followed these steps to create this sample application
- First i changed the main or landing page of my app to mark the div where the new page should be inserted, i did that by setting value of id element to
pagePort like this
!DOCTYPE html>
<html>
<head>
....
</head>
<body onload="WL.Client.init({showLogger:true})" id="content"
style="display: none">
<div data-role="page" id="page1">
<div data-theme="a" data-role="header">
<h3>Contact DB App</h3>
</div>
<div data-role="content" id="pagePort" >
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<label for="textinput1"> First Name </label> <input
id="contactName" placeholder="" value="" type="text" />
</fieldset>
</div>
<a data-role="button" data-transition="fade"
href="javascript:getContact()" id="searchContact"> Search
Contact </a>
<ul data-role="listview" data-inset="true" data-filter="true"
id="displayContact">
</ul>
</div>
<div data-theme="a" data-role="footer">
<h3>Copyright stuff</h3>
</div>
</div>
<script src="js/HelloDatabase.js"></script>
<script src="js/messages.js"></script>
<script src="js/auth.js"></script>
</body>
</html>
- Then i did create this new contactDetail.html page in the same directory as that of my first/landing page
<div data-role="content" id="mainContent">
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<label for="firstName"> First Name </label>
<input id="firstName" placeholder="" value="" type="text" readonly="readonly" />
<label for="lastName"> Last Name </label>
<input id="lastName" placeholder="" value="" type="text" readonly="readonly"/>
<label for="email"> Email </label>
<input id="email" placeholder="" value="" type="text" readonly="readonly"/>
<a data-role="button" data-transition="fade"
href="javascript:showSummary()" id="searchContact"> Summary </a>
</fieldset>
</div>
</div>
The Details page shows the form with contact details and it has a Summary button that allows user to go back to the summary page, when you click on that button it will pass control to showSummary() method
- I had to make changes to my main JavaScript function to make it look like this
var busyIndicator;
function wlCommonInit() {
busyIndicator = new WL.BusyIndicator('page1');
}
function getContact() {
console.log("Entering getContact() REST service based version");
var contactName = $('contactName').getValue();
var invocationData = {
adapter : "ContactWSService",
procedure : "searchContact",
parameters : [ contactName ]
}
var options = {
onSuccess : loadContactSuccess,
onFailure : loadContactFailure
}
busyIndicator.show();
WL.Client.invokeProcedure(invocationData, options);
}
function loadContactSuccess(result) {
console.log("Inside loadContactSuccess " + result);
var html = '';
try {
if (result.status == 200) {
var contactList = result.invocationResult.Envelope.Body.searchContactResponse.contactList;
var i = 0;
for (i = 0; i < contactList.length; i++) {
var currentContact = contactList[i];
html = html + '<li><a href="javascript:showContactDetail('
+ currentContact.contactId + ')">'
+ currentContact.firstName + ' '
+ currentContact.lastName + '</a></li>';
}
}
jq("#displayContact").html(html);
jq("#displayContact").listview('refresh');
busyIndicator.hide();
} catch (e) {
busyIndicator.hide();
}
}
function showContactDetail(contactId) {
console.log("Show Contact Detail is clicked " + contactId);
WL.Page.load("contactDetail.html", {
onComplete : function() {
console.log("After fragment is loadded ");
jq('#mainContent').trigger("create");
getContactDetails(contactId);
},
onUnload : function() {
console.log("After fragment is unloadded ");
}
});
}
function showSummary() {
WL.Page.load("contactSummary.html", {
onComplete : function() {
console.log("After fragment is loadded ");
jq('#mainContent').trigger("create");
},
onUnload : function() {
console.log("After fragment is unloadded ");
}
});
}
function getContactDetails(contactId) {
console.log("Entering getContactDetails()");
var invocationData = {
adapter : "ContactWSService",
procedure : "getContact",
parameters : [ contactId ]
}
var options = {
onSuccess : getContactDetailsSuccess,
onFailure : getContactDetailsFailure
}
busyIndicator.show();
WL.Client.invokeProcedure(invocationData, options);
}
function getContactDetailsSuccess(result) {
console.log("Entering getContactDetailsSuccess");
try {
if (result.status == 200) {
var displayContact = result.invocationResult.Envelope.Body.getContactResponse.contact;
$('firstName').value=displayContact.firstName;
$('lastName').value=displayContact.lastName;
$('email').value=displayContact.email;
}
busyIndicator.hide();
} catch (e) {
busyIndicator.hide();
}
}
function getContactDetailsFailure(result) {
console.log("Entering getContactDetailsFailure");
}
I had to make quite a few changes in my JavaScript they are as follows
loadContactSuccess: The loadContactSuccess method gets called when you execute search and it gets back the result, this method generates one row each for the result. I changed this method so that when it was generating the list i did attach getContactDetails(contactId) method to each rowshowContactDetail: The showContactDetail method will get called when user clicks on any of the user name, when that happens i am calling WL.Page.load("contactDetails.html" method which replaces the markup inside the page with contactDetail.html, this method also calls the getContactDetails which calls SOAP service with contactId to get details of the contact.showSummary: The showSummary method will be called when user clicks on the Summary button on the details page, it again calls WL.Page.load("contactSummary.html" to replace the markup in the current page with the contact details-
4 comments:
i cant understand the whats the purpose of result in loadContactSuccess(result) in your sample program please explain briefly
Is there any way you can post the full site. For some reason when I try using your pagePort idea, it does not work as you are showing. When I try, it seems to load the next page, but then trying to go through the app using subsequent pages looses the style. Also, it seems like some of the JS is not being read if I do not keep all pages in the main page and try to split them out into other pages as you are doing here.
salam kenal bos. lagi jalan jalan pagi nih
salam kenal bos. lagi jalan jalan pagi nih
Post a Comment