Enter the following URL in your browser to log in to Oracle Application Express.

http://<yourhostname>:8080/apex

To log in to Oracle Application Express, enter the following details, and click Login.

Workspace: <your workspace name>
Username: <your username>
Password: <your password>

Select Application Builder > Database Applications.

Click Create.

Make sure the Database Application Type is selected and click Next.

Make sure From Scratch is selected and click Next.

Enter Plug-in Application for Name and click Next.

Enter Home for Page Name and click Add Page.

Select the Report and Form Page Type, select Home (1) for Subordinate to Page, enter DEMO_PRODUCT INFO or select it from the list of tables and click Add Page.

Click Create to accept the default values for the rest of the wizard pages.

Click Create to confirm.

Your application was created successfully. Click Run Application.

Enter obe for Username and Password and click Login.

The Home page is displayed. Select the Demo Product Info link.

The report is displayed. Select the edit icon for one of the products.

The Product Form is displayed. You want to add a rating for the product. In the next topic you add the column to the table. Click the Home link in the developer toolbar.

Select SQL Workshop > Object Browser.

Enter demo in the search area and select the DEMO_PRODUCT_INFO table in the list.

Select Add Column.

Enter RATING for Add Column, make sure NUMBER is selected for Type, enter 2 for Precision and click Next.

Click Finish.

The rating column was added successfully. Now you are ready to import the plug-in you will use in your application.

Select Application Builder > Database Applications.

Select your Plug-in Application.

Select Shared Components.

Under User Interface, select Plug-ins.

There are currently no plug-ins. You will import the Star Rating plug-in which has been supplied in your files directory. Click Import.

Click Browse...

Select the item_type_plugin_com_oracle_star_rating.sql file from the directory where your files for this tutorial are located and click Open. Click Next.

Click Next.

Make sure your Plug-in Application is selected for Install into Application and click Install Plug-in.

In the next section, you will add the plugin to your page.

Click the Application <n> breadcrumb.

Select the 3-Demo Product Info form icon.

Under the Edit DEMO_PRODUCT_INFO Region, right-click Items and select Create Page Item.

Select the Item Type Plug-ins and click Next. Note that if there are no plug-ins contained under Shared Components > Plug-ins then this Item Type will not be shown on this page.

Select the Star Rating radio button and click Next. Note that only the Plug-ins that have been imported for this application are displayed.

Enter P3_RATING for Item Name and click Next.

Accept the defaults and click Next.

Accept the default to have 5 # of stars for the Rating and click Next.

Select Database Column for Source Type, enter RATING for Database Column Name and click Create Item.

The Rating item was created successfully. Click Run.

The Star Rating item is displayed. When you put your cursor over one of the stars you see the stars change colors. Select the number of stars you want.

Click Apply Changes.

Your Star Rating was added to the database. In the next section, you will create a plug-in from scratch and then use it in your application. Select Application <n> in the developer toolbar.

Select the Shared Components icon.

Under User Interface, select Plug-ins.

You want to create a new plug-in. Click Create.

Enter Masked Text Field for Name, COM.ORACLE.APEX.MASKED_TEXT_FIELD for Internal Name, make sure Item is selected for Type and click Create. Note that the internal name should be changed to your own domain name but for this example, you will use ORACLE.

You need to add a file that contains the javascript needed for this plug-in. Select the Files subtab.

Click Upload New File.

Click Browse...

Select the jquery.maskedinput-1.2.2.min.js file from the directory where your files for this tutorial are located and click Open. Then click Upload.

Your file was added. Click the Custom Attributes tab.

Click Add Attribute.

Enter the following and click Create and Create Another.

Enter the following and click Create.

You need to specify the code that will execute for this plug-in. Click the Source subtab.

Copy and paste the code in the mask_plugin.txt file into the PL/SQL Code field and then click the Callbacks subtab.

Make sure render_mask is set for Render Function Name and validate_mask is set for Validation Function Name and click Apply Changes.

The Masked Text Field plug-in was created successfully. Now you want to create a new page where you can apply the plug-in. Click the Application <n> breadcrumb.

Click Create Page.

Select Form and click Next.

Select Form on a Table with Report and click Next.

Accept the default and click Next.

Enter DEMO_CUSTOMERS for Table/View Name and click Next.

Enter Customer List for Page Name and Region Title, select Breadcrumb for Breadcrump, select Home for the Parent Entry and click Next.

Accept the default and click Next.

Shift+select CUST_FIRST_NAME, CUST_LAST_NAME and CUST_EMAIL and click Next.

Accept the default and click Next.

Enter Maintain Customers for Page Name, Region Title and Entry Name and click Next.

Accept the default and click Next.

Accept the default and click Next.

Shift+select all the columns and click Next.

Accept the default and click Next.

Click Finish.

Click Run Page.

The report is displayed. Select the edit icon in front of one row.

The form is displayed. Notice that Phone Number 1 is formatted however this number is not based on the plug-in. Change the number to something else.

After you make your change, click Apply Changes to see that it was accepted..

Click the edit icon again.

Your change was accepted because there is no validation and the plug-in was not applied. In the next topic, you apply the Masked Text Plug-in to the Phone Number 1 item. Select the Edit Page link in the developer toolbar.

Right click P5_PHONE_NUMBER1 and select Edit.

Select Masked Text Field [Plug-in] for Display As.

Notice the Settings area is displayed which contains the Custom Attributes you specified when you created the plug-in. Accept the defaults and click Apply Changes.

Click Run.

The form is displayed. Notice the phone number looks the same as it did before. Delete the current contents of that field.

Notice that the format of the field is displayed with the placeholder of a '_'. Change the '_' with a different number.

The numbers for Phone Number are displayed in the format specified by the plug-in. Enter something in the Alt Phone Number field. Notice that the numbers do not have the same format applied. This is because this item is still a text item and the plug-in has not been applied.