telerik RAD Controls for the iPhone / iPad

by ManniAT 31. May 2010 15:55

Technorati-Tags: ,,

Working on iDivine I had to provide an update mechanism for puzzles.
The goal was to provide some kind of web interface where users can select puzzles and download them.

The first idea was to work with web services. This would mean to build an iPhone (iPad) UI which displays the data provided by the service. Since there is no “multi select list” on these devices I would have to implement such a thing. Not that big problem – but it made me think about a different solution.
I also wanted to provide a “normal web view” (just to see the riddles on a website).

And the biggest problem – timing. I wanted to use the expected “application review time” to finish these things.
Then I tried if I could achieve the desired results using an apsx page. And it worked.
At the iPhone / iPad side I needed just to call some java-script functions and a few methods to download content and provide information (installed games list) for the website.

Looking for an easy way to provide a nice looking UI I (of course) took a look at the
telerik RAD controls for ASP.NET Ajax.

The result (on the iPhone) looks like this:

IMG_0315

There is a little scrolling which doesn’t appear on the iPad where this dialog is a bit larger.
The “tricks” I’ve done in this form are two things.

  1. I made the checkboxes bigger
  2. I provided a “details view” to keep the list small without loosing information
    which MAY (not must) be of interest

The details look like this:

IMG_0314

As you can see there is another RAD Control on the details view – RAD Rating.
While the list itself is optimized for the iPad (little scrolling on iPhone) the details are optimized for the iPhone (no scrolling there).

When you have a look at the supported browsers in RAD Controls for ASP.NET Ajax   you won’t find the mobile safari browser. But anyhow – the controls work as expected.

While this page is optimized to be used inside the game (templates) I also use the grid on the “default web interface” without any special adaption for the iPhone / iPad. The following image proofs that rendering works correct without special customization:

IMG_0316

The same view from a PC (IE 8):
iDivineSite1

You can checkout yourself: http://idivine.pp-p.net/GameInfo/RiddleList.aspx

I will have to do some adoptions (notice the bigger text above the list in the upper screenshot) – but notice also that this only affects my own elements where a CSS style makes this to big text.
The telerik RAD Grid looks perfect – without any need for customization.

And since most of my blog post provide at least a little code – here is how the “game page” (download list) has been done. The details page is (to save work) done using the Edit mode of RAD Grid.

Snippet created with CBEnhancer
<ClientSettings Selecting-AllowRowSelect="true" >
        <Selecting AllowRowSelect="True" EnableDragToSelectRows="false" UseClientSelectColumnOnly="true"></Selecting>
        <ClientEvents OnPopUpShowing="PopUpShowing" />
    </ClientSettings>
    <MasterTableView DataKeyNames="GameID" DataSourceID="odsGames" EditMode="PopUp">
    <NoRecordsTemplate>
    <p>Sorry - we found no games for you</p>
    </NoRecordsTemplate>
        <EditFormSettings CaptionDataField="Name" CaptionFormatString="<b>{0}</b>" PopUpSettings-Modal="true" PopUpSettings-Width="290px" PopUpSettings-Height="320px"
        EditColumn-Display="False" EditColumn-Visible="False" />

The first 2 lines bring up the checkboxes to select the puzzles.
Next I set EditMode=”PopUp” – which will show “editing” in a popup window.
And since I need no “Update / Cancel” buttons on this form I set EditColumn-Display=”False”.

There is a little more needed. First some functionality to place the popup:

Snippet created with CBEnhancer
<script type="text/javascript">
    function PopUpShowing(sender, eventArgs) {
        var popUp = eventArgs.get_popUp();
        popUp.style.left = (getScrollWidth() + 3).toString() + "px";
        popUp.style.top = (getScrollHeight() + 6).toString() + "px";
    }
    function getScrollHeight() {
        var h = window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop;
        return h ? h : 0;
    }
    function getScrollWidth() {
        var h = window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft;
        return h ? h : 0;
    }

</script>
And (since I suppressed EditColumn-Display) I needed the close button.

I combined it with the Comment display like this:

Snippet created with CBEnhancer
<telerik:GridTemplateColumn EditFormColumnIndex="0" ItemStyle-Font-Size="11px" Visible="false" EditFormHeaderTextFormat="{0}">
            <EditItemTemplate>
            <div style="border:1px solid green;">
                <uc:CommentDisplay ID="CommentDisplay1" runat="server" TheText='<%#Eval("Comment")%>' Width="180px" FontSize="10px" />
            </div>
            <div style="width:100%;text-align:right"><asp:Button CssClass="BigButton" CommandName="Cancel" runat="server" Text="Close" /></div>
            </EditItemTemplate>
        </telerik:GridTemplateColumn>

It is nothing more than a button with the command name set to “Cancel” (which will cancel “edit” and close the form).

The last element is the “Get selected games button”. Thanks to the “client select interface” of the telerik RAD Grid the code is very easy:

Snippet created with CBEnhancer
protected void btnGetSelected_Click(object sender, EventArgs e) {
        List<int> lSelectedGames = new List<int>();
        lblInfo.Text="";
        foreach(GridDataItem gdI in rgGames.SelectedItems) {
            lSelectedGames.Add((int)gdI.GetDataKeyValue("GameID"));
        }

    }

With this code I get the list of selected games (their IDs) – the rest is easy.

