From Eduwiki

Jump to: navigation, search

In the last few years, developers have had to rethink and learn better ways to develop programs. This is due to the Internet as well as mobile technologies. In addition, since the Macintosh has come a long way, developers try to make their programs cross-platform (including Linux). Twenty years ago, when a programmer developed software for the PC (Microsoft), the company would have to spend twice as much money to port that same program to the Mac, basically rewriting it to work on another platform. This, of course, prevented the company from putting out Mac (Apple) compatible software. The expense was too high. It was not worth the expense.

Today, 2008, there are a few technologies that have popped up to make it possible to develop software for the Internet, Desktop, and mobile devices without having the company spend tons of money and time. Software can now be easily ported to PC AND Mac. Programmers can now create software to run within the browser and/or the users desktop without worrying about the platform, thus creating true platform-independent software.

I will be discussing 3 technologies that have made a significant change in application development. The first two technologies come from Adobe, Flex and AIR. The third programming tool comes from Apple, Dashcode, to create widgets.

Adobe Flex and AIR

What is Flex?

Flex is a framework, based on the open source Eclipse framework, that uses MXML (multimedia Extensible Markup Language) and ActionScript 3 to create web or desktop based applications. The Flex web apps are extremely interactive. For example, within a web page, the user can drag and drop objects as though they were on the desktop. Such applications are called, Rich Internet Applications (RIA).

You can learn more about Flex by going to Flex

This is where AIR and Flash Player comes in...

What is AIR and Flash Player

Flash player (through its plug-in) allows the browser to play SWF files. The user might have to install it, but it's free and only takes a few seconds. The SWF files are platform independent, meaning that Mac OS X, Windows, or Linux users can access the application without any tweaking. There's one file for every platform.

The problem with Flex web apps it that the application can not access or write to the user's local drive. Flex web apps tend to be server driven; for example, accessing a remote database.

Examples:

So what is there to do? This is where AIR comes in....

AIR (Adobe Integrated Runtime):

AIR makes it possible for the developer to create desktop applications without having to rewrite major sections of code. Using AIR, the user can run applications that can access and write to his/her local drive.

You can download AIR examples by going to Adobe's website:

AIR Applications

Finetune

Sam's Interactive Reader

Flex Builder 3

Although a programmer can create RIA using nothing more than a text editor and Flex SDK, it would slow down the work flow. Developers often have many programs to work on, so they need a tool that would speed up the process. Adobe has release Flex Builder to solve the work flow problem. Flex Builder is a tool to combine different technologies: ActionScript 3, MXHTML (HTML), PHP, etc.. It is also open source. Adobe came out with Flex Builder to make the process of developing multi-platform applications less cumbersome and more efficient. Flex builder is known as an IDE (Integrated Development Environment). It's like DreamWeaver. It allows the user to quickly see and edit the code and view a visual representation of the code without having to compile it every time there is a change. The developer also has a variety of User Interface (UI) components to work with. This speeds up the process exponentially. There are also extension/plug-ins to add functionality to your program.

I can talk about it till I am (or you are) blue in the face. The best way to learn about Flex is to use it yourself. The next section will go over how to create a SIMPLE RSS Reader in just a few minutes.

You can download a free 60 day trial of Flex Builder 3 at Flex Builder 3 Trial or...

you can request a free student version at Flex Builder 3 Student Version. You just have to fill out a form with proof you are a student (current ID or a letter from the school). I recently requested a student version and in about 4 days I had the serial number.

comparison chart

Hands on Activity

Let's get started....

I will be going over how to create a RSS Reader using Flex Builder 3. The following activity is from "Foundation Actionscript 3.0 with Flash CS3 and Flex" by Steve Webster, Todd Yard, and Sean McSharry published by Friends of Ed.

After you have downloaded and installed the application launch Flex Builder 3 (FB3).

1) Go to FILE --> New --> Flex Project. Name the project "RSSReader" (w/o quotes) and click Finish.

Now that you have your project window open it's time to create a web application...

