Display SOQL result in a visualforce page

Question

I have an SOQL query that assigns values to strings and then puts them up on a website. Here what I've got for a method:

 public void gennumber2(){

        List<Service_Instance__c> Servic = [Select Account__c, Account_Customer_Account_Number__c, Airports__c, Opportunity__c, Opportunity__r.Works_CSP__c, Local_Service__c, Local_Service__r.name , Location__c, Terminal__c, Physical_ID__c
        from Service_Instance__c where USI__c =:usi1 limit 1];


     if(Servic.size() > 0){
    building = Servic[0].Terminal__c;
    room = Servic[0].Location__c;
    accunt = Servic[0].Account__r.Name;
    workno = Servic[0].Opportunity__r.Works_CSP__c;
    airport = Servic[0].Airports__c;
    opporname = Servic[0].Opportunity__r.Name;
    locals = Servic[0].Local_Service__r.name;
    phys = Servic[0].Physical_ID__c;

     } else { 
          ApexPages.addMessage(new ApexPages.Message(ApexPages.Severity.Warning, 'The USI number is invalid'));  
          return;
     }
    }

And here is What I've got for the visaulforce page:

  <div class = "col-md-6">        
                  <h3> Instructions </h3>
                  <p>Type in the USI number to get the name and ID of the service Instance.</p> 

      <apex:form id="frm2">
          <div class="col-xs-12 text-center text-danger list-unstyled strong">
       <apex:messages />
        </div>


        <apex:inputText id="username" html-placeholder="USI Number" required="true" styleClass="form-control" value="{!usi1}"/>  
        <apex:commandButton value="Get Details" action="{!gennumber2}" status="status" styleClass="btn btn-default" rerender="frm2"/>

         <br/>
      <apex:outputField value="Building: {!building}" />
      <apex:outputField value="Room: {!room}" />
      <apex:outputField value="Account: {!accunt}" />
      <apex:outputField value="Work Order Number: {!workno}" />
      <apex:outputField value="Airport: {!airport}" />
      <apex:outputField value="Opportunity Name: {!opporname}" />
      <apex:outputField value="Local Service Name: {!locals}" />
      <apex:outputField value="Physical ID: {!phys}" />

    </apex:form>
  </div>

I'm trying to make a dongdle that will allow user to put a USI number and get details based on that USI number. The problem with this code is that I cannot seem to get the values displayed.

//////////////////EDIT////////////////////
Here are the variables declared at the top of the page **

public String building {get;set;}
public String room {get;set;}
public String accunt {get;set;}
public String workno{get;set;}
public String airport{get;set;}
public String opporname{get;set;}
public String locals {get;set;}
public String phys {get;set;}**

////////////////UPDATE///////////////

<apex:outputPanel rendered="ServiceIns != null"> <!--Outputpanel rendered in "ServiceIns" not equal to null-->
    <apex:outputField value="{!ServiceIns.Terminal__c}" />
    <apex:outputField value="{!ServiceIns.Location__c}" />
    <apex:outputField value="{!ServiceIns.Account__r.Name}" />
    <apex:outputField value="{!ServiceIns.Opportunity__r.Works_CSP__c}" />
    <apex:outputField value="{!ServiceIns.Airports__c}" />
    <apex:outputField value="{!ServiceIns.Opportunity__r.Name}" />
    <apex:outputField value="{!ServiceIns.Service__r.name}" />
    <apex:outputField value="{!ServiceIns.Physical_ID__c}" />
</apex:outputPanel>

Answer 1

This is simple way to display your List values in VF page. It may help to you.

Controller :

public Service_Instance__c ServiceIns { get; set; } // getter setter initialize

public void gennumber2(){

    List<Service_Instance__c> serv = [SELECT Id, Name, Account__c, ... FROM Service_Instance__c WHERE USI__c =:usi1 limit 1]; // Query the values

    if(serv.size() > 0){  // Check whether list is empty or not
        ServiceIns = serv[0];  // Assign get set variable value
    } else {
        ApexPages.addMessage(new ApexPages.Message(ApexPages.Severity.Warning, 'The USI number is invalid')); // else show the error message
    }
}

Page :

<apex:outputPanel rendered="{!IF(ServiceIns != null, true, false)}"> <!--Outputpanel rendered in "ServiceIns" not equal to null-->
    <apex:outputField value="{!ServiceIns.Terminal__c}" />
    <apex:outputField value="{!ServiceIns.Location__c}" />
    <apex:outputText value="{!ServiceIns.Account__r.Name}" />
    <apex:outputText value="{!ServiceIns.Opportunity__r.Works_CSP__c}" />
    <apex:outputField value="{!ServiceIns.Airports__c}" />
    <apex:outputText value="{!ServiceIns.Opportunity__r.Name}" />
    <apex:outputText value="{!ServiceIns.Service__r.name}" />
    <apex:outputField value="{!ServiceIns.Physical_ID__c}" />
</apex:outputPanel>

Answer 2

With your code I can't see how your variables are declared, but asumming that your page is referening your controller:

You need to declare all your variables

building, room, accunt, workno...

as public variables and with their own {get; set;} methods

Answer 3

Declare your variables as public and {get;set}, assign values to those variables and then use that variables on the page.