Conclusion: the title of this post is misleading I know – I was kidding a bit.
Of course there are now telerik controls for the iPhone – iPad – but although telerik doesn’t promise that  their ASPX controls work for iPhone / iPad browsers (which are different beasts than desktop Safari) – they do their job pretty perfect.

As far as I remember telerik had a slogan: deliver more than expected

And that is exactly what I (not for the first time) learned with this “let’s simply try it approach” building a UI beyond the scope of a normal web site.

Manfred

Tags: , ,

iPhone | telerik | iPad

AppReviews 1.0.1

by ManniAT 20. April 2010 17:28
Technorati-Tags: ,

Yesterday I posted a simple tool to check application reviews / ratings.

It works fine except:

  1. Applications must be added / removed editing a XML file in the installation directory
  2. To change the stores (set / clear Active-Flag) you must also edit a XML file in the installation directory
  3. Reviews are loaded one Store after the other (not a problem but slow)
  4. Problems with the Japanese Store

So I decided to change this.
First I move the XML files to a location where a user (non admin) has write access.
Next I added two windows holding a RadGridView. Using this telerik control it took me just a few minutes to implement editing of Applications and Stores – including some simple validation.

I did it very simple – just two dialogs with a RadGridView and 2 buttons.
The fix for the Japanese store is also done. It was a parser problem. While usernames in other stores are inside a b tag - they are not in the JP store.

The next thing I changed was about point 3. Instead of loading on store after another I fire all calls to the web on start and collect the results as they are returned from iTunes.

Compared to version 1.0.0 the current version collects data about 30 to 50 times (if only a little number of stores have entries) faster.

Have fun

Manfred

Release1.0.1.zip (1.40 mb)

Tags: ,

iPhone | telerik

Messing around with the telerik RadTransitionControl

by ManniAT 6. April 2010 14:46
Technorati-Tags: ,,

This series is about a promotion game we built to support our iPhone apps.
You can play the game here – it is “early stage” but you can really win!

For the newcomers – here the things start.
In the previous post I showed how the first steps using the telerik RadTransitionControl.
And I showed what we are trying to achieve.

TE

Here the things start to be a bit more complicated. As I told before we want to play this animation while we search for new twitter entries. Or more technical – while we are in a WCF call.
The first thing – you can not really predict how long it will take till the service call returns.
And even if you could it wouldn’t help. Of course you can set the animation duration, but that means that the animation takes more time (runs slower) which will not really look good.

So what we need are repeated animations.

  • Make the call
  • Start the animation
  • When the animation finishes check if we are still in the call
    If so – restart the animation
    Else – display the new value in the RadGauge

Unfortunately the RadTransitionControl doesn’t inform you when a transition (animation) finished.
And although there is a property “IsTransitioning” it doesn’t do what the name promises.
By the way – there is a second reason why we want to know the end of the transition.
As I wrote before – RadGauge animates value changes. And we want to have this visible.
This means we have to wait until the fade effect ends else it would be hard to see.

A second missing thing is a “start animation” method. The RadTransitionControl starts its animation automatically as soon as the content changes. But in our scenario the content wouldn’t change (always the same RadGauge).
So we also needed to implement this.

OK – the .NET way is to enhance functionality is to derive from the base control. We did it this way:

Snippet created with CBEnhancer
public class MyTransitionControl : RadTransitionControl {
    public event EventHandler OnTransitionFinished;
    DispatcherTimer m_dptWatchTransition;

    #region InTrasition
    public bool InTransition { get; set; }
    #endregion

    public MyTransitionControl() {
        m_dptWatchTransition = new DispatcherTimer();
        m_dptWatchTransition.Tick += new EventHandler(m_dptWatchTransition_Tick);
    }

    void m_dptWatchTransition_Tick(object sender, EventArgs e) {
        m_dptWatchTransition.Stop();
        InTransition = false;
        if(OnTransitionFinished != null) {
            OnTransitionFinished(this, EventArgs.Empty);
        }
    }
    public void StartTransition() {
        if(!InTransition) {    //only if not running
            object o = Content;
            Content = null;
            Content = o;
        }
    }
    protected override void OnContentChanged(object oldContent, object newContent) {
        base.OnContentChanged(oldContent, newContent);
        if(newContent != null) {    //don't watch removing
            m_dptWatchTransition.Interval = Duration;
            m_dptWatchTransition.Start();
            InTransition = true;
        }
    }
}

That’s all. A timer which starts when the content changes. When the timer ends we fire an event.
And we handle a Boolean “InTransition”.
Last not least we provide a “StartTransition” which only changes the content to “nothing” and back to what was in.
This in fact tells the RadTransitionControl to start its animation.

How is this used? Let me explain the general approach:

  • We start a WCF call
  • At the same time we initiate a transition (StartTransition)
  • When ever a transition ends we check if we are still in the WCF call
    If so – we start a new transition
  • If not we assign the new value to the RadGauge

YES – the gauge (to animate) also needs a change – in this case the value must change.
To handle this is also very easy. You remember – as long as we are in a WCF call we have a running transition.
When the call finishes we get an event (the result value changes). In that event we set the value of the RadGauge to 0. We can (almost) be sure that AFTER this the running transition will end.
And there we assign the new value – which shows a nice bar animation.
Here is some code:

Snippet created with CBEnhancer
void App_LastStatusChanged() {
    if(!rtcGauge.InTransition) { //wait to end transition
        EnterStatus();
    }
}
void rtcGauge_OnTransitionFinished(object sender, EventArgs e) {
    if(App.IsUpdatingStatus) {
        rtcGauge.StartTransition();
        return;
    }
    EnterStatus();
}