2) In the LAYOUT panel to the right, change 'layout' field to VERTICAL

3) Next, go to the Components panel and under 'Layout' folder(bin) click and drag VDividedBox icon onto the colored filled box in DESIGN view.

4) Once you have dragged the VDividedBox UI component onto the Design View, a dialogue box will appear. Set it to 100% Width and 100% Height. Click 'OK'.

5) Go to the COMPONENT panel and in the 'Control' bin drag and drop the "DataGrid" UI component on top of the VDividedBox component in the Design View.

6) Once you see the data grid, make sure it is selected and type the following in the FLEX PROPERTIES panel on the left side within the 'Common' section:

ID: entries
Data Provider: {feed.lastResult.rss.channel.item} (include the curly brackets)
Width: 100%

7) Drag and drop the TextArea UI component within the Layout bin on top of the VDividedBox, but under the DataGrid component (a blue line will appear).

8) OK, all the visual components have been taken care of. Now we need to add code by going to the SOURCE View. Click on the Source tab. You will see MXML...

Change and add the following:

Delete column 3. We only need two columns
Change COLUMN 1 headerText to "Date" and dataField 'Col1' to "pubDate"
Change COLUMN 2 headerText to "Title" and dataField 'Col2' to "title"
Add 'creationComplete' attribute to <mx:Application> tag with value of 'feed.send()'
UNDER <mx:application> tag, add <mx:HTTPServices id="feed" url="{add RSS FEED HERE of your choice}">
Within <textArea> tag add the following attribute: {entries.selectedItem.description}

That's all folks!!!!

overview Live help

Widgets

What are Widgets

Widgets are very small applications (lite apps) that can quickly be launched. They generally provide information to the user. That is, if I want to know what the weather forecast is for the next 5 days, I can launch a weather widget providing me with a 5 day forecast or if I want to know the time or date I can launch a widget. You can also create web applications, similar to Flex.

Development Tool: Dashbcode

Another development tool that has changed how Mac software developers code their applications is Xcode. This is a very robust IDE. As part of Xcode, there is a tool called Dashcode. This development tool makes creating mac widgets as easy as 1-2-3.

There are 3 components to creating a widget:

Graphics: You can use the graphics provided (Template) or you can make your own using something like Photoshop.
Coding: These applications as opposed to Flex, are highly dependent on HTML and Javascript. If you know javascript you can make a widget in just a few minutes without using the templates.
Style: You use CSS (Cascading Style Sheets) to change how the widget look. This is a separate document that controls the font size, color and placement, among other variables.

To learn more about developing widgets for the Mac visit apple's Widget tutorial page.

Educational Uses

These technologies can be used in three distinct ways:

Teacher centered
Student centered
curriculum centered

Flex and xCode developers can easily create robust applications that could help teachers with organizing their data. Teachers could use a Flex application to keep track of the students artwork, a visual portfolio. Widgets could be used to remind teachers when the period is over or brings up a list of all the students in class. Teachers could also use an iPhone to take roll call. A developer can easily create a simplified roster with pictures of all the students in his/her class.

Students can use the applications to manage their time better. They can use them to keep track of their homework assignments and make to do lists. Students could use web 2.0 applications to write their papers (buzzword or google docs). Using web 2.0 apps. may make it easier for the teacher and student to review the assignment and provide feedback more efficiently. Adobe has a a whole list of applications for students: Student AIR applications

Lastly, teachers could use these technologies to teach programming (logic) skills as well as science principles (idea-hypothesis-test-tweak-retest-proven {working product}). The learning curve of writing applications like the RSS reader previously discussed is not so high that it would intimidate all of the students. The IDE's has made programming accessible to the non-geeks.

Next Generation Application Development

From Eduwiki

Contents

Adobe Flex and AIR

What is Flex?

What is AIR and Flash Player

Flex Builder 3

comparison chart

Hands on Activity

Widgets

What are Widgets

Development Tool: Dashbcode

Educational Uses

Resources/links

Views

Personal tools

Navigation

Classes

Search

Toolbox