Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Design > Adobe Creative Suite

  • Print
  • + Share This
This chapter is from the book

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.8Figure 3.8 User can select a thread.


Figure 3.9Figure 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.10Figure 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.11Figure 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.12Figure 3.12 A Flash form collects data and registers a new to allow for the posting of threads and replies.


Figure 3.13Figure 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
  • + Share This
  • 🔖 Save To Your Account