rtcGauge is the RadTransitionControl which holds the RadGauge. To have this running we only have to assign the event handler which is done like this:

Snippet created with CBEnhancer
rtcGauge.Transition = new WaveTransition { Angle = 0.5, Amplitude = 0.15 };
rtcGauge.OnTransitionFinished += new EventHandler(rtcGauge_OnTransitionFinished);

When you play the game you will see that the product images change. Of course this is also handled by a RadTransitionControl. We simply load a list of images and with a timer we change the content. The nice “move and zoom effect” is done with one line of code:

Snippet created with CBEnhancer
    rtcPromoImages.Transition = new SlideAndZoomTransition { MinZoom = 0.6 };
}
void m_dtImageChanger_Tick(object sender, EventArgs e) {
    if(!m_bImVisible) {
        return;
    }
    m_nCurImageIndex++;
    if(m_nCurImageIndex == m_aImages.Length) {
        m_nCurImageIndex = 0;
    }
    rtcPromoImages.Content = m_aImages[m_nCurImageIndex];
}

The “complicated” function shown after this single line of code does only check the bounds of our image array and then it assigns the next image to the RadTransitionControl.

I need to write a last few words about the RadGauge. First of all I want to show my laziness again and second I want to proof that I’m able to handle binding. After doing so much the “plain .NET way” I’m really afraid some of you might thing – this guy has no idea how Silverlight works Happy

The lazy part – of course I could have “restyled” the RadGauge. Or even I could have built my own custom control derived from RadGauge. Instead I created a user control, set a RadGauge as the only content and changed the look of it in Blend.
The only problem with that approach – I can’t bind a the value like this: Value=”{TemplateBinding TheVal}”. Of course I can’t do this – the control is not a template control; it’s a user control.

But (and here is the “I have a bit Silverlight knowledge” part Happy) User controls can also be data bound.
Here is (a part of) the markup:

Snippet created with CBEnhancer
<gauge:IndicatorList Margin="1,0,0,0">
    <gauge:LinearBar x:Name="linearBar" IsAnimated="true"
                    StrokeThickness="0"
                    BorderBrush="White"
                    StartWidth="0.04"
                    EndWidth="0.04"
                    Location="OverCenter"  Value="100" Opacity="0.82"
                    RangeColorMode="ProportionalLastRangesBrush"
                    RangeColorGradientOrientation="Center"
                    UseRangeColor="True" />
</gauge:IndicatorList>

And to bind the value of “linearBar” I do this in code behind:

Snippet created with CBEnhancer
public partial class DispCurVal : UserControl {
    #region TheValue (DependencyProperty)
    public int TheValue {
        get { return (int)GetValue(TheValueProperty); }
        set { SetValue(TheValueProperty, value); }
    }
    public static readonly DependencyProperty TheValueProperty =
        DependencyProperty.Register("TheValue", typeof(int), typeof(DispCurVal),  new PropertyMetadata(0));
    #endregion
    public DispCurVal() {
        InitializeComponent();
        linearBar.SetBinding(LinearBar.ValueProperty, new Binding() { Source = this, Path = new PropertyPath("TheValue") });
    }
}

Last not least – I didn’t write anything about RadBook we used to display our “game manual”. That is beyond the scope of this series. Just take a look at the telerik site. The control is “old” (which means well documented) and you’ll see that changing a (boring) scroll view with a manual (which nobody reads) to a great looking book is extremely easy with this control.
We did nothing more than to pull a list of objects (icon, topic, page content, and “page number text”) from a WCF service and bind this list to the RadBook.

I hope you enjoyed this series and maybe you’ve learned something new about the brand new and fantastic RadTransitionControl. By the way – the control can do more than that what I showed – give it a try.

And if you found this blog useful – take a look at our Promotion Game.
Although I used the game as an example in this blog – the thing is live; it is working and you can really play it and win prices.
It is “early stage” (maybe we find bugs) – but it’s no demo.
The game is a working thing which shall help us to promote our iPhone apps.

Support us by playing the game here – it is “early stage” but you can really win!

Thank you for reading
Manfred

Tags: , ,

telerik | Silverlight | iPhone

Cool look out of the telerik box

by ManniAT 6. April 2010 13:33
Technorati-Tags: ,,

This series is about a promotion game we built to support our iPhone apps.
You can play the game here – it is “early stage” but you can really win!

Like explained in the previous posts of the series we’ve been building a promotion game for our iPhone apps.
The facts:

  • We have skills on “game mechanics”
  • We have skills on “infrastructure”
  • We have skills on Silverlight
  • We are everything else than designers

Fortunately telerik introduced a new control the RadTransitionControl which helped us a lot with our project.
I already did some work with the RadGauge and the game has a part where this control could help.

Lets talk about this step first. Part (main) of the game is that you (the player) spread information about the promotion. As I wrote before we use twitter as “transport” for this. For us it is important that as much people as possible get informed about the game / product. To motivate the player to spread the news we offer promotion codes as prices.
Each promotion code has its own “win counter” – a number which must be reached to win.
We measure “how much” a player spreads the information via his "follower counter”. Depending on this value (we have limits and calculations behind it) we raise the “Promo code counter”.
The reason that every code has its own counter is to bring some kind of “dynamics” into the game.
The player never knows the number of points needed to reach the goal.

