HTML in WP7 without webbrowser control - html

Is there a control in WP7, other than a WebBrowser, which can display basic HTML (a few <p>s, <b>s, <i>s, <div>s and <span>s) inline?
I cannot use a WebBrowser for my app because I need the control to live inside a pivot (i.e. not swallow any gestures), and to keep the background of the rest of the pivot.

If it's basic markup you can always transform the HTML with the help of the HTML Agility Pack to a RichTextBox. (See: http://debugmode.net/2011/06/02/richtextbox-in-windows-phone-7-1-or-mango/)

This is pretty simple to do with the WebBrowser control if you have a solid color background. Basically you have the WebBroswer adjust the background color of the HTML content, and disable hit testing to stop the control from eating your gestures.
Some code examples can be found in this article:
http://blogs.msdn.com/b/mikeormond/archive/2010/12/16/displaying-html-content-in-windows-phone-7.aspx
'Other' options for rendering HTML content in SL/WP7 tend to bite me in the rear in the long run.

Related

HTML in OneNote Add-in API

I've created my own OneNote Add-in using Nodejs. I am having two issues. I've searched high and low and haven't found a solution.
My add-in adds a new outline to a OneNote page. This outline contains an HTML table with one column and multiple rows. I want set the background of some of the HTML table rows. I have tried everything I could think of, including:
Setting the bgcolor attribute of TR: <tr bgcolor='red'>
Setting the bgcolor attribute of TD: <td bgcolor='red'>
Setting the style attribute of TR: <tr style='background-color:red'>
Setting the style attribute of TD: <td style='background-color:red'>
Using a separate CSS file
Using the Hex value for the color (red) #FF0000
Exporting a OneNote 2016 page as "Single File Web Page (*.mht)", inspecting the contents and trying to replicate that myself.
Tried to view source on the OneNote web version of my page to inspect a table row that has the background color set. (The page content is buried in so many layers, I can't find the content page source).
I tried to figure out how to programmatically add HTML content to the page, but Microsoft's OneNote API doesn't specify how to insert a table.
Noting works. Additionally, I want one of the cells in my table to use &nbsp and not strip out extra white space. &nbsp doesn't work. Neither <pre> tag. OneNote just ignores my markup, except I was able to specify the thickness of the table border <table border=1>.
For reference, I cannabalized this sample code: Build your first OneNote task pane add-in
I used the above sample code to create this:
taskpane.js in my Github repo
To answer my own question...
I found this after posting the question:
OneNote API HTML tag support
It doesn't appear that Microsoft supports bgcolor, background CSS on tables/tr/td, nor CSS in general with respect to the OneNote API. The <pre> tag and &nbsp is not even listed.
Good morning,
I know that this is an old post relatively but I couldn't see many others asking the same question and I've just found a solution.
Essentially you can do normal inline styling but you need to use the backslash for the quotes inside the "var html =..." line.
For example.
var html = "<p style=\"color: blue;font-family:Courier;text-align:center;background-color:yellow;\"> This paragraph shows blue, Courier text</p><table><tr><td style=\"background-color: #D6EEEE;\">A light blue coloured table cell</td></tr></table>"
Hopefully I can now find a way to change the whole page colour programatically...
Chris

TextArea control which i can control colors / fonts

I currently have a textarea control on a page. The user will enter text into the control. The content of the control is bespoke code.
I want to (from code) be able to apply formatting (color / bold / italic / font) to different parts of the text- very much like visual studio.
Like visual studio, and any other IDE, i dont want the user to have control over formatting the textarea- most editors i see give a control which the user can change style.
Any thoughts would be much appreciated.
I'm guessing you're talking about a WYSIWYG editor for a textarea. You should try using TinyMCE or CKEditor. These editors use a html attribute called 'contentEditable'. So by setting this attribute to true (e.g. <p contentEditable="true"></p>) they can then use the content editable javascript methods to edit it, providing an interface that calls the javascript of course. You can read a little about contentEditable and the similar attribute designMode here on WebMonkey.

How to display source code with indent in a web page? HTML? CSS?

I want to show some source code with the WebBrowser control on a winform. And I want to decorate the source code with HTML tags, such as color, font, and size. But I found it difficult to display the indent properly.
To be precise, my source code are held in String[], and each String holds the proper indent (space or tab) already. But it seems these kinds of indent are just ignored by the WebBrowser control.
Could someone tell me how to?
I like to paste my code in a Gist and then display it that way. Github will recognize the code and format it accordingly.
If you're going to be doing it often you could try markdown.
Or use a one-off formatter like Syntax Highlighter.
The <pre> element (using <code> elements with appropriate class names to mark up the parts you want to syntax highlight)
<pre><code class="javascript"><code class="keyword">function</code> <code class="name">foo</code>()…
You might want to look into this JavaScript library to highlight and format your code. http://code.google.com/p/syntaxhighlighter/
Or you can check out a service like this - http://pygments.appspot.com/ or this - http://hilite.me/

HTML + CSS dynamic render in flash?

I have HTML + CSS text. I need some lib with simple function like "Render String Var conteining HTML" So no external files (like in flash lib called HTMLwraper you just have to play your SWF on top of HTML). dinamic! I give it string it renders It into some conteiner (not as a bitmab but as if it was real HTML dynamically rendered in flash). (And I need real HTML + CSS support not what normal rich text block gives us)
I am going to use it in with Flex (Flash Builder) so I like MXML component model but even pure flash AS3 will workout.
It should be Free and Opensource (any license like GPL, LGPL etc will be ok).
So Is out there such flash\flex library for HTML + CSS dynamic rendering (rfom given String or XML)?
Sounds like you're asking for quite a lot ;-)
The only thing that springs to mind that might be able to help is F*CSS
Take a look here: http://fcss.flashartofwar.com/
HTH
Jolyon

How to add images into Adobe Flex RichTextEditor?

How to add images into Adobe Flex RichTextEditor control? I mean using a button =)
So we have some text editor with RTE a-la
editor screenshot http://livedocs.adobe.com/flex/3/html/images/RTE1.png
We want to get into its content images using some button. How to do such thing?
BTW: I found this http://anotherflava.com/2009/01/12/flex-xhtml-rich-text-editor-w-images/ but I really do not understand how to make it work so if any one can publish simple project with simple (DIRTY IS OK) source it would be grate!)))
RichTextEditor is a complex component which consist of few small components and TextArea. So the problem is how to insert image in TextArea.
TextArea can render simple HTML and <img> tag is supported. More about htmlText property here.
So
var myTextEditor:RichTextEditor = new RichTextEditor();
myTextEditor.htmlText = "<img src='myImage.jpg' />"