Utisci korisnika

Veoma sam zahvalna na Vašem brzom odgovoru i želela bih da Vam se zahvalim na pažnji koju ste pokazali. Radica Nedelčev - Beograd

"Slučajno sam na nekoj diskusiji Infostuda našla vaš link i prosto sam zapanjena, obradovana i neizmerno ponosna što i u SRBIJI možemo da se služimo e-learning opcijom usavršavanja."…


Kompletna lista utisaka

Testiranje online

Arhitektura računara

Za one koji žele da znaju više.

Windows OS

Ovo bi svakako trebalo da probate.

Odnosi s javnošću

Koliko znate PR?

Pogledajte još neke od testova

Newsletter

Ukoliko želite da Vas redovno obaveštavamo o novostima sa Link eLearning sajta prijavite se na našu newsletter listu.

Ime:

Prezime:

Email:


Anketa

Arhiva anketa

BAZA ZNANJA


Kurs: Advanced Web Application Technologies

Modul: Kreiranje mobilnih veb aplikacija

Autor: Marko Stojićević

Naziv jedinice: Osnovne mobilne veb kontrole


Materijali vezani uz ovu lekciju:

- Test osnovne mobilne veb kontrole
- Osnovne mobilne veb kontrole (PDF dokument)



Mobilne kontrole Label i TextBox

Mobilna Label kontrola se koristi za prikaz teksta korisniku koji se ne može editovati. Mobilna TextBox kontrola omogućava korisniku da unese jednu liniju teksta. Markerski kod ovih kontrola je sledeći:

<mobile:Label ID="LabelTraziId" Runat="server">Unesi ID</mobile:Label>   
<mobile:TextBox ID="TextBoxTraziId" Runat="server"></mobile:TextBox>

  

Properties prozori mobilnih kontrola Label i TextBox

Na slici ispod prikazani su Properties prozori mobilnih kontrola Label i TextBox. Kartica sa događajima se ne prikazuje u Visual Studiju pa se ukoliko je potrebno, događaj mora definisati kao atribut kontrole. Takođe je potrebno “ručno” definisati i event-handler u odgovarajućem .cs fajlu kao odgovor na događaj kontrole.

 

           

 

Mobilna Command kontrola

Ova kontrola predstavlja programabilno dugme. Kod mobilnih uređaja renderuje se u dugme ili tzv.  “soft key”. Klikom na ovu kontrolu generiše se OnClick događaj. Događaj se mora definisati kao atribut kontrole. Takođe je potrebno “ručno” definisati i event-handler u odgovarajućem cs fajlu kao odgovor na događaj kontrole. Markerski kod ove kontrole je prikazan ispod:

<mobile:Command ID="CommandTraziIme" Runat="server" OnClick="CommandTraziIme_Click">Trazi</mobile:Command>


U kodu koji sledi ilustrovan je primer OnClick događaja za Command asp.net mobilnu web kontrolu.

protected void CommandTraziIme_Click(object sender, EventArgs e)
  {
    DataTable products = VratiTabeluProizvoda();
    DataView productsView = products.DefaultView;
    productsView.RowFilter = String.Format("ProductName like '{0}%'",
    TextBoxTraziIme.Text);
    PrikaziRezultate(productsView);
  }

Pozivom korisnički definisane metode VratiTabeluProizvoda dobija se DataTable objekat koji sadrži podatke iz tabele Products koja se nalazi u bazi podataka Northwind. Da bi se izvršilo filtriranje podataka u ovoj tabeli koristi se DataView objekat. Pomoću svojstva RowFilter u DataView objektu se prikazuju samo oni proizvodi čije ime počinje vrednošću koja se nalazi u TextBoxTraziIme  kontroli.

  

Mobilna List kontrola

Prikazuje listu stavki. Stavka se dodaje u listu korišćenjem Items svojstva ili povezivanjem ove kontrole sa izvorom podataka. List kontrola podražava “data binding” korišćenjem svojstava DataSource, DataMember, DataTextField, i  DataValueField. Odabirom stavke liste generiše se događaj  OnItemCommand . Sledi markeski kod ove kontrole:

