Web Design Blog

Нигма решает уравнения, но человек это делает лучше.

2011-12-03T23:56:00.000-08:00

Фразы: "- Знаешь, что это такое? - Знаю. - Врешь. Знаешь, да не понимаешь."

С сыном осваиваю начальную математику и частенько решаю различные уравнения, но бывают случаи когда папы нет дома и надо проверить работу самому. Вот тут я, как человек работающий с интернетом и даю ему способ проконтролировать свой ход решения - это Нигма Математика.

Читали ли вы когда-нибудь рассказ А.П.Чехова «Репетитор»? Нет? Тогда обязательно прочтите, он очень интересный! А если читали, то давайте вспомним один интересный момент. Гимназист Егор Зиберов не одолел простую математическую задачу.

"Один богатый купец приобрел 138 аршин отличного качества черного сукна и синего сукна того же качества. Это ему обошлось всё в 540 рублей. Тут рождается вопрос, сколько аршин синего и черного сукна приобрел купец, если сукно синего цвета стоило 5 рублей, а черного – 3 рубля?"

Нигма арифметически эту задачу решить не может, но систему уравнений решает на ура.

Для проверки своего решения этого естественно достаточно (что и надо ребенку), но во времена Чехова далеко не все знали уравнения и надо было решить ее арифметически. К тому же купец решил ее с помощью простых счет. Решений оказывается несколько:

1) Если бы купец приобрел сукно одного типа, например синее, то он заплатил бы 138*5 = 690 руб. Образовавшаяся разность в 150 руб. получена за счет того, что черное сукно повышено в цене на 2 руб. Значит, черного сукна было 150:2 = 75 аршин, а синего было 138-75 = 63 аршина.

2) В трёхрублёвой, и в пятирублёвой ткани 3 рубля есть. Значит, умножаем 138 на 3 = 414 - это столько заплачено по 3 рубля. Оставшиеся 540-414=126 рублей делим на 2 (5-3=2) и получаем 63. Значит, 63 синего и 138-63=75 черного.

3)Представляем. Я портной пришел в магазин купить сукно в руках 540 рублей нужно черное и синее и ровно 138 аршины. Представьте два больших рулона сукна их разматывают одновременно и считают каждый аршин этого комплекта 8 рублей и так мотают до 67 аршин стоимость которого составляет 536 рублей, 4 рубля сдачи, но мне то надо 138 аршин а не 134 (67 аршин с 2 рулонов) заматываем обратно один аршин на обоих рулонах:66*2=132(еще 6 аршин надо), 12 рублей сдачи (4р те самые сдачи и 8р размотанный аршин на 2 рулонах),мало купим только 4 черного, мотаем
65*2=130 (еще 8 надо), 20 рублей сдачи, мало купим только 4 синего или 6 черного да еще останется 2р., мотаем
64*2=128 (еще 10 надо), 28 рублей сдачи, мало купим только 9 черного и 1 р. сдачи, мотаем
63*2=126 (еще 12 надо), 36 рублей сдачи, хватает на 12 черного
Итого 63 синего и 63 + 12 = 75 черного.

4)Все значительно проще! Допустим купец купил два одинаковых куска.69*5+69*3=552, как раз 138 аршин. Получилось лишних 12р. Если менять 1 аршин по 5р. на аршин по 3р. общая
сумма уменьшается на 2р. Меняем 6 аршын по 5р. на 6 аршин по 3р.
и сумма уменьшится на 12р. Итого 63*5+75*3=540.

Второе и четвертое решения самые элегантные и понятные даже ребенку, а тем более купцу!

Удачи!

Проверка на вирусы

2011-09-04T08:49:00.000-07:00

Фразы: Ты ее не узнаешь: "Ты не видел Кейли шесть или семь лет. Возможно, ты ее даже не узнаешь сейчас. Ты пошел дальше в своей жизни, так же как и она."

Из-за того что сам пробовал, из-за того что часто нарывался, из-за того что боюсь и отношусь с опаской к вирусам решил написать как быстро и легко можно проверить скаченные файлы на вирусы.

К тому же есть мнение, что работа с компьютером переходит в "облако" и в облачные вычисления.

Многие провайдеры предоставили нам почтовые ящики, работу с документами, блоги, хранилища данных и один из них Virus Total предоставляет нам проверку файлов на вирусы всеми возможными ныне антивирусами. Среди них, такие как Dr.Web, Касперский, ESET NOD32, Norton Antivirus, Panda Platinum, Microsoft (Malware Protection), Avira AntiVir, AVG Antivirus, Norman Antivirus, Ikarus, BitDefender Antivirus и другие. Проверить можно любой файл, но он должен быть не более 20 mb.

1) Загружаем файл на сервер проверки здесь

2) Проверка начинается автоматически после загрузки

3) Через некоторое время смотрим результат проверки

Больше 40 антивирусов проверили ваш файл на все возможные угрозы, хотя мой опыт говорит, что это не сильно помогает, но может быть кому-нибудь пригодится.

Поиск ячеек в таблице с помощью JQuery

2011-06-07T00:47:00.000-07:00

Фразы: Требования: "Если с человека не потребовать многого, то от него и не получишь многого."

Самые простые задачи у программистов вызывают больше всех вопросов, а именно они по мнению разработчика должны были быть максимально понятны и прозрачны. Попытаюсь рассмотреть несколько возможных вариантов поиска данных в произвольной HTML-таблице с помощью фреймверка JQuery.

Например можно поступать так:

1)присваиваем тегам TD класс customerIDCell и далее производим поиск по всей таблице данного класса с извлечением данных.

<table id="mytable">
<tr><th>Customer Id</th><th>Result</th></tr>
<tr><td class="customerIDCell">123</td><td></td></tr>
<tr><td class="customerIDCell">456</td><td></td></tr>
<tr><td class="customerIDCell">789</td><td></td></tr>
</table>

$('#mytable tr').each(function() {
    var customerId = $(this).find(".customerIDCell").html();    
 }

или так:

$('#mytable .customerIDCell').each(function()
{
  alert($(this).html());
});

2) можно без присвоения класса, а просто поиском нужной строки и колонки