Anyhow – to give the player some feedback we decided to use a RadGauge to display the percentage of the current counter. RadGauge has some kind of animation built in which animates the “needle / bar” when the value changes. But in our scenario this was not enough. As I told before we use a WCF Service to query twitter. This can be a bit (Seconds) time consuming.

From the client perspective two things happen: The search (takes time) and the display of a new value.
I had the idea to simulate some kind of “tuning thing” while we retrieve the new information.
Maybe you remember old films where an actor hits his (monochrome) TV to get a better display.
The display “flickers” and after some time (punches) it becomes sharp. You may have also seen effects like this in “Space Movies” when the video link to the starship is bad.
I think an effect like this reflects best what’s going on behind the scenes – we have “un-sharp” information about the current value and we try to get better ones. Here is what I mean:

TE

We have 3 “pages” in the solution – First a manual, next the game itself and last not least a “popup” when we found a result.
The next thing we wanted to achieve was a “page transition”. Silverlight offers things for this – but RadTransition impressed me so much that I decided to do this also with that control.

We need such a “page transition” 2 times – once when the user starts the game (from manual to game) and a second time when the user clicks the “help button” (from game to manual).

And we need some kind of “popup” to display the game result a soon as we find the entry (tweet made by the player) in twitter.

The popup was very easy – we just used a RadWindow changed its style (we need no border or things like this) and called the “ShowDialog” method of the window.
The window contains a user control with the information. It also has two buttons OK / Cancel. OK ends the game, Cancel keeps the game open (with limited functionality). And the content of the popup depends on what happened. The player won, he did not win, he spammed…
For this our user control offers a function to set the information (yes no binding Happy).

As you may know everything (almost) in Silverlight is asynchronous. So RadWindow will not stop the calling thread. Instead it will fire an events when something happens. For us it is important to know when the window closes. There we have to find out if the user clicked OK or Cancel. Here is the window markup:

Snippet created with CBEnhancer
<telerikNavigation:RadWindow x:Name="rwFoundInfo" CanClose="True" CanMove="False" ResizeMode="NoResize" WindowStartupLocation="CenterOwner" Style="{StaticResource RWInfoStyle}">
    <local:FoundInfoDisplay x:Name="fdFoundDisplay" />
</telerikNavigation:RadWindow>

In code behind we do:

Snippet created with CBEnhancer
    rwFoundInfo.Closed += new EventHandler<WindowClosedEventArgs>(rwFoundInfo_Closed);
    fdFoundDisplay.SetInfoText(strResult, strResultInfo, App.ThePromoInfo.CodePrompt, strCode, App.ThePromoInfo.OKInfo, App.ThePromoInfo.CancelInfo, App.ThePromoInfo.PromoImage, App.ThePromoInfo.PromoTitle);
    rwFoundInfo.ShowDialog();
}
void rwFoundInfo_Closed(object sender, WindowClosedEventArgs e) {
    if(e.DialogResult.HasValue && e.DialogResult.Value) {
        HtmlPage.Window.Navigate(btnResearch.NavigateUri);
    }
}

And the user control in the window does this to handle OK / Cancel:

Snippet created with CBEnhancer
private void btnOK_Click(object sender, RoutedEventArgs e) {
    RadWindow rW = RadWindow.GetParentRadWindow(this);
    rW.DialogResult = true;
    rW.Close();
}

private void btnCancel_Click(object sender, RoutedEventArgs e) {
    RadWindow rW = RadWindow.GetParentRadWindow(this);
    rW.DialogResult = false;
    rW.Close();
}

Very little code, and what we get is a modal (!!) popup which displays information.
OK – some code is not displayed here – it is the (stupid) transfer of values to control content in SetInfoText.
But this is “our problem” – we could have used bindings or other things.

Now back to the RadTransitionControl. We have a user control which holds the surrounding border the background image and the promotion title / icon. In it we display two different things – the manual and the game itself. It looks like this:
HolderManual HolderGame

Our goal was to have two different transitions – one for manual ==> game and the other for game ==> manual.
Here is what I mean (static):

HolderTrans1 HolderTrans2

To do this we needed a bit of code – first the markup (part of it) from the “holder”:

Snippet created with CBEnhancer
<telerik:RadTransitionControl Grid.Row="1" Grid.ColumnSpan="2" x:Name="rtcTrans" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="3,0,0,0">
</telerik:RadTransitionControl>

In Code behind we do the following:

Snippet created with CBEnhancer
public MainPage() {
    InitializeComponent();
    m_fwPTrans = new FlipWarpTransition();
    m_rtTrans = new RollTransition();
    rtcTrans.Transition = m_fwPTrans;
}

We create two “transitions” and assign one to the RadTransitionControl (Manual to Game).
Have a look at the telerik demos to see these animations live.

Snippet created with CBEnhancer
private void UserControl_Loaded(object sender, RoutedEventArgs e) {
    btnHelp.Visibility = Visibility.Collapsed;
    m_ucInfoPages = new InfoPages();
    m_ucInfoPages.StartClicked += new InfoPages.StartClickedDG(ucInfoPages_StartClicked);
    rtcTrans.Content = m_ucInfoPages;
}

void ucInfoPages_StartClicked() {
    if(m_gIC == null) {
        m_gIC = new GameInnerContent();
    }
    rtcTrans.Transition = m_fwPTrans;
    rtcTrans.Content = m_gIC;
    btnHelp.Visibility = Visibility.Visible;
}

private void btnHelp_Click(object sender, RoutedEventArgs e) {
    rtcTrans.Transition = m_rtTrans;
    rtcTrans.Content = m_ucInfoPages;
    btnHelp.Visibility = Visibility.Collapsed;
}

First we hide the “help button” (not needed when we display the manual). Next we create the manual user control assign a handler for the StartButton and simply set it as content of the RadTransitionControl.
The button handlers (Start / Help) are also very easy. They set the wanted transition and assign the Content to the RadTransitionControl. This (content changed) starts the transition automatically.

There is no hidden code or other “magic behind” – except (of course) the one provided by telerik.

As I told you before – the RadTransitionControl if “beta” (CTP) so there are some things missing at the moment. But it is very easy to implement those parts. We needed to do this for our “fade effect”. The things are (a little bit) tricky – so I made an extra post about that.

Stay tuned
Manfred

Tags: , ,

iPhone | Silverlight | telerik

Infrastructure and RadGrid

by ManniAT 5. April 2010 20:39

This series is about a promotion game we built to support our iPhone apps.
You can play the game here – it is “early stage” but you can really win!

As I told in the post before I’ve built a promotion game using some telerik Silverlight Controls.

But let me start with some basics about the game.
One of the goals is to localize it. I know a bit English (my blog proof how bad it is) and (a bit more) German.
So I decided to build the game in those two languages.
This also follows the website where the game is hosted: http://iphone.pp-p.net

The database freaks will hate me for this – but I decided to use a “un-normal” table to fulfill my localization needs. This makes the things easy – but handling the things (many columns) is a bit uncomfortable.

Again the basics – I have to place text on my UI. This should be (at least a bit) formatted.
So I built a little “formatter” in Silverlight which is able to handle some (very basic) HTML.
As you’ll see later RadGrid provides a HTML Editor which (by default) has Bold, Underline, Italic, and Strike through as a “Attribute Buttons”. For my needs this is enough.
Bold, Underline and Italic do what they should – and Strike makes blue text.

Let me show you an example of the result:
FollowMe  FollowMeDE

As you see we have two things – the Button Text – and a description (a bit formatted).
This goes on for (almost) every UI element in the game.

The other thing is the “Game Manual”. It has limited Space, wrapping and so on.
What I wanted was to see how it will look in Silverlight when I edit it in my RadGrid.

The solution – in both cases is almost the same – and it’s easy.
I have to manipulate the “Grid generated” HTML Editor.
Let’s start with the manual:

The table looks like this: ID, LanguageCode, PageNumber, PageTopic, PageContent

The result is something like this:
ManualPage  EditManualPage

As you can see both (the result and the editor) have the same dimensions and line breaks.
So how long did it take me to build this thing?

Since the editor is part of a bigger project a build takes about 30-45 seconds. And I had to build the thing several times since I adjusted the width by “trial and error” until the line breaks were similar.

Using RadGrid it took me (including everything) about 7 Minutes Happy

Step by Step:

  • Create a new page
  • Drag a Linq2SQL Datasource, RadScript and RadAjaxManager to it
  • Drag a RadGrid to it (and add it to the AjaxManager)
  • Choose the data source for the RadGrid
  • Change telerik:GridBoundColumn to telerik:GridHTMLEditorColumn for the PageContent column
  • Add EnableAutomaticUpdates=”true” to RadGrid
  • Add a handler for OnItemDataBound to the grid
  • Code the handler (see below)
  • Build – Run - Check the size
  • Adjust the size
  • Build – Run – Check the size
  • DONE – I got a WYSIWYG editing tool for my manual pages!!

Snippet created with CBEnhancer
protected void rgPromoManual_ItemDataBound(object sender, Telerik.Web.UI.GridItemEventArgs e) {
            if(e.Item is GridEditableItem && e.Item.IsInEditMode) {
                GridEditableItem item = (GridEditableItem)e.Item;
                RadEditor editor = (RadEditor)item["PageContent"].Controls[0];
                editor.Width = 222;
                editor.Height = 320;
                editor.ContentFilters = EditorFilters.ConvertToXhtml | EditorFilters.FixEnclosingP;
            }
        }

The handler changes the ContentFilters and the dimensions of the “Grid generated RadEditor”.
I had to change the Filters to avoid “extra good” formatting – which I don’t handle.
For an example it would (normally) change the U tag to a span with a style and other things like this.

Now to the “un-normal” UI texts. Here I have a lot of columns – most of the need “basic HTML” formatting.
A short look at the table: ID, PromoName, LanguageCode, FollowMeText, FollowMeTextInfo, SpreadText, SpreadTextInfo, ResearchText, ResearchTextInfo, QuestionText, QuestionTextInfo, Question1Text, Question2Text, Question3Text, CurPercentInfo,…

OK – hate me for “un-normal” table design Cool

How long did it take to build an editor for this?
It was less than for the manual – I saved time since I had no need for “fitting line breaks”.
The steps are almost the same as before – except:

  • Change telerik:GridBoundColumn to telerik:GridHTMLEditorColumn for a lot of colums
    I did it with “Search and Replace” in “Selection” after marking the colums
  • Changed the layout to two colums (to avoid massive scrolling)
  • Adding EditFormColumnIndex="1" to every second colums (copy and paste of course)
  • Copy all GridHTMLEditorColums to the code behind files
  • Using an “add hoc macro” to extract the UniqueName="LanguageCode" from every column
  • Change the code handler (see below)
  • DONE
Snippet created with CBEnhancer
private static string[] aEditorIDs ={"FollowMeTextInfo", "SpreadTextInfo", "ResearchTextInfo", "QuestionTextInfo", "Question1Text",
                                        "Question2Text", "Question3Text", "CurPercentInfo", "ResultTextInfo", "ResultSearching", "ResultFound",
                                        "ResultWon", "ResultSpam", "OKInfo", "CancelInfo", "CodePrompt", "WonInfo", "SpamInfo", "FoundInfo" };

protected void rgPromoTexts_ItemDataBound(object sender, Telerik.Web.UI.GridItemEventArgs e) {
    if(e.Item is GridEditableItem && e.Item.IsInEditMode) {
        GridEditableItem item = (GridEditableItem)e.Item;
        foreach(string strColumnID in aEditorIDs) {
            RadEditor editor = (RadEditor)item[strColumnID].Controls[0];
            editor.Width = 330;
            editor.Height = 120;
            editor.ContentFilters = EditorFilters.ConvertToXhtml | EditorFilters.FixEnclosingP;
        }
    }
}

The result looks like this:

EditInfoTexts

Conclusio:
Using the telerik RadControl for ASP.NET AJAX it took me less than 15 Minutes to build two “WYSIWYG” editors for my game content.

One trick I forgot to tell you – since my Silverlight formatter uses Strike to show blue text I had to change a style in the containing page – here the code:

Snippet created with CBEnhancer
strike
{
    text-decoration:none;
    color:Blue;
}

That’s it for this part.
In the next part I’ll talk about linq2twitter and how easy it is to use this nice thing.
Then I’ll handle the rest of the infrastructure – WCF and a few other things.
After this the part about the (partial) new telerik Silverlight Controls will be handled.

Stay tuned
Manfred

Tags: ,

telerik | Silverlight

Online games – promotion, social marketing and my “bad hands”

by ManniAT 5. April 2010 19:21

This post is the introduction of a number of blog posts. To make it easier for you to find the parts you are interested in – here are the topics:

Years ago we did a large multiplayer online game for a customer.
It was built with Flash MX, Microsoft IIS 6 and Microsoft SQL Server 2000.

This development was real a pain – the reason – our customer had his “very special” design ideas.
In other words – for him at least 10 different fonts, 20 different colors (magenta also) and a brutal mixture of foreground / background colors was “the state of the art”.

We made some “good old style” proposals – but last not least what we could do was not “impressive”.
We joined the team after two other companies failed – and what we found was a “rough idea”, a flash developer (building those “multicolored” things our customer likes), a professional composer for music, some lawyers, and so forth.

Anyhow – about two months later the “rough idea” turned into a “highly configurable promotion engine” and the flash films handling static content turned into a thing which was controlled  via web services driven by a SQL Server.

That was the time we had to learn flash because it turned out that the flash developer was a “picture drawer” not really able to do action script and handle web service calls.
And after a short time (we also did the flash part at this time) a professional designer joined the team.

Unfortunately Silverlight didn’t exist at this time – and the separation of code / design was really hard.
But we built our own layers and so finally the designer made the film parts – and we revived them.

2006 we have been nominated for “BestPractice-IT” at CeBIT for this software!

This game was a kind of “social marketing toy” – and from it we learned two things:
Game mechanics – how an what people play.
Design is a hard thing Happy

To come to a point – so far we made three iPhone apps which sell… – let’s say they could do better Cool

We decided to do some kind of promotion. After some discussions we decided to build a little game to do this.
And we know – design is not our strength. The goals are:

  • Show a lot of people our software
  • Build the thing in a short time
  • Give the players an even chance to win something
  • Use existing skills / tools

The solution was to do something with twitter. We already have some routines from an earlier project I made.
Messing around with it (we needed to extend it) I stumbled over LinQ2twitter.

I want to thank Joe Mayo for this great piece of software.

Next we decided to use some new (and also “well known”) telerik controls.
Telerik has a new (CTP) control in their Silverlight Controls the RadTransitionControl.

This nice guy compensated some of our “design lacks”. Further we used the RadBook to show the game rules.
And (of course) for infrastructure needs we used the RadGrid for ASP.NET AJAX.

Since the RadTransitionControl is very new (CTP) I will show how to use this thing to achieve great effects without any “designer skills”.

I will divide the things in multiple parts – the first will be about infrastructure and I’ll show how I was able to build a “WYSIWYG” editor for game content.

Stay tuned
Manfred

Tags: , ,

Silverlight | telerik | twitter

Layered UI or how to reuse UIs with MonoTouch and Silverlight

by ManniAT 29. March 2010 12:23

When we started the development of TTMoney one of our main goal was a “UI Designer” which should enable the User to change the look of his UI.
Think of it like “dynamic Themes”. Themes mean – I choose one and my colors, fonts, backgrounds, … change their style.

We wanted to go a step further an let the user compose his UI using a web interface.
Due to our skills we decided that this designer should be built using Microsoft Silverlight.

Since we use MonoTouch for our iPhone applications it is not really hard to share a lot of code.

The only challenge is the UI itself. For the iPhone we use (could use) the interface designer and for Silverlight we got Microsoft Expression Blend.
Sounds good – but it is unfortunately totally different. Not only from “how to use” – the output is the problem.

So one idea was to build a XIB – File parser (XIB files are what the Interface Designer generates) or a XAML (Blend output) file parser.

