Tutorial 55: Uploading Images in FS Mobile Apps

This tutorial shows how to upload a picture in a Formspider Mobile (FS Mobile) application

This demo application shows a list of contacts. The first name and last name of each contact is listed on the main screen. When a contact on the list is tapped, the application opens a screen where the user can edit the contact information. This edit screen also shows a picture of the contact that is editable by the user. The user can create new contacts by tapping the New button on the main screen.

The Data Model

The application uses a simple table called MY_CONTACTS. Below is the DDL of the table:

CREATE TABLE my_contacts
    (firstname_tx    VARCHAR2(200),
     lastname_tx     VARCHAR2(200),
     email_tx          VARCHAR2(200),
     picture_bl        BLOB,
     id                   NUMBER not null)

The Model Layer

Open the Formspider IDE and create an application called “MyContacts”.

Add a new Datasource Definition named “MY_CONTACTS” and a Datasource named “MY_CONTACTS1″ based on the “MY_CONTACTS” table.

The View Layer

Create a Panel named “editContact” to edit a single row in the Datasource “MY_CONTACT1″.

Uploading an Image
To upload an image from the device set the fromDevice attribute to Y for the image component.

Set the uploadFrom attribute of the Save button to “editContact.image1”. This enables the upload to start when the button is pressed.

Create the “saveContact” and “cancelEditContact” actions with the following PL/SQL code blocks respectively and call them from the Cancel and Save buttons which reside in the header of the “editContact” Panel.

procedure saveContact is
begin
  api_application.docommit;
  m_frame.goback;
end;
procedure cancelEditContact is
begin
  if api_datasource.getcurrentrowid('MY_CONTACTS1') is not null then
    if api_datasource.getrowstatus('MY_CONTACTS1') = api_datasource.ROW_STATUS_NEW then
      api_datasource.deletecurrentrow('MY_CONTACTS1');
    else
      api_datasource.refreshcurrentrow('MY_CONTACTS1');
    end if;
  end if;
  m_frame.goback;
end;

Create the “deleteContact” action with the following PL/SQL code and call it from the Delete Contact button.

procedure deleteContact is
begin
  api_datasource.deletecurrentrow('MY_CONTACTS1');
  api_application.docommit;
  m_frame.goback;
end;

The final XML of the “editContact” Panel is the following:

<panel>
  <header>
    <left>
      <button label="Cancel">
        <events>
          <buttonPress action="cancelEditContact"/>
        </events>
      </button>
    </left>
    <center>
      <title label="Contact"/>
    </center>
    <right>
      <button label="Save" uploadFrom="editContact.image1">
        <events>
          <buttonPress action="saveContact"/>
        </events>
      </button>
    </right>
  </header>
  <rowLayout>
    <row minimumHeight="40">
      <cell width="15%"/>
      <cell>
        <image name="image1" fromDevice="Y" column="PICTURE_BL" dataSource="MY_CONTACTS1"/>
      </cell>
      <cell width="15%"/>
    </row>
    <row>
      <cell>
        <group>
          <textField column="FIRSTNAME_TX" dataSource="MY_CONTACTS1" emptyText="First Name"/>
          <textField column="LASTNAME_TX" dataSource="MY_CONTACTS1" emptyText="Last Name"/>
          <textField column="EMAIL_TX" dataSource="MY_CONTACTS1" emptyText="Email"/>
        </group>
      </cell>
    </row>
    <row>
      <cell>
        <button label="Delete">
          <events>
            <buttonPress action="deleteContact"/>
          </events>
        </button>
      </cell>
    </row>
  </rowLayout>
</panel>

Edit the “mainPanel” XML so that it shows a list of contacts using a repeatPanel.

Create a button labeled New in the header of the “mainPanel”. Create an action named “showNewContact” with the following PL/SQL code and call it from the button.

procedure showNewContact is
  v_rowPointer_id number;
  v_row_pk number;
begin
  v_rowPointer_id:=api_datasource.createrowbyrownumber('MY_CONTACTS1',1);
  select my_seq.NEXTVAL into v_row_pk from dual;
  api_datasource.setcurrentrow('MY_CONTACTS1',v_rowPointer_id);
  api_datasource.setcolumnvalue('MY_CONTACTS1.ID',v_row_pk);
  m_frame.addpanel('editContact');
end;

Create a tap event for the row tag. Create an action named “showEditContact with the following PL/SQL code and call it from the tap event.

procedure showEditContact is
begin
  m_frame.addpanel('editContact');
end;

The final XML of the “mainPanel” is below:

<repeatPanel dataSource="MY_CONTACTS1">
  <header>
    <center>
      <title label="My Contacts"/>
    </center>
    <right>
      <button label="New">
        <events>
          <buttonPress action="showNewContact"/>
        </events>
      </button>
    </right>
  </header>
  <rowLayout>
    <row>
      <events>
        <tap action="showEditContact"/>
      </events>
      <cell>
        <textLabel column="FIRSTNAME_TX"/>
      </cell>
      <cell>
        <textLabel column="LASTNAME_TX"/>
      </cell>
    </row>
  </rowLayout>
</repeatPanel>

Run the application from the IDE. Alternatively, you can use the Formspider Mobile Previewer App to test the application in the FS Mobile Native Wrapper. Click the New button. Click the small empty image box under the header to select an image from your device or take a new photo. Note that the empty image icon is rather small. This is a known bug in FS Mobile Beta 2.