$('#mytable tr').each(function() {
    var customerId = $(this).find("td:first").html();    }

или так:

$('#mytable tr').each(function() {
    var customerId = $(this).find("td").eq(2).html();    }

Вооружаемся знаниями и в бой!

Как собрать статистику и кто использует вашу программу

2011-04-08T21:35:00.000-07:00

Фразы: Загадка: "Возможно, вы не забыли, как хохотал префект, когда во время нашего первого разговора я высказал предположение, что эта загадка причиняет ему столько хлопот как раз из-за очевидности ее разгадки".

Большинство маркетологов и программистов мечтают создавать свои программные продукты с возможностью сбора статистической информации о пользователе. Конечно первыми в этом преуспели мегагиганты типа Google, Yandex и др. Они давным давно знают, что вы ищите в интернете, причем в последнее время этим уже занимается сам браузер, например всеми любимых Chrome. Теперь же я расскажу вам как отхватить кусок яблочного пирога у самого Google и как узнать кто пользуется вашей программой.

Во всех крупных компаниях на маркетинг и продвижение товара выделяются большие бюджеты, сидят дядьки рисующие графики "сколько", "где", "кто" и "зачем" купил интересующий нас продукт. Все хорошо, но у нас нет такого бюджета, нет этих дядек, которые рисуют эти графики, но знать то хочется кто-нибудь использует написанную нами программу?

Так же как и у Эдгара По - ответ на этот вопрос и его реализация лежит на поверхности, ведь блог посвящен написанию программ со встроенными браузерами, а это значит что у нас есть возможность использовать все бесплатные сервисы Google, например всем известный Google Analitycs.

Сначала надо завести на любом бесплатном домене одностраничный сайт с любым наполнением (его читать никто не будет он нужен нам только для сбора статистики). На его главной и единственной странице надо разместить код скрипта GoogleAnalitycs, который выполнит всю работу за нас, сам все посчитает, сам нарисует графики, сам расскажет откуда и кто к нам пришел. Единственно нам надо заставить пользователя программы обратиться к нашему сайту при запуске программы.

На основе AutoHotKey создаем программу со встроенным браузером, но не как обычно, а с дополнительным браузером. Например так:

Второй браузер не привязан ни к какому окну и отображаться не будет, но он является полнофункциоанальным объектом и он будет делать переходы на статистический сервер программы и там будет скапливаться статистика типа этой:

Удачи!

Создание красивых кнопок

2011-03-23T20:16:00.000-07:00

Фразы: Картина: "Я мечтал о том, что когда-нибудь люди станут перед моей картиной и забудут, что она написана красками. Картина проникнет им в душу, как музыка..."

Основы создания приложений на основе браузера уже все перечислены и видимо с сегодняшнего дня я начну писать короткие посты о том как вдыхается жизнь в такие программы. Вопрос: чего обычно не хватает программам? Каждый из нас имеет свое мнение, но я выскажу свое - "дьявол прячется в мелочах". Именно на них основан комфорт пользователя. Чтобы вы сразу не заскучали приведу пример создания красочности своего приложения с помощью онлайн сервиса создания кнопок. Обычно его используют для украшений сайтов, но не забывайте. у нас в основе браузер, а в приложении используется HTML и эта технология будет работать.

В HTML есть свои стандартные кнопки, но они такие же скучные как и других программных продуктах, а здесь мы используем другой подход. Вместо кнопки надо подставить созданную картинку и прописать ей стиль для отображения например руки при наведении.

Пример будет выгледеть примерно так::

Стиль для кнопки:

#img:hover{

cursor: pointer;

}

Удачи в изысканиях дорогой читатель...

Повороты

2011-02-06T02:13:00.000-08:00

Фразы: Любовник Венеры: Вам известно, кто был любовник Венеры?
- Их было много.
- Да, но первым был Вулкан. Не хотел ли художник сказать ей: "При всей твоей красоте и надменности ты получишь в любовники кузнеца, хромого урода..."

Возможно Венера была влюблена, поэтому не замечала его хромоты? (Мнение автора блога).
По предыдущим постам вы уже знаете, что я работаю с Internet Explorer и если судить по статистике, то видно что моими программами пользуются разный контингент людей. У одних IE8, у других IE7, но есть еще 20% людей с устаревшими браузерами IE6. И все они должны отображать созданный дизайн одинаково, а это уже проблема!

Приходится проводить отладку сразу на нескольких браузерах, на компьютере установлены виртуальные машины с разными конфигурациями, но я люблю свой инструмент поэтому пытаюсь его развивать.

Недавно столкнулся с маленькой задачей по вертикальному расположению текста в Internet Explorer. На вид пустяковая задача, должна по теории поддерживаться стандартами css, но не тут-то было. Пока текст был написан сверху-вниз вроде все сложилось на всех браузерах, как только понадобилось развернуть его снизу-вверх и прижать к верхнему краю, то хоть плачь - не работает. Повезло то, что недавно работал со слайдерами и случайно там подсмотрел нужное решение.

Текст интерпретатора формирующего окно (используется AutoHotKey):

;директивы
#Singleinstance force
#Persistent
#NoTrayIcon
#NoEnv

SetBatchLines  -1
SetWinDelay  -1
SetControlDelay -1

;include
#include inc\COM.ahk   ;COM-сервер
#include inc\variable.ahk  ;переменные графического интерфейса

;создаем GUI
Gui +LastFound +default +resize
hWnd := WinExist()

;инициализируем COM-объект
COM_Init()
com_error(0)

COM_AtlAxWinInit()
CLSID_WebBrowser := "{8856F961-340A-11D0-A96B-00C04FD705A2}"
IID_IWebBrowser2 := "{D30C1661-CDAF-11D0-8A3E-00C04FC9E26E}"
pwb := COM_CreateObject(CLSID_WebBrowser, IID_IWebBrowser2)
COM_AtlAxAttachControl(pwb, hWnd)

;основное окно программы
psink := COM_ConnectObject(pwb, "Web_") 
COM_Invoke(pwb, "Navigate","about:blank")
ieDoc := COM_Invoke(pwb, "document")
COM_Invoke(ieDoc,"write",var1) 
COM_Invoke(ieDoc,"close")
Gui show, x0 y0 w1000 h650  vForm, Sample5

return

;---------------------------------------------------------------------------------------------------------------------------------------------------------------
;Subroutine      Web_BeforeNavigate2()   ;перехватываем события
;---------------------------------------------------------------------------------------------------------------------------------------------------------------
Web_BeforeNavigate2(prms, this) 
{ 
 ;указатели
 global pwb
 static flagOneStart
 
 ;прерываем навигацию
 if flagOneStart                 
 NumPut(-1, NumGet(NumGet(prms+0)+8), 0, "short")          
 else
 flagOneStart = 1

 ;определяем нажатую ссылку
 URL := COM_DispGetParam(prms, 1)
 
return
}

;---------------------------------------------------------------------------------------------------------------------------------------------------------------
;Subroutine      GuiClose
;---------------------------------------------------------------------------------------------------------------------------------------------------------------
GuiClose:
{ 
 Gui 1: destroy
 COM_Release(pwb) 
 COM_Release(psink) 
 COM_Term()  
 
ExitApp
}

Переменные встраиваемые в окно (variable.ahk):


;преобразуем слеши
stringreplace res1, A_WorkingDir, \, /,all
res1 := "file://localhost/" . res1

Header=
(
<div id="header-wrap">
<div id="header">
<div style="margin:0px; text-align: left; float: left;"> 
<span style="color: #FFFFFF; font-family:'Arial Black',Gadget,sans-serif; font-size: 25px; font-weight: bold; letter-spacing: -2px;"><a href="#" style="color: #FFF; text-decoration: none;" title="Incotex">Пример вертикального текста</a></span></div>
</div>
</div> 
)

;тело документа
var1 =
(
 
 <!DOCTYPE html">
 <html oncontextmenu="return false">
 <head>
 <title>Mercury</title>
 <META http-equiv="Content-Type" content="text/html; charset=windows-1251">
 <!--стили документа-->
 <link rel="stylesheet" type="text/css" href="%res1%/res/css/header.css" />
 <link rel="stylesheet" type="text/css" href="%res1%/res/css/style.css" /> 
 </head>
 <body scroll="yes">
 %Header%
 <div id="main">
  <div id="center">
  
   <div id="slider1">
    <div id="hd1"><h1 class="cl_10"><nobr>Настройка связи</nobr></h1></div>
    <span class="cl_11">Настройка связи</span>
   </div>
   
   <div id="slider4">
    <div id="hd4"><h1 class="cl_10"><nobr>Список переменных</nobr></h1></div>
   </div>
   
   <div id="slider3">
    <div id="hd3"><h1 class="cl_10"><nobr>Чтение</nobr></h1></div>
   </div>
   
   <div id="slider2">
    <div id="hd2"><h1 class="cl_10"><nobr>Изменение</nobr></h1></div>
   </div>
  
  </div>
 </div>
 
 
 </body>
 </html>
)

Таблица стилей (style.css):



/*slider*/
.cl_10{
 font-size: 14px;
 font-weight: bold;
 font-family: Arial, Helvetica, sans-serif;
 color: #e8ecdc;
 width:200px;
 text-align:right;
 margin-left:5px;
 margin-top:10px;
 -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
#main {
 background: url(../img/bg000000.png) repeat; 
 z-index:-1;
}
#center {
 position:absolute; 
 top:65px; 
 left:20px; 
 width:945px;
 height:550px; 
 border:2px solid #696969;
}
#slider1{
 position:absolute; 
 top:0px; 
 left:0px; 
 width:100%;
 height:100%;
 background: url('../img/slides.png') bottom left #d7d7d7;
}
#hd1{
 position:absolute; 
 top:0px; 
 left:0px; 
 width:25px;
 height:100%;
 background: #000000; 
 border:1px solid white;
 cursor:default;
}
#slider2{
 position:absolute; 
 top:0px; 
 width:26px;
 right:0px;
 height:100%;
 background: url('../img/slides.png') bottom left #d7d7d7;
}
#hd2{
 position:absolute; 
 top:0px; 
 left:0px; 
 width:25px;
 height:100%;
 background: #000000;
 border:1px solid white;
 cursor:default;
}
#slider3{
 position:absolute; 
 top:0px; 
 width:26px;
 right:26px;
 height:100%;
 background: url('../img/slides.png') bottom left #d7d7d7;
}
#hd3{
 position:absolute; 
 top:0px; 
 left:0px; 
 width:25px;
 height:100%;
 background: #000000;
 border:1px solid white;
 cursor:default;
}
#slider4{
 position:absolute; 
 top:0px; 
 width:26px;
 right:52px;
 height:100%;
 background: url('../img/slides.png') bottom left #d7d7d7;
}
#hd4{
 position:absolute; 
 top:0px; 
 left:0px; 
 width:25px;
 height:100%;
 background: #000000;
 border:1px solid white;
 cursor:default;
}

