Tag Archives: mobile

A new (and fully working!) WYSIWYG editor component for iOS

Long long time ago, I wrote a series of articles about mobile hybrid development on the BlackBerry platform. The year later I wrote a component (and an article) that enables rich editing of text on Windows Phone devices by using hybrid technology.

The concept of hybrid application development, that is the merging of native and web development technologies, to get the best from both worlds, is an emerging reality nowadays. Today i’m happy to see the concept extended to the next level, and to the iOS platform. A team of rad developers, and co-workers, have developed a WYSIWYG editor component for iOS, that is based on hybrid technology and provides a true WYSIWYG editing experience for the end user.

It includes picture support, and it works on both iOS 8 and iOS 7. Below some pictures of the editor in action:

This new component is the text editor used in the WordPress iOS app to create and edit pages & posts. In short it’s a simple, straightforward way to visually edit HTML.

Edit long content of text in Win Phone 7

There are many scenarios where you need to display and edit long chunck of text in your WP7 application.
Editing text is easy with TextBlock, but there are problems when the content you’d edit is longer than approx. 2000 characters, since any UI element that must be displayed beyond the area which is larger than 2048×2048 pixels would be clipped by the platform. If you try that, you will see that the size of the TextBlock is still as if it contains all the characters, but the bottom of it is just blank.

Display long content of text
There are different work arounds to this limitation, that are pretty simple to implement if you just need to display text:
1. Break out the text into a separate blocks, and create a TextBlock for each of this text blocks (details here: http://blogs.msdn.com/b/priozersk/archive/2010/09/08/creating-scrollable-textblock-for-wp7.aspx).
2. Just use a WebBrowser control, load the content into a simple HTML document string, and display it on the screen.

Edit long content of text
Editing the content instead is not that easy as displaying it.
You can see an implementation of the text editor I’m going to explain below in Evernote app, and soon in the WordPress app. Basically you should do the following:

  • Use a WebBrowser control
            <phone:WebBrowser x:Name="browser"
                              Style="{StaticResource BrowserBoxStyle}"
                              HorizontalAlignment="Stretch"
                              VerticalAlignment="Stretch"
                              IsScriptEnabled="True"
                              ScriptNotify="browser_ScriptNotify_1"
                              Margin="15,10,15,10" Height="Auto" Width="Auto">
            </phone:WebBrowser>
    

    Remember to set IsScriptEnabled="True".

  • Create a template HTML document with a div tag in it, that has the contentEditable=true.
  • Load the content into a string, and if targeting WinPhone 7.1 you even need to replace any character that doesn’t fall in the ASCII character set with their numeric entity.Major details here, and here.
  • Include the content into the template and use the method browser.NavigateToString(content);

To retrieve the edited content call innerHTML on the HTML element that holds it. You can define a JS method and call it from C#.
Below is an example of JS function that returns the content of the text available in the div.

      function getContent() {
           return document.getElementById("example-one").innerHTML;
      }

And you can call the JS function from C# code with a simple method like the one below:

object result = browser.InvokeScript("getContent");

Just for the record, it’s possible to call any JS function, even with parameters, as shown below:

object[] parameters = new object[] { 'parameters list here' };
object result = browser.InvokeScript("name of the JS function", parameters.Select(c => c.ToString()).ToArray());

It’s even possible to add a toolbar/menu in the PhonePage (XAML/C#), and call JS methods that programmatically modify the content of text.
C# button -> C# events handler function -> JS function -> execCommand.

Gigaom

A little over a year ago, a big topic of discussion in the newspaper business — apart from the ongoing cataclysmic decline in print advertising revenue, of course — was how to leverage Facebook as a platform for content, and specifically the rise of what were called “social reading” apps, which were like mini-newspapers housed within a Facebook page. The Washington Post and The Guardian were among those who launched these applications, and for a time they drove a substantial amount of traffic, until Facebook (s fb) changed the way they worked. Now the Guardianhas said it is effectively shutting down its app and will be pushing readers from the social network to its website instead, so that it can retain more control over what happens to its content.

The Guardian‘s app now has a large banner ad that says “The Guardian app is changing” and links…

View original post 874 more words

IE10 Compatibility List

Sometimes on IE10 websites don’t look like you expect them to: images might not appear, menus might be out of place, and text could be jumbled together. This might be caused by a compatibility problem between Internet Explorer and the site you’re on.
I found out yesterday that IE10 checks a compatibility list before opening a web site. That compatibility list defines a list of web sites that are automatically displayed in Compatibility View.
It even changes the UA string if the site you’re loading is in that list. On my Windows Phone 8 device the UA string was switched to Mozilla/5.0 (compatible; MSIE 9.0; Windows Phone OS 7.5; Trident/5.0; IEMobile/9.0; NOKIA; Lumia 820) instead the original UA string I was expecting on the server was something like this: Mozilla/5.0 (compatible; MSIE 10.0; Windows Phone OS 8.0; Trident/6.0; IEMobile/10.0; ARM; TOUCH; NOKIA; Lumia 820).

The Compatibility List is available here: http://cvlist.ie.microsoft.com/ie10/201112/iecompatviewlist.xml

More resources about the Compatibility View are available on the links below:

Seems that there is no way to disable the Compatibility mode on mobile, but I’m still investigating this. If your site is in that list, you need to fix the page, and fill the form at the bottom of the page in the link above.

WordPress XML-RPC Endpoint Validator

WordPress uses the XML-RPC remote publishing interface in order to provide a standardized way to transfer data between 3rd party clients, like mobile/desktop apps, and the core of the CMS. These 3rd party clients may ask for something like an XML-RPC (or API) endpoint, which will usually is your blog domain followed by “xmlrpc.php". So, for example, if your site was at daniloercoli.wordpress.com, your endpoint would be:

https://daniloercoli.wordpress.com/xmlrpc.php or https://daniloercoli.wordpress.com/xmlrpc.php

The Endpoint requires username/password, this is the same username and password that you use to login to WordPress, and it’s secure like the browser login.

Themes and Plugins can interact and change the behavior of the XML-RPC Endpoint, by adding new methods, or modifying the response document. There are actually a lot of plugins that interact with it in some way, but unfortunately, plugins and themes could break the XML-RPC endpoint,  or invalidate the XML response document. When I need to reply to a question about the EndPoint that’s not working on a self-hosted installation of WordPress I usually reply with the following words:

Did you try with the default theme and with no active plugins?

Trying it with the default theme and plugins disabled will help pin down where the problem is. If everything works then you go back and enable your theme and then try it again. If everything still works then you go back and activate each plugin one at a time until you find the one that is causing the breakage.

The Validator
Since my team and I usually spend a lot of time replying to questions on issues on the XML-RPC endpoint of WordPress sites, I’ve decided to write a web tool that can be used to easily test the Endpoint. This tool should speed up our work, and will give to users a simple way to test the endpoint of their sites. I wrote this tool in PHP (https://github.com/daniloercoli/WordPress-XML-RPC-Validator), by using WordPress as framework, and for simplicity in this first release it’s a plugin that adds a page to your site. That page embeds the XML-RPC validator. It does some XML-RPC calls to your blog, checks the response documents, and in case of errors gives back hints on how to fix the issue. At this moment it’s just an experiment, no fancy UI there, but I will probably improve it over the time. A live version of the validator is available here.  Please, contribute to the project 🙂

 

Resources