Oracle JDeveloper Introduction - Getting to Know the IDE

 A guided tour of the IDE. This demo introduces you to JDeveloper’s IDE (Integrated Development Environment). This is the screen that displays when you open JDEveloper for the first time. Note that there are 3 windows. The large window, currently displaying the JDEveloper welcome information, is referred to as the Visual Editor, or Code Editor. This window is the Applications Navigator. And this is the structure window. You get started with JDeveloper by first creating a workspace in which to store your work. To create a workspace, select ‘Applications’ in the Application Navigator, and choose File|New. We’ll select the Workspace Item and click OK. Ensure that the Add a New Empty Project box is checked, and click OK to create your workspace. You can rename your project, or accept the default name. Click OK to create your project. The workspace and project names appear in the Navigator. A project is a sub-division of a workspace, and helps you organize your work, within the workspace. As you work with JDeveloper, you build up a collection of workspaces and projects within them. The Application Navigator allows you to view your workspaces and projects, and their contents in a hierarchical fashion. Note that the names of the workspace and project are italicized. This is because they have not yet been saved. Click File|Save to save your workspace and project. Now that you have a workspace and a project, you can start to build an application. Let’s create a JSP. Select File|New. The New Gallery displays the various types of applications you can build with JDeveloper. Select the Empty Project item and click OK. Now expand the Web Tier node and select Java Server Pages (JSP). In the items pane, choose JSP Page and click OK. Change the filename to hello.jsp and click ok. The empty hello.jsp page displays in the visual editor and it appears under the MyProject node in the navigator. The structure window is synchronized with the other windows, and so it displays the structure of hello.jsp. Two new windows have opened on the right of the page. The Component Palette and the Property Inspector. A JSP is an HTML page with embedded Java code. Let’s add some simple text to the page. Type in ‘Hello world’. The toolbar allows you to format the text on your page. Change it to Heading 2. Note that the property inspector displays the properties for the currently selected item, in this case, the H2 heading. You can view and update properties through the property inspector. The component palette provides the components needed for creating the many types of applications that jdeveloper offers. Let’s add a style sheet to the page. Select CSS which is a Cascading Style Sheet. Three style sheets are available. Select JDeveloper and drag it over to the editor. The JDeveloper style is applied to the page. Note that the property inspector is updated accordingly as is the structure window. Let’s add some HTML components to the page. In the component palette, select HTML then Form. Drag Form over to the editor. In the form we added, type Login: Now select Text Field from the component palette. Drag this to the right of the word Login in the editor. Change the name of the text field to username in the property inspector. Now click Submit button in the component palette and drag it to the right of our text field. A submit button is added. This window shows you the design view of your page. You can also view the source in the Source window or you can split the window to see design and source views at the same time by selecting Window|Split Document. The windows are synchronized so that a change made in one window is immediately visible in the other. If you change login to logon, you can see the change in both windows. Let’s add some code in the source window. On the logon row, put a space after form. Note how the code insight feature of JDeveloper helps you by offering suggestions in the appropriate context. Select action and type in hello.jsp. Go to the design window and save the page. Run the page to see how it will look when run in a browser. From the context menu select Run. …. Many applications require connections to other machines and devices. You use the connections navigator to create connections to other devices. These are the types of connections available. Let’s create a database connection. In the connections navigator, right click database and select New Database connection. Click Next. Here you can see the available connection types. Click Next. Enter the username and password for the database and click next. Now we’ll enter the IP address for our host and click next. Click Test Connection to make sure our connection is set up correctly. The database connection has been successfully established. Click next then finished. The new connection appears in the navigator. Expand the node to see the database objects. Expand the Tables node and we can see all the available tables. Notice that the columns of the selected table appear in the Structure window. This has been a guided tour of JDeveloper’s IDE. You have visited the Applications and Connections Navigators, the Visual Editor and Code Editor, the Component Palette, Property Inspector and Structure window.