Freigeben über


Exemplarische Vorgehensweise: Anpassen einer mobilen Homepage

Letzte Änderung: Mittwoch, 2. Februar 2011

Gilt für: SharePoint Foundation 2010

Diese exemplarische Vorgehensweise veranschaulicht das Anpassen der mobilen Homepage durch Implementieren eines benutzerdefinierten RenderingTemplate-Steuerelements. Das Beispiel erläutert das Anpassen des Kopfbereichs der Homepage. Eine Übersicht der Schritte zum Anpassen der Abschnitte einer mobilen Homepage finden Sie unterGewusst wie: Anpassen von mobilen Homepages.

Vor der Anpassung

Ein SPMobileComponent-Objekt, dessen TemplateName-Eigenschaft explizit auf WebPartMobileSummaryViewTitle festgelegt ist, wird in beiden HeaderTemplate-Elementen der Datei mblwiki.aspx deklariert, die als mobile Homepage für eine Teamwebsite verwendet wird. Nachfolgend wird eines dieser Elemente gezeigt:

<HeaderTemplate>
  <SPMobile:SPMobileControlContainer RunAt="Server" Weightless="true">
    <SPMobile:SPMobileComponent RunAt="Server" 
       TemplateName="WebPartMobileSummaryViewTitle" />
    <SPMobile:SPMobileComponent RunAt="Server" 
       TemplateName="MobileDefaultSeparator" />
  </SPMobile:SPMobileControlContainer>
</HeaderTemplate>

Dieses Objekt ruft das RenderingTemplate-Objekt in MobileDefaultTemplates.ascx auf, dessen ID "WebPartMobileSummaryViewTitle" lautet. Das RenderingTemplate-Objekt sehen Sie hier:

<SharePoint:RenderingTemplate RunAt="Server" 
  id="WebPartMobileSummaryViewTitle">
  <Template>
    <SPMobile:SPMobileWebTitle RunAt="Server" Prefix="WebPartMobile" />
  </Template>
</SharePoint:RenderingTemplate>

Wie dieses Beispiel zeigt, ruft die Rendervorlage ein Vorlagenauswahlobjekt der Klasse SPMobileWebTitle auf. Das Vorlagenauswahlobjekt erstellt die folgende Rendervorlagen-ID und ruft eine Rendervorlage mit dieser ID auf: WebPageMobile_STS_HomePage_Title. Ist keine Rendervorlage mit dieser ID vorhanden, wird diejenige mit dem Namen WebPageMobile_Default_HomePage_Title verwendet.

Microsoft SharePoint Foundationenthält kein RenderingTemplate-Objekt mit der ID Mobile_STS_HomePage_Title. In dieser exemplarischen Vorgehensweise erstellen Sie eine, die den Titel der Homepage in einem zweifarbigen Feld rendert. Vor der Anpassung rendert WebPageMobile_Default_HomePage_Title den Titel der Homepage der Teamwebsite entsprechend diesem Bildschirmfoto. Der Titeltext stammt aus dem Titel der dazugehörigen nicht mobilen Homepage der Teamwebsite. Der Text wird in einem dunkelblauen Feld mit weißen Buchstaben gerendert.

Standardmäßig gerenderter Titelbereich der Teamwebsite-Homepage

Nicht angepasste mobile Homepage

Vorgehensweise

