Last active
October 2, 2017 17:19
-
-
Save goergisn/0cc41f4706381ba94696 to your computer and use it in GitHub Desktop.
Creating custom TVML Elements using TVInterfaceFactory - https://medium.com/shopgate-mobile-commerce/hacking-tvml-4387e65a9b94#.r4svllt56
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
Put that Line of code somewhere before you initialize the javascript application | |
You can read a Blogpost about that topic here: | |
https://medium.com/shopgate-mobile-commerce/hacking-tvml-4387e65a9b94#.o2onhfgo4 | |
*/ | |
[TVInterfaceFactory sharedInterfaceFactory].extendedInterfaceCreator = [CustomInterfaceCreator new]; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
App.onLaunch = function(options) { | |
navigationDocument.pushDocument(createDocument("Hello World")); | |
} | |
var createDocument = function(title) { | |
var alertString = `<?xml version="1.0" encoding="UTF-8" ?> | |
<document> | |
<alertTemplate> | |
<sg-attributedText style="width: 1740; height: 100; background-color: rgb(0,0,0); color:white; text-align:center; sg-font:Menlo; font-size: 40; sg-strike-through: true;">${title}</sg-attributedText> | |
</alertTemplate> | |
</document>` | |
var parser = new DOMParser(); | |
var alertDoc = parser.parseFromString(alertString, "application/xml"); | |
return alertDoc | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
CustomInterfaceCreator.m | |
*/ | |
- (id)init | |
{ | |
self = [super init]; | |
if (self) { | |
//We need to register the element, otherwise there will be an error that the element is not known | |
[TVElementFactory registerViewElementClass:[TVTextElement class] forElementName:@"sg-attributedText"]; | |
//Register custom Style Element, otherwise it will not be handed through | |
[TVStyleFactory registerStyle:@"sg-strike-through" withType:TVViewElementStyleTypeString inherited:NO]; | |
//Use prefixes for custom elements and styles to prevent overlapping with potentially added elements in the future | |
} | |
return self; | |
} | |
- (UIView *)viewForElement:(TVViewElement *)element existingView:(UIView *)existingView | |
{ | |
if ([element.elementName isEqualToString:@"sg-attributedText"] && [element isKindOfClass:[TVTextElement class]]) { | |
TVViewElementStyle * style = element.style; | |
NSString *fontName = [style valueForStyleProperty:@"sg-font"]; | |
NSNumber *strikeThroughText = [style valueForStyleProperty:@"sg-strike-through"]; | |
NSRange stringRange = NSMakeRange(0, element.attributedText.length); | |
NSMutableAttributedString * text = [[NSMutableAttributedString alloc] initWithAttributedString:element.attributedText]; | |
if (strikeThroughText.boolValue) { [text addAttribute:NSStrikethroughStyleAttributeName value:@1 range:stringRange]; } | |
CGFloat fontSize = element.style.fontSize?element.style.fontSize:11; | |
UIFont * font = [UIFont fontWithName:fontName size:fontSize]; | |
if (!font) { font = [UIFont systemFontOfSize:fontSize]; } | |
[text addAttribute:NSFontAttributeName value:font range:stringRange]; | |
UILabel * attributedLabel = existingView?(UILabel *)existingView:[[UILabel alloc] initWithFrame:CGRectMake(0, 0, element.style.width, element.style.height)]; | |
attributedLabel.attributedText = text; | |
if(style.backgroundColor.color) { attributedLabel.backgroundColor = style.backgroundColor.color; } | |
/* | |
Some more customization to make when needed | |
*/ | |
return attributedLabel; | |
} | |
return nil; //Returning nil means that nothing is done to the element | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@interface CustomInterfaceCreator : NSObject <TVInterfaceCreating> | |
@end |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment