Java-Gaming.org    
Featured games (91)
games approved by the League of Dukes
Games in Showcase (581)
games submitted by our members
Games in WIP (500)
games currently in development
News: Read the Java Gaming Resources, or peek at the official Java tutorials
 
    Home     Help   Search   Login   Register   
Pages: [1]
  ignore  |  Print  
  GUI web dev  (Read 3077 times)
0 Members and 1 Guest are viewing this topic.
Offline appel

JGO Wizard


Medals: 49
Projects: 5


I always win!


« Posted 2011-04-08 12:33:39 »

My work involves GUI programming for IPTV set-top-boxes. We're operating old boxes currently, with a fairly simple browser (imagine Netscape 2.0), so what we have been able to do with GUI is quite limited.

Now we have a new set-top-box we will be start giving to customers later this year, and the "portal" (the web site containing the gui that the set-top-boxes load) is quite "backwards" in comparison to the capabilities of the new set-top-box (it has Opera 10 and will be dual core).

So, here I sit with these boxes that seem to have all capabilities except of anti-gravity hovering.

I'm looking into all the new idioms for developing "web apps", because that's really what the box will run, an app written with Javascript and web stuff like html, svg, canvas, or even opengl. The "app" is really an device run application, which simply uses the web and the browser as a medium, so it's nothing like a ordinary hyperlink-based webpage, but a very specifically designed UI app.

Already looking at some libraries like Backbone, JQuery, Less, and imagining how I can use all these "new" web features available in Opera 10, widgets, and such.

Anyway, my question is really the following: What should I take a look at?

Really looking for a "heads up, look at this library" or "this is a common way to do things". I may be missing something obviously beneficial. There are many ways to accomplish what I'm doing, and I can already accomplish what I need to do with pre-existing technology, but I'm looking to evolve this "pre-existing technology" further.

Thanks.

Check out the 4K competition @ www.java4k.com
Check out GAMADU (my own site) @ http://gamadu.com/
Offline JL235

JGO Coder


Medals: 10



« Reply #1 - Posted 2011-04-08 14:32:50 »

Take a look at GWT; that would be my number 1 recommendation. It's very good at developing webapps, especially for sites which are one giant application. It's supposed to be used to build client-server applications, but you can use it to just build the client. I've not used it, but you should also take a look at Dojo. It's meant to be an excellent for building GUIs. Finally don't bother looking at Prototype and Scriptaculous, they are terrible compared to JQuery (and much slower)!

Offline JoeB

Innocent Bystander





« Reply #2 - Posted 2011-04-08 15:19:14 »

+1 for GWT.

Its just awesome.
Games published by our own members! Check 'em out!
Legends of Yore - The Casual Retro Roguelike
Offline appel

JGO Wizard


Medals: 49
Projects: 5


I always win!


« Reply #3 - Posted 2011-04-08 16:19:43 »

I've taken a look at GWT, and I have my doubts.

The kind of application I'm making is totally different from what you typically would use GWT for, e.g. web based, keyboard-mouse interaction.  User interaction on a TV is totally different, there is no mouse or keyboard, only a remote control, and almost no data input, only pressing buttons and seeing a reaction. Like in a VOD catalog, where you would simply press the cover with your mouse cursor in a PC browser, you would have to move the highlight to it with your remote control's arrow buttons.

I'm not sure such a tight Java coupling is a good idea as well. GWT seems to me like a solution only suited to Java developers that can't do web development.

Check out the 4K competition @ www.java4k.com
Check out GAMADU (my own site) @ http://gamadu.com/
Offline steveyO
« Reply #4 - Posted 2011-04-08 17:54:27 »

JQuery is fantastic.  Extremely lightweight, hundreds of plugins (which work x-browser normally) and doesn't clutter up your code like other Javascript frameworks.  Takes a while to get used to the syntax (selectors etc.) but after which I have never looked back!

https://play.google.com/store/apps/details?id=com.bullsquared.alggame Annoying Little Gits (Android)
www.bullsquared.com   Play java (applet) games! www.chessclockpro.com Free Online Chess Clock
Offline appel

JGO Wizard


Medals: 49
Projects: 5


I always win!


« Reply #5 - Posted 2011-04-08 19:42:32 »

JQuery is fantastic.  Extremely lightweight, hundreds of plugins (which work x-browser normally) and doesn't clutter up your code like other Javascript frameworks.  Takes a while to get used to the syntax (selectors etc.) but after which I have never looked back!

Yes, I'm beginning to think that Backbone+JQuery, HTML+CSS, and REST in the backend is the right way to go.