We decided NOT to build such a thing. Instead we designed our UIs to use a layered design.
This means: we have a “native UI layer” which mimics for an example the differences between a UIImageView (iPhone) and an Image Control (Silverlight).
This layer has to be changed when we transfer an iPhone UI to Silverlight.

Such techniques are well know form DALs (Data Access Layer). Using generics and some abstract methods and extensions it was not really hard to do this.
The only limitation is that MonoTouch has to compile all the .NET code (no Generic Methods and things like this) to native iPhone code.

Anyhow – this was not really a stopper. Especially Generics work very well and the rest is nothing more than to avoid some C# (.NET) elements.

Most of the “basic layer” work by translating controls (UIView becomes a Canvas for an example) and Property setters.
myUIView.AddSubview(ControlX) becomes myCanvase.Children.Add(ControlX).
And instead of setting the Frame (iPhone) we set “CanvasLeft, CanvasTop” and so on.

The abstract methods enable the framework to do enhanced things like animating something or things like this. While I start a storyboard in Silverlight I add a transition or something like this for the iPhone.

Above that layer a set of Generics are implemented. For an example – it’s an often asked question “how to have a background image in a UITableView…”. We have BackGroundViewController<TableViewController> for this.

We build our UIs completely in (reusable) code.
Negative: No rich UI designer.
Positive: It is more or less “platform independent” and it enables the things to be driven by a database.

Last not least Microsoft has Silverlight for Windows Phone 7 – and that means (with very little work) that our application will also run on this platform.

A simple example is this (very basic) Silverlight implementation of the “UI Themer”:
SLDesigner

A note about this “designer” – we’ve used the Telerik Silverlight Controls for it. And that shows how independent you could be if your “UI Layers” are well done.
We could have done the same thing using native Silverlight controls – but why if we have an easy way to use these enhanced Telerik  things.

We made this framework for TTMoney but while building this project we had the need to build another app.
This is Sticker and uses the Framework built for TTMoney.

Which brings me to my answer to Shawn Burke's great Blog Series.

I like what he wrote – except the “code line counting”. I fact most of the code is there to make the things work.
And if I calculate how much money you have left it does not matter if this is Windows Mobile 7 or iPhone code.
Building Sticker was about 200 Lines of UI code – the rest is “business logic”.
And for TTMoney we have ration of about 8.5 BL to 1.5 UI.

Of course – in both cases we have several hundred lines of code for the “UI Framework” – but this is totally reusable and will work in future projects also.

From my point of view the more important thing is how to handle “mobile specific” things in Windows Mobile 7 / iPhone.

Just as an example – Sticker allows you to send your “existing / missing lists”.
In MonoTouch the code looks like this:

Snippet created with CBEnhancer
void m_hbDoSendMail_Click(object sender, EventArgs e) {
        if(MFMailComposeViewController.CanSendMail) {
            MFMailComposeViewController mail = new MFMailComposeViewController();
            mail.SetMessageBody(m_strLastText + m_strStickerLink, true);
            mail.Finished += HandleMailFinished;
            this.PresentModalViewController(mail, true);
        }
    }
    void HandleMailFinished(object sender, MFComposeResultEventArgs e) {
        e.Controller.DismissModalViewControllerAnimated(true);
        if(e.Result == MFMailComposeResult.Sent) {
            Globals.MessageBox("Info", ULocalizer.ULOC["ZS_MailSent"].TheText);
            CloseDialog(false);
        }
        else {
            Globals.MessageBox("Error", ULocalizer.ULOC["ZS_MailSendError"].TheText);
        }
    }

 

I hope Shawn Burke will keep on extending his iPhone SDK vs. Windows Phone 7 Series SDK Challenge.

A last note – of course I’m not comparing with Objective-C – I talk about MonoTouch – but it is an existing technology – so why don’t use it.

Manfred

Tags: , , ,

iPhone | MonoTouch | Silverlight | telerik

MonoTouch in Visual Studio

by ManniAT 18. November 2009 18:31
Technorati-Tags: ,,

After doing my first steps with MonoTouch using MonoDevelop I decided that this is not they way I want to work.

First the MacBook - Shit+Alt+7 for Backslash At wits end

I added an external keyboard plus keyboard layouts to my MacBook, I changed CTRL / OPT / COMMAND…
But there are still things I really hate.
You press “End” – which brings you to the end of the file.
Ctrl+Left is not a word left – it’s beginning of line – and so on.

This turns my productivity down.
I worked with Windows for more than 17 years (mostly with the keyboard) – and you often see me typing:
Shift+Ctrl+Left, Shift+Ctrl+Left, Ctrl+C, Down, End, Ctrl+V….

Further MonoDevelop has problems with multiple screens.
Refractoring is poor, I miss: addons, instant macros, splitting windows,…

I decided to look for a different solution and found that Visual Studio can open MonoTouch projects (solutions).
The only problems:

  • An error because of an unknown project type (removing one line from .csproj fixes this)
  • A missing reference to monotouch.dll

To fix this I wrote a little program which creates a Visual Studio solution from a MonoTouch Solution.
It also adds a csproj.user to include a reference path where I place my monotouch DLLs at the PC.
You can find those DLLs at “Mac Harddrive\Developer\MonoTouch\usr\lib\mono\2.1” (2.1 or other version).

I place my MonoTouch projects on a shared volume – so I can have them open in VS for editing – and in MonoDevelop (on my Mac) for building / testing / design (XIB) at the same time.

One problem is left with this solution: I need my Mac to “error check compile” my solution.
Some errors are seen by Visual Studio – some not (since I can’t build in VS).

