EaselDemoApril2013

Contents

Easel Demo Script - April 2013

This script shows many of the Easel features as available in NetBeans 7.4 builds as of April 2013. In addition to NetBeans 7.3 features, it also demonstrates the following 7.4 features:

  • Development with mobile devices (Android), including visual styling and JavaScript debugging
  • Integration of Project Easel features in Java web projects (Maven-based)
  • Network monitor
  • Java EE 7 projects and deployment to GlassFish 4

Prerequsites and prework

  • You need an Android 4 device with Chrome browser installed from the Play store, with USB debugging enabled at both system level and in Chrome options, plus a USB cable to connect it to the computer
  • To present this to an audience, you need Droid@Screen to mirror the Android device on the computer screen: http://droid-at-screen.ribomation.com/download/
  • Download and install the Android SDK: http://developer.android.com/sdk/index.html
  • Configure Android platform in IDE options (Miscellaneous -> Mobile Platforms)
  • Connect both the Android Device and your laptop to the same wifi network
  • Register the latest GlassFish 4 promoted build in the IDE
  • Start GlassFish (to speed the first deployment up)
  • Download and unzip the sample project attached here

Demo steps

  1. Open the sample project in the IDE
  2. Make sure the target browser is set to Chrome with NetBeans integration
  3. Run the application on the GlassFish registered in the IDE
  4. Open a second browser window, position it side by side with the original window and paste the application URL from the original window to the new one
  5. Demo the application functionality, i.e. log in as 2 different users and bid for the same item by entering price in the two windows. Point out that the price is updated immediately for all the other users. Then close the second window.
  6. Walk through the application code (Maven project with a server part using Java EE 7, client part using plain HTML/CSS/JavaScript, communicating using WebSocket)
  7. Show the Network Monitor and the WebSocket communication captured there
  8. Resize the Chrome window to various formats using the NetBeans plugin resizing capability, point out that for narrow windows the style does not look very nice.
  9. Enable select mode, open style.css and do the following changes:
    • Move float: left; from div.itemdata to the first media query (for wide screens) - you will need to create a rule div.itemdata in this media query
    • Move float: right; from div.biddata in an analogous way
    • Create div.itemdata and div.biddata rules also in the second media query (for narrow narrow screens) and add the following properties to these rules:
      text-align: center;
      margin: auto;
  10. Now the media queries section should look like this, and the layout on narrow screens looks better:
    @media only screen and (min-width: 768px) {
        div.itemdata {
            float: left;
        }
        div.biddata {
            float: right;
        }
    }
    @media only screen and (max-width: 767px) {
        div.itemdata {
            text-align: center;
            margin: auto;
        }
        div.biddata {
            text-align: center;
            margin: auto;
        }
    }
  11. Show that you can also modify the style using the property sheet, not just by directly changing CSS
  12. Turn off select mode and close the browser tab
  13. Let's see if the layout really looks good on a real mobile device - connect an Android device via a USB port (and run the Droid@Screen software if showing this to others over the projector)
  14. Change the target browser to Android Device (Chrome) and run the application again - application will be opened on the device
  15. Login in the application and choose and auction item to progress to the auction page - the layout looks good now
  16. Open auction.html in the editor and make it the selected tab
  17. Turn on inspect mode in browser using the icon at the top right corner of the CSS Styles window
  18. Select elements on the page by tapping on them and show the synchronization with the navigator
  19. Modify some style properties via the property sheet to show that further layout tweaks can be done using the device directly
  20. Turn off inspect mode
  21. Set a breakpoint in login.js in the doLogin function
  22. In the browser, go back to the login page and login as another user
  23. IDE will stop at the breakpoint - you can now step through the code directly on the device; show the variables window and other standard debugger features

Issues

The following issues get in the way of this scenario:

Not logged in. Log in, Register

By use of this website, you agree to the NetBeans Policies and Terms of Use. © 2012, Oracle Corporation and/or its affiliates. Sponsored by Oracle logo