27 ноября 2010 г.

WebMatrix. Используем Яндекс в качестве поиска по сайту

Построим поиск по сайту при помощи WebMatrix и поисковика Яндекс. Данную задачу можно было реализовать и на любом языке, но я решил примерить синтаксис Razor к интересной задаче.Суть программки в том, что получив запрос пользователя и его пожелания относительно того что он хочет получить (документ или какой-нибудь материал с сайта), мы делаем запрос к поисковику Yandex. В запросе к серверу мы указываем необходимый сайт и пользовательский запрос. Пользователь получает страницу с поисковой выдачей.
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" type="text/css" href="main.css"/>
  </head>
  <body>
@using System.Linq;
@using System.Collections.Generic;
        @{
            // У нас есть данные введенные в поле ввода, на основание этого нам нужно сформировать запрос к яндексу
      if(IsPost){
        string text=Request["query"];
        //Проверяем введеную строку, если она не пустая, продолжаем
        if(!String.IsNullOrEmpty(text))
        {
          /*В веденной строке необходимо заменить все пробелы "+"ми.
          Для этих целей используем LINQ */
          IEnumerable<char> textAsChar = text.Select(x=>(x==' ')?'+':x);
          text=new String(textAsChar.ToArray());
          string searchType;метром
          //Определяемся с предпочтениями пользователя, поиск по всему или только по документам
          if (Request["searchtype"]=="all") {searchType="";}
          else {searchType="&mime=pdf&mime=doc&mime=xls";}
          //tetrapolis.ru - сайт на котором производим поиск
          string query=String.Format("http://yandex.ru/yandsearch?date=&text={0}"+
          "&site=tetrapolis.ru&rstr=&zone=all&wordforms=all&lang=ru&mime=all&numdoc=10&lr=2{1}",text,searchType);
          //Делаем переход
          Response.Redirect(query);
        }
      }
    }
  <form method="post" action="">
    <input type="text" name="query" />
    <label for="ContactName"></label>
    <button type="submit">Search</button>
    <br/>
    <input type="radio" name="searchtype" value="all" checked/><label>Общий поиск</label>
    <input type="radio" name="searchtype" value="doc" /><label>По документам</label>
  </form>
  </body>
</html>

main.css:
input[name="query"] {
padding:6px 6px 6px 25px;/* Делаем отступы, самый большой - слева */
font-size: 16px;
color: black;
border: 1px solid #b8b8b8;
/*Делаем круглую рамку (html5) */
-webkit-border-radius:10px;
-moz-border-radius:10px;
/*Добавляем лупу */
background: url('lypa2.jpg') no-repeat;
background-position: left center;
}
button[type="submit"]{
padding:6px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
background-color:#d53e07;
color:white;
font-weight:bold;
}

* This source code was highlighted with Source Code Highlighter.
Комментариев нет :
Ярлыки:

26 ноября 2010 г.

Относительно недавно познакомился с Silverlight компонентом Bing Map Silverlight Control. Контрол этот полезный и интересный. Поэтому я сразу же попытался сотворить с его участием такое приложенице, что то вроде блокнотика на картах, чтобы можно было делать свои пометки и сохранять их в локальном хранилище. Описывать основы работы с контролом не буду, а сразу перейду к реализации. Основная проблема с которойя столкнулся - навигация по карте осуществляется курсором мышки. Как эту опцию отключить, не переопределяя в наследуемом классе обработчик OnMouseLeftButtonDown, я не нашел.
Привожу код нового класса унаследованного от Microsoft.Maps.MapControl.Map.

Рис. Пример работы
Код класса:
public class NonDragableMap : Microsoft.Maps.MapControl.Map
  {
    private Color _strokeColor;//Цвет линии
    //По умолчанию режим редактирования будет отключен и можно будет как
    //и прежде перемещаться по карте курсором мыши
    public bool allowMapMove
    {
      get;
      set;
    }
    public Color strokeColor
    {
      set{
        this._strokeColor = value;
      }
    }
    private double _strokeThickness;
    public double strokeThickness//Толщина линии
    {
      get{
        return this._strokeThickness;
      }
      set{
        this._strokeThickness = value;
      }
    }
    public NonDragableMap()
    {
      strokeColor = Colors.White;//По умолчанию цвет белый
      strokeThickness = 5;
      allowMapMove = true;
    }
    //Объект линии которую рисуем
    private MapPolyline _mapLine;
    //В коллекции координат храним координаты текущей линии:
    private LocationCollection coordinateCollection;
    //Обрабатываем событие нажатие левой клавиши мыши
    //1) Этим методом убирается перемещение карты курсором мыши
    //2) Создаем объекты отвечающие за прорисовку линии
    protected override void OnMouseLeftButtonDown(MouseButtonEventArgs e)
    {
      if (this.allowMapMove)
      {
        base.OnMouseLeftButtonDown(e);//Разрешаем работу стандартного обработчика
        return;
      }
      this._mapLine = new MapPolyline();
      this._mapLine.Stroke = new System.Windows.Media.SolidColorBrush(this._strokeColor);//Цвет
      this._mapLine.StrokeThickness = this._strokeThickness;
      this._mapLine.StrokeLineJoin = PenLineJoin.Round;//Скругливаем пересечения - устраняет проблему артефактов при пересечении линий
      this.coordinateCollection = new LocationCollection();
      //Записываем собранные курсором координаты в координаты линии
      this._mapLine.Locations = this.coordinateCollection;
      //Добавляем линию на карту
      this.Children.Add(this._mapLine);
      
    }
    protected override void OnMouseMove(MouseEventArgs e)
    {
      if (this.allowMapMove) base.OnMouseMove(e);
      if (this.coordinateCollection != null)
      {
        var d = e.StylusDevice.GetStylusPoints(this);
        foreach (StylusPoint s in d)
        {
          this.coordinateCollection.Add(this.ViewportPointToLocation(new Point(s.X, s.Y)));

        }
        this.coordinateCollection.Distinct();
      }
    }
    //Обрабатываем события отпускания левой кнопки заершаем рисование
    protected override void OnMouseLeftButtonUp(MouseButtonEventArgs e)
    {
      //Завершаем рисование
      this.coordinateCollection = null;
      this._mapLine = null;
      e.Handled=true;
    }
    
  }