<mobile:List ID="ListGlavniMeni" Runat="server" OnItemCommand="ListGlavniMeni_ItemCommand">
  <Item Text="Po imenu" Value="1" />
  <Item Text="Po ID-u" Value="2" />
  <Item Text="Po Kategoriji" Value="3" />
</mobile:List>

U sledećem primeru ilustrovan je event handler za događaj OnItemCommand.

protected void ListGlavniMeni_ItemCommand(object sender, ListCommandEventArgs e)
{
if (e.ListItem.Value == "1")
{
//potrazi po imenu
this.ActiveForm = FormTraziIme;
}
else if (e.ListItem.Value == "2")
{
//pretrazi po ID-u
this.ActiveForm = FormTraziId;
}
else if (e.ListItem.Value == "3")
{
//pretrazi po kategoriji
this.ActiveForm = FormTraziKategoriju;
}
}

U zavisnosti od vrednosti selektovane stavke gornjim kodom se menja aktivna mobilna forma. Podsetimo se da jedna mobilna web strana može imati više mobilnih web formi.

Na slici ispod prikazana je gore definisana mobilna List kontrola u prozoru emulatora mobilnog uređaja.

 

  

  

ObjectList kontrola

Često ovu kontrolu nazivaju i “mobilni grid”. Poseduje svojstva DataSource i DataMember za povezivanje sa izvorom podtaka. Svojstvo LabelFild definiše inicijalni prikaz ove kontrole kada se renderuje. Svojstvo LabelField se postavlja na primarni kluč ili neki drugi atribut odgovarajuće tabele, tako da se klikom na hiperlink na kome je prikazan ovaj atribut, prikazuju i ostali podaci. Sledi markerski kod ove kontrole:

<mobile:ObjectList Runat="server" ID="ObjectListRezultati">
</mobile:ObjectList>

U sledećem primeru ilustrovaćemo povezivanje ObjectList kontrole sa izvorom podataka.

private void PrikaziRezultate(DataView data)
{
ObjectListRezultati.DataSource = data;
ObjectListRezultati.LabelField = "ProductName";
ObjectListRezultati.DataBind();
this.ActiveForm = FormRezultati;
}

Na slikama ispod prikazana je ObjectList kontrola.

 

      

       

Na levoj slici dat je inicijalni prikaz ObjectList kontrole a na desnoj slici je prikazana ObjectList kontrola nakon klika na hiperlink prikazan na levoj slici.

 

Kompletan kod:

Sledi kompletan kod koji ilustruje upotrebu osnovnih mobilnih web kontrola.

 

Markerski kod, strana Default.aspx

<%@ Page Language="C#" AutoEventWireup="true" 
  CodeFile="Default.aspx.cs" Inherits="_Default" %>

<%@ Register TagPrefix="mobile"
  Namespace="System.Web.UI.MobileControls"
  Assembly="System.Web.Mobile" %>
 
<html xmlns="http://www.w3.org/1999/xhtml" >
<body>
 
  <mobile:Form id="FormMain" runat="server" Title="Odaberite metod pretrazivanja">
   
<mobile:List ID="ListGlavniMeni" Runat="server" OnItemCommand="ListGlavniMeni_ItemCommand">
  <Item Text="Po imenu" Value="1" />
  <Item Text="Po ID-u" Value="2" />
  <Item Text="Po Kategoriji" Value="3" />
</mobile:List>
  </mobile:Form>
 
  <mobile:Form id="FormTraziIme" runat="server"  Title="Unesi Ime">
  
    <mobile:Label ID="LabelTraziIme" Runat="server">Unesi ime</mobile:Label>   
    <mobile:TextBox ID="TextBoxTraziIme" Runat="server"></mobile:TextBox>
    <mobile:Command ID="CommandTraziIme" Runat="server" OnClick="CommandTraziIme_Click">Trazi</mobile:Command>
  </mobile:Form>

  <mobile:Form id="FormTraziId" runat="server"  Title="Unesi ID">
  