.cl_11{
 position:absolute; 
 top:15px; 
 left:40px;
 font-size:20px;
 font-weight: bold;
 font-family: Arial, Helvetica, sans-serif;
 color: #000000; 
}

Решение поставленной проблемы лежит в применении класса cl_10 и используемом там фильтре.

Готовый пример можно посмотреть по ссылке.

Удачи в изысканиях дорогой читатель...

На перепутье

2011-01-17T10:58:00.000-08:00

Фразы: Фонари: Темнеет, но фонари еще не горят, и разные нелепые мысли приходят мне в голову: "Фонари не зажгутся, и я ее не узнаю... Фонари зажгутся, но она не придет... Фонари не зажгутся, и она меня не узнает..."

Вы знаете что такое интуиция? Большинство людей ответят, что это чувство, которое нам подсказывает правильный ответ, когда мы сталкиваемся в жизни с выбором, но на мой взгляд это не чувство - это ЗНАНИЕ! И это знание мне говорит во всемирной паутине надо идти в ногу с живущими там пауками типа Google, Yandex, Rambler, а им в свою очередь надо чтобы на нашем компьютере был один инструмент - БРАУЗЕР. Все остальное эти сети нам динамически сгенерирут и предоставят. Именно этим путем я и хочу пойти.

Допустим у нас есть браузер. Через него мы каждый день просматриваем странички интернета, удивляемся красочности сайтов и изворотливости дизайнеров. Чего только он не может. Может он практически все... Может рисовать картинки, отображать и форматировать тексты, управлять таблицами, создавать графики, воспроизводить видео и флешь анимацию, обладает встроенными языками HTML, CSS, Javascript.

Оптимально сделать графический интерфейс программы с помощью браузера, а функциональность поддержать с помощью любого продвинутого бесплатного языка программирования. Я открывал несколько действующих форумов по обсуждению концепции создания продвинутой программы, с красочным интерфейсом, занимающей минимальный объем, созданной с помощью бесплатной платформы, работающей на большинстве машин. Предлагались разные варианты, но максимально выполнили мои требования два варианта: Autohotkey + HTML, QT.

QT - прекрасный фреймверк, с большими возможностями, но тяжеловесный и если залезть во внутрь то видно, что разработчики пошли таким же путем как и я, т.е. отделили графический интерфейс (делается с помощью HTML) от функционала.

Autohotkey + HTML мне больше нравится. Значительно меньше в размерах, позваляет подключить любой фреймверк в виде Javascript-а, очень универсален + бесплатен, может задействовать для своей работы браузер установленный в операционной системе, не требует DotNet, обладает большим сообществом и отменным форумом. Но есть и недостатки. В работе приходится опираться на ActivX объекты и встроенные браузеры типа InternetExplorer, а беда в том, что версии браузеров могут поддерживать свойсва CSS по разному и необходимо проводить отладку на разных браузерах, чтобы обеспечить совместимость.

