Bluetube Interactive Blog

Mediating multiple views with a common base class with a single mediator

There are many situations where multiple views will need to share a common Mediator class. For example, games may have several on screen elements(views) that have the same behavior but will operate independently.

 
RobotLegs provides a simple but not very well documented mechanism for achieving
 
Whereas the following is the syntax for the standard mediator mapping to a view:
 mediatorMap.mapView( View Class, Mediator Class )

 Mapping multiple views with the same base class to a single mediator you only need to add an additional parameter  to the mapping call:  

mediatorMap.mapView( View Class, Medaitor Class, View Base Class)
 
The single mediator class will now mediate each of your various views independently.

Loading site-specific CSS files into Sitecore's rich text editor

Background

We work with a lot of multi-site Sitecore installations, and generally feel this is an area Sitecore excels at... however...

The Sitecore content editor interface does have some areas that don't lend it to good multi-site use though, one of which is the rich text editor.  Ideally the CSS dropdown in the editor would display CSS classes from a site-specific CSS file.  Unfortunately, out of the box Sitecore does not have the facility to do this.

Without the ability to have site-specific CSS classes, the admins for each site in a multi site installation would be forced to share a CSS file and see styles for all of the other sites - not the greatest user experience.

The Solution(s) - old and new

We've solved this for a while by using code similar to what's found on the Sitecore Developer Network.  This worked great for a time, but as of Sitecore 6.4 it stopped working.

So what happened?  The default.aspx and the code-behind class that are key to the above solution are still present in Sitecore 6.4; however, they are not used.

Thankfully, we found a great blog post on the subject by Mark Stiles that pointed us toward the correct solution for Sitecore 6.4+.  The revamped rich text editor uses a handful of new classes, and, as always, knowing where to look makes all the difference.  A big thanks to Mark, as no one else on the Sitecore Developer Network or elsewhere seems to be talking about this.  (Just a note: I would recommend inheriting from Sitecore.Shell.Controls.RichTextEditor.EditorPage and overriding OnLoad, rather than copying it from Reflector or similar as it appears Mark did).

Inheriting from Sitecore.Shell.Controls.RichTextEditor.EditorPage allowed us to support site-specific CSS files in the RTE and keep the level of user-friendliness our clients have come to expect.

 

Bluetube Interactive is a cutting edge digital agency that designs and builds native mobile, mobile web, tablet, social, and presence solutions.  You can find out more about Bluetube Interactive at www.bluetubeinteractive.com.

Trouble connecting to Acer Iconia A100 with FlashBuilder 4.1.6

The Problem

We are building an app for one of our clients that will be targetted to the Acer Aconia A100.  Windows recognized the tablet no problem, but flex builder would not see the device when trying to "run" on the device in the choose device dialog ( appears have to you hit run).

I solved it by editing the usb drivers file provided by adobe and adding the acer iconia 100 to the file then updating the drivers are follows :

Get the acer hardware id

1. under the start menu go to "devices and printers"
2. Right click on the acer iconia and (may be called MTP) 
3. Select "properties"
4. click the "hardware" tab
5. click the properties button inside the tab
6. click the "details" tab
7. change the property drop down to "hardware id's"
8. Select the first value and right click and select "copy"  - View this photo
9. DO NOT CLOSE THE DIALOG
   
   

Update the driver file provided by Adobe

1. Navigate to the folder where flex is installed, for example on my machine its at : 
   
   D:\Program Files (x86)\Adobe\Adobe Flash Builder 4.6\
    
2. The driver file is located under the utilites folder :
    
   Adobe Flash Builder 4.6\utilities\drivers\android android_winusb.inf
3. Edit this file and find go to the end of the  section [Google.NTamd64] and copy one of the existing devices and chnage the USB portio of the value to the device ID you copied ealier,  e.g. : 
   
   ; Acer Iconia
   A100%CompositeAdbInterface% = USB_Install, USB\VID_0502&PID_3348&REV_9999&MI_01 
    
4. Save The file
5. Go back to the dialog you left open and click the Driver Tab and select "update driver"
6. select "browse my computer for driver software" and navigate to the utilities/android folder where you save the updated /inf file e.g.
   
   D:\Program Files (x86)\Adobe\Adobe Flash Builder 4.6\utilities\drivers\android
   
   
   
7. click 'next", say ok to windows warnings about the driver not being signed, and let the install complete.
8. You should now be able to run your app from flash builder and see your device in the  choose device dialog

NInject and Umbraco Trouble? Or simply need to extend Global.asax?

So Bluetube Interactive has recently been doing a lot of Umbraco projects, rolling out several new sites on the platform.  As a method of speeding development, all of our projects leverage Injection frameworks and our framework of choice for .NET is NInject.  However, due Umbraco and NInject both want to extend the Global.asax, which isn't possible.  So what is a developer to do?

The answer is surprisingly simple.  Although Umbraco does in fact extend Global.asax in its own class, it turns out it does not have a significant use... or at least one not significant enough to prevent us from wanting to use our Injection framework of choice.

In the bin folder, find a remove the following file:

App_global.asax.dll

Having issue with App_Browsers too?  It seems Umbraco inherits from that as well.

App_Browsers.dll

Both can be safely removed and at least to this point, we have not seen a negative impact.

Also, remmber with NInject you'll want to inherit from Ninject.Web.UserControlBase, not from WebControlBase.

Bluetube Interactive is a cutting edge digital agency that designs and builds native mobile, mobile web, tablet, social, and presence solutions.  You can find out more about Bluetube Interactive at www.bluetubeinteractive.com

Embedding Flash fonts for use with Flash Builder 4 Actionscript projects

So I was having a very hard time getting some fonts to embedd in a game I was working on using the Push Button Engine, the fonts refused to embed in a screen even though I had them embedding in the flash file ( that gets exported as a swc), had them set for export in the flash file and then registered them and used text formats in the actionscript code.  I read somewhere that flex 4 had broken some of the flash font embedding when using in Flash Builder ( the old Flex builder) to build an actionscript/flash project not using the Flex SDK.

I managed to get it working by embedding the fonts in code and setting the embedAsCFF to false since my flash text fields where classic text boxes.


[Embed(source="/fonts/ARIALBD.TTF", fontFamily="ArialEmbedded", embedAsCFF="false")]
public static var ArialEmbedded:String;

( in the screen that used the code...)

var format : TextFormat = new TextFormat();
format.font = "ArialEmbedded";
levelEndScreenMC.scoreMC.textField.defaultTextFormat = format;

Once I did that and used that as a text format for my text boxes :

 

Everything started behaving.

 

 

 

Styling anchor tags on a Flex RichEditableText control

I'm using dynamic text on a flex sdk 4.1 RichEditable text control.  I pass the control some html via the TextConverter class like this

<s:RichEditableText
    id="partnerShipCopyRichText" width="600" height="250"     clipAndEnableScrolling="true" verticalAlign="top"      styleName="contentCopy" editable="false" selectable="true" 
     textFlow="{TextConverter.importToFlow(partnerShipCopy,     TextConverter.TEXT_FIELD_HTML_FORMAT)}">
</s:RichEditableText>




The "copy" includes some anchor tags ( hrefs)  and when rendered by default the anchor tags are blue.  I tried various solutions that appeared to work pre flex sdk 4.1  but stopped rendering the entire copy block.  The solution I found was to use the TextLayoutFormatValueHolder class instead of the TextLayoutFormat class.  I beleive using the TextLayoutFormat causes an internal type co-ercion except that is caught by the framework but not returned to the caller so the rendering fails without a visible exception.

To provide "global" anchor tag formatting this code works for me :

import flashx.textLayout.elements.Configuration;
import flashx.textLayout.elements.TextFlow;
import flashx.textLayout.formats.TextDecoration;
import flashx.textLayout.formats.TextLayoutFormat;
import flashx.textLayout.formats.TextLayoutFormatValueHolder;

var config:Configuration = TextFlow.defaultConfiguration;

var normalTLF:TextLayoutFormatValueHolder = new TextLayoutFormatValueHolder(config.defaultLinkNormalFormat);
normalTLF.color = 0xFF00FF;
var hoverTLF:TextLayoutFormatValueHolder = new TextLayoutFormatValueHolder(config.defaultLinkHoverFormat);
hoverTLF.color = 0xFF0000; hoverTLF.textDecoration = TextDecoration.NONE; var activeTLF:TextLayoutFormatValueHolder = new TextLayoutFormatValueHolder(config.defaultLinkActiveFormat);
activeTLF.color = 0x00FF00; config.defaultLinkNormalFormat = normalTLF; config.defaultLinkHoverFormat = hoverTLF;
config.defaultLinkActiveFormat = activeTLF;
TextFlow.defaultConfiguration = config; 

I may end up creating an example when I get five minutes!

 

 

 

 

Rock and Roll Hotel release 1

Just skinned the Rock and Roll Hotel release 1 for Ticket Alternative and sent to our beta testers!

Testflight - iOS over the air beta testing

Used testflight for the Rock and Roll Hotel app we are building for Ticket Alternative, pretty impressed, build an adhoc ipa distribution in Xcode, upload to testflight, email comes to your phone and tesflight app, you select install, it works! You can add testers to your team in the Test flight admin interface, this is way more efficient than emailing a app and having testers install via iTunes.

https://testflightapp.com/

Adding facebook comments to a .Net page

Facebook makes it very easy to add comments to a website but with their old api  and new api  and updates its often difficult to follow what you should and shouldn't be doing.  In the end the code was very simple but it took us a few rounds to get it correct.  Bluetube interactive implemented facebook comments for one of our clients Ticket Alternative as follows :

Setup your commenting "app"

First you need to create an app for your comments and if you have multiple websites I'd suggest creating an app with a unique name..  You do this under "my apps" in your facebook account, you can read more about it here.

You should now have an app id, and you'll want to cut/paste this somewhere for easy retrieval, it will look something like :

204151772941335

(example app id, don't use it)

Getting the code

You can then get facebook to generate the comment code for you

https://developers.facebook.com/docs/reference/plugins/comments/

You then need to paste that code into your page, correcting the appid if its wrong ( I have multuple app id's so it chose the wrong one)

The code will look something like this :

We launched the Dali microsite for the High Museum of Art : http://bit.ly/aZZT2r