[Вконтакте] Flex | Первые шаги

MainCraft · 18.10.2010, 00:59

Вступление [офф-топ]:
Ребята! Доброго времени суток всем, я дико извиняюсь заранее за глупые и нелепые вопросы, которые думаю задам Вам ни один ещё раз.

Я PHP программер и для меня flash всегда был нечто запредельным и страшным, но теперь я решительно настроен.
P.S. Я уже окопался учебниками по AS3 / Видео-урокам Flex

Что хочу научиться
Научиться корректно юзать API вконтакта в Flex-e:
Т.к. JS API (для IFrame приложений) реализовано криво и неполноценно мне придётся всё такие изучить Flash.

Что я делал
Очень много искал инфу по Flex-у, ничего конкретного не нашёл кроме 1 примера (на вашем форуме кстати только):
Данный пример даже отказался компилироваться в моём Flex Builder 4 (с указанием ошибки на смешанное содержимое на 2-ой строке)

Код AS3:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="onAddedToStage(event)" historyManagementEnabled="false" layout="absolute" width="600" height="600">
	// В Application прописываем ddedToStage="onAddedToStage(event)" и historyManagementEnabled="false"
	<mx:Script>
		<![CDATA[
			import mx.events.*;
 
			public var wrapper:Object;
 
			public function onAddedToStage(e:Event):void {
				wrapper = Object(parent.parent.parent); // здесь вместо 2-х parent ставиться 3
				wrapper.external.showInstallBox();
				teht.text= "ширина " + wrapper.application.stageWidth + " длинна " + wrapper.application.stageHeight;
			}
 
		]]>
	</mx:Script>
	<mx:Label y="91" id="teht" horizontalCenter="0"/>
</mx:Application>

Я попробовал сделать нечто своё из того что было дано в выше стоящем примере:

Код AS3:

<?xml version="1.0"?>
<!-- wrapper/ApplicationParameters.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="initVars()">
	<mx:Script><![CDATA[
	    [Bindable]
		public var wrapper:Object;
 
		[Bindable]
		public var viewer_id:String;
 
		// Assign values to new properties.
		private function initVars():void {
			wrapper = Object(parent.parent.parent);
			viewer_id = wrapper.application.viewer_id;
		}
	]]></mx:Script>
	<mx:Label text="viewer_id: "/>
	<mx:Label text="{viewer_id}" fontWeight="bold"/>
</mx:Application>

И естественно контакт ничего мне не выдал... => я на*****кодил )))
Пока Я научился только получать FlashVars:

Код AS3:

<?xml version="1.0"?>
<!-- wrapper/ApplicationParameters.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="initVars()">
	<mx:Script><![CDATA[
		[Bindable]
		public var viewer_id:String;
		private function initVars():void {
			viewer_id = Application.application.parameters.viewer_id;
		}
	]]></mx:Script>
 
	<mx:VBox>
		<mx:HBox>
			<mx:Label text="viewer_id: "/>
			<mx:Label text="{viewer_id}" fontWeight="bold"/>
		</mx:HBox>
	</mx:VBox>
</mx:Application>

Ребята я буду Вам очень благодарен, если поможите мне самыми простыми примерами, использования API VK (в Flex) - начиная от просмотра текущего viewer_id или к примеру получению текущего статуса пользователя.

----
Заранее благодарен, всем кто откликнется на мой зов помощи )))

Astraport · 18.10.2010, 01:19

Вот здесь более глобальный пример.
Правда древний.
А здесь куча уроков по теме. Но там в основном под CS, придется немного подпилить по флекс.

MainCraft · 18.10.2010, 01:55

Спасибо за первый ответ в теме!
Мне б с самых азов. пример по ссылочке помоему древний как ***** мамонта ))))

Добавлено через 35 минут
Всё нашёл ошибку, блин изза тупости потратил 12 часов!
Мой пример правильный был за исключением строчки:

Код AS3:

viewer_id = wrapper.application.viewer_id;

Которую нужно было сменить на:

Код AS3:

viewer_id = wrapper.application.parameters.viewer_id;

Начинающим Flex-ерам даю рабочий пример!
Инструкция, включаем в настройках приложения - Использовать контейнер.
Создаём приложение и пишем:

Код AS3:

<?xml version="1.0"?>
<!-- wrapper/ApplicationParameters.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="initVars()">
	<mx:Script><![CDATA[
		public var wrapper:Object;
 
		[Bindable]
		public var viewer_id:String;
 
		// Assign values to new properties.
		private function initVars():void {
			wrapper = Object(parent.parent.parent);
			viewer_id = wrapper.application.parameters.viewer_id;
		}
	]]></mx:Script>
	<mx:Label text="viewer_id: "/>
	<mx:Label text="{viewer_id}" fontWeight="bold"/>
</mx:Application>

ShockWave512 · 18.10.2010, 03:24

по поводу API вконтакта, пользуюсь этой либой
http://code.google.com/p/v-kontakte/
группа
http://vkontakte.ru/club13587210
(примеры брал в группе, сейчас правда там нерабочая ссылка)

MainCraft · 18.10.2010, 09:48

Напомню! Данная тема о Flex.

Astraport · 18.10.2010, 11:58

Цитата:

по поводу API вконтакта, пользуюсь этой либой
http://code.google.com/p/v-kontakte/

Я там вообще ничего не нашел. Где там либы?

ShockWave512 · 18.10.2010, 12:02

закладка downloads, как ни странно

http://code.google.com/p/v-kontakte/...d.zip&can=2&q=

Astraport · 19.10.2010, 09:37

Цитата:

закладка downloads, как ни странно

Я это скачал, но там ничего не понятно. Ни описаний, ни инструкций

ShockWave512 · 19.10.2010, 12:21

архив с примерами
http://***************/files/42592353...te_AS3_API.zip

altermann · 29.10.2010, 22:53

Я во флексе замечательно юзал стандартный контактовский посредник APIConnection (APIConnection), не нужно никакого контейнера, один гемор с ним. Очень легко юзается.

Алгоритм примерно такой:
1) создаешь пакет, например social.vk, в него распаковываешь классы посредника.
2) создаешь в том же пакете класс. например, VKApi, примерно такой:

Код AS3:

package social.vk {
 
    import flash.system.Security;
    import flash.events.*;
 
    import social.SocialConnectionEvent; // Этот класс надо будет еще создать, о нем ниже...
 
    import social.vk.APIConnection;
    import social.vk.events.*;
 
    public class VKApi extends EventDispatcher {
        private var flashVars:Object;
        private var apiConnection:APIConnection;
 
        public function VKApi() {
 
		}
 
        public function initVKNetConnection():void {
            Security.allowDomain("*"); 
            flashVars = mx.core.FlexGlobals.topLevelApplication.parameters as Object;
 
            apiConnection = new APIConnection(flashVars);
			apiConnection.addEventListener(CustomEvent.CONN_INIT, initComplete);
        }
 
        private function initComplete(e: CustomEvent):void {
            // Тут можно поставить проверку установлена ли прилага или нет
            // Либо не делать проверку, а заюзать новый контактовский интерфейс для этого
            // Установив соответствующую галочку в параметрах
 
            // Если делать проверку, то примерно так:
 
            if (flashVars['is_app_user'] == 1) {
                // Если прилага установлена, проверим нужные настройки юзверя
				if (flashVars['api_settings'] >= 3) {
				    // 3 - это доступ к френдам и к отправке уведомлений
				    // Если все нас устраивает, то формируем событие инициализации
					dispatchEvent(new Event("initComplete"));
				} else {
				    // Либо откроем окно настроек прилаги
					apiConnection.addEventListener('onSettingsChanged', onSettingsChanged);
					apiConnection.callMethod('showSettingsBox', 3);
				}
			} else {
			    // Если прилага не установлена, то откроем окно установки,
			    // предварительно записав, кто пригласил чела в прилагу
				if (flashVars['user_id'] != flashVars['viewer_id']) {
					var localSO:SharedObject;
					localSO = SharedObject.getLocal("userInviteIDs");
					localSO.data.userID = flashVars['user_id'];
					localSO.flush();
				}
 
				// Открываем окно установки
				apiConnection.addEventListener('onApplicationAdded', onApplicationAdded);
				apiConnection.callMethod('showInstallBox');
			}
		}
 
		private function onApplicationAdded(e: CustomEvent):void {
			if (flashVars['api_settings'] >= 3) {
				dispatchEvent(new Event("initComplete"));
			} else {
				apiConnection.addEventListener('onSettingsChanged', onSettingsChanged);
				apiConnection.callMethod('showSettingsBox', 3);
			}
		}
 
		private function onSettingsChanged(e: CustomEvent):void {
			dispatchEvent(new Event("initComplete"));
        }
 
        // Узнаем свой ID в контакте
        // Надо замутить еще один класс - SocialConnectionEvent
        // Создай его, например, в пакете social, его код будет ниже
        public function WhatIsMyVKID():String {
            var event:SocialConnectionEvent = new SocialConnectionEvent(Event.COMPLETE);
			event.socialID = flashVars.viewer_id;
			dispatchEvent(event);
        }
 
        // Определим данные своего профиля и получим свою аву
        public function WhatIsMyNameVK(id:String):void {
            apiConnection.api('getProfiles', {uids: id, fields: 'photo_medium'}, getProfilesresultListener, errorListener);
        }
 
        private function getProfilesresultListener(data: Object):void {
            var event:SocialConnectionEvent = new SocialConnectionEvent(Event.COMPLETE);
            event.first_name = data[0].first_name;
			event.last_name = data[0].last_name;
			event.avatar = data[0].photo_medium;
			dispatchEvent(event);
        }
    }
}

