In the IDE

When you complete the steps for creating a JSF page and adding the Panel Stretch Layout and Decorative Box components, the page in the visual editor should look similar to this:

Visual editor, root panel stretch layout, decorative box

The outer top and bottom facets belong to the root Panel Stretch Layout; the inner top and center facets belong to Decorative Box.

In the Application Navigator, the project should look something like this:

Application Navigator

The .jspx file for the page you created is added to your project in the Web Content folder. In addition to the page you created, other folders and files are added to conform to the Java EE Web module directory structure.

Web Content folder: Contains files, including .html and .jsp, along with other files that must be visible to the client browser (such as stylesheet files and images) for your application.
/WEB-INF/ folder: Contains the required Web Application Deployment Descriptor ( web.xml) and the JSF configuration file ( faces-config.xml).
web.xml file: The web application deployment descriptor for your application. This is an XML file describing the components that make up your application, along with any initialization parameters and container-managed security constraints that you want the server to enforce for you.
faces-config.xml file: Where you register the JSF application's configuration resources, such as validators, converters, managed beans, and navigation rules.
trinidad-config.xml file: Where you configure ADF Faces features such as skin family and level of page accessibility support.

In the Structure window, you should see the default ADF Faces components JDeveloper added for you when you created the JSF page, as well as the panel stretch layout and decorative box components you added manually.

Structure window, page