HTMLTextBlock for Windows Phone 7 - html

I am trying to include a html textbox into my windows phone 7. I see some sample code here. The problem is that the HTMLPage class doesn't exist in windows phone 7, or more exactly, the System.Windows.Browser does not exist. Do anybody know an alternative for this?

I struggled with this for all the same reasons, and eventually came up with a solution. I need to show a bunch of these inside a ListBox for my Septic's Companion app. Right now my solution only deals with bold or italic (as that's all I cared about) but it would be easy to modify it to deal with more. First, into my ViewModel I wrote a routine to return a TextBlock given an HTML string.
private TextBlock MakeFormattedTextBlock(string shtml)
{
TextBlock tb = new TextBlock();
Run temprun = new Run();
int bold = 0;
int italic = 0;
do
{
if ((shtml.StartsWith("<b>")) | (shtml.StartsWith("<i>")) |
(shtml.StartsWith("</b>")) | (shtml.StartsWith("</i>")))
{
bold += (shtml.StartsWith("<b>") ? 1 : 0);
italic += (shtml.StartsWith("<i>") ? 1 : 0);
bold -= (shtml.StartsWith("</b>") ? 1 : 0);
italic -= (shtml.StartsWith("</i>") ? 1 : 0);
shtml = shtml.Remove(0,shtml.IndexOf('>') + 1);
if (temprun.Text != null)
tb.Inlines.Add(temprun);
temprun = new Run();
temprun.FontWeight = ((bold > 0) ? FontWeights.Bold : FontWeights.Normal);
temprun.FontStyle = ((italic > 0) ? FontStyles.Italic : FontStyles.Normal);
}
else // just a piece of plain text
{
int nextformatthing = shtml.IndexOf('<');
if (nextformatthing < 0) // there isn't any more formatting
nextformatthing = shtml.Length;
temprun.Text += shtml.Substring(0, nextformatthing);
shtml = shtml.Remove(0, nextformatthing);
}
} while (shtml.Length > 0);
// Flush the last buffer
if (temprun.Text != null)
tb.Inlines.Add(temprun);
return tb;
}
Then I just needed a way to build this into my XAML. This may not be the very best solution, but I first made another routine to return a StackPanel containing that TextBlock with the text I wanted.
public StackPanel WordBlock
{
get
{
StackPanel sp = new StackPanel();
TextBlock tbWord = MakeFormattedTextBlock("<b>" + Word + "</b>: " + Desc);
sp.Children.Add(tbWord);
return sp;
}
}
To bind this to a visible control, I then made a DataTemplate for my ListBox which simply read the entire StackPanel out of my view model.
<DataTemplate x:Key="WordInList2">
<ContentControl Content="{Binding WordBlock}"/>
</DataTemplate>
As I say, there may be parts of this that aren't done as elegantly as they might be, but this did what I wanted. Hope it works for you!

Hey I converted the SilverlightHtmlTextBlock to WP7 Here. I
haven't tested it for terribly complex cases and blows up on dtd tags but, it does the job for simpler html cases and sounds like what you were looking for.

WebBrowser can render html.
How to: Display Static Web Content Using the WebBrowser Control for Windows Phone

Related

tlfTextField - Highlight a part of text with "Code"

I wonder how to set the text "Highlight" of a part of text inside tlfTextField with the code?
I tried "tf.backgroundColor = 0x990000" property, but did not help.
For instance, I can change the Font Color of any contents inside Parenthesis, by this code:
private function decorate():void {
var tf:TextFormat = new TextFormat();
tf.color = 0x990000;
var startPoint:int = 0;
while (startPoint != -1) {
var n1:int = textMc.tlfText.text.indexOf("(", startPoint);
var n2:int = textMc.tlfText.text.indexOf(")", n1 + 1);
if (n1 == -1 || n2 == -1) {
return;
}
textMc.tlfText.setTextFormat(tf, n1 + 1, n2);
startPoint = n2 + 1;
}
}
So I know "tf.color = 0x990000;" will change the Font color, however, don't know how to "highlight" some text, with code, as I do inside Flash manually.
You should have probably used tlfMarkup property to set the required format to the specific part of text. The attributes you seek are backgroundColor and backgroundAlpha of the span XML element that you should wrap your selection, however it should be much more difficult should there already be spans around words when you retrieve the property from your text field.
The problem with your solution is that you don't check if the two characters are located on a single line before drawing your rectangle, also you would need to redraw such rectangles each time something happens with the textfield. The proposed approach makes use of Flash HTML renderer's capabilities to preserve the formatting, however it will require a lot of work to handle this task properly.

Best way to adjust letter spacing every 3 chars in Ionic/Angular input box

I'd like users to enter a code and to assist them in transcribing it I'd hope to increase the spacing between every 3rd character they type. I've seen this nicely done for credit cards having 4 character spacing. This will be for an Ionic app so the simple input box coud be replaced with a customised Ionic control.
What methods have you used for this and what works best?
Open to Angular/Ionic code samples or a related web site tutorial.
Pure CSS would be nice.
Here is an other version, without jquery, works with alphanumerical and takes a configurable separator:
Typescript:
GROUP_SEPARATOR=" ";
......
format(valString) {
if (!valString) {
return '';
}
let val = valString.toString();
const parts = val.replace(/ /g, '');
return parts.replace(/\B(?=(?:\w{3})+(?!\w))/g, this.GROUP_SEPARATOR)
};
HTML
<input [(ngModel)]="input"
style="border:1px solid black" #myBudget="ngModel" (input)="input = format(input)">
DEMO
You can add space on keyup event.
Example
$('#input').on('keyup', function(e){
var val = $(this).val();
var newval = '';
val = val.replace(/\s/g, '');
for(var i=0; i < val.length; i++) {
if(i%3 == 0 && i > 0) newval = newval.concat(' ');
newval = newval.concat(val[i]);
}
$(this).val(newval);
})
I found a simpler method based on Vija's method ... Basically we match 3 non-space chars and we remove any previously added space chars. This is needed to allow the user to update or erase any chars in the text box.
A final solution may also need to adjust the position of the cursor based on where it was prior to performing the replace.
$('#input').on('keyup', function(e){
var val = $(this).val();
var newval = val.replace(/([^ ][^ ][^ ]) */g, "\$1 ").trim();
$(this).val(newval);
})

how to connect a number variable to dynamic text in actionscript 3.0?

i know this might be simple but i have been searching everywhere for a fix but i just cannot find it!
i want to make something like a health #, so when you press whatever button the dynamic text # will go up or down. on my test project i have two layers, the first with the following code
var hp:Number = 100;
health.text = String hp;
hp being the variable, and health being the dynamic text. then i have the next layer with the button with:
function button(e:MouseEvent):void
{
hp -= 10;
}
without that second chunk of code, the dynamic text will appear, but once that is added it will disappear and the button is function-less.
how do i make this work??? once again sorry if this is a dumb question, i'm just very stumped.
The accepted answer is good, but I wanted to point out that your original code was actually very close to being correct, you just needed parenthesis:
health.text = String(hp);
For most objects String(object) and object.toString() has the same effect, except that object.toString() throws an error if object is null (which could be desirable or undesirable, depending on what you expect it to do).
This is not correct:
health.text = String hp;
use:
health.text = hp.toString();
and:
function button(e:MouseEvent):void
{
hp -= 10;
health.text = hp.toString();
}

What's visible in a ScrollViewer?

I have a GridView. I am using the nested ScrollViewer's SnapPoints to snap each record into view. Because this is only a visual change, and not a data change, how can I determine which record(s) is currently visible? Something like SelectedItem, but a visual query. I could check every record, but it seems inefficient. Ideas?
In your case you could use the VisualTreeHelperExtensions from WinRT XAML Toolkit and do something like this
gridView
.GetDescendantsOfType<GridViewItem>()
.Select(gvi => gridView.ItemFromContainer(gvi));
It does a somewhat intensive visual tree search, but might be OK for your scenario if your GridView uses virtualization since the items returned are in or near the view port. If you want to be more precise you can test for bounding rect intersections. Something like this might be enough:
static class RectExtensions
{
public static bool ContainsPartOf(this Rect bigRect, Rect smallRect)
{
// this is a very targeted test for horizontally scrollable smallRects inside of a bigRect
return bigRect.Left < smallRect.Left && bigRect.Right > smallRect.Left ||
bigRect.Left < smallRect.Right && bigRect.Right > smallRect.Right;
}
}
var sv = gridView.GetFirstDescendantOfType<ScrollViewer>();
var bigRect = new Rect(0, 0, sv.ActualWidth, sv.ActualHeight);
gridView
.GetDescendantsOfType<GridViewItem>()
.Where(gvi => bigRect.ContainsPartOf(gvi.GetBoundingRect(sv)))
.Select(gvi => gridView.ItemFromContainer(gvi));

