When I started getting into Flex several years ago, the first real application I created was an online grading system for a small K-12 school that I was consulting with as a side gig. That was around 2005, and after several years of use, the school has outgrown this initial design. Since they are no longer using it, I decided it would be ok to publish a demo.
It was fairly rough around the edges, but since it was my first attempt I think it turned out pretty good. It has several features including:
- Flex Data Services / Live Cycle Data Services integration, providing real time updates to users.
- Instance messaging functionality so users could get notifications in real-time. This also allowed me to monitor which users were logged in and using the system.
- A library of comments which could be saved and then reused by the teachers to speed up the time it took to create reports.
- A report-creation wizard to generate blank reports in bulk so the teachers would not have click ‘new’ for each student in the class.
- PDF report generation (using the iText framework) combined with an iFrame overlay to make the resulting PDF files look like they are actually in the Flex application.
There are two parts to the application. The Teacher Portal is where teachers create courses, enroll students and add grade and progress reports. (I used the Flex Store demo as my inspiration for the animations.). The Administrator Portal is where administrators could review the submitted reports and print out PDF files.
Teacher Portal
Administrator Portal
For this demo, I’ve taken out all the private info and used a bunch of stock photos of kids with made-up information. (These are NOT real students and the information is completely fabricated for demonstration purposes)
So take a look and let me know what you think. They are large so it takes a few seconds to download. Yes there are bugs and issues, but this was my first attempt from about 7 years ago so give me a break 🙂
UPDATE: Since I’ve moved to a new server, I have not setup the java server side portion of the demo so I’ve had to disable them. Sorry 🙁
Hi there
Very nice apps that you have posted above.
Any chance of having a look at the source code when you get a chance?
Thanks in advance
Unfortunately I cannot post the source for this one because it may still be used occasionally by the school. However, if there is any specific part of the app that interests you, I’ll be happy to detail how I made it work in Flex.
It’s so cool.
I like the animation of selecting a student from the “pool of students” at the My enrollment of teacher account.
Can you share more detail on this part? For example, is it using any library such as TweenMax, Papervision 3D, etc?
Thanks
@Michael
I use TweenMax almost exclusively but most of this application was done with manual animations using the default flex animation classes. Regarding the enrollment animation, are you referring to the drag and drop animation where the student name shrinks into the list on which it is dropped? If so, that animation is actually executed by default by Flex on a drag-drop action. You can find the code in the mouseUpHandler function in the DragProxy.as class in the Flex source code that Adobe provides. 🙂
send failed error comes when application loading
Probably due to a firewall issue. Flex data services sometimes uses ports that can be blocked by firewalls.
Your data service written in PHP or Java?
All of my backends are done in Java. I think this one used AMF from flex data services. The client used Cairngorm as a framework while the server-side used Spring. The DB is MySQL and I used Hibernate to connect it to the Java app.
I am a new flex learner. This application is so cool and I enjoyed it very much.
I just want to know how you implement the effect of displaying courses,enrollments and the student detail? In detail, the teacher has his/her courses list, when select the course he/she can see the enrollments on the right panel where show students in grid, the user can also view the information of student by choosing one student.
I just wonder how to do this, thank you!
I just wonder how you implement the move effect of student list of enrollments. The list go to right and dislay the student detail, and close the detail the list move back.