Flex with Server-Side XML and PHP

On Monday, we talked about how to use XML in Flex, both to read in information for the combo box and for filling a data grid. We also demonstrated a PHP script that will re-write your XML file based on the user’s actions. That example can be found here.

I’ve already posted the simpler Flex example that your HW6 can be patterned after, but here is a working example of a Flex app that uses the PHP script above to save changes to the XML. You can also see the resulting, styled XML file here.

Also, please be ready to start presenting your projects the Monday after Thanksgiving. As I mentioned, I will grade accordingly for those that present first.

HW6

Assignment 6
Assigned: Wednesday, November 12th
Due: Wednesday, November 26th

Title: Your CMS in Flex

Scenario:

Author a backend editor for your XML blog in Flex. This backend will consist of a few simple input fields to post a new entry (HW3), a data grid that will display all of the entries and their fields, and a button that allows you to submit these fields to a PHP script that will modify your blog. I will be providing the PHP script, but you will have to place it on your server to execute.

You’ll also be using Flex HTTPServices to read and write to the XML. The read service will point directly to the XML, while the write will send the data via POST to the provided PHP script.

Additionally, you will need to modify the permissions to your blog xml file either with an SSH or SCP client. I will show you this in class next week.

Deliverables:

A single URL submitted to http://www.dm.ucf.edu/~jpittard/dig3716_hw.php. This
URL will point to your online Flex application. Also be sure that it will allow me to View Source and see your MXML file. You will receive a 0 if I cannot see your source MXML.

Grading:

Correct implementation of the above with clean, correct, and cited (if necessary) code.

HTML Attributes in XSL

I’ve linked a simple example of XML and XSL that shows how to generate attributes (eg. href, src, style) for HTML elements in XSL. You might find them handy!

Client List XML
Client List XSL

Flex Topics

Here are the topics we talked about today and links to the examples I demonstrated/explained in class.
At the end are two applications that I built last semester relating to these topics. Check them out, particularly the second one, as it relates directly to your HW6.

Data Binding in Flex

Data Grid

XML in Flex

E4X with XML in Flex

The HTTP Service in Flex

The Star Table in Flex

A Simple XML-based blog (read only)

HW3 and HW4 Grades

As some of you have noticed, I posted HW3 and HW4 grades late last night on myUCF Grades. Here are some brief explanations of the comments that I posted explaining your grades. If any of the below can be fixed and resubmitted by one week from Monday, I’ll give you back some additional points. Better that you fix what is broken for some credit than never learn how to do it and stick with the lower grade.

No URL

You neglected to include the personal URL field.

No * verification

If I could not see evidence of the required fields actually being required, and/or the email and URL not being checked for validity in your submission, you probably saw this comment.

Incorrect or Incomplete verification

I saw some evidence that you were verifying what was required, but it didn’t work for my test examples. Most often, this was the email address failing on the test case “asd@asd”. This should fail because there is no TLD at the end of the account name.

Alert Doesn’t Work or No Alert

I checked both your HW3a and HW3b to see the alert dialog that displayed all of the user’s data. As long as at least one of them had that, I gave full credit. Note that a simple alert notifying the user that he had an incorrect field did not suffice for this requirement.

No DHTML

Overall, I was pleased to see that most of you got the DHTML working quite well. If I didn’t see any evidence of DHTML, you lost points for this.

Other

Some of you lost credit because I didn’t see any processing occur after hitting submit. This is most likely an error in your JavaScript which effectively short-circuits your code. Please see Mr. Novatnak or myself during the lab time next week to figure this out.

Uncredited Code

I noticed a disturbingly familiar layout and code structure to some of the HW4 calendars. Upon further inspection, two types in particular stood out. If you received this comment and a 0 for the HW, it is because you did not credit the site or author that you stole code from. I say “stole” because, without citation or reference, you are claiming that you authored this code yourself. This is very much a no-no.

If you received this comment, I’m willing to give you the opportunity to redo the assignment. From scratch. No referenced code allowed. You have one week from this Monday to finish this correctly, and I’ll give you some (though not 100%) of the credit back. If I find completely copied code a second time, however, I’ll give you an automatic zero.