Google Apps Script: weird page layout in a script formatted document

I'm working on a script that applies custom headings to a plain text document imported in Google Docs. The scripts works pretty much as it should. However the resulting document has a weird layout, as if random page breaks were inserted here and there. But there are no page breaks and I can't understand the reason of this layout. Checking the paragraph attributes give me no hints on what is wrong.
Here is the text BEFORE the script is applied:
https://docs.google.com/document/d/1MzFvlkG13i3rrUcz5jmmSppG4sBH6zTXr7RViwdqaIo/edit?usp=sharing
You can make a copy of the document and execute the script (from the Scripts menu, choose Apply Headings). The script applies the appropriate heading to the scene heading, name of the character, dialogue, etc.
As you can see, at the bottom of page 2 and 3 of the resulting document there is a big gap and I can't figure out why. The paragraph attributes seem ok to me...
Here is a copy of the script:
// Apply headings to sceneheadings, actions, characters, dialogues, parentheticals
// to an imported plain text film script;
function ApplyHeadings() {
var pars = DocumentApp.getActiveDocument().getBody().getParagraphs();
for(var i=0; i<pars.length; i++) {
var par = pars[i];
var partext = par.getText();
var indt = par.getIndentStart();
Logger.log(indt);
if (indt > 100 && indt < 120) {
var INT = par.findText("INT.");
var EXT = par.findText("EXT.");
if (INT != null || EXT != null) {
par.setHeading(DocumentApp.ParagraphHeading.HEADING1);
par.setAttributes(ResetAttributes());
}
else {
par.setHeading(DocumentApp.ParagraphHeading.NORMAL);
par.setAttributes(ResetAttributes());
}
}
else if (indt > 245 && indt < 260) {
par.setHeading(DocumentApp.ParagraphHeading.HEADING2);
par.setAttributes(ResetAttributes());
}
else if (indt > 170 && indt < 190) {
par.setHeading(DocumentApp.ParagraphHeading.HEADING3);
par.setAttributes(ResetAttributes());
}
else if (indt > 200 && indt < 240) {
par.setHeading(DocumentApp.ParagraphHeading.HEADING4);
par.setAttributes(ResetAttributes());
}
}
}
// Reset all the attributes to "null" apart from HEADING;
function ResetAttributes() {
var style = {};
style[DocumentApp.Attribute.STRIKETHROUGH] = null;
style[DocumentApp.Attribute.HORIZONTAL_ALIGNMENT] = null;
style[DocumentApp.Attribute.INDENT_START] = null;
style[DocumentApp.Attribute.INDENT_END] = null;
style[DocumentApp.Attribute.INDENT_FIRST_LINE] = null;
style[DocumentApp.Attribute.LINE_SPACING] = null;
style[DocumentApp.Attribute.ITALIC] = null;
style[DocumentApp.Attribute.FONT_SIZE] = null;
style[DocumentApp.Attribute.FONT_FAMILY] = null;
style[DocumentApp.Attribute.BOLD] = null;
style[DocumentApp.Attribute.SPACING_BEFORE] = null;
style[DocumentApp.Attribute.SPACING_AFTER] = null;
return style;
}
A couple of screenshots to make the problem more clear.
This is page 2 of the document BEFORE the script is applied.
This is page two AFTER the script is applied. Headings are applied correctly but... Why the white space at the bottom?
Note: if you manually re-apply HEADING2 to the first paragraph of page 3 (AUDIO TV), the paragraph will jump back to fill the space at the bottom of page 2. This action, however, doesn't change any attribute in the paragraph. So why the magic happens?
Thanks a lot for your patience.
That was an interesting problem ;-)
I copied your doc, ran the script and had a surprise : nothing happened !
It took me a few minutes to realize that the copy I just made had no style defined for headings, everything was for some reason in courrier new 12pt, including the headings.
I examined the log and saw the indent values, played with that a lot to finally see that the headings were there but not changing the style.
So I went in the doc menu and set 'Use my default style and... everything looks fine, see screen capture below.
So now your question : it appears that there must be something wrong in your style definition, by "wrong" I mean something that changes more than just the font Style and size but honestly I can't see any way to guess what since I'm unable to reproduce it... Please try resetting your heading styles and re-define your default.... and tell us what happens then.
PS : here are my default heading styles : (and the url of my copy in view only :https://docs.google.com/document/d/1yP0RRCrRSsQc9zCk-sdfu5olNGDkoIrabXanII4qUG0/edit?usp=sharing )