Check out the 4K competition @ www.java4k.com
Check out GAMADU (my own site) @ http://gamadu.com/
Offline Addictman

Senior Member


Medals: 3
Projects: 1


Java games rock!


« Reply #6 - Posted 2011-04-08 20:08:05 »

I use jQuery extensively daily, and I can only agree: It rocks. I used to hate javascript. Not anymore.
Offline Nate

JGO Kernel


Medals: 129
Projects: 3
Exp: 14 years


Esoteric Software


« Reply #7 - Posted 2011-04-08 23:29:29 »

-1 GWT

JQuery is ok.

Backbone looks like a really big hammer. You're building a web app, not a space shuttle...

My advice:

1) Keep it simple. Don't write more JavaScript than is needed to do what you need. Don't bother with a JavaScript lib unless it is really necessary. If you do use one, I prefer to stick to standard JavaScript for standard JavaScript tasks. No need to unnecessarily tie yourself to a lib to use functional style loop iteration when the old way works just fine. Since you are only targeting a specific browser, the cross platform nonsense applies. You can do AJAX for one browser in ~3 lines of code without any fancy libraries. You can do easily do OOP without any libs. I wouldn't bother with ANY lib to start, just wait to see if/when you run into problems where a lib could actually be a significant help.

2) Don't try to pretend you aren't building a web app. Web apps are a hodgepodge of technologies, but trying to hide that only makes it worse.

3) Keep it simple. Seriously.

Offline appel

JGO Wizard


Medals: 49
Projects: 5


I always win!


« Reply #8 - Posted 2011-04-09 00:22:36 »

-1 GWT

JQuery is ok.

Backbone looks like a really big hammer. You're building a web app, not a space shuttle...

My advice:

1) Keep it simple. Don't write more JavaScript than is needed to do what you need. Don't bother with a JavaScript lib unless it is really necessary. If you do use one, I prefer to stick to standard JavaScript for standard JavaScript tasks. No need to unnecessarily tie yourself to a lib to use functional style loop iteration when the old way works just fine. Since you are only targeting a specific browser, the cross platform nonsense applies. You can do AJAX for one browser in ~3 lines of code without any fancy libraries. You can do easily do OOP without any libs. I wouldn't bother with ANY lib to start, just wait to see if/when you run into problems where a lib could actually be a significant help.

2) Don't try to pretend you aren't building a web app. Web apps are a hodgepodge of technologies, but trying to hide that only makes it worse.

3) Keep it simple. Seriously.

It is a web app, but not a web app like most understand it. An TV GUI is primarily a interface, a TV channel environment, electronic program guide (EPG), main menu, Video On Demand catalog, etc. You do not load a new web page if you changed a channel.

You have to consider A LOT of factors, connectivity problems, server uptime, delay issues, etc. Responsiveness matter A LOT. Waiting for a web page to load is NOT satisfactory. You do not go from main menu page to EPG page, and then go from EPG page back to TV page. It doesn't work like that.

It's a UI application that is loaded as needed and uses http for data interaction. I'm not saying you load everything at boot-time, but you do load parts of the UI as needed to keep responsiveness and user convenience at maximum.

The server backend is not the issue here, the GUI is.

Check out the 4K competition @ www.java4k.com
Check out GAMADU (my own site) @ http://gamadu.com/
Offline steveyO
« Reply #9 - Posted 2011-04-09 01:21:59 »

Good points from Nate and 9 times out of 10 I would agree with them but in the case of Javascript vs jQuery there is just 1 winner for me. jQuery. 
For simple tasks (animation effects, dynamically altering CSS/HTML, Ajax, parsing XML) jQuery is sooo much cleaner than JS.  True you can do Ajax calls in a few lines of code in Javascript (for one browser) but the issue is how do you handle the response to dynamically update your content?  Having said all this, have no set-top box experience so won't commit myself any further, just in case  Wink

https://play.google.com/store/apps/details?id=com.bullsquared.alggame Annoying Little Gits (Android)
www.bullsquared.com   Play java (applet) games! www.chessclockpro.com Free Online Chess Clock
Games published by our own members! Check 'em out!
Legends of Yore - The Casual Retro Roguelike
Offline appel

JGO Wizard


Medals: 49
Projects: 5


I always win!


« Reply #10 - Posted 2011-04-09 01:48:56 »