Продолжение следует....

Грабли браузеров

2010-10-23T12:14:00.000-07:00

Фразы: Далеко запрятанное: "В вас есть что-то, из-за чего я могла бы вас полюбить, но вы это так далеко запрятали, что мне не найти..."

Программисты каждый день наступают на ласково подложенные "грабли" наших дружественных собратьев создающих Microsoft Windows и Internet Explorer. Потираем шишки на лбу, лбы становятся крепче, а знаний больше. По этому поводу рассмотрим очередную маленькую проблему, возникающую в компоненте WebBrowser - отсутствие реакции на нажатие служебных клавиш (Enter, Tab, Del и т.д.)
Возникла задача написать маленький простой интерпретатор команд одного из языков программирования, т.е. мне понадобилось создать окно с текстовым полем, где вводятся команды и кнопкой "Выполнить" человек создает фокус - выполняя результат своей работы. Я начал в голове прикидывать как это можно сделать, разрабатывать алгоритм работы и задача из маленькой грозила превратиться в большую головную боль, но под руки попался JavaScript. Оказалось он эту задачу может решить буквально в одной команде.

Пишем код и сохраняем наш пример в формате html.

<html>
<head>
<title>Sample</title>
</head>
<body scroll="no">
<h2>Напишите JavaScript,<br>например:</h2><h4>alert("Hello")</h5>
<textarea id="t" style="width:300px;height:275px;margin:0;padding:0;">
</textarea>
<input type="button" value="Выполнить" onclick="eval(document.getElementsByTagName('textarea')[0].value)"/>
</div>
</body>
</html>

Запускаем, проверяем - все работает. Причем заметим, что если в строке ввода мы нажимаем ENTER, то как и положено происходит переход на новую строку. Это потому, что открывает наш HTML-документ полнофункциональный браузер (IE, Opera, Chrome и т.д.)

А теперь напишем на AHK свое приложение со встроенным объектом WebBrowser:

;директивы
#Singleinstance force
#NoTrayIcon
#NoEnv
DetectHiddenWindows On

SetBatchLines  -1
SetWinDelay  -1
SetControlDelay -1

;include
#include inc\COM.ahk

var1 =
(
<html oncontextmenu="return false">
<head>
<title>Sample</title>
</head>
<body scroll="no">
<h2>Напишите JavaScript,<br>например:</h2><h4>alert("Hello")</h5>
<textarea id="t" style="width:300px;height:275px;margin:0;padding:0;">
</textarea>
<input type="button" value="Выполнить" onclick="eval(document.getElementsByTagName('textarea')[0].value)"/>
</div>
</body>
</html>
)


Gui +LastFound +Default +Resize
Gui Show, x0 y0 w400 h450, sample


COM_AtlAxWinInit() 
pwb := COM_AtlAxGetControl(COM_AtlAxCreateContainer(WinExist(),0,0,400,450, "Shell.Explorer")) 

COM_Invoke(pwb, "Navigate","about:blank")
ieDoc := COM_Invoke(pwb, "document")
COM_Invoke(ieDoc,"write",var1)
COM_Invoke(ieDoc,"close")
Return 



;------------------------------------
;Subroutine GuiClose
;------------------------------------
GuiClose:
{
 Gui 1: destroy
 COM_Release(pwb) 
 COM_Term() 
 
ExitApp
}

Запускаем, проверяем - все работает, но есть одно "НО". WebBrowser при вводе текста не обрабатывает нажатие на кнопку ENTER, в результате слова не переносятся!!! Маразм да и только, причем всякие извороты с присвоением тегу событий onkeypress, onkeyup, onkeydown никаких результатов не дают т.к. служебные клавиши не обрабатываются в этом объекте.

Приходится описать эти события в своем новом приложении самому!

;директивы
#Singleinstance force
#NoTrayIcon
#NoEnv
DetectHiddenWindows On

SetBatchLines  -1
SetWinDelay  -1
SetControlDelay -1

;include
#include inc\COM.ahk

var1 =
(
<html oncontextmenu="return false">
<head>
<title>Sample</title>
</head>
<body scroll="no">
<h2>Напишите JavaScript,<br>например:</h2><h4>alert("Hello")</h5>
<textarea id="t" style="width:300px;height:275px;margin:0;padding:0;">
</textarea>
<input type="button" value="Выполнить" onclick="eval(document.getElementsByTagName('textarea')[0].value)"/>
</div>
</body>
</html>
)


Gui +LastFound +Default +Resize
Gui Show, x0 y0 w400 h450, sample

COM_AtlAxWinInit() 
pwb := COM_AtlAxGetControl(COM_AtlAxCreateContainer(WinExist(),0,0,400,450, "Shell.Explorer")) 

IOleInPlaceActiveObject_Interface:="{00000117-0000-0000-C000-000000000046}" 
pipa := COM_QueryInterface(pwb, IOleInPlaceActiveObject_Interface) 
OnMessage(WM_KEYDOWN:=0x0100, "WM_KEYDOWN") 
OnMessage(WM_KEYUP:=0x0101, "WM_KEYDOWN")

COM_Invoke(pwb, "Navigate","about:blank")
ieDoc := COM_Invoke(pwb, "document")
COM_Invoke(ieDoc,"write",var1)
COM_Invoke(ieDoc,"close")
Return 

WM_KEYDOWN(wParam, lParam, nMsg, hWnd) 
{ 
  If  (wParam = 0x09 || wParam = 0x0D || wParam = 0x2E || wParam = 0x26 || wParam = 0x28) ; tab enter delete up down 
  { 
      WinGetClass, Class, ahk_id %hWnd% 
      If  (Class = "Internet Explorer_Server") 
          { 
            Global pipa 
             VarSetCapacity(Msg, 28) 
             NumPut(hWnd,Msg), NumPut(nMsg,Msg,4), NumPut(wParam,Msg,8), NumPut(lParam,Msg,12) 
             NumPut(A_EventInfo,Msg,16), NumPut(A_GuiX,Msg,20), NumPut(A_GuiY,Msg,24) 
             DllCall(NumGet(NumGet(1*pipa)+20), "Uint", pipa, "Uint", &Msg) 
             Return 0 
          } 
  } 
}

;------------------------------------
;Subroutine GuiClose
;------------------------------------
GuiClose:
{
 Gui 1: destroy
 COM_Release(pwb) 
 COM_Term() 
 
ExitApp
}

Запускаем. Все работает!!!

jQuery – это замечательный JavaScript Framework

2010-10-18T00:13:00.000-07:00

Фразы: Кисть и палитра: "Кисть, рука и палитра нужны, чтобы рисовать, но картина создается вовсе не ими..."

