Getting Started with JavaFX and WidgetFX<br />Stephen Chin<br />Inovis, Inc.<br />Keith Combs<br />Inovis, Inc.<br />
JavaFX Crash Course<br />
3<br />Start Here: JavaFX.com<br />
4<br />Hello Earthrise<br />
5<br />JavaFX API Docs<br />
JavaFX Mobile Development<br />
JavaFX Mobile Advantages<br />Write Once, Run Anywhere<br />Desktop, Mobile, Set-top Boxes (future)<br />Large Embedded Ba...
JavaFX Mobile Constraints<br />Screen Size<br />Your application has to be capable of running within a resolution of 320 b...
Developing for the Common Profile<br />
Mobile Demos<br />Try out the HTC Touch Diamond<br />
Java User Group Spinner Wheel<br />11<br />Web Service Integration<br />
Calling a REST Service<br />REST URL:<br />http://api.meetup.com/rsvps.json/event_id={eventId}&rsvp=yes&key={apiKey}<br />...
JUG Spinner - JSONHandler in 3 Steps<br />public class Member {<br />    public varplace:Integer;<br />    public varphoto...
14<br />rsvpQuery<br />http://jfxtras.org/<br />
Silicon Valley JavaFX Users Group<br />Free membership<br />Rockstar presenters<br />First Event:<br />Google Campus (Sevi...
The JavaFX Desktop Widget Platform<br />WidgetFX<br />
WidgetFX Origins<br />17<br />
18<br />Why another desktop widget framework?<br />Open-Source<br />But widgets can be licensed commercially<br />Write Wi...
Built-in Widgets<br />Clock<br />Skinnable via CSS<br />Slide Show<br />Configurable Directory, Speed, & Filter<br />Web F...
Dock Features<br />Drag to desktop<br />Resize widgets (option for fixed aspect ratio)<br />Per widget transparency<br />W...
Movie Widget Tutorial<br />
Widget Properties<br />22<br />
Widget Definition<br />var widget: Widget;<br />widget = Widget {<br />  width: 640<br />  height: 352<br />aspectRatio: b...
Load the Media<br />var source = &quot;http://projavafx.com/movies/ elephants-dream-640x352.flv&quot;;<br />var player = b...
Run in Widget Runner<br />25<br />
Widget Configuration Properties<br />26<br />
Widget Configuration<br />widget = Widget {<br />  ...<br />  configuration: Configuration {<br />    properties: [<br />S...
Widget Config Dialog<br />Scene {<br />  content: Grid {<br />    rows: row([<br />      Text {<br />        content: &quo...
Add an On-Replace Trigger<br />var player = bind SimpleMoviePlayer {<br />  media: Media {<br />    source: source<br />  ...
Widget Configuration (demo)<br />30<br />
Widget Development Contest<br />31<br />
Widget Contest Results<br />3rd Place<br />Infix WeatherWidget<br />Larry Dickson<br />2nd Place<br />RadioFX<br />Yannick...
Widget Contest Results<br />1st Place<br />ScreenshotFX<br />Pär Dahlberg<br />33<br />
Pro JavaFX Book Giveaway!<br />34<br />
35<br />Thank You<br />Stephen Chin<br />http://steveonjava.com/<br />Tweet: steveonjava<br />Keith Combs<br />
Upcoming SlideShare
Loading in...5
×

JavaFX and WidgetFX at SVCodeCamp

2,875

Published on

These are the slides from my presentation on JavaFX and WidgetFX at the Silicon Valley Code Camp.

Published in: Technology, Lifestyle
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
2,875
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
30
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

JavaFX and WidgetFX at SVCodeCamp

  1. 1. Getting Started with JavaFX and WidgetFX<br />Stephen Chin<br />Inovis, Inc.<br />Keith Combs<br />Inovis, Inc.<br />
  2. 2. JavaFX Crash Course<br />
  3. 3. 3<br />Start Here: JavaFX.com<br />
  4. 4. 4<br />Hello Earthrise<br />
  5. 5. 5<br />JavaFX API Docs<br />
  6. 6. JavaFX Mobile Development<br />
  7. 7. JavaFX Mobile Advantages<br />Write Once, Run Anywhere<br />Desktop, Mobile, Set-top Boxes (future)<br />Large Embedded Base<br />Built on top of Java ME platform<br />Wide Range of Devices<br />Runs on Feature Phones, Smart Phones<br />Currently available for Windows Mobile devices<br />
  8. 8. JavaFX Mobile Constraints<br />Screen Size<br />Your application has to be capable of running within a resolution of 320 by 240 or possibly even smaller.<br />Common Profile<br />Mobile applications are limited to the JavaFX APIs that are part of the Common Profile, which is a subset of the Desktop Profile.<br />Performance<br />Mobile applications run on much less powerful devices, so they have less CPU and memory resources available to work with.<br />
  9. 9. Developing for the Common Profile<br />
  10. 10. Mobile Demos<br />Try out the HTC Touch Diamond<br />
  11. 11. Java User Group Spinner Wheel<br />11<br />Web Service Integration<br />
  12. 12. Calling a REST Service<br />REST URL:<br />http://api.meetup.com/rsvps.json/event_id={eventId}&rsvp=yes&key={apiKey}<br />Output:<br />{ &quot;results&quot;: [<br /> {&quot;zip&quot;:&quot;94044&quot;,&quot;lon&quot;:&quot;-122.48999786376953&quot;,&quot;photo_url&quot;:&quot;http://photos1.meetupstatic.com/photos/member/1/4/b/a/member_5333306.jpeg&quot;,&quot;response&quot;:&quot;no&quot;,&quot;name&quot;:&quot;Andres Almiray&quot;,&quot;comment&quot;:&quot;Can&apos;t make it :-(&quot;}<br />]}<br />12<br />
  13. 13. JUG Spinner - JSONHandler in 3 Steps<br />public class Member {<br /> public varplace:Integer;<br /> public varphotoUrl:String;<br /> public varname:String;<br /> public varcomment:String;<br />}<br />varmemberParser:JSONHandler= JSONHandler {<br />  rootClass: &quot;org.jfxtras.jugspinner.data.MemberSearch “<br />  onDone: function(obj, isSequence): Void {<br />    members = (obj as MemberSearch).results;<br />}}<br />req = HttpRequest {<br /> location: rsvpQuery<br />onInput: function(is: java.io.InputStream) {<br />memberParser.parse(is);<br />}}<br />13<br />1<br />POJO<br />2<br />JSONHandler<br />3<br />HttpRequest<br />
  14. 14. 14<br />rsvpQuery<br />http://jfxtras.org/<br />
  15. 15. Silicon Valley JavaFX Users Group<br />Free membership<br />Rockstar presenters<br />First Event:<br />Google Campus (Seville Room)<br />Speaker: Richard Bair<br />Member of the JavaFX Team<br />JavaOne 2009 Rockstar Speaker<br />December 9th (Tuesday)<br />15<br />http://svjugfx.org/<br />
  16. 16. The JavaFX Desktop Widget Platform<br />WidgetFX<br />
  17. 17. WidgetFX Origins<br />17<br />
  18. 18. 18<br />Why another desktop widget framework?<br />Open-Source<br />But widgets can be licensed commercially<br />Write Widgets in Java & JavaFX<br />HTML, CSS, and Javascript are great for websites, but not app development<br />Cross-Platform Support<br />Windows XP/Vista, Linux, and Mac OS X. <br />One-Click Installation<br />Plus automatic updates of the dock and widgets. <br />Robust Security<br />Secure sandbox + signed widgets<br />
  19. 19. Built-in Widgets<br />Clock<br />Skinnable via CSS<br />Slide Show<br />Configurable Directory, Speed, & Filter<br />Web Feed<br />Supports Atom and all RSS flavors<br />19<br />
  20. 20. Dock Features<br />Drag to desktop<br />Resize widgets (option for fixed aspect ratio)<br />Per widget transparency<br />Widget settings saved on restart<br />Toggle dock always-on-top<br />Launch on start-up<br />Multi-monitor support<br />Dock and widgets can be styled via CSS<br />20<br />
  21. 21. Movie Widget Tutorial<br />
  22. 22. Widget Properties<br />22<br />
  23. 23. Widget Definition<br />var widget: Widget;<br />widget = Widget {<br /> width: 640<br /> height: 352<br />aspectRatio: bind player.media.width<br /> / player.media.height<br /> content: bind player<br />}<br />23<br />
  24. 24. Load the Media<br />var source = &quot;http://projavafx.com/movies/ elephants-dream-640x352.flv&quot;;<br />var player = bind SimpleMoviePlayer {<br /> media: Media {<br /> source: source<br /> }<br /> width: bind widget.width<br /> height: bind widget.height<br />}<br />24<br />
  25. 25. Run in Widget Runner<br />25<br />
  26. 26. Widget Configuration Properties<br />26<br />
  27. 27. Widget Configuration<br />widget = Widget {<br /> ...<br /> configuration: Configuration {<br /> properties: [<br />StringProperty {<br /> name: &quot;source“<br /> value: bind source with inverse<br /> }<br /> ]<br /> scene: Scene {…} // see next page<br /> }<br />}<br />27<br />
  28. 28. Widget Config Dialog<br />Scene {<br /> content: Grid {<br /> rows: row([<br /> Text {<br /> content: &quot;Source URL:“<br /> },<br />TextBox {<br /> columns: 30,<br /> value: bind source with inverse<br /> }<br /> ])<br /> }<br />}<br />28<br />
  29. 29. Add an On-Replace Trigger<br />var player = bind SimpleMoviePlayer {<br /> media: Media {<br /> source: source<br /> }<br /> width: bind widget.width<br /> height: bind widget.height<br />} on replace =oldPlayer {<br />oldPlayer.player.stop();<br />}<br />29<br />
  30. 30. Widget Configuration (demo)<br />30<br />
  31. 31. Widget Development Contest<br />31<br />
  32. 32. Widget Contest Results<br />3rd Place<br />Infix WeatherWidget<br />Larry Dickson<br />2nd Place<br />RadioFX<br />Yannick Van Godtsenhoven<br />32<br />
  33. 33. Widget Contest Results<br />1st Place<br />ScreenshotFX<br />Pär Dahlberg<br />33<br />
  34. 34. Pro JavaFX Book Giveaway!<br />34<br />
  35. 35. 35<br />Thank You<br />Stephen Chin<br />http://steveonjava.com/<br />Tweet: steveonjava<br />Keith Combs<br />
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×