Good points from Nate and 9 times out of 10 I would agree with them but in the case of Javascript vs jQuery there is just 1 winner for me. jQuery. 
For simple tasks (animation effects, dynamically altering CSS/HTML, Ajax, parsing XML) jQuery is sooo much cleaner than JS.  True you can do Ajax calls in a few lines of code in Javascript (for one browser) but the issue is how do you handle the response to dynamically update your content?  Having said all this, have no set-top box experience so won't commit myself any further, just in case  Wink

I'm confused, or you are, jQuery IS a Javascript library!?

Check out the 4K competition @ www.java4k.com
Check out GAMADU (my own site) @ http://gamadu.com/
Offline Riven
« League of Dukes »

JGO Overlord


Medals: 606
Projects: 4
Exp: 16 years


Hand over your head.


« Reply #11 - Posted 2011-04-09 01:56:37 »

http://jquery.com/

Quote
jQuery is a new kind of JavaScript Library.
jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.

Hi, appreciate more people! Σ ♥ = ¾
Learn how to award medals... and work your way up the social rankings
Offline appel

JGO Wizard


Medals: 49
Projects: 5


I always win!


« Reply #12 - Posted 2011-04-09 01:57:33 »

http://jquery.com/

Quote
jQuery is a new kind of JavaScript Library.
jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.
Exactly my understanding.

Check out the 4K competition @ www.java4k.com
Check out GAMADU (my own site) @ http://gamadu.com/
Offline Riven
« League of Dukes »

JGO Overlord


Medals: 606
Projects: 4
Exp: 16 years


Hand over your head.


« Reply #13 - Posted 2011-04-09 01:59:43 »

steveyO obviously meant with 'javascript vs jQuery' that you can modify the DOM through DOM calls in extremely fragile and verbose javascript code, or through jQuery (which does it for you, much better) in javascript, too.

Hi, appreciate more people! Σ ♥ = ¾
Learn how to award medals... and work your way up the social rankings
Offline steveyO
« Reply #14 - Posted 2011-04-09 02:00:13 »

Quote
I'm confused, or you are, jQuery IS a Javascript library!?
Yes jQuery is a javascript library, just re-read my post and I don't think I implied otherwise did I?  Just to clarify when I say Javascript vs jQuery, I mean writing standard Javascript vs writing Javascript using the jQuery syntax.

https://play.google.com/store/apps/details?id=com.bullsquared.alggame Annoying Little Gits (Android)
www.bullsquared.com   Play java (applet) games! www.chessclockpro.com Free Online Chess Clock
Offline steveyO
« Reply #15 - Posted 2011-04-09 02:02:14 »

1  
steveyO obviously meant with 'javascript vs jQuery' that you can modify the DOM through DOM calls in extremely fragile and verbose javascript code, or through jQuery (which does it for you, much better) in javascript, too.

Exactly what I meant, thanks for clarifying.

https://play.google.com/store/apps/details?id=com.bullsquared.alggame Annoying Little Gits (Android)
www.bullsquared.com   Play java (applet) games! www.chessclockpro.com Free Online Chess Clock
Offline appel

JGO Wizard


Medals: 49
Projects: 5


I always win!


« Reply #16 - Posted 2011-04-09 02:03:55 »

Ok Smiley I'm just putting a meaning into something that wasn't implied.

Check out the 4K competition @ www.java4k.com
Check out GAMADU (my own site) @ http://gamadu.com/
Offline Riven
« League of Dukes »

JGO Overlord


Medals: 606
Projects: 4
Exp: 16 years


Hand over your head.


« Reply #17 - Posted 2011-04-09 02:06:58 »

FWIW: I advise you to use jQuery. It will without a doubt reduce the development time with ~90%

Hi, appreciate more people! Σ ♥ = ¾
Learn how to award medals... and work your way up the social rankings
Offline steveyO
« Reply #18 - Posted 2011-04-09 02:11:02 »

1  
Ok I'm just putting a meaning into something that wasn't implied.

No problem, I can see how my post was mis-understood.  I would have probably expressed myself clearer if I wasn't distracted by the music blasting into my headphones  Cheesy

https://play.google.com/store/apps/details?id=com.bullsquared.alggame Annoying Little Gits (Android)
www.bullsquared.com   Play java (applet) games! www.chessclockpro.com Free Online Chess Clock
Offline appel

JGO Wizard


Medals: 49
Projects: 5


I always win!


« Reply #19 - Posted 2011-04-09 02:20:05 »

In any case, Javascript is clearly the language of choice (including jQuery lib).

But how things are visually rendered is another matter. There are a few options:
1. HTML
2. Canvas (2D, possibly 3D) (would invalidate usage of jQuery I believe).
3. SVG