Идти приходится непроторенным путем, даже есть мысли запатентовать технологию создания исполняемых приложений на основе браузера, но сразу возникает вопрос. Что именно патентовать? Любой инструмент используемый для создания такого приложения уже существует и причем давно, единственно не все обладают знаниями как использовать эти инструменты создавая свою программу.

В этом посте я покажу как вдохнуть жизнь в вашу программу, а поможет нам в этом замечательный JavaScript Framework под названием jQuery.
Он нужен для облегчения поиска элементов внутри DOM (Document Object Model), для манипулирования свойствами этих элементов, для обработки событий внутри документов, ну и для украшения наших программ. На основе jQuery создано большое количество скриптов, слайдеров, галерей, утилит, которые можно спокойно найти в сети и использовать в своем коде.

Приведу пример использования одного из слайдеров под jQuery и как его встроить себе в программу. Естественно это все происходит с помощью любимого мною AutoHotKey.

Текст интерпретатора формирующего окно:

;директивы
#Singleinstance force
#NoTrayIcon
#NoEnv
DetectHiddenWindows On

SetBatchLines  -1
SetWinDelay  -1
SetControlDelay -1


;include
#include inc\COM.ahk
#include inc\variable.ahk

Gui +LastFound +Default +Resize
Gui Show, w900 h500 Center, sample
  
COM_AtlAxWinInit() 
pwb := COM_AtlAxGetControl(COM_AtlAxCreateContainer(WinExist(),0,0,900,500, "Shell.Explorer")) 
COM_Invoke(pwb, "Navigate2","about:blank")
ieDoc := COM_Invoke(pwb, "document")
COM_Invoke(ieDoc,"write",var1)
COM_Invoke(ieDoc,"close")     
Return 



;----------------------------------------
;Subroutine  GuiClose
;----------------------------------------
GuiClose:
{
 Gui 1: destroy
 COM_Release(pwb) 
 COM_Term() 
 
ExitApp
}

Переменная с HTML-текстом, jQuery + Javascript, внедренная в наш документ:

;преобразуем слеши
stringreplace res1, A_WorkingDir, \, /,all
res1 := "file://localhost/" . res1

;javascript
fileread java1, js/jquery-1.3.1.min.js

var1 =
(
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Slick jQuery Slidehow: Demo</title>
<style type="text/css">
<!--
/** 
 * Slideshow style rules.
 */
#slideshow {
 margin:0 auto;
 width:640px;
 height:263px;
 background:transparent url(%res1%/img/bg_slideshow.jpg) no-repeat 0 0;
 position:relative;
}
#slideshow #slidesContainer {
  margin:0 auto;
  width:560px;
  height:263px;
  overflow:auto; /* allow scrollbar */
  position:relative;
}
#slideshow #slidesContainer .slide {
  margin:0 auto;
  width:540px; /* reduce by 20 pixels of #slidesContainer to avoid horizontal scroll */
  height:263px;
}

/** 
 * Slideshow controls style rules.
 */
.control {
  display:block;
  width:39px;
  height:263px;
  text-indent:-10000px;
  position:absolute;
  cursor: pointer;
}
#leftControl {
  top:0;
  left:0;
  background:transparent url(%res1%/img/control_left.jpg) no-repeat 0 0;
}
#rightControl {
  top:0;
  right:0;
  background:transparent url(%res1%/img/control_right.jpg) no-repeat 0 0;
}

/** 
 * Style rules for Demo page
 */
