WebPageAuthoring

Ajax for Web Page Authors

In order to satisfy the use cases for web page authors, the appeal of NetBeans must be in its simplicity. This implies a very streamlined path from opening NetBeans to having the web page author be productive. This use case can apply to any web developer interested in creating HTML and JavaScript web pages or web applications.

Download and Installation

A web page authors potential initial experience with NetBeans is through the download page. Which software to download needs to be quite obvious to this web page author. As it stands today, the download site offers several options for NetBeans distributions. One of these options is for "Web and Java EE". Web page authors could interpret this bundle as likely candidate. Therefore, the Ajax and JavaScript development environment could be included as part of Web and Java EE.

It would, however, also be beneficial to include the Ajax and JavaScript development environment with other runtimes such as PHP and Ruby, both of which can integrate with JavaScript web page front ends. Therefore, having a new Pack for this offering and having that Pack included with "Web and Java EE", PHP and Ruby would make a winning combination. XXX: What should this pack be called?

At this point, the web page author selects "Web and Java EE", downloads the software and performs the installation. The NetBeans install experience is quite good and should not present a barrier to this user type.

Project Creation

Once NetBeans is installed and started, the web page author is presented with a Start Page (assuming Internet access) and a couple of other empty panels. Most likely, the web page author would consider the Project as a potential place to start. Selecting File -> New Project would place the web page author in a Wizard which will create a new type of Project which offers scope beyond a single file yet does not provide the full complexity of NetBeans projects today. A more detailed proposal for this project type is described in Creating Simplified Projects .

The wizard includes four steps:

  1. Select the Project Type. In this case, the project reflects the concept introduced during NetBeans download: "XXX: What to name this?"
  2. Name the project and determine the location and project folder
  3. Configure the web server instance which includes where the web pages will reside. This step must include adequate default values for web page authors
  4. Select a default page layout template to be used for creating each web page within this project.

Once the web page author has completed the wizard, the simplified project is created and the web page author is placed in the initial .html page which already contains a script tag.

File Creation

One expected task for web page authors is that of creating additional web pages for their project. For this task, the web page author selects New -> Dynamic Web Page in the Project Menu. This selection brings up a wizard for naming the web page, for locating the web page in an alternative directory and for selecting a page layout template . A second possible task is to create web pages from the File menu (when would this be useful?). The File -> New File NetBeans menu selection brings up a wizard which includes a selection for Dynamic Web Page. The web page author selects Dynamic Web Page and is presented with second screen for naming the web page and possibly locating it in an alternative directory and a third screen for selecting a page layout template .

Once the wizard completes, the web page author is placed in the .html page which reflects the selected page layout template and contains a script tag.

http://wiki.netbeans.org/attach/WebPageAuthoring/wizardstep1_WebPageAuthoring.png

http://wiki.netbeans.org/attach/WebPageAuthoring/wizardstep2_WebPageAuthoring.png

File Editing

The motivation for the web page author to use NetBeans for creating Dynamic Web Pages flows from the simplicity available when editing these web pages. The web page author expects to use HTML tags and CSS for styling, and intends on adding JavaScript to the pages with minimum effort. As the JavaScript skills of the web page author increases, she may be willing to include more challenging JavaScript (in terms of configuration or effort of customization via JavaScript).

The initial environment would therefore showcase a set of JavaScript widgets which offer simple to use API's. These widgets are available in a palette and the web page author drags the desired widget to the web page being edited. As the web page author manipulates the widget, the embedded javascript editor provides code completion and other needed features to the web page author. See JavaScript Editing for more details.

As the JavaScript development skills of the web page author increases, she may wish to make use of widgets available in other widget libraries. The library manager includes a set of third party JavaScript widget libraries available to use in these web pages. See JavaScript Library Support for more details.

-> A proposal for a sample workflow using the palette to create a javascript widget.

Debugging and Errors

As the web page author continues to experiment and implement, there may come a time when things do not work. Having a way to debug the JavaScript is key. The Ajax/JavaScript development environment includes a JavaScript debugging capability. See JavaScript Debugging for more details.

Detailed Development Tasks

File Creation

Task ID Description Priority Owner Issuezilla Notes
1 Define new page template P1 winstonp Includes
- Update layer file with new template type
- Create wizard
- Create initial HTML file and populate with script tag(s)
- Data loaders for HTML (?)


Simple to Use Widgets

The widget library offered for this use case is the combined Woodstock/jMaki solution which offers a complete set of JavaScript widgets wrapped by a simple to use set of interfaces (jMaki). This widget library solution will then lend itself well to the JavaScript visual design feature when that is available.

Task ID Description Priority Owner Notes
1 Improve the jMaki Palette P1 Venky The palette is organized along runtimes and needs to be organized on widgets.
Duplicate widgets need to be dropped from palette.
Having an advanced feature can contain other duplicate widgets.
2 Improve project creation P1 Winston Improvements are needed to the page template dialog
3 Incorporate Woodstock Widgets P1 Dan/Greg/Bill See Woodstock widget support
Will achieve complete set of JavaScript widgets
4 Bring jMaki source into NetBeans P1 Deep/Venky/Bob Will be migrating the jMaki plug-in source to NetBeans
5 Need icons and icon spec P2 Muthu
6 Fix bugs P2 Mary Lautman Establish quality criteria for NetBeans 6.5
7 Improve UI for customizers P2 Need more detail on this one
include enabling documentation for the widget
8 JSON support P2 Native shared library in NetBeans
Parse JSON error checking for widget properties
Data Model Validator built into NetBeans directly?
9 Widget creation Panel P3
10 JSF integration P3
11 Integration with web services, REST, JPA P3
12 Include Samples P3
13 Write Developer's Guide P3
14 Additional Widgets P3 This list and the Woodstock Widget list needs to match
15 PHP and Ruby Support P3 Needs more definition
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