Imagos Consulting Weblog

Developers Cant Do Design (or Can They?) – Neville Richards Personal Blog

Recovering WordPress Posts

If you ever have to retrieve WordPress posts from a MySQL database the following query may be handy:

SELECT wp_posts.post_title as Title, wp_posts.post_date as DATE,
GROUP_CONCAT(wp_terms.name) AS TAGS, wp_posts.post_content as CONTENT FROM wp_terms
INNER JOIN wp_term_taxonomy ON wp_terms.term_id = wp_term_taxonomy.term_id
INNER JOIN wp_term_relationships ON wp_term_taxonomy.term_taxonomy_id = wp_term_relationships.term_taxonomy_id
INNER JOIN wp_posts ON wp_posts.ID = wp_term_relationships.object_id
WHERE post_type LIKE 'post' AND post_status LIKE 'publish' GROUP BY wp_posts.ID order by post_date

I would recommend the WordPress interface layer for general application access to a WordPress database.

Advertisements
Leave a comment »

Using Oracle Weblogic with Amazon Web Services

Amazon Web Services have some great features if you are looking for a cloud based solution. If you are looking to install an Oracle Weblogic stack things can be a bit more challenging. In the next few articles I will present some tools to make installing and running Weblogic under AWS a bit easier.

If you are looking for an enterprise scale setup using a configuration management tool such as Chef will give you more flexibility. Chef uses Ruby based code modules called recipes to install and setup software for you.

The Oracle Weblogic installer can’t be downloaded directly from the Oracle web site easily so I suggest downloading the version you need and storing it in an AWS S3 bucket to make the setup easier.

The Weblogic installer is a Java package, so you will need to have Java installed on your EC2 instance. If you are using Chef you can make the Weblogic installation recipe dependent on the Java installation recipe.

Normally the Weblogic installer will use a GUI to control the installation. For spinning up a Ec2 instances automatically the GUI setup is not very practical. Fortunately the installer also has a silent installation mode.

Weblogic silent installation mode:

java -Xmx1024m -d64 -jar "weblogic package file" 
    -mode=silent 
    -silent_xml="weblogic_response_file"

Weblogic installer response file template:

<?xml version="1.0" encoding="UTF-8"?>
<bea-installer>
  <input-fields>
    <data-value name="BEAHOME" value="<%= @wlhome %>" />
    <data-value name="WLS_INSTALL_DIR" value="<%= @wl_install_dir %>" />
    <data-value name="COMPONENT_PATHS"
                value="WebLogic Server/Core Application Server|
WebLogic Server/Administration Console|
WebLogic Server/Configuration Wizard and Upgrade Framework|
WebLogic Server/Web 2.0 HTTP Pub-Sub Server|
WebLogic Server/WebLogic JDBC Drivers|
WebLogic Server/Third Party JDBC Drivers|
WebLogic Server/WebLogic Server Clients|
WebLogic Server/WebLogic Web Server Plugins|
WebLogic Server/UDDI and Xquery Support|
WebLogic Server/Server Examples|
Oracle Coherence/Coherence Product Files" />
  </input-fields>
</bea-installer>

In the next part I will put these pieces together into a basic Chef recipe that you can use to install Weblogic.

Please ensure your Oracle licensing is correct for your application.

Leave a comment »

JavaScript Coding Standards

Google have already invested a lot of smart-people time and money developing a best practices guide for JavaScript. Where possible, this is the best guide to follow for generic JavaScipt.

http://google-styleguide.googlecode.com/svn/trunk/javascriptguide.xml

Leave a comment »

Site Performance Testing (Part 2) – Weblogic

Jvisualvm is a great tool for looking at various aspects of Java application performance. When you are running your application on an application server such as Weblogic it can be more difficult to use. The steps below allow you to attach Jvisualvm to a remote instance of Weblogic

You either need to run jstatd on the remote side, or specify a JMX connection using host:port.

Jstatd:

jstatd -J-Djava.security.policy=permissions.txt [-p port]

After that: add a remote connection to the target machine, and on the properties of that remote connection configure the jstatd connection.