* {
  margin:0;
  padding:0;
  font:normal 11px Verdana, Geneva, sans-serif;
  color:#ccc;
}
a {
  color: #fff;
  font-weight:bold;
  text-decoration:none;
}
a:hover {
  text-decoration:underline;
}
body {
  background:#393737 url(%res1%/img/bg_body.jpg) repeat-x top left;
}
#pageContainer {
  margin:0 auto;
  width:960px;
}
#pageContainer h1 {
  display:block;
  width:960px;
  height:114px;
  background:transparent url(%res1%/img/bg_pagecontainer_h1.jpg) no-repeat top left;
  text-indent: -10000px;
}
.slide h2, .slide p {
  margin:15px;
}
.slide h2 {
  font:italic 24px Georgia, "Times New Roman", Times, serif;
  color:#ccc;
  letter-spacing:-1px;
}
.slide img {
  float:right;
  margin:0 15px;
}
#footer {
  height:100px;
}
#footer p {
  margin:30px auto 0 auto;
  display:block;
  width:560px;
  height:40px;
}
-->
</style>
<script type="text/javascript">%java1%</script>
<script type="text/javascript">
$(document).ready(function(){
  var currentPosition = 0;
  var slideWidth = 560;
  var slides = $('.slide');
  var numberOfSlides = slides.length;

  // Remove scrollbar in JS
  $('#slidesContainer').css('overflow', 'hidden');

  // Wrap all .slides with #slideInner div
  slides
    .wrapAll('<div id="slideInner"></div>')
    // Float left to display horizontally, readjust .slides width
 .css({
      'float' : 'left',
      'width' : slideWidth
    });

  // Set #slideInner width equal to total width of all slides
  $('#slideInner').css('width', slideWidth * numberOfSlides);

  // Insert controls in the DOM
  $('#slideshow')
    .prepend('<span class="control" id="leftControl">Clicking moves left</span>')
    .append('<span class="control" id="rightControl">Clicking moves right</span>');

  // Hide left arrow control on first load
  manageControls(currentPosition);

  // Create event listeners for .controls clicks
  $('.control')
    .bind('click', function(){
    // Determine new position
 currentPosition = ($(this).attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1;
    
 // Hide / show controls
    manageControls(currentPosition);
    // Move slideInner using margin-left
    $('#slideInner').animate({
      'marginLeft' : slideWidth*(-currentPosition)
    });
  });

  // manageControls: Hides and Shows controls depending on currentPosition
  function manageControls(position){
    // Hide left arrow if position is first slide
 if(position==0){ $('#leftControl').hide() } else{ $('#leftControl').show() }
 // Hide right arrow if position is last slide
    if(position==numberOfSlides-1){ $('#rightControl').hide() } else{ $('#rightControl').show() }
  } 
});

</script>

</head>
<body>
<div id="pageContainer">
  <h1><a href="http://sixrevisions.com/tutorials/javascript_tutorial/create-a-slick-and-accessible-slideshow-using-jquery/">Slick Slideshow using jQuery</a></h1>
  <!-- Slideshow HTML -->
  <div id="slideshow">
    <div id="slidesContainer">
      <div class="slide">
        <h2>Web Development Tutorial</h2>
        <p><a href="http://sixrevisions.com/tutorials/web-development-tutorials/using-xampp-for-local-wordpress-theme-development/"><img src="%res1%/img/img_slide_01.jpg" alt="An image that says Install X A M P P for wordpress." width="215" height="145" /></a>If you're into developing web apps, you should check out the tutorial called "<a href="http://sixrevisions.com/tutorials/web-development-tutorials/using-xampp-for-local-wordpress-theme-development/">Using XAMPP for Local WordPress Theme Development</a>" which shows you how to set up a local testing server for developing PHP/Perl based applications locally on your computer. The example also shows you how to set up WordPress locally!</p>
      </div>
      <div class="slide">
        <h2>Grunge Brushes, Anyone?</h2>
        <p><a href="http://sixrevisions.com/freebies/brushes/sr-grunge-free-high-resolution-photoshop-grunge-brushes/"><img src="%res1%/img/img_slide_02.jpg" width="215" height="145" alt="A thumbnail image that says S R grunge photoshop brushes 6 high resolution grunge brushes by six revisions." /></a>In this layout, I used <a href="http://sixrevisions.com/freebies/brushes/sr-grunge-free-high-resolution-photoshop-grunge-brushes/">SR Grunge</a>, which is a free set of high-resolution Photoshop brushes you can download here on Six Revisions.</p>
        <p> 
      </div>
      <div class="slide">
        <h2>How About Some Awesome Grunge Textures?</h2>
        <p><a href="http://sixrevisions.com/freebies/textures/grunge-extreme-15-high-resolution-grunge-textures/"><img src="%res1%/img/img_slide_03.jpg" width="215" height="145" alt="A thumbnail image that says grunge extreme 15 free high resolution grunge textures six revisions." /></a>The texture used in this web page is from the Grunge Extreme Textures freebie set by JC Parmley released here on Six Revisions.</p>
        <p>You can head over to the <a href="http://sixrevisions.com/freebies/textures/grunge-extreme-15-high-resolution-grunge-textures/">Grunge Extreme</a> page to download the texture set or check out Six Revisions' <a href="http://sixrevisions.com/category/freebies/">freebie section</a> for even more goodies!</p>
      </div>
      <div class="slide">
        <h2>'Tis the End, My Friend.</h2>
        <p><a href="http://sixrevisions.com/tutorials/photoshop-tutorials/how-to-create-a-slick-and-clean-button-in-photoshop/"><img src="%res1%/img/img_slide_04.jpg" width="215" height="145" alt="Thumbnail image that says sleek button using photoshop that links to a Photoshop tutoril." /></a>This is the last slide. Hit the left arrow control to go back to the other slides.</p>
        <p>Alternatively, you may want to check out the tutorial on how to create a simple and cool button in Photoshop called &quot;<a href="http://sixrevisions.com/tutorials/photoshop-tutorials/how-to-create-a-slick-and-clean-button-in-photoshop/">How to Create a Slick and Clean Button in Photoshop</a>&quot; which was inspired by the <a href="http://www.campaignmonitor.com/designer/?utm_source=sixrevisions&amp;utm_medium=banner&amp;utm_term=2&amp;utm_content=0003&amp;utm_campaign=Apr09Banners">Campaign Monitor</a> web interface.</p>
      </div>
    </div>
  </div>
  <!-- Slideshow HTML -->
  <div id="footer">
    <p><a href="#">Create a Slick and Accessible Slideshow Using  jQuery by Jacob Gube</a> (<a href="http://sixrevisions.com/">Six Revisions</a>)</p>
  </div>
</div>
</body>
</html>

)

и таким образом можно легко использовать любой скрипт, найденный вами в сети, а под jQuery сейчас написано столько, что искать долго не придется.

Дальше будем копаться в перехвате событий из браузера...

Каскадные таблицы стилей

2010-10-16T11:04:00.000-07:00

"На вкус и цвет все фломастеры разные..."
Неизвестный в сети

Как художник смотрит на краски, так и я перебираю и ищу средства для реализации своих задумок. Почему сайты в Интернете такие красочные? Почему в разных браузерах они выглядят одинаково? Почему нет задачи которую не может решить дизайнер? Потому что кроме листа бумаги (документа HTML) есть еще кисти и краски (CSS + JavaScript).

CSS (Cascading Style Sheets — каскадные таблицы стилей) — технология описания внешнего вида документа. В основном используется создателями веб-страниц для задания цветов, шрифтов и расположения элементов на странице.

Можно по разному задавать таблицы стилей, но в основном используют три способа:
1) с помощью внешнего файла .css, на который делается ссылка в документе;
2) с помощью встроенных стилей - блоков CSS внутри самого HTML документа;
3) с помощью inline стилей, когда в HTML-документе информация о стиле помещается в атрибуте style самого элемента.

Именно из-за того, что в HTML-документе есть таблицы стилей он и привлек мое внимание для создания приложений на основе браузера. После того как посмотришь какая существенная разница между приложениями с HTML-интерфейсом и приложениями со стандартным интерфейсом сразу хочется заняться украшательствами. Любой человек каждый день гуляя по просторам Интернета видит необычные эффекты, дизайны, шаблоны, портфолио и все это лежит в свободном доступе - это и есть то, чего не хватает нам программистам. Так давайте же возьмем этот невероятно большой конструктор Интернет и выберем нужные нам кубики, либо слепим их сами.

Приведу пример являющийся прототипом IPReader

стили оформлены в файле variable.ahk в виде переменной

