Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Intro to Rich Web Applications

and UI Frameworks Development

(GWT + HTML Canvas)
by Iaroslav Kobyliukh
Who we are?
Animatron Wave
Universal animation maker for small
businesses and agencies
Incredibly easy to use online video...
What we do?
▪ Tween based vector animation editor
▪ Rich vector tools
▪ Import (images, audio, video, SVG)
▪ Export (HTML5...
Architecture
Website
Editor
Player
Backend
Rich Web Applications: Editors
Wave Editor Studio Editor
What is Rich Web Application?
Rich Web application (or rich
Internet application (RIA)) is a Web
application designed to d...
Creating GWT UI
▪ Create UI Binding Template
▪ Write UI Java code
▪ Hand it over to CSS + HTML guy
▪ The guy styles it
▪ N...
Everything is Canvas
Canvas Based Widgets
Are You F**ing Crazy???
Canvas Based Widgets
▪ Write only Java code
▪ No CSS + HTML guy
▪ No roundtrips
▪ No browser inconsistencies
Canvas Based Widgets
▪ This is NOT Swing
▪ Much simpler than Swing
▪ Much easier than Swing
▪ Exactly one look and feel
▪ ...
Examples
public class DemoPanel extends TPanel.BorderLayout {
public DemoPanel() {
super(20);
TLabel.Ui title = new TLabel...
Examples
Standard Component
Painting Components
TButton.Ui button = new TButton.Ui("Please click on me");
button.onMouseDown(new AMouseDownEvent.Handl...
Sizes & Dimensions
TPanel.BorderLayout layout = new TPanel.BorderLayout();
layout.setMaximumSize(new Dimension(640, 480));...
Lists & Grids
List<String> someList = Arrays.asList("one", "two", "three");
TList.Model.Simple<String> simpleModel = new T...
Viewports
List<String> someList = Arrays.asList("one", "two", "three");
TList.Model.Simple<String> simpleModel = new TList...
Styling
interface Button extends TLook {
TLookKey<Boolean> OPAQUE = new TLookKey<>("button.opaque", false);
TLookKey<Fill>...
Mouse Events
/**

* Handler interface for {@link MouseDownEvent} events.

*/
public interface MouseDownHandler extends Eve...
Canvas Based Widgets
▪ Core framework development
takes time
▪ Hard to create automated tests
▪ Everything is done manuall...
Questions?
Upcoming SlideShare
Loading in …5
×

of

UI Framework Development using GWT and HTML Canvas - By Iarosla Kobyliukh Slide 1 UI Framework Development using GWT and HTML Canvas - By Iarosla Kobyliukh Slide 2 UI Framework Development using GWT and HTML Canvas - By Iarosla Kobyliukh Slide 3 UI Framework Development using GWT and HTML Canvas - By Iarosla Kobyliukh Slide 4 UI Framework Development using GWT and HTML Canvas - By Iarosla Kobyliukh Slide 5 UI Framework Development using GWT and HTML Canvas - By Iarosla Kobyliukh Slide 6 UI Framework Development using GWT and HTML Canvas - By Iarosla Kobyliukh Slide 7 UI Framework Development using GWT and HTML Canvas - By Iarosla Kobyliukh Slide 8 UI Framework Development using GWT and HTML Canvas - By Iarosla Kobyliukh Slide 9 UI Framework Development using GWT and HTML Canvas - By Iarosla Kobyliukh Slide 10 UI Framework Development using GWT and HTML Canvas - By Iarosla Kobyliukh Slide 11 UI Framework Development using GWT and HTML Canvas - By Iarosla Kobyliukh Slide 12 UI Framework Development using GWT and HTML Canvas - By Iarosla Kobyliukh Slide 13 UI Framework Development using GWT and HTML Canvas - By Iarosla Kobyliukh Slide 14 UI Framework Development using GWT and HTML Canvas - By Iarosla Kobyliukh Slide 15 UI Framework Development using GWT and HTML Canvas - By Iarosla Kobyliukh Slide 16 UI Framework Development using GWT and HTML Canvas - By Iarosla Kobyliukh Slide 17 UI Framework Development using GWT and HTML Canvas - By Iarosla Kobyliukh Slide 18 UI Framework Development using GWT and HTML Canvas - By Iarosla Kobyliukh Slide 19 UI Framework Development using GWT and HTML Canvas - By Iarosla Kobyliukh Slide 20 UI Framework Development using GWT and HTML Canvas - By Iarosla Kobyliukh Slide 21 UI Framework Development using GWT and HTML Canvas - By Iarosla Kobyliukh Slide 22
Upcoming SlideShare
What to Upload to SlideShare
Next
Download to read offline and view in fullscreen.

1 Like

Share

Download to read offline

UI Framework Development using GWT and HTML Canvas - By Iarosla Kobyliukh

Download to read offline

UI Framework Development using GWT and HTML Canvas
By Iarosla Kobyliukh
#GWTcon2017 Firenze September 28-29th 2017

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

UI Framework Development using GWT and HTML Canvas - By Iarosla Kobyliukh

  1. 1. Intro to Rich Web Applications
 and UI Frameworks Development
 (GWT + HTML Canvas) by Iaroslav Kobyliukh
  2. 2. Who we are? Animatron Wave Universal animation maker for small businesses and agencies Incredibly easy to use online video maker for creating marketing and social videos in minutes Animatron Studio
  3. 3. What we do? ▪ Tween based vector animation editor ▪ Rich vector tools ▪ Import (images, audio, video, SVG) ▪ Export (HTML5, GIF, Video, SVG+SMIL) ▪ Share (Facebook, Twitter, YouTube, Dropbox, etc.) ▪ Collaborative editing
  4. 4. Architecture Website Editor Player Backend
  5. 5. Rich Web Applications: Editors Wave Editor Studio Editor
  6. 6. What is Rich Web Application? Rich Web application (or rich Internet application (RIA)) is a Web application designed to deliver the same features and functions normally associated with desktop applications.
  7. 7. Creating GWT UI ▪ Create UI Binding Template ▪ Write UI Java code ▪ Hand it over to CSS + HTML guy ▪ The guy styles it ▪ Next day you get it (at best) ▪ Roundtrips to fix browser’s problems
  8. 8. Everything is Canvas
  9. 9. Canvas Based Widgets Are You F**ing Crazy???
  10. 10. Canvas Based Widgets ▪ Write only Java code ▪ No CSS + HTML guy ▪ No roundtrips ▪ No browser inconsistencies
  11. 11. Canvas Based Widgets ▪ This is NOT Swing ▪ Much simpler than Swing ▪ Much easier than Swing ▪ Exactly one look and feel ▪ Everything is pure Java code ▪ Many components on the one canvas
  12. 12. Examples public class DemoPanel extends TPanel.BorderLayout { public DemoPanel() { super(20); TLabel.Ui title = new TLabel.Ui("Demo Panel"); title.setHAlignment(Alignment.H.center); TTextField.Ui.ForString field = new TTextField.Ui.ForString(""); TTextArea textArea = new TTextArea(""); textArea.setPlaceholder(“Type something”); TLink.Ui.BroserUrl link = new TLink.Ui.BrowserUrl("GWTCon17", "http://www.gwtcon.org"); TPanel.FlowLayout flowLayout = new TPanel.FlowLayout(Direction.vertical, 10); flowLayout.add(field); flowLayout.add(textArea); flowLayout.add(link); north(title); center(flowLayout); } }
  13. 13. Examples
  14. 14. Standard Component
  15. 15. Painting Components TButton.Ui button = new TButton.Ui("Please click on me"); button.onMouseDown(new AMouseDownEvent.Handler() {
 @Override
 public void process(AMouseDownEvent event) {
 button.setText("Awesome!"); button.revalidate(); button.repaint(); 
 }
 }); protected void paintComponent(ACanvas canvas); public final void invalidate(); public final TComponent revalidate(); public final void repaint(); public class CustomComponent extends TComponent.Ui { @Override
 protected void paintComponent(ACanvas canvas) {
 Rectangle rectangle = new Rectangle(0, 0, 100, 50); Fill red = new Fill("red");
 canvas.fillRect(rectangle, red); } }
  16. 16. Sizes & Dimensions TPanel.BorderLayout layout = new TPanel.BorderLayout(); layout.setMaximumSize(new Dimension(640, 480)); layout.setMinimumSize(new Dimension(32, 32)); public final Rectangle getBounds(); public final Rectangle getAbsoluteBounds(); public final Rectangle getContentBounds(); public final Dimension getPrefferedSize(); public <C extends TComponent> C setPrefferedSize(Dimension size); public <C extends TComponent> C setMaximumSize(Dimension size); public <C extends TComponent> C setMinimumSize(Dimension size); public class CustomComponent extends TComponent.Ui { @Override
 protected void paintComponent(ACanvas canvas) {
 Rectangle rectangle = getContentBounds(); Fill green = new Fill("green");
 canvas.fillRect(rectangle, green); } }
  17. 17. Lists & Grids List<String> someList = Arrays.asList("one", "two", "three"); TList.Model.Simple<String> simpleModel = new TList.Model.Simple<>(someList); TList.Ui<String> uiList = new TList.Ui<>(simpleModel); uiList.getSelectionModel().setSelection("two"); String selectedItem = uiList.getSelectionModel().getSelected(); someList.add("four"); uiList.getModel().fireModelChanged(); List<CustomObject> someList = getCustomObjects(); TList.Model.Simple<CustomObject> simpleModel = new TList.Model.Simple<>(someList); TGrid.Ui<String> uiGrid = new TGrid.Ui<>(simpleModel); uiGrid.setColumns(2); uiGrid.setRenderer(new CustomRenderer()); class CustomRenderer extends TLabel.Ui implements TFlyweight.Renderer.Active<CustomObject> { @Override
 public void prepareToRender(CustomObject object, boolean selected) { setText(object.getName()); } }
  18. 18. Viewports List<String> someList = Arrays.asList("one", "two", "three"); TList.Model.Simple<String> simpleModel = new TList.Model.Simple<>(someList); TList.Ui<String> uiList = new TList.Ui<>(simpleModel); TViewport.Ui viewport = new TViewport.Ui(uiList); viewport.setViewWidthTracksViewport(true); viewport.setViewHeightTracksViewport(true); TPanel.BorderLayout layout = new TPanel.BorderLayout(); layout.center(viewport); layout.setPreferredSize(new Dimension(640, 320));
  19. 19. Styling interface Button extends TLook { TLookKey<Boolean> OPAQUE = new TLookKey<>("button.opaque", false); TLookKey<Fill> BG = new TLookKey<>("button.background", new Fill("#FFFFFF"); TLookKey<Fill> FG = new TLookKey<>("button.foreground", new Fill("#000000"); TLookKey<Fill> BG_PRESSED = new TLookKey<>("button.background.pressed", BG); TLookKey<Fill> FG_PRESSED = new TLookKey<>("button.foreground.pressed", FG); TLookKey<Fill> BG_HOVERED = new TLookKey<>("button.background.hovered", BG); TLookKey<Fill> FG_HOVERED = new TLookKey<>("button.foreground.hovered", FG); TLookKey<TFont> FONT = new TLookKey<>("button.font", new TFont("Lato", 10); } TButton.Ui button = new TButton.Ui("Click"); button.getLook().set(Button.FG, new Fill("red")); TPanel.FlowLayout flowLayout = new TPanel.FlowLayout(Direction.vertical, 10); flowLayout.add(field); flowLayout.getLook().set(Button.FONT, new TFont("Consolas", 12)); public interface THasLook { TLookSet getLook(); <C extends TComponent> C setLook(TLookSet lookSet); }
  20. 20. Mouse Events /**
 * Handler interface for {@link MouseDownEvent} events.
 */ public interface MouseDownHandler extends EventHandler {
 /**
 * Called when MouseDown is fired.
 * @param event the {@link MouseDownEvent} that was fired
 */
 void onMouseDown(MouseDownEvent event);
 } TButton.Ui button = new TButton.Ui("Click"); button.onMouseDown(new AMouseDownEvent.Handler() {
 @Override
 public void process(AMouseDownEvent event) {
 //TODO: actions
 }
 }); public final <C extends TComponent> C onMouseDown(new AMouseDownEvent.Handler()); public final <C extends TComponent> C onMouseUp(new AMouseUpEvent.Handler()); public final <C extends TComponent> C onMouseMove(new AMouseMoveEvent.Handler()); public final <C extends TComponent> C onMouseWheel(new AMouseWheelEvent.Handler()); public final <C extends TComponent> C onMouseDoubleClick(new AMouseDoubleClickEvent.Handler());
  21. 21. Canvas Based Widgets ▪ Core framework development takes time ▪ Hard to create automated tests ▪ Everything is done manually ▪ Big Canvas can be slow ▪ Text rendering can cause problems ▪ Sometimes require special hacks
  22. 22. Questions?
  • SilaKayo1

    Oct. 4, 2017

UI Framework Development using GWT and HTML Canvas By Iarosla Kobyliukh #GWTcon2017 Firenze September 28-29th 2017

Views

Total views

1,447

On Slideshare

0

From embeds

0

Number of embeds

87

Actions

Downloads

20

Shares

0

Comments

0

Likes

1

×