* This source code was highlighted with Source Code Highlighter.
Комментариев нет :
Ярлыки: , ,

21 ноября 2010 г.

Псевдокласс :target и меню на CSS

Работая над редизайном раздела своего сайта, мне в голову пришла идея сделать меню и весь раздел на css. Сейчас поясню подробнее. Одним из нововведений css 3.0, является псевдокласс :target, который применяется к целевому элементу (к идентификатору, указанному в адресной строке браузера) (см. рис. 1).

Рис. 1 Целевой элемент #bk. 
Следовательно, мы можем на страницы разместить якоря, которые будут ссылаться на определенные элементы страницы. Тем самым при переходе по этим ссылкам мы будем применять к ним псевдокласс :target.
Теперь следует сказать, что псевдокласс :target поддерживается почти всеми ныне ходовыми браузерами (Chrome, Safari, FireFox, Opera), кроме Internet Explorerа младше 9.0. Поэтому метод реализации меню средствами css пока лучше заменять JQuery или верстать по старинке с переходом на отдельные страницы, пока не «отомрут» все браузеры не поддерживающие css 3.0.

Представляю Вам отверстанную страницу html:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 1</title>
<link rel="stylesheet" type="text/css" href="corp.css"/>
</head>
<body>
<--С права меню, а слева контент -->
<div class="part_left">
<ul>
  <li><a href="#bk">Бизнес кредиты</a></li>
  <li><a href="#rko">Расчетно кассовое обслуживание</a></li>
  <li><a href="#dbo">ДБО</a></li>
  <li><a href="">Конверсионные операции</a></li>
  <li><a href="">Корпоративные карты</a></li>
  <li><a href="">Зарплатный проект</a></li>
  <li><a href="">Депозиты</a></li>
  <li><a href="">Векселя</a></li>
</ul>
</div>
<div class="part_right">
  <ul>
    <li id="default">это IE</li>
    <li id="bk">Бизнес кредиты... </li>
    <li id="rko">Расчетно кассовое обслуживание...</li>
    <li id="dbo">Дистанционное банковское обслуживание...</li>
  </ul>
</div>
</body>

<html>

* This source code was highlighted with Source Code Highlighter.
 и сопутствующий corp.CSS файл:
a{
  font-family:Arial, Helvetica, sans-serif;
  font-size:12pt;
  color:black;
  font-weight:bold;
}
a:link{text-decoration:none;}
a:hover{text-decoration:underline;}
a:active{color:#0000CC;}
ul{
  margin:0;
  -webkit-padding-start:0;
  -moz-padding-start:0;
}
li {list-style:none;}
.part_left{
  position:absolute;
  left:0;
  top:0;
  width:300px;
}
.part_right{
  position:absolute;
  left:305px;
  top:0;
  width:auto;
}
/* Задаем параметры для фрагмента #bk, и остальных пунктов меню*/
/* Значения по умолчанию */
li#bk, li#rko, li#dbo{
display:none;
}
/* Когда ссылка активирована */
li#bk:target, li#rko:target, li#dbo:target{
  display:block;
}
/*Возврат к визуализации по умолчанию */
li#bk:not(:target),li#rko:not(:target), li#dbo:not(:target){
  display:none;
}
/* ------- */
/* Дефолтный случай для IE <9.0*/
li#default{
  display:block;
}
/*li#default:target{
  display:block;
}*/
li#default:not(:target){
  display:none;
}

* This source code was highlighted with Source Code Highlighter.
Комментариев нет :
Ярлыки: ,
Подписаться на: Сообщения ( Atom )