As I said, a TV interface isn't entirely a "web site" or a "web page", in that you don't browse using hyperlinks and such, nor does it display a lot of text or data.

Currently I achieve everything using very plain Javascript (1.1) + HTML + Images.

But with all those new rendering technologies I wonder if I should ... use them. Apple TV is of course a good interface for the TV, you can see: http://www.google.com/images?q=apple+tv+ui&biw=1104&bih=981

There may be things I need to do that I don't know about still. Can I make a fire-flame button? Can I make all those cool transitions, fade in/out, shrinking/enlarging of dialogs, as Apple has done for it's Apple TV, using HTML? (Apple TV video effects in this video: http://www.youtube.com/watch?v=4WCqDZxZ8MA )

Check out the 4K competition @ www.java4k.com
Check out GAMADU (my own site) @ http://gamadu.com/
Offline nsigma
« Reply #20 - Posted 2011-04-09 03:23:55 »

How about JQuery for DOM stuff mixed with processing.js?

John Resig is the answer!  Grin

Praxis LIVE - open-source intermedia toolkit and live interactive visual editor
Digital Prisoners - interactive spaces and projections
Offline appel

JGO Wizard


Medals: 49
Projects: 5


I always win!


« Reply #21 - Posted 2011-04-09 15:47:44 »

How about JQuery for DOM stuff mixed with processing.js?

John Resig is the answer!  Grin
Thanks for this tip bro! Smiley

Check out the 4K competition @ www.java4k.com
Check out GAMADU (my own site) @ http://gamadu.com/
Offline nsigma
« Reply #22 - Posted 2011-04-09 16:16:33 »

How about JQuery for DOM stuff mixed with processing.js?

John Resig is the answer!  Grin
Thanks for this tip bro! Smiley
Glad to be of assistance.  http://hascanvas.com is quite fun to play with to get an initial grasp of processing.js, though I can't see me switching to a browser based IDE any time soon!  Smiley

Praxis LIVE - open-source intermedia toolkit and live interactive visual editor
Digital Prisoners - interactive spaces and projections
Offline Addictman

Senior Member


Medals: 3
Projects: 1


Java games rock!


« Reply #23 - Posted 2011-04-09 18:32:13 »

Also take a look at http://jquerymobile.com/ if you are looking into creating menulike "web pages", - originally for mobile phones, but might also work great for you.
Offline appel

JGO Wizard


Medals: 49
Projects: 5


I always win!


« Reply #24 - Posted 2011-04-11 17:21:39 »

There's also jqueryui, I wonder if that's smart.

Check out the 4K competition @ www.java4k.com
Check out GAMADU (my own site) @ http://gamadu.com/
Pages: [1]
  ignore  |  Print  
 
 
You cannot reply to this message, because it is very, very old.

 

Add your game by posting it in the WIP section,
or publish it in Showcase.

The first screenshot will be displayed as a thumbnail.

xsi3rr4x (64 views)
2014-04-15 18:08:23

BurntPizza (62 views)
2014-04-15 03:46:01

UprightPath (75 views)
2014-04-14 17:39:50

UprightPath (58 views)
2014-04-14 17:35:47

Porlus (76 views)
2014-04-14 15:48:38

tom_mai78101 (101 views)
2014-04-10 04:04:31

BurntPizza (161 views)
2014-04-08 23:06:04

tom_mai78101 (256 views)
2014-04-05 13:34:39

trollwarrior1 (209 views)
2014-04-04 12:06:45

CJLetsGame (216 views)
2014-04-01 02:16:10
List of Learning Resources
by SHC
2014-04-18 03:17:39

List of Learning Resources
by Longarmx
2014-04-08 03:14:44

Good Examples
by matheus23
2014-04-05 13:51:37

Good Examples
by Grunnt
2014-04-03 15:48:46

Good Examples
by Grunnt
2014-04-03 15:48:37

Good Examples
by matheus23
2014-04-01 18:40:51

Good Examples
by matheus23
2014-04-01 18:40:34

Anonymous/Local/Inner class gotchas
by Roquen
2014-03-11 15:22:30
java-gaming.org is not responsible for the content posted by its members, including references to external websites, and other references that may or may not have a relation with our primarily gaming and game production oriented community. inquiries and complaints can be sent via email to the info‑account of the company managing the website of java‑gaming.org
Powered by MySQL Powered by PHP Powered by SMF 1.1.18 | SMF © 2013, Simple Machines | Managed by Enhanced Four Valid XHTML 1.0! Valid CSS!