Not a Full Year

A couple submissions displayed only one month at a time. Please reread the assignment definition and resubmit for some additional points.

Flex Intro

First, make sure you visit https://freeriatools.adobe.com/flex/ to get your free copy of Flex Builder 3. You can use the trial for 60 days before you have to register, but verifying that you are a student will get you that registration.

Once installed, visit http://www.adobe.com/devnet/flex/ to get started building simple Flex applications!

Date Help from the Lab

This will help you figure out one key part of HW4. This reference for the Javascript Date object will also help!

   daysofweek = new Array();
   daysofweek[0] = "Sun";
   daysofweek[1] = "Mon";
   daysofweek[2] = "Tue";
   daysofweek[3] = "Wed";
   daysofweek[4] = "Thu";
   daysofweek[5] = "Fri";
   daysofweek[6] = "Sat";

   function whatistoday()
   {
      var d = new Date();
	  return daysofweek[d.getDay()];
   }

   function novemberonethisyear()
   {
      var year = 2008;
	  var month = 10;
	  var d = new Date(year, month, 1);
	  return daysofweek[d.getDay()];
   }
   document.write("Today is " + whatistoday());
   document.write("<br><br>November 1, 2008 falls on a "
+ novemberonethisyear());

XML/XSL

In class this past Monday, we first went over the answers to the midterm exam. We then talked about XML, XML namespaces, a brief look at XPath, and styling XML with CSS and XSLT. Check the links to w3schools for some excellent tutorials, and use HW5 as a guide to knowing what you need to be able to do with XML and XSLT.

Also, I mentioned that you should start thinking about project ideas. These projects will be completed over the remaining weeks of this semester and presented during the last day of class and the final exam period. Your project should consist of some use of the technologies we’ve studied this semester, using at least one of the programming languages (eg. Javascript, XSL, Flex, Actionscript) in addition to the expected XHTML, CSS, XML, etc. You can also extend any of your existing HW’s into something useful to you, so long as the work goes beyond the assigned HW.

Please think about what you might want to do for a project, and discuss it with me next week. You will be working on this concurrently with your remaining HW assignments, so be sure to leave yourself plenty of time. Also, be prepared to present your work in front of the class and discuss what new technology or use of technology you brought to the project.

Finally, if you’re interested in some free on-line references, O’Reilly is giving away access through BoingBoing.net at this link. Check it out!

More Help from the Lab

These functions might help guide your efforts for HW4. Also not that though I posted HW5, it won’t be due for several weeks. I only posted it because it directly relates to what we did this past Monday, and so any of you can get ahead on your HW assignments. Enjoy!

// this will write a "Martian" month where weeks last 10 days
// the month will be maxDays long
function writeMartianMonth(maxDays)
{
   var curDay = 1;
   document.write("<table border='1'><tr>");
   while (curDay <= maxDays)
   {
      document.write("<td>"+curDay+"</td>");
      if ((curDay % 10) == 0)
      {
         document.write("</tr><tr>");
      }
      curDay++;
   }
   document.write("</table>");
}

// an HTML table version of the multiplication table
function writeTable(width,height)
{
   document.write("<table border='1'>");
   for (i=1;i<=height;i++)
   {
      document.write("<tr>");
      for (j=1;j<=width;j++)
      {
          document.write("<td>");
          document.write(i*j);
          document.write("</td>");
      }
      document.write("</tr>");
   }
   document.write("</table>");
}

HW5

Assignment 5
Assigned: Monday, November 3rd
Due: Monday, November 10th

Title: A Blog in XML/XSL

Scenario:

Adapt the structure of your CMS/blog to a single XML file containing a minimum
of the following data: post title, post date, post author, and post content.

Then author an XSL document that styles the above XML file to look as close as
you can get to the CMS/blog you designed in HW2. Note, you can re-use the previous
CSS files written in HW2 with XSL if so desired.

Deliverables:

A single URL submitted to http://www.dm.ucf.edu/~jpittard/dig3716_hw.php. This
URL will point to your online XML file.

Grading:

Correct implementation of the above with clean, correct, and cited (if necessary) code.