(permissions.txt contains for example this:

grant {
  permission java.security.AllPermission;
};
  1. ssh -D 9696 me@remote, and run jstatd as above on the remote command line. If you want jstatd to be on a different port than the default 1099, use the -p argument to jstatd.
  2. run visualvm.exe -J-Dnetbeans.system_socks_proxy=localhost:9696 -J-Djava.net.useSystemProxies=true on the local machine

in visual vm: add new remote connection, and specify remote as host and the port for jstatd (1099 for default, or what you specified with -p when running jstatd)

You should now see the processes on the remote side in visualvm

To connect JMX to weblogic

Add the following JVM parameters to your Weblogic startup scripts:

-Dcom.sun.management.jmxremote -Dcom.sun.management.jmxremote.port=8888 -Dcom.sun.management.jmxremote.ssl=false -Dcom.sun.management.jmxremote.authenticate=false

and restart the server. You’ll be able to connect remotely via JConsole/VisualVM/etc at host:8888 then

Leave a comment »

Site Performance Testing (Part 1)

There are a number of approaches to getting performance metrics for a web site. Ultimately web site performance should be best gauged by the page response within a client browser.

Using a collection of available tools such as Firefox, Firebug and Harlog you can get a realistic baseline of your expected site performance. This approach leverages Firefox and Firebug to collect data on site performance. Using Firebox to fetch pages from the site gives results that would be similar to those seen by visitors. Firebug is used to collect detailed metrics on page performance.  NetExport is a plug-in for Firebug that lets to send Firebug results to a data receiving service. Harlog is used as a data reciever to  collect metrics and to generate a tab delimited file that can be used to generate reports in Excel or another reporting tool.

Install Firefox, Firebug, NetExport and Harlog on a test PC.

Setup Harlog by downloading the latest files from http://www.imagossoftware.com/harlog/ and copying them into a suitable directory. For this example I will use c:\harlog. Create a directory under c:\harlog also called logs. Edit the HarLog.exe.config file and create a series of XML format settings between the tags. These settings are:

<add key=”directory” value=”C:\harlog\logs”/>
<add key=”output” value=”c:\harlog\results.txt”/>
<add key=”header” value=”all”/>
<add key=”style” value=”basic”/>

Now you can run the HarLog.exe with a -w switch to run as a mini-web server.

Now launch Firefox, and go to about:config (this will allow you to change the beacon URL for NetExport to send data to HarLog). Find the preference setting for extensions.firebug.netexport.beaconServerURL and if you have installed HarLog locally set the value to http://localhost:9090/ also set extensions.firebug.netexport.autoExportToServer to true. If are running HarLog on another PC or port set the address appropriately.

Next launch Firefox go to your test site, and open the Firebug window and go to the Net panel. Under the “Export” activate “Auto Export”. This will send the results from the Firebug Net “waterfall” to HarLog each time a page from the site is loaded.

When you have completed your testing, import the “results.txt” file into Excel or another reporting application to format and or chart your site results. More in part 2

Leave a comment »

Twitterest – Silverlight Twitter Status

I have been using Twitter more lately to keep up to date with colleagues, family and friends. Twitter has a nice simple interface, and a good programming API. With all of this, I have written Twitterest to blend Silverlight, the Twitter REST API and some server side C# to cache the Twitter API responses.

Twitterest

Twitterest shows statistics for people in my “Following” group, including the number of posts that each has made, the number of people in their friends list and the the number of people following them. People are sorted by a selected criteria and the ranking is displayed in a spiral. The larger the count the further along the spiral and the larger the persons button is. Clicking on a criteria button loads the latest stats for that criteria.

The latest Twitterest can be found at http://www.imagos.fl.net.au/silverlight/twitterest/

Technorati tags:

1 Comment »

Building Silverlight Controls

To build applications using Microsoft Silverlight 1.0 you will most likely need some user interface controls. While the first release of Silverlight does not include any controls, other than a video playback control, the rich development framework will support building custom controls. The following custom controls can be used as the basis of a number of applications:

  • Button
  • Slider
  • Check box
  • Radio button
  • Edit box

Authoring Silverlight applications can be done using your favourite tool; Visual Studio, Blender, Notepad etc. Code fragments presented can be paste into an existing project. Each custom control example includes a XAML and Javascript template fragment that can be customised for your application.

Button

A button control is the simplest custom control to create in Silverlight. Any Silverlight object (UIElement), of collection of objects, can become a button by intercepting the “MouseLeftButtonDown” or “MouseLeftButtonUp” events.

The following example uses a rectangle and text block places on a canvas to create a simple button image:

XAML

	<Canvas Width="100" Height="35"
           Canvas.Left="211" Canvas.Top="54"
           x:Name="SimpleButton"
           MouseLeftButtonDown="buttonMouseLeftButtonDown">
           <Rectangle x:Name="SimpleButtonSurround"
               Width="100" Height="35"
               Fill="#FFECECEC"
               Stroke="#FF000000"
               RadiusX="5"
               RadiusY="5" />
           <TextBlock Width="58" Height="24"
               Canvas.Left="40"
               Canvas.Top="7"><Run Text="Ok"/></TextBlock>
	</Canvas>

 

JavaScript

    function buttonMouseLeftButtonDown(sender, keyEventArgs)
    {
	   alert("Hello world!");
    }

 

This button doesn’t provide any visual state indication. By adding handlers for the “MouseEnter” and “MouseLeave” events a basic mouse over can be built. By combining this with Silverlight animations a Windows Vista (aero glass) like button can be created.

Silverlight Glass Button

 

XAML

<Canvas
   xmlns="http://schemas.microsoft.com/client/2007"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   Height="480" Width="640">

   <Canvas.Resources>
     <Storyboard x:Name="GlassButton_glow_enter">
        <DoubleAnimationUsingKeyFrames
          Storyboard.TargetName="GlassButton_glow"
          Storyboard.TargetProperty="Opacity">
          <SplineDoubleKeyFrame KeyTime="00:00:00.30" Value="1" />
        </DoubleAnimationUsingKeyFrames>
      </Storyboard>
      <Storyboard x:Name="GlassButton_glow_leave">
        <DoubleAnimationUsingKeyFrames
           Storyboard.TargetName="GlassButton_glow"
           Storyboard.TargetProperty="Opacity">
           <SplineDoubleKeyFrame KeyTime="00:00:00.30" Value="0" />
         </DoubleAnimationUsingKeyFrames>
      </Storyboard>
   </Canvas.Resources>

   <Canvas x:Name="GlassButton"
       Canvas.Top="150" Canvas.Left="200"
       Height="34" Width="180"
       MouseLeftButtonDown="onMouseDown"
       MouseLeftButtonUp="onMouseUp"
       MouseMove="onMouseMove"
	MouseEnter="GlassButtonMouseEnter" MouseLeave="GlassButtonMouseLeave">

      <!-- Outer border of the button... just the stroke of the rectangle -->
      <Rectangle Width="180" Height="34"
          RadiusX="7" RadiusY="7"
          StrokeThickness="1" Stroke="#FFFFFFFF"/>

      <!-- Next in black border, and a somewhat opaque fill -->
      <Rectangle Canvas.Top="1" Canvas.Left="1"
          Width="178" Height="32"
          RadiusX="6" RadiusY="6"
          Fill="#7F000000" Stroke="#FF000000" StrokeThickness="1" />

      <!-- Radial gradient to give a glow to the button when rolled over -->
      <Rectangle x:Name="GlassButton_glow"
         Canvas.Top="2" Canvas.Left="2"
         Width="176" Height="30"
         RadiusX="5" RadiusY="5" Opacity="0">
         <Rectangle.Fill>
            <RadialGradientBrush>
               <RadialGradientBrush.RelativeTransform>
                  <TransformGroup>
                     <ScaleTransform ScaleX="1.702" ScaleY="2.243"/>
                     <TranslateTransform X="-0.368" Y="-0.152"/>
                  </TransformGroup>
               </RadialGradientBrush.RelativeTransform>
               <GradientStop Color="#B28DBDFF" Offset="0" />
               <GradientStop Color="#008DBDFF" Offset="1" />
            </RadialGradientBrush>
         </Rectangle.Fill>
      </Rectangle>

      <TextBlock x:Name="GlassButton_text"
          Canvas.Left="50" Canvas.Top="5"
          Foreground="#FFFFFFFF" Text="Glass Button" />

      <!-- over the top of part of the text is a lighter opaque gradient,
           clipped to the top half of the button -->
      <Rectangle Canvas.Left="2" Canvas.Top="2"
         Width="176" Height="30" RadiusX="5" RadiusY="5">
         <Rectangle.Fill>
            <LinearGradientBrush StartPoint="0.494,0.028"
               EndPoint="0.494, 0.889" >
               <GradientStop Color="#99FFFFFF" Offset="0" />
               <GradientStop Color="#33FFFFFF" Offset="1" />
            </LinearGradientBrush>
         </Rectangle.Fill>

         <Rectangle.Clip>
            <RectangleGeometry Rect="0,0,176,15"/>
         </Rectangle.Clip>

      </Rectangle>

   </Canvas>

</Canvas>

 

JavaScript


function ClickMe(){
   alert("ClickMe");
}

function GlassButtonMouseEnter(sender, args){
   var sb = sender.findName(sender.Name + "_glow_enter");
   sb.begin();
}

function GlassButtonMouseLeave(sender, args){
   var sb = sender.findName(sender.Name + "_glow_leave");
   sb.begin();
}

In the next I will look at building a simple slider control.

Tags:

Leave a comment »

3D Spinning Logo in Silverlight

Breeze Designer, which is a a 3D modeler I wote as a graphical modeler and front end to the popular POV-Ray ray tracer and also a long term hobby project of mine, is being extended to be able to handle a number of new technologies including Microsoft’s Silverlight. As part of this I have created a simple 3D spinning logo of the CGI Australia company. I have posted a sample animation at http://www.imagos.fl.net.au/silverlight/cgi/ The logo was originally created in Adobe Illustrator then imported into Breeze Designer where it was animated into a 3D the spinning version.

Technorati Tags:

1 Comment »

Hello world!

Hi to everyone from me, Neville Richards. This is my new blog on the world of Microsoft Technologies and 3D including Silverlight, Sharepoint and Breeze Designer from a developers perspective.

I will be presenting a few real world tutorials over the next weeks to show how Microsoft’s Silverlight can be used to improve the user experience of sites without a complete site redesign. Hopefully blending some development with a little design in the process.

Leave a comment »