А вот класс SocialConnectionEvent. Он нужен для передачи инфы в родительский класс

Код AS3:

package social
{
	import flash.events.Event;
 
	public class SocialConnectionEvent extends Event
	{
		public var socialID:String;
 
		public var first_name:String;
		public var last_name:String;
		public var avatar:String;
 
		public function SocialConnectionEvent(type:String)
		{
			super(type);
		}
	}
}

Теперь основной код:
Я люблю отделять код от скелета, поэтому создаю два файла:

файл preved.mxml:

Код AS3:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx" 
			   creationComplete="init()"
			   width="807" height="630">
 
	<fx:Script source="MainController.as"/>
	<s:HGroup width="100%" height="100%">
	    <s:VGroup width="200" height="100%">
	        <s:Label text="Моя ава:"/>
        	<mx:Image id="myFace"/>
        </s:VGroup>
        <s:VGroup>
            <s:Label text="Логи:"/>
	        <s:TextArea width="100%" height="100%" id="statusArea" editable="false"/>
	    </s:VGroup>
	</s:HGroup>
</s:Application>

файл MainController.as:

Код AS3:

import social.vk.VKApi;
import flash.events.*;
 
 
private var vkConnect:VKApi;
 
private function init():void {
    saveToLog("Инициализируем апи...");
    vkConnect = new VKApi();
    vkConnect.addEventListener('initComplete', initComplete);
    vkConnect.initVKNetConnection();
}
 
private function initComplete(e: Event):void {
    vkConnect.removeEventListener('initComplete', initComplete);
    saveToLog("Апи инициализировано успешно");
 
    saveToLog("Узнаем свой ID в контакте");
    vkConnect.addEventListener(Event.COMPLETE, WhatIsMySocialIDResult);
	vkConnect.WhatIsMyVKID();
}
 
private function WhatIsMySocialIDResult (event:SocialConnectionEvent):void {
    vkConnect.removeEventListener(Event.COMPLETE, WhatIsMySocialIDResult);
    saveToLog("Мой ID: " + event.socialID);
 
    saveToLog("Узнаем мое имя и прочую инфу...");
    vkConnect.addEventListener(Event.COMPLETE, WhatIsMyNameResult);
	vkConnect.WhatIsMyNameVK();
}
 
private function WhatIsMyNameResult (event:SocialConnectionEvent):void {
    vkConnect.removeEventListener(Event.COMPLETE, WhatIsMyNameResult);
 
    saveToLog("Меня зовут: " + event.first_name + ' ' + event.last_name);
    saveToLog("Ссылка на мою аву: " + event.avatar);
    myFace.source = event.avatar;
}
 
 
// Пишем мессаги в текстовое поле
private function saveToLog(msg:String):void {
	var curTime:Date = new Date();
 
	statusArea.text += String(curTime.hours) + ':' + String(curTime.minutes) + ':' + String(curTime.seconds) + ' ' + msg + '\n';
	trace("ScriptDebug: " + msg);
}

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

За код прошу сильно не ругать, я сам недавно во флеше =) А этот код - плод моих долгих и упорных усилий =) (кончено это только часть, но все же).

Опции темы
Версия для печати Отправить по электронной почте
Опции просмотра
Линейный вид Комбинированный вид Древовидный вид