<style type="text/css">  
  <!--
  .style3 {
   color:#000000; 
   font-size:14px; 
   font-weight: bold;
  }
  .style4 {
   color:#FF6600; 
   font-size:14px; 
   font-weight: bold;
  }
  .style5 {
   font-size: 13px;
   letter-spacing: 2px;
   color: #00aa00;   
  }
  .style8 {
   color: #003399;
  }
  .style9 {
   color: #FF6600; 
   font-size: 14px;
  }
  .style10 {
   color: #FFFF00;
  }
  body {
   margin:0px;
   background: #d3d3d3;
  }
  #header {
   position: absolute;
   top: -2px;
   left: 0px;
   width: 100`%;
   height: 105px;
   background: transparent url( "%res1%/res/headerBg.png" ) repeat-x scroll 0;
   z-index: 0;
  }
  #header .img_brend {
   position: absolute;
   top: 10px;
   left: 10px;
   z-index: 10;
  }
  #header .txt1_header {
   position: absolute;
   top: 20px;
   left: 155px;
   font-size: 26px;
   color: #ffba00;
   z-index: 10;
  }
  #header .txt2_header {
   position: absolute;
   left: 282px;
   top: 30px;
   font-size: 13px;
   letter-spacing: 2px;
   color: #e6e8ea; 
   z-index: 10;
  }
  #header .txt3_header {
   position: absolute;
   left: 290px;
   top: 50px;
   font-size: 13px;
   letter-spacing: 2px;
   color: #e6e8ea; 
   z-index: 10;
  }
  #lava {
            position: absolute;
   left: 540px; 
   top: 15px;
            height: 29px;
            width: 500px;
            background: url("%res1%/res/lavalampa/bg1.gif") no-repeat top;
   padding: 15px;
            overflow: hidden;
   z-index: 10;
        }
        #lava li {
   float: left;
   list-style: none;
   position: relative;
   left: 50px;
   z-index: 10;
  }
  #lava li.back {
   background: url("%res1%/res/lavalampa/lava.gif") no-repeat right -30px;
   width: 9px; height: 30px;
   z-index: 8;
   position: absolute;
   top: 13px;
  }
  #lava li.back .left {
   background: url("%res1%/res/lavalampa/lava.gif") no-repeat top left;
   height: 30px;
   margin-right: 9px; /* 7px is the width of the rounded shape */
  }
  #lava li a {
   font: bold 14px arial;
   text-decoration: none;
   color: #fff;
   outline: none;
   text-align: center;
   top: 4px;
   text-transform: uppercase;
   letter-spacing: 0;
   z-index: 10;
   display: block;
   float: left;
   height: 30px;
   position: relative;
   overflow: hidden;
   padding-left: 10px;   
   padding-right: 10px;   
   margin: auto;   
  }
  #lava li a:hover, #lava li a:active, #lava li a:visited {
   border: none;
  }
  .simple_overlay { 
   display:none; 
   z-index:10; 
   background-image:url(%res1%/res/tools/white000.gif); 
   width:500px;     
   height:400px; 
   
  }    
  .simple_overlay .close { 
   background-image:url(%res1%/res/tools/close.gif); 
   position:absolute; 
   right:-5px; 
   top:10px; 
   cursor:pointer; 
   height:35px; 
   width:35px; 
   
  } 
  .details { 
   position:absolute; 
   top:35px; 
   left:35px;
   width:100`%;   
  }
  .details h1 { 
   color:#696969; 
   font-size:24px;    
  }
  .details .line { 
   background:#696969;
   position:absolute; 
   top:30px; 
   left:0px; 
   width:440px;
   height:3px;
   font-size:1px;
  }  
  #content_IP {
   position:absolute; 
   top:160px; 
   left:275px; 
   background:#f6f6f6;
   padding:20px;
  }
  #content_reklama {
   position:absolute; 
   top:160px; 
   left:30px; 
   bottom:10px;
   width:175px;
   background:#f6f6f6;
   padding:20px;
   z-index:0;
  }
  #content_reklama .link1 {
   position:absolute; 
   right:10px; 
   bottom:10px;
   color:#336;
   z-index:10;   
  }
  #News_div {
   position:absolute; 
   left:480px;
   top:20px;
   width:100px;
   height:15px;
   z-index:1000; 
   background: #FFE4B5;
   color:#555;
   font-size: 12px;
   font-weight: normal;
   letter-spacing: 0.1em;
   margin-left: 5px;
   text-align:left;
   padding:.5em;
   border:1px solid #fff;     
   visibility:hidden;   
  }
  -->
  </style>

чтобы увидеть еще один секрет необходимо запустить пример - это один из JavaScript-фреймверков, но об этом в следующий раз...

Управляемая HTML-страница

2010-10-12T05:42:00.000-07:00

Фразы: Дочь снегов: "Это произошло моментально. Волна света и красок, молекулярная вибрация и интеграция, еле заметное, но тем не менее вполне определенное сокращение некоторых мозговых извилин – и изображение было готово!"

В предыдущем посте мы получили окно с браузером внутри. Сам по себе браузер ничего не дает, кроме возможности гулять по сети Интернет, но мы в большей степени заинтересованы в управлении элементами загруженной у нас страницы.

Концепция такова:
1. Необходимо сгенерировать страницу HTML с элементами управления (она же будет окном нашей программы);

2. Хочется загрузить эту страницу в наш браузер, скомпилировать и получить рабочую программу.

Это для начала, потом будет сложнее и сложнее...

Начнем по порядку. Сгенерим простую страницу с HTML кодом.

<html>
<head>
<title>Sample</title>
</head>
<body>
<p>Нажмите на <a href="javascript:alert('Сейчас все данные на вашем винчестере будут уничтожены. Хотите проверить?');alert('Это всего лишь безобидная шутка!')">ссылку</a> и будет результат.</p>
</body>
</html>

Можно сохранить этот текст в файле с расширением html и попробовать запустить. По умолчанию в системе эту страницу откроет браузер и попытается выполнить, но тоже самое может сделать и наш исполняемый файл загрузив эту страницу внутрь встроенного окна браузера.

Приведу пример реализации с помощью AutoHotKey.

;директивы
#Singleinstance force
#NoTrayIcon
#NoEnv
DetectHiddenWindows On

SetBatchLines  -1
SetWinDelay  -1
SetControlDelay -1

;include
#include inc\COM.ahk

Gui +LastFound +Default +Resize
Gui Show, w500 h300 Center, sample
  
COM_AtlAxWinInit() 
pwb := COM_AtlAxGetControl(COM_AtlAxCreateContainer(WinExist(),0,0,500,300, "Shell.Explorer")) 
COM_Invoke(pwb, "Navigate2", A_WorkingDir . "/sample.html") 
     
Return 



;-------------------------------------------
;Subroutine GuiClose
;-------------------------------------------
GuiClose:
{
 Gui 1: destroy
 COM_Release(pwb) 
 COM_Term() 
 
ExitApp
}

В итоге мы получили исполняемый файл с открытой HTML-страницей в окне встроенного браузера.

Продолжение следует...

Упаковка Javascript и HTML в exe-файл

2010-10-07T22:54:00.000-07:00

Фразы: Cчастье: "Счастья. Для всех. Даром. И пусть никто не уйдет обиженным..."

Много ли вы найдете ссылок в Интернете по теме как упаковать HTML и Javascript в exe-файл. Думаю что не много, а если и увидите, то далеко не сразу поймете как, а ответ по настоящему лежим на поверхности. В предыдущих двух постах Internet Explorer и WebBrowser, Web-интерфейс начато описание этой технологии. Так для чего же придумывался HTML и для чего он нам нужен?

HTML (от англ. HyperText Markup Language — «язык разметки гипертекста») — стандартный язык разметки документов во Всемирной паутине. Язык HTML интерпретируется браузером и отображается в виде документа, в удобной для человека форме.

