Installing SharePoint 2013 on Windows Server 2012 – Part 3

After installed SQL Server 2012 from part 2, is time to install SharePoint Server 2013.

Download SharePoint Server 2013 Prerequisites PowerShell Scripts

Even though SharePoint installer will install all the prerequisites via online, but I sometimes prefer that I have a copy offline, because I don’t like to waste my bandwidth to redownload the installers when I want to reinstall my SharePoint for some reason.

There are some PowerShell scripts available in TechNet download, which help us to achieve that. So, get the scripts from there and extract the zip file.

Read more…

 

Installing SharePoint 2013 on Windows Server 2012 – Part 2

After installed and configured Windows Server 2012 from part 1, is time to install SQL Server 2012.

Install SQL Server 2012

Insert the installer disc, mount the iso file or whatever, and wait for the auto run. On the SQL Server Installation Center screen, click Installation on the left side, and click New SQL Server stand-alone installation or add features to and existing installation

Read more…

 

Installing SharePoint 2013 on Windows Server 2012 – Part 1

Been working on SharePoint (not extensively) for some times now, and it’s kind of interesting and frustrating when come to setting things up properly, and I finally have chance to trial out the latest and greatest of Windows Server and SharePoint.

Prerequisites

  • Windows Server 2012
  • SQL Server 2012
  • SharePoint Server 2013 Preview

Install Windows Server 2012

This one would be the simplest of them all, boot the installer and install like Windows 7 or 8.

Read more…

 

Creating jQuery Plugin for RTE Intellisense

Was doing some proof of concept with RTE plugin like CKEditor or TinyMCE, and ended up with an interest to incorporate a text hints or intellisense for the editor.

At first I was trying to use the jQuery Autocomplete, but it tie to a input box, and RTE does not use input box, they use contenteditable DOM element like <body> inside an iframe. And I came across the amazing code editor CodeMirror that came with the amazing autocomplete feature that I was looking for, it pops up nicely where it meant to be, and performance was terrific, but I don’t want dependencies from any of CodeMirror’s code base, and reverse engineering isn’t my strength.

Read more…

 

Preparing Sencha Touch Apps for Production

During development, I, or perhaps most if not everyone will point the Sencha Touch SDK in the Sencha Touch folder, and the index.html usually looks like this (I don’t usually debug CSS):
[cc lang=”html4strict” escaped=”true”]
<html lang=”en”>
<head>
<title>Movie Mango</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
<script type=”text/javascript” src=”../sencha-touch-2/sencha-touch-debug.js”></script>
<script type=”text/javascript” src=”app.js”></script>
<link rel=”stylesheet” type=”text/css” href=”../sencha-touch-2/resources/css/mango.css” />
</head>
<body>
</body>
</html>[/cc]

In this setup, I pointing the Sencha Touch js file in the Sencha Touch SDK folder and also the CSS file I created for my own theming there. If I wanted to deploy this app on server, I can’t just copy the sencha-touch-debug.js out or sencha-touch-all.js out and update my index.html to point to that, it should be minified and optimized. Those brilliant guys in Sencha provided us with the neat little tool Sencha SDK Tools, that help us compile every classes that we need and, yes, basically everything that we need (by just going through our code, brilliant!) and put them all in one single minified JavaScript file, and that is what we need for deployment.

Read more…

 

Draw Things with Sencha Touch 2

As a retreat from my office workloads and other stuff, decided to do a quick apps with Sencha Touch 2, and an apps that can let user draw something to other user would be fun.

So the basic idea is simple, select a friend, and start to draw something, then send it to the friend, and the friend can “see” the drawing being drawn, just like Draw Something.

Read more…

 

Vertical center, finally!

Though I’m not a good web designer, but sometimes I do need to mockup some web pages or in charge for web design for my fellow unlucky internal user, and there is time that I want to center everything to center, such as login box, it will look nice to be centered.

But extra DOM, extra style, it always confused the hell out of me, and I don’t want to use <table> for layout, <table> not use for this purpose. But lucky enough, CSS3’s display:box came to save the life.

Center!

It’s dead simple to do that using the CSS3:
[cc lang=”css”]div
{
width:350px;
height:100px;
border:1px solid black;

/* Firefox */
display:-moz-box;
-moz-box-orient:horizontal;
-moz-box-pack:center;
-moz-box-align:center;

/* Safari and Chrome */
display:-webkit-box;
-webkit-box-orient:horizontal;
-webkit-box-pack:center;
-webkit-box-align:center;

/* W3C */
display:box;
box-orient:horizontal;
box-pack:center;
box-align:center;
}[/cc]

 

HTML5 Color Input

Finally, when I’m searching for some JavaScript libraries, I came across with some input box, that actually called up OS X color chooser dialog, so I checked with the W3Schools page, it appears that <input type=”color”> and <input type=”date”> now is supported in Google Chrome, which was not working last I check months back.

 

HTML5 new input type such as color and date actually do save some times on implementing client side validation, a simple input tag rather than coding some scripts to check. Input tag such as <input type=”email”> actually trigger the email layout keyboard in mobile devices, which allows user to key in email addresses more easily because of quick access to symbols that appears in email address.

 

iOS Style Navigation in Sencha Touch 2

Recently I’ve noticed that in iOS, the navigation animation for the title bar is more than simply slide in new screen from right to left, despite I’m using iPhone for few months now, I didn’t aware of the animation until I felt something different with the animation done by Sencha Touch, the attention paid to the detail made the whole screen switching much smoother.

Your browser does not support native video tag, that’s bad
(video quality might not be that clear, but still able to see the title bar animation)

It appears that Sencha Touch 2 provide a new component Ext.navigation.View, which according to the documentation, it’s a container with extra features. Using navigation view is a bit different than what I’ve done previously.

Another navigation animation I found different from iOS native and Sencha Touch is the tab panel switching, in Sencha Touch, it use the slide effects, while in stock apps in iOS, it don’t have animation, but this one is a quick fix in Sencha Touch.

So, as usual, we need the MVC folder structure, index.html, app.js and Viewport.js to get started. In this testing, I’m using tab panel on the viewport.

Read more…

 

Creating Mobile Apps with Sencha Touch 2 – Part 3

Continued from Creating Mobile Apps with Sencha Touch 2 – Part 2

Now that we have most of the things ready, just need to modify something to let the store sync (CRUD operation) back to server.

Uncomment the proxy in the Note store, and remove the dummy data.

app/store/Note.js
[cc lang=”javascript”]Ext.define(“SenchaNote.store.Note”, {
extend: “Ext.data.Store”,
requires: [“SenchaNote.model.Note”],
config: {
model: “SenchaNote.model.Note”, //need full name, weird
proxy: {
type: “ajax”,
api: {
create: “http://192.168.168.10:8888/SenchaNote/Note.php?action=create”,
read: “http://192.168.168.10:8888/SenchaNote/Note.php”,
update: “http://192.168.168.10:8888/SenchaNote/Note.php?action=update”,
destroy: “http://192.168.168.10:8888/SenchaNote/Note.php?action=delete”
},
reader: {
type: “json”,
rootProperty: “notes”,
totalProperty: “total”
}
},
autoLoad: true
}
});[/cc]
Read more…