- Flash MX Message Board Features
- Why Use Flash for a Message Board?
- How Our Message Board Works
- The User Interface: The Application
- ShowThreads, ShowMessages, Frames 20 and 30
- Summary
ShowThreads, ShowMessages, Frames 20 and 30
The display of topics, threads, and messages (Figure 3.8 and Figure 3.9) are almost identical in their code implementation. Please go ahead and peruse the ActionScript that enables their functionality (Frame 20, Frame 30). You will find the code for those functions is very similar to that of ShowTopics (frame 10). The ScrollPane and text formatting again reigns supreme in the data display.
Figure 3.8 User can select a thread.
Figure 3.9 The display of threads and messages is very similar in ActionScript as the display of topics.
We'll move ahead in the FLA to frame 40 where a user can choose to log in (if he's already registered with the message board system.) A login attempt without a previous registration simply produces an error (and the system displays this error).
Login, Frame 40
On frame 40 ("Login"), you'll find a login panel on the Stage composed of two input fields: Username and Password (Figure 3.10). Notice that the text fields are not associated directly with variable names but with variable name instances. Remember, text fields can now be treated as movie clips.
Figure 3.10 The Login process involves an interface panel with two input fields.
Several functions are defined here on frame 40: loginUser(), parseLoginResults(), and buildLoginTransaction(username, password).
There is a button to submit (to process the entered data), and the code on this button is as follows:
on(press) { // Handle sending the login information loginUser(); }
On frame 40 itself, you'll find the code that defines the loginUser function and the ActionScript to handle the validation of the information submitted. After a proper login has taken place, the user is notified of a proper login and is then sent to the topics view ("ShowTopics"). If the user enters information that does not match data in the database, the message board gives the user an error message. The commented code follows:
// loginUser function // This function is used to log the user into the chat function loginUser() { // build the login transaction var loginRequest = buildLoginTransaction(username.text, password.text); // this goes at the end of the preceding¨ code line // set the document to send to the server sd.setDocOut(loginRequest); // set the document you want to contain the response sd.setDocIn(new XML()); // set the call back for when its done sd.onLoad = parseLoginResults; // execute it sd.execute(); } // end loginUser function // parseLoginResults function // This function is used to parse the login // results from the server function parseLoginResults() { // Get the data from the ServerData object var dataIn = this.getDocIn(); // if the transaction worked or not if(!wasSuccessful(dataIn)) { // Attach the error panel _root.attachMovie("ErrorPanel", "loginErrorPanel", errorPanelDepth);// this goes at the end of the preceding¨ code line // Configure the panel loginErrorPanel.setMessage(errorMessage); loginErrorPanel.centerClip(); // Return out of this function return; } // end wasSuccessful() if statement // Attach the message panel _root.attachMovie("MessagePanel", "loginMessagePanel", messagePanelDepth);// this goes at the end of the preceding¨ code line // Configure the panel loginMessagePanel.setMessage("You have logged in¨ sucessfully. Press 'OK' to contiue");// this goes at the end of the¨ preceding // code line loginMessagePanel.setButtonText("OK"); loginMessagePanel.centerClip(); // Redirect the user when the panel is closed loginMessagePanel.messagePanelClose = function() { gotoAndPlay("ShowTopics"); } } // end parseLoginResults function // buildLoginTransaction function // This function creates the XML document for a new user function buildLoginTransaction(username, password) { // Build a basic 'Create User' transaction var createUserRequest = buildBaseRequest("Login"); // Get the data node var dataNode = findDataNode(createUserRequest); // Username XML code // Create the Username node var usernameNode = createUserRequest.createElement¨ ("Username"); // Create the Username text node var usernameValue = createUserRequest.createTextNode¨ (username); // Append the usernameValue node to the usernameNode usernameNode.appendChild(usernameValue); // Append the usernameNode to the dataNode node dataNode.appendChild(usernameNode); // Password XML code // Create the Password node var passwordNode = createUserRequest.createElement¨ ("Password"); 80 // Create the Password text node var passwordValue = createUserRequest.createTextNode¨ (password); // Append the passwordValue node to the passwordNode passwordNode.appendChild(passwordValue); // Append the passwordNode to the dataNode node dataNode.appendChild(passwordNode); // return the finished XML document return createUserRequest; } // end buildLoginTransaction function
NewMessage, Frame 60
In order to get your information into the database to participate, the NewMessage part of the application (Figure 3.11) will collect your subject line and body message. If you have not logged in to the system, trying to start a new thread or reply to a post will result in an error message letting you know that you have forgotten to login. If you never registered, it would be time to do so.
Figure 3.11 The NewMessage module in the message board application.
Several functions are defined at this point: postMessage(), parsePost MessageResults(), and buildPostMessageTransaction(subject, body). postMessage() is the main function in this section, and the other two functions are nested within it, so that upon calling postMessage(), all functions execute and process.
Please pay special attention to the commenting in the ActionScript because it really goes a long way guiding you to its functionality.
The following code is on the submit button:
on(press) { // Post the message postMessage(); }
The ActionScript for the posting of a new message (on frame 60):
// postMessage function // This function is used to log the user into the chat function postMessage() { // build the postMessage transaction var loginRequest = buildPostMessageTransaction¨ (messageTitle.text, messageBody.text);// this goes at the end of the preceding¨ code line // set the document to send to the server sd.setDocOut(loginRequest); // set the document you want to contain the response sd.setDocIn(new XML()); // set the call back for when its done sd.onLoad = parsePostMessageResults; // execute it sd.execute(); } // end postMessage function // parsePostMessageResults function // This function is used to parse the post message // results from the server function parsePostMessageResults() { // Get the data from the ServerData object var dataIn = this.getDocIn(); // if the transaction worked or not if(!wasSuccessful(dataIn)) { 82 // Attach the error panel _root.attachMovie("ErrorPanel", "messageErrorPanel", errorPanelDepth);// this goes at the end of the preceding¨ code line // Configure the panel messageErrorPanel.setMessage(errorMessage); messageErrorPanel.centerClip(); // Return out of this function return; } // end wasSuccessful() if statement // Attach the message panel _root.attachMovie("MessagePanel", "messageMessagePanel", messagePanelDepth);// this goes at the end of the preceding¨ code line // Configure the panel messageMessagePanel.setMessage("Your message has been¨ posted sucessfully.\nPress 'OK' to contiue");// this goes at the¨ end of the // preceding code line messageMessagePanel.setButtonText("OK"); messageMessagePanel.centerClip(); // Redirect the user when the panel is closed messageMessagePanel.messagePanelClose = function() { gotoAndPlay("ShowThreads"); } } // end parsePostMessageResults function // buildPostMessageTransaction function // This function creates the XML document for a new message function buildPostMessageTransaction(subject, body) { // Build a basic 'Post Message' transaction var postMessageRequest = buildBaseRequest("PostMessage"); // Get the data node var dataNode = findDataNode(postMessageRequest); // Subject XML code // Create the usernameNode var subjectNode = postMessageRequest.createElement¨ ("Subject"); // Create the Subject text node var subjectValue = postMessageRequest.createTextNode¨ (subject); // Append the subjectValue node to the subjectNode subjectNode.appendChild(subjectValue); // Body XML code // Create the Body node var bodyNode = postMessageRequest.createElement("Body"); // Create the Body text node var bodyValue = postMessageRequest.createTextNode(body); // Append the bodyValue node to the bodyNode bodyNode.appendChild(bodyValue); // Message XML code // create the messageNode var messageNode = postMessageRequest.createElement¨ ("Message"); // Add the attributes messageNode.attributes.TopicID = topicID; messageNode.attributes.ThreadID = threadID; // Append the subjectNode to the messageNode messageNode.appendChild(subjectNode); // Append the bodyNode to the messageNode messageNode.appendChild(bodyNode); // Append the messageNode to the dataNode dataNode.appendChild(messageNode); // return the finished XML document return postMessageRequest; } // end buildPostMessageTransaction function
Please refer to the backend process diagram (Figure 3.2) at the beginning of this chapter. You can see how the postMessageRequest transaction is processed. For that matter, having the diagram handy will help you understand the processing of different types of requests throughout the entire system.
Register, Frame 70
In order to properly log in, a user needs to first register an account (Figure 3.12) within the message board system. This allows for the entry of a user-name and password, which are stored in the database for future queries. Registration also requires a proper email address to be entered, and a response to an input text box asking whether the email address should be available to others viewing posts and so forth made by this registrant. For now the field should contain "Yes" or "No"you could provide radio buttons, or similar selection methods for this if you wish to customize the application. Users who don't register or log in receive an error message (Figure 3.13).
Figure 3.12 A Flash form collects data and registers a new to allow for the posting of threads and replies.
Figure 3.13 A user who hasn't registered or logged in gets an error message when trying to interact with the message board system.
The following code is used to register a user in the database. This process involves several functions that run sequentially. The first step is to call buildCreateUserTransaction and pass in the needed data. This function builds the XML document needed to register a user. Once we have that document, we send it to the server and use parseRegistrationResults to determine whether the transaction was successful. At this point, the application is able to proceed.
// registerUser function // This function will register a user with the server function registerUser() { // Build the create user transaction var createUserRequest = buildCreateUserTransaction¨ (username.text, password.text, email.text, showEmail.text);// this goes at¨ the end // of the preceding code line // set the document to send to the server sd.setDocOut(createUserRequest); // set the document you want to contain the response sd.setDocIn(new XML()); // set the call back for when its done sd.onLoad = parseRegistrationResults; // execute it sd.execute(); } // end registerUser function // parseRegistrationResults function // This function is used to parse the registration // results from the server function parseRegistrationResults() { // Get the data from the ServerData object var dataIn = this.getDocIn(); // if the transaction worked or not if(!wasSuccessful(dataIn)) { // Attach the error panel _root.attachMovie("ErrorPanel", "registerErrorPanel", errorPanelDepth);// this goes at the end of the preceding¨ code line // Configure the panel registerErrorPanel.setMessage(errorMessage); registerErrorPanel.centerClip(); // Return out of this function return; } // end wasSuccessful() if statement // Attach the message panel _root.attachMovie("MessagePanel", "registerMessagePanel", messagePanelDepth);// this goes at the end of the preceding¨ code line // Configure the panel registerMessagePanel.setMessage("You have registed a new¨ account sucessfully. Press 'Log In' to contiue");// this goes at¨ the end of // the preceding code line registerMessagePanel.setButtonText("Log In"); registerMessagePanel.centerClip(); // Redirect the user when the panel is closed registerMessagePanel.messagePanelClose = function() { gotoAndPlay("Login"); } } // end parseRegistrationResults function // buildCreateUserTransaction function // This function creates the XML document for a new user function buildCreateUserTransaction(username, password,¨ email, showEmail) {// this goes at the end of the preceding code¨ line // Build a basic 'Create User' transaction var createUserRequest = buildBaseRequest("CreateUser"); // Get the data node var dataNode = findDataNode(createUserRequest); // Username XML code // Create the Username node var usernameNode = createUserRequest.createElement("Username"); // Create the Username text node var usernameValue = createUserRequest.createTextNode¨ (username); // Append the usernameValue node to the usernameNode usernameNode.appendChild(usernameValue); // Append the usernameNode to the dataNode node dataNode.appendChild(usernameNode); // Password XML code // Create the Password node var passwordNode = createUserRequest.createElement¨ ("Password"); // Create the Password text node var passwordValue = createUserRequest.createTextNode¨ (password); // Append the passwordValue node to the passwordNode passwordNode.appendChild(passwordValue); // Append the passwordNode to the dataNode node dataNode.appendChild(passwordNode); // Email XML code // Create the Email node var emailNode = createUserRequest.createElement¨ ("Email"); // Create the Email text node var emailValue = createUserRequest.createTextNode(email); // Append the emailValue node to the emailNode emailNode.appendChild(emailValue); // Append the emailNode to the dataNode node dataNode.appendChild(emailNode); // ShowEmail XML code // Create the Email node var showEmailNode = createUserRequest.createElement¨ ("ShowEmail"); // Create the Email text node var showEmailValue = createUserRequest.createTextNode¨ (showEmail); // Append the showEmailValue node to the showEmailNode showEmailNode.appendChild(showEmailValue); // Append the showEmailNode to the dataNode node dataNode.appendChild(showEmailNode); // return the finished XML document return createUserRequest; } // end buildCreateUserTransaction function