Т.е. для удобства отображения нужен браузер и нужно окно в которое мы встраиваем этот браузер. Причем не важно на каком языке вы будете писать свою программу.

Internet Explorer по умолчанию встроен в операционную систему, который в свою очередь включает два ActiveX-объекта: WebBrowser Object и InternetExplorer Object. Функциональность WebBrowser меньше по сравнению с функциональностью InternetExplorer. Упрощенно говоря, WebBrowser — это собственно окно просмотра документа в браузере, а InternetExplorer — это весь браузер, включая меню, панели инструментов, строку состояния и прочее. Я пробовал внедрять оба, большой разницы не заметил.

Теперь насчет зачем нужен приложению exe-файл:
1) Чтобы работать с операционной системой в полном объеме, включая файловую систему, реестр, порты ввода-вывода и т.д.
2) Чтобы скрыть от пользователя дизайн и код своего приложения.

Начнем. Создаем простое окно и встраиваем в него браузер. Я для этой цели обычно пользуюсь миниатюрным скриптовым языком - Autohotkey, большой респект его создателям.Очень удобный язык, море всего под него написано, есть компиляторы помощь, форумы и самое главное совершенно бесплатный. Для начала утанавливаем Autohotkey, скачиваем например одну из библиотек управления IEControl.ahk и создаем простое окно с браузером.

#Include IEControl.ahk
#SingleInstance force

GoSub, GuiStart

Gui, +LastFound +Resize
Gui, Show, w800 h600 Center, WebBrowser
hWnd := WinExist()

CLSID_WebBrowser := "{8856F961-340A-11D0-A96B-00C04FD705A2}"
IID_IWebBrowser2 := "{D30C1661-CDAF-11D0-8A3E-00C04FC9E26E}"
pwb := CreateObject(CLSID_WebBrowser, IID_IWebBrowser2)

AtlAxAttachControl(pwb, hWnd)

IE_LoadURL(pwb, "http://www.autohotkey.com/")
Sleep 5000
IE_LoadURL(pwb, "http://www.autohotkey.com/forum/")
Sleep 5000
IE_GoBack(pwb)
Sleep 3000
IE_GoForward(pwb)
Return

GuiStart:
AtlAxWinInit()
CoInitialize()
Return

GuiClose:
Gui, %A_Gui%:Destroy
Release(pwb)
CoUninitialize()
AtlAxWinTerm()
ExitApp

Ну вот уже кое что получилось. Теперь просто компилируем и получаем exe-файл.

Продолжение следует.

Internet Explorer и WebBrowser

2010-10-07T05:50:00.000-07:00

Фразы: Другие силы: "Но в нем действовали и другие силы, главной из которых был рост. Инстинкт и закон требовали от него повиновения, а рост требовал неповиновения..."

Начало было положено чуть раньше, когда я узнал что существует такой компонент как WebBrowser, который можно встроить в свое окно программы. Начав его исследовать стало понятно, что можно создавать мультимедийные интернет приложения имеющие как локальный так и Web-интерфейсы, т.е. например можно реализовать встроенное окно со списком выпущенных релизов или новостей программы, причем совершенно не переживая и не заморачиваясь над технологией доставки новостей. Они будут у пользователя автоматически, браузер самостоятельно обеспечит засветку этой страницы.

Тут стоит задуматься. Происходит смешение двух видов интерфейсов в одном окне. Если интерфейс построен по единой технологии, то не приходится сильно задумываться над работоспособностью окна при его расширении или манипуляциях с внутренними элементами, но как только вы начали соединять воедино две разнотипные технологии сразу появляются проблемы их совместимости в одном окне.

Для примера приведу маленький пример созданный на первых порах экспериментирования. Это J2Browser - маленький браузер для доступа к почтовому серверу mail.ru без навязчивой рекламы. Сразу оговорюсь, что сейчас эту программу можно рассматривать только как пример совмещения двух независимых интерфейсов (основная ее функция - доступ к почте из дерева после изменений на сервере mail.ru перестала работать), но браузер продолжает функционировать.

Кнопки, меню, вкладки, дерево объектов - созданы с помощью обычных WinApi-команд (Autohotkey), а рядом с правой стороны в окно программы внедрен полнофункциональный браузер (WebBrowser), способный гулять по интернету. Заметьте пока никаких платных продуктов не пользуется. Ну а если немного углубится в эту тему, ведь получается, что можно весь интерфейс программы реализовать внутри окна браузера, как это делает Google, ведь данная технология по принципу более прогрессивна чем все остальное. Она имеет прямой выход в интернет и под нее написано море реализаций дизайнов, javascript-ов и все они бесплатны. Правда заманчиво.

Остается маленькая сложность как все это загнать (HTML, Javascript, работу с файловой системой, COM-порты) в формат exe-шника и получить локальную программу.

Продолжение следует....

Web-интерфейс

2010-10-05T05:27:00.000-07:00

"Доброта требует доказательств, красота их не требует.."
Вольтер

По воле случая последний год занимаюсь программированием, хотя вроде и не проффессионально, но некоторая тенденция в этом есть. Так получается, что для работы требовалось написание ПО для тестирования протоколов связи создаваемых у нас приборов. Сначала для этой цели были выбраны глобальные конструктороы, типа Delphi, но через некоторое время началась борьба с пиратсвом и пришлось искать что-либо бесплатное, миниатюрное и не глючное. Выбор пал на скриптовые языки.

Написали первые пробы таких тестовых программ, но чего-то не хватало интерфейс получался рубленный топором со стандартными кнопками и элементами, не хватало некоторой изюминки и тогда я задумался как написаны такие программы, как например Антивирус Касперского. На первый взгляд было очень похоже, что на экране HTML и я решил попробовать реализовать похожую концепцию. Создал Web - интерфейс, но оказалось, что он не может самостоятельно работать например с COM-портом, пришлось придумать ему обертку, научится перхватывать события из этого интерфейса и вроде все заработало.

Сейчас уже создано два полностью рабочих продукта и ведется работа еще над несколькими.
1) Универсальный конфигуратор счетчиков Меркурий

Программа созданная по заказу крупного промышленного холдинга Инкотекс для конфигурирования и управления счетчиками Меркурий.

2) IPReader (360 Кб)

Вроде ничего оригинального кроме встроенного меню Lava Lampa с возможностью динамического затенения окружающего фона.

3) Incotex Utilities (в работе)

Программа, которая в будущем должна объединить в себе набор утилит для работы с электросчетчиками Меркурий.

4) Task Group (в работе)

Создание задач группового программирования электросчетчиков, мониторинг и автоматизация систем энергоучета.

После полугода работы над этими проектами могу с уверенностью заявить, что использовать HTML для создания интерфейса программ можно и это несомненно удобно и красиво.