The solution for this comes from telerik – it is called JustCode.

I already use JustCode (as Telerik MVP I was on the internal beta) and I love it.
I never thought this tool could help me with my iPhone development – but I learned that it does this job very well.

Beside the other cool features JustCode brings to Windows Development it also analyzes the code you enter.
It finds (and helps you to solve) problems / error without the need to compile your project.

Once again telerik made my live much easier Happy

JustCode is “open beta” now – so you can download the JustCode for free.
It is “just a refactoring tool like the others” – with one big difference: incredible speed!!!

You can download my little tool (.NET 3.5 WinForms) from here:
VSMTouch (Setup.exe + MSI) 400k
VSMTouch (MSI only) 200k

Update Version that supports multiple projects in one solutin: VSMTouch (Setup + MSI ) 400k

This software is provided “as it is” – no support,….

Getting started:

  1. Install VSMTouch
  2. Create a “RefLibs” directory somewhere on you PC
  3. Copy the MonoTouch DLLs from you Mac to this directory
  4. (optional) Download JustCode from telerik
  5. (optional) Install JustCode
  6. Run VSMTouch
  7. Select the directory where you placed you MonoTouch DLLs as “Reference Path”
  8. Select you MonoTouch solution
  9. Click Create
  10. Open the new oldname$VS.sln solution in Visual Studio

 

Have Fun
Manfred

Tags: ,

MonoTouch | telerik

A Micro CMS in 15 Minutes

by ManniAT 3. September 2009 22:48
Technorati-Tags: ,,

I often need to add code snippets to a web page and to change content from somewhere (PDA).
Further (you may have noticed) my English is not the best – so spellchecking is essential for me.

For this reason I decided to built a framework which enables me to do:
  • WebPage content editing
  • Spell checking
  • Insert colored formatted Code (Snippets)
  • Insert and upload images

To achieve this I used the telerik RadControls for ASP.NET AJAX.

And with the help of this suite it takes only about 15 minutes to fulfill the point from above.

I made a video about it (ok 30 Minutes but I explain a lot and (bitter) have to reduce my 3 screen environment to a small area of about 1000x700 pixels). Normally I use 1900x1200 on my main screen – and have the tool windows on a second screen.
This means (a lot) less scrolling and tool window switching Happy

Here is the video (30 minutes)

You can download the code from the telerik code library as soon as it passed screening.
And if you don’t own the controls simply download the full functional trials from telerik

Have fun
Manfred

Tags: , ,

telerik

Hello, you fool, how… follow-up

by ManniAT 21. April 2009 21:10
Technorati-Tags: ,,

Two things to finally close the series about the server dashboard.

First: In Part 3 / 5 I described my problems with the “unexpected dispose”.
This dispose is a (weakly documented) feature of WCF.
I started a thread in the MS forums about it and finally go the answer.

And here is the solution for this project.

First you can remove all “dispose avoid code” from the class PerfInfos

This is:

The private member on top of the class (remove it):

//avoid dispose for cached object!
private bool m_bIamInCache;

 

Next compile and follow the errors (also a way to fix code Big Grin):

Revome the following functions:

//create object for cache
public PerfInfos(bool bInit, bool bImInCache) {
    m_bIamInCache = bImInCache;
    m_dtLastRead = DateTime.MinValue;
    ErrMess = "OK";
    if (bInit) {
        if (InitCountersAndTotalRAM()) {
            ReadCurValues();
        }
    }
}
//cleanup for no longer cached item
public void CleanUp() {
    m_bIamInCache = false;
    Dispose();
}

And the first three lines from Dispose:

public void Dispose() {
    if (m_bIamInCache) {    //do not dispose cached objects!!
        return;
    }

Here is the code for the service:

[OperationContract]
[OperationBehavior(AutoDisposeParameters = false)]
public string GetPerfString() {
    return (GetCachedPerfInfo().ToString());
}

[OperationContract]
[OperationBehavior(AutoDisposeParameters = false)]
public PerfInfos GetPerfInfo() {
    return (GetCachedPerfInfo());
}
private static PerfInfos GetCachedPerfInfo() {
    Cache cH = HttpRuntime.Cache;
    if (cH == null) {
        return (new PerfInfos() { ErrMess = "No Cache" });
    }

    PerfInfos pI = cH["PerfInf"] as PerfInfos;

    if (pI == null) {
        //pI = new PerfInfos(true, true);    //be sure to creat "cache stable instance" NO LONGER NEEDED
        pI = new PerfInfos(true);    //use the normal (with init) constructor
        cH.Insert("PerfInf", pI, null, DateTime.Now.AddMinutes(20), Cache.NoSlidingExpiration,
            CacheItemPriority.Default, RemovedCallback);
    }
    pI.LockedReadCurValues();
    return pI;
}

public static void RemovedCallback(String strKey, Object oValue, CacheItemRemovedReason rEason) {
    PerfInfos pI = oValue as PerfInfos;
    if (pI != null) {
        //pI.CleanUp();    //calls dispose for a "cache stable object" NO LONGER NEEDED
        pI.Dispose();    //simply use a dispose
    }
}

 

The second reason for this follow-up is that I want to inform you that the code is finally available at the telerik website:
You can find it a the code library.
And you should also read the optimization suggestions Andrey Murzov made there.

Tags: , ,

telerik

Powered by BlogEngine.NET 1.5.0.7

RecentPosts