So passen Sie den Kopfbereich der mobilen Teamwebsite-Homepage an

  1. Erstellen Sie in Microsoft Visual Studio ein leeres SharePoint-Projekt. Erstellen Sie eine Farmlösung, keine Lösung mit eingeschränkter Sicherheitsstufe.

  2. Fügen Sie TEMPLATE\ControlTemplates einen zugeordneten SharePoint-Ordner hinzu.

  3. Klicken Sie mit der rechten Maustaste auf den neuen Ordner, und fügen Sie ein SharePoint-Steuerelement hinzu. Legen Sie für die ASCX-Datei einen Namen fest, der sich von den Dateien anderer Lösungsanbieter unterscheidet, z. B. ContosoMobileRenderingTemplates.ascx. Die Datei wird von Visual Studio automatisch dem SharePoint-Lösungsmanifest hinzugefügt, und es wird festgelegt, dass die Datei in %ProgramFiles%\Common Files\Microsoft Shared\web server extensions\14\TEMPLATE\ControlTemplates bereitgestellt wird.

    TippTipp

    Fügen Sie das Steuerelement nicht durch Klicken mit der rechtem Maustaste auf Projekt im Projektmappen-Explorer hinzu. Wenn ein Steuerelement auf diese Weise hinzugefügt wird, wird es von Visual Studio in einem Unterordner von TEMPLATE\ControlTemplates abgelegt. Falls es nicht verschoben wird, wird es von Visual Studio in einem entsprechenden Unterordner von %ProgramFiles%\Common Files\Microsoft Shared\web server extensions\14\TEMPLATE\ControlTemplates bereitgestellt. Mobile Rendervorlagen in Unterordern werden nicht geladen.

  4. Löschen Sie die Dateien .ascx.cs und .ascx.designer.cs (oder .ascx.vb und .ascx.designer.vb). Sie werden für dieses Projekt nicht benötigt.

  5. Ersetzen Sie den gesamten Direktivenabschnitt der ASCX-Datei durch das folgende Markup:

    <%@ Register TagPrefix="GroupBoardMobile"   Namespace="Microsoft.SharePoint.Applications.GroupBoard.MobileControls" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
    <%@ Control Language="C#"   %> 
    <%@ Assembly Name="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> 
    <%@ Register TagPrefix="mobile" Namespace="System.Web.UI.MobileControls" Assembly="System.Web.Mobile, Version=1.0.3300.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a" %> 
    <%@ Register TagPrefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> 
    <%@ Register TagPrefix="SPMobile" Namespace="Microsoft.SharePoint.MobileControls" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> 
    <%@ Register TagPrefix="WPMobile" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
    
  6. Fügen Sie unterhalb der Direktiven das folgende Markup hinzu. Dadurch wird ein RenderingTemplate-Objekt mit der ID erstellt, die der Seitenparser sucht, wenn der Kopfbereich der Teamwebsite-Homepage gerendert wird.

    <SharePoint:RenderingTemplate 
      ID="WebPartMobile_STS_HomePage_Title" RunAt="Server">
    
    
    </SharePoint:RenderingTemplate>
    
  7. Definieren Sie innerhalb des RenderingTemplate-Elements ein Template-Element mit einem untergeordneten SPMobilePaddedPanel-Steuerelement. Legen Sie die Attribute ForeColor, BackColor, Font-Size und Font-Bold der Beschriftung wie im folgenden Beispiel fest:

    <Template>
        <SPMobile:SPMobilePaddedPanel RunAt="Server" 
          ForeColor="#FFFFFF" 
          BackColor="#990033" 
          Font-Bold="True" 
          Font-Size="13pt">
          <WPMobile:WebPartMobilePageTitle RunAt="Server" />
        </SPMobile:SPMobilePaddedPanel>
    </Template>
    
  8. Wählen Sie im Menü Erstellen die Option Lösung bereitstellen aus. Dadurch wird die ASCX-Datei automatisch gespeichert und in %ProgramFiles%\Common Files\Microsoft Shared\web server extensions\14\TEMPLATES\ControlTemplates bereitgestellt. Die Webanwendung wird wiederverwendet, sodass alle ASCX-Dateien in diesem Ordner erneut geladen werden.

  9. Navigieren Sie in Ihrem Gerät oder Emulator zur Homepage einer beliebigen SharePoint Server-Website. Der Titel sollte in einem inneren roten Feld angezeigt werden, das sich innerhalb des dunkelblauen Felds befindet. (Das äußere Feld wird direkt auf der mblwiki.asp-Seite deklariert, sodass es nicht von Ihrer Anpassung entfernt wird. Wenn Sie es entfernen möchten, müssen Sie eine neue Homepage für Teamwebsites erstellen und mobile Geräte über die Homepage-Umleitung auf Ihre neue Seite umleiten. Weitere Informationen zur Homepage-Umleitung finden Sie unter Homepage-Umleitung und Gewusst wie: Anpassen der mobilen Homepage durch Umleitung.)

Angepasster Kopfzeilenbereich auf Homepage

Siehe auch

Aufgaben

Gewusst wie: Anpassen von mobilen Homepages

Konzepte

Layout und Paginierung von mobilen Seiten

System zum Rendern mobiler Seiten