4 Replies - 2375 Views - Last Post: 16 June 2012 - 12:44 PM

#1 twcowdery  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 15-June 12

Want to replace java applets with something that works in mobile web

Posted 15 June 2012 - 09:40 AM

I teach high school math. Many years ago I created a series of Java applets that I (and other teachers all over the world) use to help teach some basic Algebra skills.

I can see the writing on the wall. Neither iOS or Android support Java on the web. So I want to look into rewriting the applets that I created so they will be more universally available. But I'm not sure where to start.

I tinkered with enough Javascript that I'm confident that I could figure out how to do some of the GUI. But the applets use several classes of objects. I don't know if that sort of thing can be recreated in Javascript. But I also don't know if HTML5 can fill in the gaps, or if not, what else to look for.

I've provided a link to one of the applets below so people can see what it looks like. I don't need anyone to tell me how to do this. I'm just looking for suggestions where to start.

http://www.district8...FoilApplet.html

Is This A Good Question/Topic? 0
  • +

Replies To: Want to replace java applets with something that works in mobile web

#2 Atli  Icon User is online

  • D.I.C Lover
  • member icon

Reputation: 3712
  • View blog
  • Posts: 5,963
  • Joined: 08-June 10

Re: Want to replace java applets with something that works in mobile web

Posted 15 June 2012 - 12:41 PM

Hey.

If you want this as universally available as possible, you'll want to use HTML, CSS and Javascript.

There are of course wast differences between how something like this would be implemented between Java and Javascript, but there is no question that both are more than capable.

Needing desperately to get away from my current ASP.NET project for a few minutes, I put together a small example for you. Just to show you how this may be done using HTML/CSS and Javascript. It roughly replicates what the first part of your Java applet does.

http://atli.advefir....amples/algebra/

You can use various CSS or Javascrip tricks to apply different styles based on different devices and screen sizes, so you could make this work for pretty much any device with a Javascript enabled browser.
Was This Post Helpful? 1
  • +
  • -

#3 twcowdery  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 15-June 12

Re: Want to replace java applets with something that works in mobile web

Posted 15 June 2012 - 07:47 PM

OMG! You nailed it! I tried it on both my Win7 computer, my android phone and my Nook running CM7 and it ran on all three. The screen was a little big on the phone screen, but it ran on all three and ran basically like my version does.

Thank you, thank you, thank you!

I really didn't want to learn another language before I retired, but I do want to leave these applets (and a few others I've thought of but not made yet) as kind of a legacy for my school & department. They've been a very valuable tool. So I hope you don't mind if I pick your brain a little further.

Can I assume that the main GUI is done in Javascriipt? Was the sizing is done with CSS, HTML5 or a combination?

Assuming that I'm correct about the GUI being done in Javascript, is Javascript object oriented and is it possible for Javascript code to be put in one file and be accessed by another? I have a related Factoring applet that reuses most of the code that is in the FOIL applet. And I have several other ideas that would practice other skills related to polynomials. Obviously, I'd prefer being able to reuse that code if possible.

Well, again, thanks for showing that the basic idea can be done. I've tinkered a little with Javascript, modified some existing CSS code, and done some very, very elementary HTML1 - but generally, I've stayed away from web related stuff. Even the web pages that my applets are in were created using Frontpage. It looks like I have some serious studying to do.
Was This Post Helpful? 0
  • +
  • -

#4 Atli  Icon User is online

  • D.I.C Lover
  • member icon

Reputation: 3712
  • View blog
  • Posts: 5,963
  • Joined: 08-June 10

Re: Want to replace java applets with something that works in mobile web

Posted 16 June 2012 - 07:01 AM

View Posttwcowdery, on 16 June 2012 - 02:47 AM, said:

Can I assume that the main GUI is done in Javascriipt? Was the sizing is done with CSS, HTML5 or a combination?

The entire app is a combination of HTML, CSS and Javascript. The HTML provides the structure of the UI, what elements exist and how they relate to each other; the CSS defines the appearance of the elements, the position, size and other visual details; and the Javascript adds the behavior to them, how they react to events and user interaction.

The HTML is the glue that holds it all together, so that's where you start. Then you add the CSS to make it pretty, followed by the Javascript to make it interesting.

View Posttwcowdery, on 16 June 2012 - 02:47 AM, said:

... is Javascript object oriented...

Not in the way you are used to from Java. Despite their names, they are very different languages. Rather than defining classes and then creating instances of them, you create objects and define their properties. This is typically done by defining a function, which acts as a constructor. (Remember, everything is an object, even functions.) You can then clone those objects with the new keyword, which is equivalent to creating a class instance. - I do that in the example I posted with the Formula object. That is how you define and use objects in Javascript. (Although it's not the only way.)

When you start considering polymorphism then it gets a bit trickier. There is no inheritance in Javascript the way you see in traditional OOP languages like Java. It's more like you copy the properties from one object to another and then add your own properties on top of that.

View Posttwcowdery, on 16 June 2012 - 02:47 AM, said:

... and is it possible for Javascript code to be put in one file and be accessed by another?

Sure. This is all happening in the browser, so all you would have to do is load the script file into the page. The simplest way to do that is to just add a <script src="..."></script> tag to the HTML <head> tag. Then the browser will load it for you automatically. You can also use AJAX to load and execute scripts directly from Javascript, but that takes a bit more effort.

Of course, once an app like that is ready for use, all the Javascript code can be "minified" into a single script file (one might compare that to compiling a Java app into a .jar file, even though Javascript code doesn't really "compile") and included into the HTML as a single file, making this unnecessary.

View Posttwcowdery, on 16 June 2012 - 02:47 AM, said:

I have a related Factoring applet that reuses most of the code that is in the FOIL applet. And I have several other ideas that would practice other skills related to polynomials. Obviously, I'd prefer being able to reuse that code if possible.

Shouldn't be a problem. Javascript code can certainly be written in a modular fashion so it can be reused.
Was This Post Helpful? 1
  • +
  • -

#5 twcowdery  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 15-June 12

Re: Want to replace java applets with something that works in mobile web

Posted 16 June 2012 - 12:44 PM

Thanks you again.

In addition to math, I teach intro level classes in C# and Java. I was aware of the history behind both Java and Javascript, so I knew they weren't related. But as I said, I have stayed as far away from web development as I could. I'd done enough Javascript to know the syntax is similar, but obviously didn't know much beyond that. I hope my poor old brain can handle learning another new paradigm! LOL!

Thanks again!
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1