<mobile:Label ID="LabelTraziId" Runat="server">Unesi ID</mobile:Label>   
<mobile:TextBox ID="TextBoxTraziId" Runat="server"></mobile:TextBox>
    <mobile:Command ID="CommandTraziId" Runat="server" OnClick="CommandTraziId_Click">Trazi</mobile:Command>
  </mobile:Form>


  <mobile:Form id="FormTraziKategoriju" runat="server"
    Title="Odaberite kategoriju">
    <mobile:List Runat="server" ID="ListKategorija" OnItemCommand="ListKategorija_ItemCommand"></mobile:List>
  </mobile:Form>

  <mobile:Form id="FormRezultati" runat="server" Title="Rezultati pretrage">
<mobile:ObjectList Runat="server" ID="ObjectListRezultati">
</mobile:ObjectList>
  </mobile:Form>
 
</body>
</html>

 

Source kod, strana Default.aspx.cs

using System;
using System.Data;
using System.Data.SqlClient;
using System.Configuration;
using System.Web.UI.MobileControls;

public partial class _Default : MobilePage
{
    private string cnnNorthwind = ConfigurationManager.ConnectionStrings["NorthwindConnectionString"].ToString();
    
   

  private DataTable VratiTabeluProizvoda()
  {
      SqlDataAdapter adp = new SqlDataAdapter("select * from products", cnnNorthwind);
      DataSet ds = new DataSet();
      adp.Fill(ds, "products");

      return ds.Tables["products"];
  }

 

  private DataTable VratiTabeluKategorija()
  {
    SqlDataAdapter adp = new SqlDataAdapter("select * from categories", cnnNorthwind);
    DataSet ds = new DataSet();
    adp.Fill(ds, "categories");
    return ds.Tables["categories"];
  }

protected void ListGlavniMeni_ItemCommand(object sender, ListCommandEventArgs e)
 {
    if (e.ListItem.Value == "1")
    {
    //potrazi po imenu
    this.ActiveForm = FormTraziIme;
    }
    else if (e.ListItem.Value == "2")
    {
    //pretrazi po ID-u
    this.ActiveForm = FormTraziId;
    }
    else if (e.ListItem.Value == "3")
    {
    //pretrazi po kaategoriji
    this.ActiveForm = FormTraziKategoriju;
    ListKategorija.DataSource = VratiTabeluKategorija();
    ListKategorija.DataTextField = "CategoryName";
    ListKategorija.DataValueField = "CategoryID";
    ListKategorija.DataBind();   
    }
}

  protected void CommandTraziId_Click(object sender, EventArgs e)
  {
    DataTable proizvodi = VratiTabeluProizvoda();
    DataView proizvodiView = proizvodi.DefaultView;
    proizvodiView.RowFilter = String.Format("ProductID = {0}", TextBoxTraziId.Text);


    PrikaziRezultate(proizvodiView);
  }

  protected void CommandTraziIme_Click(object sender, EventArgs e)
  {
    DataTable products = VratiTabeluProizvoda();
    DataView productsView = products.DefaultView;
    productsView.RowFilter = String.Format("ProductName like '{0}%'", TextBoxTraziIme.Text);
    PrikaziRezultate(productsView);
  }

 

  protected void ListKategorija_ItemCommand(object sender, ListCommandEventArgs e)
  
  {
    DataTable products = VratiTabeluProizvoda();
    DataView productsView = products.DefaultView;
    productsView.RowFilter=  String.Format("CategoryID = {0}", e.ListItem.Value);

    PrikaziRezultate(productsView);
  }

    private void PrikaziRezultate(DataView data)
    {
    ObjectListRezultati.DataSource = data;
    ObjectListRezultati.LabelField = "ProductName";
    ObjectListRezultati.DataBind();
    this.ActiveForm = FormRezultati;
    }

}

 

 


Smatrate da je ova lekcija korisna?  Preporučite je. Broj preporuka:0


Molimo Vas unesite svoje podatke i dobićete pristup besplatnim lekcijama.

Ime: 
Prezime: 
Email: