Google Wave > Разработка приложений
Скрещиваем SMF и Google Wave
sim-sim:
шаг 4
для смены цветов, или для подгонки стиля встраиваемой волны к стилю страницы) в Wave Embed API документирована функция setUIConfig. и ее применение жестко ограничено следующими рамками:
* вызывать ее можно лишь после loadWave, но до init
* цвета задаются только словами, всякие типа #abcdef не прокатывают
* размер шрифта указываются строго в ptхотя последние два скорее всего будут сняты в скором времени.
по умолчанию фрейм волны конфигурится в таком состоянии
setUIConfig('white', 'black', 'Arial', '13px')
в нашем случае с SMF, находим в Themes/default/index.template.php строки
Код: [Выделить]>>>> MyWavePanel.loadWave("wavesandbox.com!w+gd_bK9tX%A");
MyWavePanel.init(document.getElementById("gwaveframe"));<<<<и заменяем на
Код: [Выделить]>>>> MyWavePanel.loadWave("wavesandbox.com!w+gd_bK9tX%A");
MyWavePanel.setUIConfig("navy", "white", "Georgia", "8pt");
MyWavePanel.init(document.getElementById("gwaveframe"));<<<<результат - на скриншоте в аттаче
на этом можно и закончить как бы, :-\ но кроме туториала существует еще и очень бедное описание дополнительных вызовов на http://code.google.com/intl/ru/apis/wave/embed/reference.html
оказывается у loadWave и init есть опциональные вызовы callback функций. вот с этим делом тоже надо поковыряться ::)
sim-sim:
шаг 5
создадим простые callback-функции для демонстрации их работы в вызовах Wave Embed API. мы задействуем их еще и на следующем шаге. а пока, все что они будут делать - менять текст во фрейме при вызовах. если все отработет корректно, мы увидим соответствующий текст во фрейме.
для этого сначала создаем дополнительные именные фреймы над выводимым фреймом волны со статическим текстовым содержимым, и объединим все хозяйство в один контейнер с надписью, которая продемонстрирует вызов еще одной функции из API: getFrameId()
тоесть полный код выводимого фрейма такой:
Код: [Выделить]>>>><fieldset>
<legend id="gwaveframeid">getFrameId() not started</legend>
<div id="onloadwave">callback_loadWave not started</div>
<div id="oninitwave">callback_init not started</div>
<div id="gwaveframe" style="width: 338px; height: 1000px"></div>
</fieldset><<<<здесь ширину фрейма волны нужно еще уменьшить на отступы от стиля филдсета.
теперь добавляем и изменяем код инициализации в скрипте шапки
полный текст скрипта такой:
Код: [Выделить]>>>><script src="http://wave-api.appspot.com/public/embed.js" type="text/javascript"></script>
<script type="text/javascript">
function callback_loadWave(txt) {
var elem;
elem=document.getElementById("onloadwave");
if(elem) {
elem.innerHTML=txt;
}
}
function callback_init(txt,id) {
var elem;
elem=document.getElementById("oninitwave");
if(elem) {
elem.innerHTML=txt;
}
elem=document.getElementById("gwaveframeid");
if(elem) {
elem.innerHTML="Frame ID: [" id "]";
}
}
function InitGWave() {
var MyWavePanel = new WavePanel("http://wave.google.com/a/wavesandbox.com/");
MyWavePanel.loadWave("wavesandbox.com!w gd_bK9tX%A", callback_loadWave("callback_loadWave now started!"));
MyWavePanel.setUIConfig("navy", "white", "Georgia", "8pt");
MyWavePanel.init(document.getElementById("gwaveframe"), callback_init("callback_init now started!", MyWavePanel.getFrameId()));
}
</script>
</head>
<body onload="InitGWave()">';<<<<на скриншоте показаны работа сначала фрейма без волны, а затем все полностью.
как можно заметить, внутреннее представление frameID в волне - совсем другое, не как в документе. разберемся в этом потом. а на следующем шаге - рассмотрим последние незадействованные два вызова Wave Embed API ;)
sim-sim:
шаг 6
итак, после непонятных траблов (подозреваю что со стороны клиента в песочнице ???) заработали последние рассматриваемые вызова из документированного Wave Embed API.
но сначала небольшое уточнение при создании нового экземпляра MyWavePanel = new WavePanel("http://wave.google.com/a/wavesandbox.com/");
предпочтительнее сразу использовать префикс https:// вместо http://, дабы избежать лишнего перенаправления. впрочем, оба варианта корректны.
следующее уточнение касается выставления цветов фона и шрифта в setUIConfig, их можно задавать не только стандартными названиями (кстати их больше 16, если кто не знает :P), но и в формате "#abcdef". при этом нули в цифровом представлении опускать нельзя, обязательно должны быть шесть цифр. соответственно теперь можно подогнать окраску волны под текущую тему SMF, что я собственно и сделал. стиль фрейма, где выводится волна: .windowbg (см. Themes/default/style.css)
теперь главное. во фрейме волны, текстовый вывод заменяем на пару кнопок для вызова наших долгожданных функций. и соответсвенно прописываем их вызов при нажатии в callback-функции при инициализии волны. код не сложный, комментировать нечего, итак все понятно. главное - работает! ;)
не знаю, нужно ли упоминать, что перед тем как нажимать add Reply, нужно добавить себя в число участников волны, и то что если вы уже там, то add Participant ничего не делает. думаю - не нужно. :D
что бы показать, что я не врал и что код ниже - рабочий, >:( привожу скриншотец (там вверху я писал из под своего второго тестового аккаунта, никакого обмана :) ).
осталось еще намекнуть про кое-что еще, :-X но рука устала сегодня...
Код: [Выделить]>>>><fieldset>
<legend id="gwaveframeid">getFrameId() not started</legend>
<input type="submit" id="addparticipant" value="..." />
<input type="submit" id="addreply" value="..." />
<div id="gwaveframe" style="width: 338px; height: 600px"></div>
</fieldset><<<<
Код: [Выделить]>>>><script src="http://wave-api.appspot.com/public/embed.js" type="text/javascript"></script>
<script type="text/javascript">
function callback_loadWave() {
var elem;
elem=document.getElementById("addparticipant");
if(elem) {
elem.value="~:.:~";
}
elem=document.getElementById("addreply");
if(elem) {
elem.value="~:.:~";
}
}
function callback_init(gwpanel) {
var elem;
elem=document.getElementById("gwaveframeid");
if(elem) {
elem.innerHTML="Frame ID: [" gwpanel.getFrameId() "]";
}
elem=document.getElementById("addparticipant");
if(elem) {
elem.value="add Participant";
elem.onclick=function(){gwpanel.addParticipant();};
}
elem=document.getElementById("addreply");
if(elem) {
elem.value="add Reply";
elem.onclick=function(){gwpanel.addReply();};
}
}
function InitGWave() {
var MyWavePanel = new WavePanel("https://wave.google.com/a/wavesandbox.com/");
MyWavePanel.loadWave("wavesandbox.com!w gd_bK9tX%A", callback_loadWave());
MyWavePanel.setUIConfig("#ECEDF3", "#000000", "Verdana", "10pt");
MyWavePanel.init(document.getElementById("gwaveframe"), callback_init(MyWavePanel));
}
</script>
</head>
<body onload="InitGWave()">';
<<<<
sim-sim:
а намек-то на самом деле прозрачный: :P для того, чтобы узнать как работает Wave Embed API достаточно скачать любым get-менеджером скрипт, который идет в самом начале вставки. и в нем соответственно есть ссылка на еще один инклуд. короче под капотом этого АПИ работает удаленный вызов процедур, аналогичный (но не идентичный!) АПИ гаджетов.
и все-таки этот Embed API не отличается стабильной работой >:( , время от времени вызова не работают, затем вновь функционируют. но это нормально, все-таки на сегодня волны еще даже не бета, а девелопер превью. набор вызовов достаточно ограничен, настолько что я не смог пока найти практического применения здесь, ::) потому работающий пример я уже снес. :'(
честно говоря, надоела вакханалия с правами в волнах: каждый может написать или исправить текст, а то и присобачить свой недоработанный гаджет. программный менеджмент волн тоже далек от управляемости, а избавиться от робота, однажды поселившегося, пока разработчики еще не придумали как. :D
другими словами, играть в песочнице уже надоело, а делать что-то серьезное пока невозможно (нет нормального для применения инструментария) :-[. можно конечно уподобится российским волновым гикам ;D и переасказывать на русский содержание туториалов и хэлпов для чайников, но я решил пока заняться более интересным делом (об это далее).
писать своих роботов и гаджетов для волн я тоже пока не собираюсь. то урезанное апи не дает пространства для свободы применения, можно сказать что контроль за их поведением возлагается не на девелопера, а на потроха системы, которые недостаточно еще документированы и скорее всего будут значительно изменены.
и последней гирькой на чашу весов стала страничка с уже готовым Гаджет Дизайнером. Трудно не понять, что такой дизайнер вскоре будет и для волновых роботов и гаджетов. Оставим фанатикам и начинающим писать код гикам стезю кодировать ручками роботов и гаджетов ;D ;D ;D возможно это принесет им и пользу, или, как минимум, дополнительные скиллзы среди собратьев.
спешка теперь ни к чему, пусть все идет как идет. 8) первое любопытство я удовлетворил. ;) дальнейшие перспективные направления, на мой взгляд такие. если бы существовала хорошая оперативная обратная связь с разработчиками, можно было бы сосредоточиться на каких-то определенных и конкретных делах. чтобы тестировать вместе с ними прямо онлайн тот или иной узкий функционал. но судя по ответам в группах, офисных часах и в issue tracker, разработчики не горят таким желанием и скорее всего по горло заняты плановыми работами, готовясь к массовому наплыву в сентябре.
второе направление: рассмотреть волны не под капотом, а со стороны капитана или пассажира корабля. для пассажира не важно наличие роботов в машинном отделении и направления подводных течений, высота волн и их гидродинамика. он просто хочет попасть в то или иное место, не скучая в дороге и не подхватив морскую болезнь. а капитана корабля интересуют в первую очередь ходовые характеристики судов и история мореплавания, ее традиции и устав :) остальные волновые потроха оставим юнгам, матросам и кочегарам ;D :P :P :P
Навигация
Комментариев нет:
Отправить комментарий