Search Results

Search found 4564 results on 183 pages for 'sencha touch'.

Page 183/183 | < Previous Page | 179 180 181 182 183 

  • How do I implement AABB ray cast hit checking for opengl es on the iPhone

    - by Big Fizzy
    Basically, I draw a 3D cube, I can spin it around but I want to be able to touch it and know where on my cube's surface the user touched. I'm using for setting up, generating and spinning. Its based on the Molecules code and NeHe tutorial #5. Any help, links, tutorials and code would be greatly appreciated. I have lots of development experience but nothing much in the way of openGL and 3d. // // GLViewController.h // NeHe Lesson 05 // // Created by Jeff LaMarche on 12/12/08. // Copyright Jeff LaMarche Consulting 2008. All rights reserved. // #import "GLViewController.h" #import "GLView.h" @implementation GLViewController - (void)drawBox { static const GLfloat cubeVertices[] = { -1.0f, 1.0f, 1.0f, 1.0f, 1.0f, 1.0f, 1.0f,-1.0f, 1.0f, -1.0f,-1.0f, 1.0f, -1.0f, 1.0f,-1.0f, 1.0f, 1.0f,-1.0f, 1.0f,-1.0f,-1.0f, -1.0f,-1.0f,-1.0f }; static const GLubyte cubeNumberOfIndices = 36; const GLubyte cubeVertexFaces[] = { 0, 1, 5, // Half of top face 0, 5, 4, // Other half of top face 4, 6, 5, // Half of front face 4, 6, 7, // Other half of front face 0, 1, 2, // Half of back face 0, 3, 2, // Other half of back face 1, 2, 5, // Half of right face 2, 5, 6, // Other half of right face 0, 3, 4, // Half of left face 7, 4, 3, // Other half of left face 3, 6, 2, // Half of bottom face 6, 7, 3, // Other half of bottom face }; const GLubyte cubeFaceColors[] = { 0, 255, 0, 255, 255, 125, 0, 255, 255, 0, 0, 255, 255, 255, 0, 255, 0, 0, 255, 255, 255, 0, 255, 255 }; glEnableClientState(GL_VERTEX_ARRAY); glVertexPointer(3, GL_FLOAT, 0, cubeVertices); int colorIndex = 0; for(int i = 0; i < cubeNumberOfIndices; i += 3) { glColor4ub(cubeFaceColors[colorIndex], cubeFaceColors[colorIndex+1], cubeFaceColors[colorIndex+2], cubeFaceColors[colorIndex+3]); int face = (i / 3.0); if (face%2 != 0.0) colorIndex+=4; glDrawElements(GL_TRIANGLES, 3, GL_UNSIGNED_BYTE, &cubeVertexFaces[i]); } glDisableClientState(GL_VERTEX_ARRAY); } //move this to a data model later! - (GLfixed)floatToFixed:(GLfloat)aValue; { return (GLfixed) (aValue * 65536.0f); } - (void)drawViewByRotatingAroundX:(float)xRotation rotatingAroundY:(float)yRotation scaling:(float)scaleFactor translationInX:(float)xTranslation translationInY:(float)yTranslation view:(GLView*)view; { glMatrixMode(GL_MODELVIEW); GLfixed currentModelViewMatrix[16] = { 45146, 47441, 2485, 0, -25149, 26775,-54274, 0, -40303, 36435, 36650, 0, 0, 0, 0, 65536 }; /* GLfixed currentModelViewMatrix[16] = { 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 65536 }; */ //glLoadIdentity(); //glOrthof(-1.0f, 1.0f, -1.5f, 1.5f, -10.0f, 4.0f); // Reset rotation system if (isFirstDrawing) { //glLoadIdentity(); glMultMatrixx(currentModelViewMatrix); [self configureLighting]; isFirstDrawing = NO; } // Scale the view to fit current multitouch scaling GLfixed fixedPointScaleFactor = [self floatToFixed:scaleFactor]; glScalex(fixedPointScaleFactor, fixedPointScaleFactor, fixedPointScaleFactor); // Perform incremental rotation based on current angles in X and Y glGetFixedv(GL_MODELVIEW_MATRIX, currentModelViewMatrix); GLfloat totalRotation = sqrt(xRotation*xRotation + yRotation*yRotation); glRotatex([self floatToFixed:totalRotation], (GLfixed)((xRotation/totalRotation) * (GLfloat)currentModelViewMatrix[1] + (yRotation/totalRotation) * (GLfloat)currentModelViewMatrix[0]), (GLfixed)((xRotation/totalRotation) * (GLfloat)currentModelViewMatrix[5] + (yRotation/totalRotation) * (GLfloat)currentModelViewMatrix[4]), (GLfixed)((xRotation/totalRotation) * (GLfloat)currentModelViewMatrix[9] + (yRotation/totalRotation) * (GLfloat)currentModelViewMatrix[8]) ); // Translate the model by the accumulated amount glGetFixedv(GL_MODELVIEW_MATRIX, currentModelViewMatrix); float currentScaleFactor = sqrt(pow((GLfloat)currentModelViewMatrix[0] / 65536.0f, 2.0f) + pow((GLfloat)currentModelViewMatrix[1] / 65536.0f, 2.0f) + pow((GLfloat)currentModelViewMatrix[2] / 65536.0f, 2.0f)); xTranslation = xTranslation / (currentScaleFactor * currentScaleFactor); yTranslation = yTranslation / (currentScaleFactor * currentScaleFactor); // Grab the current model matrix, and use the (0,4,8) components to figure the eye's X axis in the model coordinate system, translate along that glTranslatef(xTranslation * (GLfloat)currentModelViewMatrix[0] / 65536.0f, xTranslation * (GLfloat)currentModelViewMatrix[4] / 65536.0f, xTranslation * (GLfloat)currentModelViewMatrix[8] / 65536.0f); // Grab the current model matrix, and use the (1,5,9) components to figure the eye's Y axis in the model coordinate system, translate along that glTranslatef(yTranslation * (GLfloat)currentModelViewMatrix[1] / 65536.0f, yTranslation * (GLfloat)currentModelViewMatrix[5] / 65536.0f, yTranslation * (GLfloat)currentModelViewMatrix[9] / 65536.0f); // Black background, with depth buffer enabled glClearColor(0.0f, 0.0f, 0.0f, 1.0f); glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT); [self drawBox]; } - (void)configureLighting; { const GLfixed lightAmbient[] = {13107, 13107, 13107, 65535}; const GLfixed lightDiffuse[] = {65535, 65535, 65535, 65535}; const GLfixed matAmbient[] = {65535, 65535, 65535, 65535}; const GLfixed matDiffuse[] = {65535, 65535, 65535, 65535}; const GLfixed lightPosition[] = {30535, -30535, 0, 0}; const GLfixed lightShininess = 20; glEnable(GL_LIGHTING); glEnable(GL_LIGHT0); glEnable(GL_COLOR_MATERIAL); glMaterialxv(GL_FRONT_AND_BACK, GL_AMBIENT, matAmbient); glMaterialxv(GL_FRONT_AND_BACK, GL_DIFFUSE, matDiffuse); glMaterialx(GL_FRONT_AND_BACK, GL_SHININESS, lightShininess); glLightxv(GL_LIGHT0, GL_AMBIENT, lightAmbient); glLightxv(GL_LIGHT0, GL_DIFFUSE, lightDiffuse); glLightxv(GL_LIGHT0, GL_POSITION, lightPosition); glEnable(GL_DEPTH_TEST); glShadeModel(GL_SMOOTH); glEnable(GL_NORMALIZE); } -(void)setupView:(GLView*)view { const GLfloat zNear = 0.1, zFar = 1000.0, fieldOfView = 60.0; GLfloat size; glMatrixMode(GL_PROJECTION); glEnable(GL_DEPTH_TEST); size = zNear * tanf(DEGREES_TO_RADIANS(fieldOfView) / 2.0); CGRect rect = view.bounds; glFrustumf(-size, size, -size / (rect.size.width / rect.size.height), size / (rect.size.width / rect.size.height), zNear, zFar); glViewport(0, 0, rect.size.width, rect.size.height); glScissor(0, 0, rect.size.width, rect.size.height); glMatrixMode(GL_MODELVIEW); glLoadIdentity(); glClearColor(0.0f, 0.0f, 0.0f, 1.0f); glTranslatef(0.0f, 0.0f, -6.0f); isFirstDrawing = YES; } - (void)didReceiveMemoryWarning { [super didReceiveMemoryWarning]; } - (void)dealloc { [super dealloc]; } @end

    Read the article

  • adding onTap method on path direction between 2 point

    - by idham
    I have a problem in my Android application I have a path direction on my application and I want to add an onTap method for the path, so if I touch that path my application will display information with alert dialog. This my activity code: hasilrute hr = new hasilrute(); for (int k = 0;k < hr.r2.size(); k++){ String angkot = hr.r2.get(i).angkot; Cursor c = db.getLatLong(hasilrute.a); Cursor cc = db.getLatLong(hasilrute.b); String x = (c.getString(3)+","+c.getString(2)); String xx = (cc.getString(3)+","+cc.getString(2)); String pairs[] = getDirectionData(x, xx); String[] lnglat = pairs[0].split(","); GeoPoint point = new GeoPoint((int) (Double.parseDouble(lnglat[1]) *1E6),(int)(Double.parseDouble(lnglat[0]) * 1E6)); GeoPoint gp1; GeoPoint gp2 = point; for (int j = 1;j < pairs.length; j++){ lnglat = pairs[j].split(","); gp1 = gp2; gp2 = new GeoPoint((int) (Double.parseDouble(lnglat[1]) *1E6),(int) (Double.parseDouble(lnglat[0]) * 1E6)); mapView.getOverlays().add(new jalur(gp1, gp2,angkot)); } } and it's my jalur.java code public class jalur extends Overlay { private GeoPoint gp1; private GeoPoint gp2; private String angkot; private Context mContext; public jalur(GeoPoint gp1, GeoPoint gp2, String angkot){ this.gp1 = gp1; this.gp2 = gp2; this.angkot = angkot; } @Override public boolean draw(Canvas canvas, MapView mapView, boolean shadow, long when){ Projection projection = mapView.getProjection(); if (shadow == false){ if (angkot.equals("Cimahi-Leuwipanjang")){ Paint paint = new Paint(); paint.setAntiAlias(true); Point point = new Point(); projection.toPixels(gp1,point); Point point2 = new Point(); projection.toPixels(gp2, point2); paint.setColor(Color.rgb(118,171,127)); paint.setStrokeWidth(2); canvas.drawLine((float) point.x, (float) point.y, (float) point2.x, (float) point2.y, paint); }if (angkot.equals("Cimahi-Cangkorah")){ Paint paint = new Paint(); paint.setAntiAlias(true); Point point = new Point(); projection.toPixels(gp1,point); Point point2 = new Point(); projection.toPixels(gp2, point2); paint.setColor(Color.rgb(67,204,255)); paint.setStrokeWidth(2); canvas.drawLine((float) point.x, (float) point.y, (float) point2.x, (float) point2.y, paint); }if (angkot.equals("Cimindi-Cipatik")){ Paint paint = new Paint(); paint.setAntiAlias(true); Point point = new Point(); projection.toPixels(gp1,point); Point point2 = new Point(); projection.toPixels(gp2, point2); paint.setColor(Color.rgb(42,82,0)); paint.setStrokeWidth(2); canvas.drawLine((float) point.x, (float) point.y, (float) point2.x, (float) point2.y, paint); }if (angkot.equals("Jalan Kaki")){ Paint paint = new Paint(); paint.setAntiAlias(true); Point point = new Point(); projection.toPixels(gp1,point); Point point2 = new Point(); projection.toPixels(gp2, point2); paint.setColor(Color.rgb(0,0,0)); paint.setStrokeWidth(2); canvas.drawLine((float) point.x, (float) point.y, (float) point2.x, (float) point2.y, paint); }if (angkot.equals("Cimahi-Padalarang")){ Paint paint = new Paint(); paint.setAntiAlias(true); Point point = new Point(); projection.toPixels(gp1,point); Point point2 = new Point(); projection.toPixels(gp2, point2); paint.setColor(Color.rgb(229,66,66)); paint.setStrokeWidth(2); canvas.drawLine((float) point.x, (float) point.y, (float) point2.x, (float) point2.y, paint); } if (angkot.equals("Pasantren-Sarijadi")){ Paint paint = new Paint(); paint.setAntiAlias(true); Point point = new Point(); projection.toPixels(gp1,point); Point point2 = new Point(); projection.toPixels(gp2, point2); paint.setColor(Color.rgb(4,39,255)); paint.setStrokeWidth(2); canvas.drawLine((float) point.x, (float) point.y, (float) point2.x, (float) point2.y, paint); }if (angkot.equals("Cimahi-Parongpong")){ Paint paint = new Paint(); paint.setAntiAlias(true); Point point = new Point(); projection.toPixels(gp1,point); Point point2 = new Point(); projection.toPixels(gp2, point2); paint.setColor(Color.rgb(141,0,200)); paint.setStrokeWidth(2); canvas.drawLine((float) point.x, (float) point.y, (float) point2.x, (float) point2.y, paint); }if (angkot.equals("Cimahi-Cibeber")){ Paint paint = new Paint(); paint.setAntiAlias(true); Point point = new Point(); projection.toPixels(gp1,point); Point point2 = new Point(); projection.toPixels(gp2, point2); paint.setColor(Color.rgb(255,246,0)); paint.setStrokeWidth(2); canvas.drawLine((float) point.x, (float) point.y, (float) point2.x, (float) point2.y, paint); }if (angkot.equals("Cimahi-Cimindi")){ Paint paint = new Paint(); paint.setAntiAlias(true); Point point = new Point(); projection.toPixels(gp1,point); Point point2 = new Point(); projection.toPixels(gp2, point2); paint.setColor(Color.rgb(220,145,251)); paint.setStrokeWidth(2); canvas.drawLine((float) point.x, (float) point.y, (float) point2.x, (float) point2.y, paint); }if (angkot.equals("Cimahi-Contong")){ Paint paint = new Paint(); paint.setAntiAlias(true); Point point = new Point(); projection.toPixels(gp1,point); Point point2 = new Point(); projection.toPixels(gp2, point2); paint.setColor(Color.rgb(242,138,138)); paint.setStrokeWidth(2); canvas.drawLine((float) point.x, (float) point.y, (float) point2.x, (float) point2.y, paint); }if (angkot.equals("Cimahi-Soreang")){ Paint paint = new Paint(); paint.setAntiAlias(true); Point point = new Point(); projection.toPixels(gp1,point); Point point2 = new Point(); projection.toPixels(gp2, point2); paint.setColor(Color.rgb(0,255,78)); paint.setStrokeWidth(2); canvas.drawLine((float) point.x, (float) point.y, (float) point2.x, (float) point2.y, paint); }if (angkot.equals("Cimahi-Batujajar")){ Paint paint = new Paint(); paint.setAntiAlias(true); Point point = new Point(); projection.toPixels(gp1,point); Point point2 = new Point(); projection.toPixels(gp2, point2); paint.setColor(Color.rgb(137,217,51)); paint.setStrokeWidth(2); canvas.drawLine((float) point.x, (float) point.y, (float) point2.x, (float) point2.y, paint); } } return super.draw(canvas, mapView, shadow, when); } @Override public void draw(Canvas canvas, MapView mapView, boolean shadow){ super.draw(canvas, mapView, shadow); } } thanks for your attention :)

    Read the article

  • Unable to find the cause of an annoying content gap in my HTML/CSS?

    - by user1472747
    I'm quite new to CSS / HTML, and can't find the cause of this little bugger. I want it gone, so that the banner and the nav bar touch each other. Any help is greatly appreciated!! Here is the code for the site. I took out some of the irrelevant code. <!DOCTYPE html> <html> <!-- *****CSS CODE START*****--> <style type="text/css"> #container { margin: 0 auto; width: 900px; background: #fff; } #header { margin-top: 0px; } #header h1 { margin: 0; } #navigation { float: left; width: 900px; background: #333; } #navigation ul { margin: 0; padding: 0; } #navigation ul li { list-style-type: none; display: inline; } #navigation li a { display: block; float: left; padding: 5px 10px; color: #fff; text-decoration: none; border-right: 1px solid #fff; } #navigation li a:hover { background: #383; } #content-container { float: left; width: 900px; background: #fff url(/wp-content/uploads/layout-two-fixed-background.gif) repeat-y 100% 0; } #content { clear: left; float: left; width: 619px; height: 720px; padding: 10px 0; margin: 0 0 0 0px; display: inline; overflow: auto; } #content h2 { margin: 0; color: #003D5D; padding:10px; } #contentBody { padding:10px; font-size:22px; } #aside { float: right; width: 280px; padding: 20px 0; margin: 0 0px 0 0; display: inline; background: #cccccc; height: 700px; border-left: 1px solid #333 ; } #aside h3 { margin: 0 20px; color: #003D5D; font-family: Times New Roman; } #asideText { margin: 0 20px; font-family: Times New Roman;} #footer { clear: both; background: #ccc; text-align: right; padding: 5px; height: 1%; border-top: 1px solid #333 ; } </style> <!-- *****CSS CODE END***** --> <!-- *****HTML CODE START***** --> <body> <div id="container"> <div id="header"> <img src = file:///Users/jduffy/Desktop/projectSite/banner1.jpg> </img> </div> <div id="navigation"> <ul> <li><a href="file:///Users/jduffy/Desktop/projectSite/home">Home</a></li> <li><a href="file:///Users/jduffy/Desktop/projectSite/theProject">The Project</a></li> <li><a href="file:///Users/jduffy/Desktop/projectSite/Pictures">Pictures</a></li> <li><a href="file:///Users/jduffy/Desktop/projectSite/Contact">Contact us</a></li> </ul> </div> <div id="content-container"> <div id="content"> <h2> Page heading </h2> <div id="contentBody"> <p> home pagehome pagehome pagehome pagehome pagehome pagehome pagehome pagehome pagehome pagehome pagehome page home pagehome pagehome pagehome pagehome pagehome pagehome pagehome pagehome pagehome pagehome pagehome page home pagehome pagehome pagehome pagehome pagehome pagehome pagehome pagehome pagehome pagehome pagehome page </p> <p> test2 </p> <p> test3 </p> </div> </div> <div id="aside"> <div id="asideHeading"> <h3> Aside Heading </h3> </div> <div id="asideText"> <p> test5 </p> </div> </div> <div id="footer"> <text id="footerDate">0</text> </div> </div> </div> </body> <!-- *****HTML CODE END***** --> </html> <!-- *****JavaScript CODE START***** --> <script type="text/javascript"> /*date*/ var today = new Date(); document.getElementById("footerDate").innerHTML = today; </script> <!-- *****JavaScript CODE END***** -->

    Read the article

  • Set up linux box for secure local hosting a-z

    - by microchasm
    I am in the process of reinstalling the OS on a machine that will be used to host a couple of apps for our business. The apps will be local only; access from external clients will be via vpn only. The prior setup used a hosting control panel (Plesk) for most of the admin, and I was looking at using another similar piece of software for the reinstall - but I figured I should finally learn how it all works. I can do most of the things the software would do for me, but am unclear on the symbiosis of it all. This is all an attempt to further distance myself from the land of Configuration Programmer/Programmer, if at all possible. I can't find a full walkthrough anywhere for what I'm looking for, so I thought I'd put up this question, and if people can help me on the way I will edit this with the answers, and document my progress/pitfalls. Hopefully someday this will help someone down the line. The details: CentOS 5.5 x86_64 httpd: Apache/2.2.3 mysql: 5.0.77 (to be upgraded) php: 5.1 (to be upgraded) The requirements: SECURITY!! Secure file transfer Secure client access (SSL Certs and CA) Secure data storage Virtualhosts/multiple subdomains Local email would be nice, but not critical The Steps: Download latest CentOS DVD-iso (torrent worked great for me). Install CentOS: While going through the install, I checked the Server Components option thinking I was going to be using another Plesk-like admin. In hindsight, considering I've decided to try to go my own way, this probably wasn't the best idea. Basic config: Setup users, networking/ip address etc. Yum update/upgrade. Upgrade PHP/MySQL: To upgrade PHP and MySQL to the latest versions, I had to look to another repo outside CentOS. IUS looks great and I'm happy I found it! Add IUS repository to our package manager cd /tmp wget http://dl.iuscommunity.org/pub/ius/stable/Redhat/5/x86_64/epel-release-1-1.ius.el5.noarch.rpm rpm -Uvh epel-release-1-1.ius.el5.noarch.rpm wget http://dl.iuscommunity.org/pub/ius/stable/Redhat/5/x86_64/ius-release-1-4.ius.el5.noarch.rpm rpm -Uvh ius-release-1-4.ius.el5.noarch.rpm yum list | grep -w \.ius\. # list all the packages in the IUS repository; use this to find PHP/MySQL version and libraries you want to install Remove old version of PHP and install newer version from IUS rpm -qa | grep php # to list all of the installed php packages we want to remove yum shell # open an interactive yum shell remove php-common php-mysql php-cli #remove installed PHP components install php53 php53-mysql php53-cli php53-common #add packages you want transaction solve #important!! checks for dependencies transaction run #important!! does the actual installation of packages. [control+d] #exit yum shell php -v PHP 5.3.2 (cli) (built: Apr 6 2010 18:13:45) Upgrade MySQL from IUS repository /etc/init.d/mysqld stop rpm -qa | grep mysql # to see installed mysql packages yum shell remove mysql mysql-server #remove installed MySQL components install mysql51 mysql51-server mysql51-devel transaction solve #important!! checks for dependencies transaction run #important!! does the actual installation of packages. [control+d] #exit yum shell service mysqld start mysql -v Server version: 5.1.42-ius Distributed by The IUS Community Project Upgrade instructions courtesy of IUS wiki: http://wiki.iuscommunity.org/Doc/ClientUsageGuide Install rssh (restricted shell) to provide scp and sftp access, without allowing ssh login cd /tmp wget http://dag.wieers.com/rpm/packages/rssh/rssh-2.3.2-1.2.el5.rf.x86_64.rpm rpm -ivh rssh-2.3.2-1.2.el5.rf.x86_64.rpm useradd -m -d /home/dev -s /usr/bin/rssh dev passwd dev Edit /etc/rssh.conf to grant access to SFTP to rssh users. vi /etc/rssh.conf Uncomment or add: allowscp allowsftp This allows me to connect to the machine via SFTP protocol in Transmit (my FTP program of choice; I'm sure it's similar with other FTP apps). rssh instructions appropriated (with appreciation!) from http://www.cyberciti.biz/tips/linux-unix-restrict-shell-access-with-rssh.html Set up virtual interfaces ifconfig eth1:1 192.168.1.3 up #start up the virtual interface cd /etc/sysconfig/network-scripts/ cp ifcfg-eth1 ifcfg-eth1:1 #copy default script and match name to our virtual interface vi ifcfg-eth1:1 #modify eth1:1 script #ifcfg-eth1:1 | modify so it looks like this: DEVICE=eth1:1 IPADDR=192.168.1.3 NETMASK=255.255.255.0 NETWORK=192.168.1.0 ONBOOT=yes NAME=eth1:1 Add more Virtual interfaces as needed by repeating. Because of the ONBOOT=yes line in the ifcfg-eth1:1 file, this interface will be brought up when the system boots, or the network starts/restarts. service network restart Shutting down interface eth0: [ OK ] Shutting down interface eth1: [ OK ] Shutting down loopback interface: [ OK ] Bringing up loopback interface: [ OK ] Bringing up interface eth0: [ OK ] Bringing up interface eth1: [ OK ] ping 192.168.1.3 64 bytes from 192.168.1.3: icmp_seq=1 ttl=64 time=0.105 ms Virtualhosts In the rssh section above I added a user to use for SFTP. In this users' home directory, I created a folder called 'https'. This is where the documents for this site will live, so I need to add a virtualhost that will point to it. I will use the above virtual interface for this site (herein called dev.site.local). vi /etc/http/conf/httpd.conf Add the following to the end of httpd.conf: <VirtualHost 192.168.1.3:80> ServerAdmin [email protected] DocumentRoot /home/dev/https ServerName dev.site.local ErrorLog /home/dev/logs/error_log TransferLog /home/dev/logs/access_log </VirtualHost> I put a dummy index.html file in the https directory just to check everything out. I tried browsing to it, and was met with permission denied errors. The logs only gave an obscure reference to what was going on: [Mon May 17 14:57:11 2010] [error] [client 192.168.1.100] (13)Permission denied: access to /index.html denied I tried chmod 777 et. al., but to no avail. Turns out, I needed to chmod+x the https directory and its' parent directories. chmod +x /home chmod +x /home/dev chmod +x /home/dev/https This solved that problem. DNS I'm handling DNS via our local Windows Server 2003 box. However, the CentOS documentation for BIND can be found here: http://www.centos.org/docs/5/html/Deployment_Guide-en-US/ch-bind.html SSL To get SSL working, I changed the following in httpd.conf: NameVirtualHost 192.168.1.3:443 #make sure this line is in httpd.conf <VirtualHost 192.168.1.3:443> #change port to 443 ServerAdmin [email protected] DocumentRoot /home/dev/https ServerName dev.site.local ErrorLog /home/dev/logs/error_log TransferLog /home/dev/logs/access_log </VirtualHost> Unfortunately, I keep getting (Error code: ssl_error_rx_record_too_long) errors when trying to access a page with SSL. As JamesHannah gracefully pointed out below, I had not set up the locations of the certs in httpd.conf, and thusly was getting the page thrown at the broswer as the cert making the browser balk. So first, I needed to set up a CA and make certificate files. I found a great (if old) walkthrough on the process here: http://www.debian-administration.org/articles/284. Here are the relevant steps I took from that article: mkdir /home/CA cd /home/CA/ mkdir newcerts private echo '01' > serial touch index.txt #this and the above command are for the database that will keep track of certs Create an openssl.cnf file in the /home/CA/ dir and edit it per the walkthrough linked above. (For reference, my finished openssl.cnf file looked like this: http://pastebin.com/raw.php?i=hnZDij4T) openssl req -new -x509 -extensions v3_ca -keyout private/cakey.pem -out cacert.pem -days 3650 -config ./openssl.cnf #this creates the cacert.pem which gets distributed and imported to the browser(s) Modified openssl.cnf again per walkthrough instructions. openssl req -new -nodes -out dev.req.pem -config ./openssl.cnf #generates certificate request, and key.pem which I renamed dev.key.pem. Modified openssl.cnf again per walkthrough instructions. openssl ca -out dev.cert.pem -config ./openssl.cnf -infiles dev.req.pem #create and sign certificate. cp dev.cert.pem /home/dev/certs/cert.pem cp dev.key.pem /home/certs/key.pem I updated httpd.conf to reflect the certs and turn SSLEngine on: NameVirtualHost 192.168.1.3:443 <VirtualHost 192.168.1.3:443> ServerAdmin [email protected] DocumentRoot /home/dev/https SSLEngine on SSLCertificateFile /home/dev/certs/cert.pem SSLCertificateKeyFile /home/dev/certs/key.pem ServerName dev.site.local ErrorLog /home/dev/logs/error_log TransferLog /home/dev/logs/access_log </VirtualHost> Put the CA cert.pem in a web-accessible place, and downloaded/imported it into my browser. Now I can visit https://dev.site.local with no errors or warnings. And this is where I'm at. I will keep editing this as I make progress. Any tips on how to configure SSL email would be appreciated.

    Read the article

  • AngularJS on top of ASP.NET: Moving the MVC framework out to the browser

    - by Varun Chatterji
    Heavily drawing inspiration from Ruby on Rails, MVC4’s convention over configuration model of development soon became the Holy Grail of .NET web development. The MVC model brought with it the goodness of proper separation of concerns between business logic, data, and the presentation logic. However, the MVC paradigm, was still one in which server side .NET code could be mixed with presentation code. The Razor templating engine, though cleaner than its predecessors, still encouraged and allowed you to mix .NET server side code with presentation logic. Thus, for example, if the developer required a certain <div> tag to be shown if a particular variable ShowDiv was true in the View’s model, the code could look like the following: Fig 1: To show a div or not. Server side .NET code is used in the View Mixing .NET code with HTML in views can soon get very messy. Wouldn’t it be nice if the presentation layer (HTML) could be pure HTML? Also, in the ASP.NET MVC model, some of the business logic invariably resides in the controller. It is tempting to use an anti­pattern like the one shown above to control whether a div should be shown or not. However, best practice would indicate that the Controller should not be aware of the div. The ShowDiv variable in the model should not exist. A controller should ideally, only be used to do the plumbing of getting the data populated in the model and nothing else. The view (ideally pure HTML) should render the presentation layer based on the model. In this article we will see how Angular JS, a new JavaScript framework by Google can be used effectively to build web applications where: 1. Views are pure HTML 2. Controllers (in the server sense) are pure REST based API calls 3. The presentation layer is loaded as needed from partial HTML only files. What is MVVM? MVVM short for Model View View Model is a new paradigm in web development. In this paradigm, the Model and View stuff exists on the client side through javascript instead of being processed on the server through postbacks. These frameworks are JavaScript frameworks that facilitate the clear separation of the “frontend” or the data rendering logic from the “backend” which is typically just a REST based API that loads and processes data through a resource model. The frameworks are called MVVM as a change to the Model (through javascript) gets reflected in the view immediately i.e. Model > View. Also, a change on the view (through manual input) gets reflected in the model immediately i.e. View > Model. The following figure shows this conceptually (comments are shown in red): Fig 2: Demonstration of MVVM in action In Fig 2, two text boxes are bound to the same variable model.myInt. Thus, changing the view manually (changing one text box through keyboard input) also changes the other textbox in real time demonstrating V > M property of a MVVM framework. Furthermore, clicking the button adds 1 to the value of model.myInt thus changing the model through JavaScript. This immediately updates the view (the value in the two textboxes) thus demonstrating the M > V property of a MVVM framework. Thus we see that the model in a MVVM JavaScript framework can be regarded as “the single source of truth“. This is an important concept. Angular is one such MVVM framework. We shall use it to build a simple app that sends SMS messages to a particular number. Application, Routes, Views, Controllers, Scope and Models Angular can be used in many ways to construct web applications. For this article, we shall only focus on building Single Page Applications (SPAs). Many of the approaches we will follow in this article have alternatives. It is beyond the scope of this article to explain every nuance in detail but we shall try to touch upon the basic concepts and end up with a working application that can be used to send SMS messages using Sent.ly Plus (a service that is itself built using Angular). Before you read on, we would like to urge you to forget what you know about Models, Views, Controllers and Routes in the ASP.NET MVC4 framework. All these words have different meanings in the Angular world. Whenever these words are used in this article, they will refer to Angular concepts and not ASP.NET MVC4 concepts. The following figure shows the skeleton of the root page of an SPA: Fig 3: The skeleton of a SPA The skeleton of the application is based on the Bootstrap starter template which can be found at: http://getbootstrap.com/examples/starter­template/ Apart from loading the Angular, jQuery and Bootstrap JavaScript libraries, it also loads our custom scripts /app/js/controllers.js /app/js/app.js These scripts define the routes, views and controllers which we shall come to in a moment. Application Notice that the body tag (Fig. 3) has an extra attribute: ng­app=”smsApp” Providing this tag “bootstraps” our single page application. It tells Angular to load a “module” called smsApp. This “module” is defined /app/js/app.js angular.module('smsApp', ['smsApp.controllers', function () {}]) Fig 4: The definition of our application module The line shows above, declares a module called smsApp. It also declares that this module “depends” on another module called “smsApp.controllers”. The smsApp.controllers module will contain all the controllers for our SPA. Routing and Views Notice that in the Navbar (in Fig 3) we have included two hyperlinks to: “#/app” “#/help” This is how Angular handles routing. Since the URLs start with “#”, they are actually just bookmarks (and not server side resources). However, our route definition (in /app/js/app.js) gives these URLs a special meaning within the Angular framework. angular.module('smsApp', ['smsApp.controllers', function () { }]) //Configure the routes .config(['$routeProvider', function ($routeProvider) { $routeProvider.when('/binding', { templateUrl: '/app/partials/bindingexample.html', controller: 'BindingController' }); }]); Fig 5: The definition of a route with an associated partial view and controller As we can see from the previous code sample, we are using the $routeProvider object in the configuration of our smsApp module. Notice how the code “asks for” the $routeProvider object by specifying it as a dependency in the [] braces and then defining a function that accepts it as a parameter. This is known as dependency injection. Please refer to the following link if you want to delve into this topic: http://docs.angularjs.org/guide/di What the above code snippet is doing is that it is telling Angular that when the URL is “#/binding”, then it should load the HTML snippet (“partial view”) found at /app/partials/bindingexample.html. Also, for this URL, Angular should load the controller called “BindingController”. We have also marked the div with the class “container” (in Fig 3) with the ng­view attribute. This attribute tells Angular that views (partial HTML pages) defined in the routes will be loaded within this div. You can see that the Angular JavaScript framework, unlike many other frameworks, works purely by extending HTML tags and attributes. It also allows you to extend HTML with your own tags and attributes (through directives) if you so desire, you can find out more about directives at the following URL: http://www.codeproject.com/Articles/607873/Extending­HTML­with­AngularJS­Directives Controllers and Models We have seen how we define what views and controllers should be loaded for a particular route. Let us now consider how controllers are defined. Our controllers are defined in the file /app/js/controllers.js. The following snippet shows the definition of the “BindingController” which is loaded when we hit the URL http://localhost:port/index.html#/binding (as we have defined in the route earlier as shown in Fig 5). Remember that we had defined that our application module “smsApp” depends on the “smsApp.controllers” module (see Fig 4). The code snippet below shows how the “BindingController” defined in the route shown in Fig 5 is defined in the module smsApp.controllers: angular.module('smsApp.controllers', [function () { }]) .controller('BindingController', ['$scope', function ($scope) { $scope.model = {}; $scope.model.myInt = 6; $scope.addOne = function () { $scope.model.myInt++; } }]); Fig 6: The definition of a controller in the “smsApp.controllers” module. The pieces are falling in place! Remember Fig.2? That was the code of a partial view that was loaded within the container div of the skeleton SPA shown in Fig 3. The route definition shown in Fig 5 also defined that the controller called “BindingController” (shown in Fig 6.) was loaded when we loaded the URL: http://localhost:22544/index.html#/binding The button in Fig 2 was marked with the attribute ng­click=”addOne()” which added 1 to the value of model.myInt. In Fig 6, we can see that this function is actually defined in the “BindingController”. Scope We can see from Fig 6, that in the definition of “BindingController”, we defined a dependency on $scope and then, as usual, defined a function which “asks for” $scope as per the dependency injection pattern. So what is $scope? Any guesses? As you might have guessed a scope is a particular “address space” where variables and functions may be defined. This has a similar meaning to scope in a programming language like C#. Model: The Scope is not the Model It is tempting to assign variables in the scope directly. For example, we could have defined myInt as $scope.myInt = 6 in Fig 6 instead of $scope.model.myInt = 6. The reason why this is a bad idea is that scope in hierarchical in Angular. Thus if we were to define a controller which was defined within the another controller (nested controllers), then the inner controller would inherit the scope of the parent controller. This inheritance would follow JavaScript prototypal inheritance. Let’s say the parent controller defined a variable through $scope.myInt = 6. The child controller would inherit the scope through java prototypical inheritance. This basically means that the child scope has a variable myInt that points to the parent scopes myInt variable. Now if we assigned the value of myInt in the parent, the child scope would be updated with the same value as the child scope’s myInt variable points to the parent scope’s myInt variable. However, if we were to assign the value of the myInt variable in the child scope, then the link of that variable to the parent scope would be broken as the variable myInt in the child scope now points to the value 6 and not to the parent scope’s myInt variable. But, if we defined a variable model in the parent scope, then the child scope will also have a variable model that points to the model variable in the parent scope. Updating the value of $scope.model.myInt in the parent scope would change the model variable in the child scope too as the variable is pointed to the model variable in the parent scope. Now changing the value of $scope.model.myInt in the child scope would ALSO change the value in the parent scope. This is because the model reference in the child scope is pointed to the scope variable in the parent. We did no new assignment to the model variable in the child scope. We only changed an attribute of the model variable. Since the model variable (in the child scope) points to the model variable in the parent scope, we have successfully changed the value of myInt in the parent scope. Thus the value of $scope.model.myInt in the parent scope becomes the “single source of truth“. This is a tricky concept, thus it is considered good practice to NOT use scope inheritance. More info on prototypal inheritance in Angular can be found in the “JavaScript Prototypal Inheritance” section at the following URL: https://github.com/angular/angular.js/wiki/Understanding­Scopes. Building It: An Angular JS application using a .NET Web API Backend Now that we have a perspective on the basic components of an MVVM application built using Angular, let’s build something useful. We will build an application that can be used to send out SMS messages to a given phone number. The following diagram describes the architecture of the application we are going to build: Fig 7: Broad application architecture We are going to add an HTML Partial to our project. This partial will contain the form fields that will accept the phone number and message that needs to be sent as an SMS. It will also display all the messages that have previously been sent. All the executable code that is run on the occurrence of events (button clicks etc.) in the view resides in the controller. The controller interacts with the ASP.NET WebAPI to get a history of SMS messages, add a message etc. through a REST based API. For the purposes of simplicity, we will use an in memory data structure for the purposes of creating this application. Thus, the tasks ahead of us are: Creating the REST WebApi with GET, PUT, POST, DELETE methods. Creating the SmsView.html partial Creating the SmsController controller with methods that are called from the SmsView.html partial Add a new route that loads the controller and the partial. 1. Creating the REST WebAPI This is a simple task that should be quite straightforward to any .NET developer. The following listing shows our ApiController: public class SmsMessage { public string to { get; set; } public string message { get; set; } } public class SmsResource : SmsMessage { public int smsId { get; set; } } public class SmsResourceController : ApiController { public static Dictionary<int, SmsResource> messages = new Dictionary<int, SmsResource>(); public static int currentId = 0; // GET api/<controller> public List<SmsResource> Get() { List<SmsResource> result = new List<SmsResource>(); foreach (int key in messages.Keys) { result.Add(messages[key]); } return result; } // GET api/<controller>/5 public SmsResource Get(int id) { if (messages.ContainsKey(id)) return messages[id]; return null; } // POST api/<controller> public List<SmsResource> Post([FromBody] SmsMessage value) { //Synchronize on messages so we don't have id collisions lock (messages) { SmsResource res = (SmsResource) value; res.smsId = currentId++; messages.Add(res.smsId, res); //SentlyPlusSmsSender.SendMessage(value.to, value.message); return Get(); } } // PUT api/<controller>/5 public List<SmsResource> Put(int id, [FromBody] SmsMessage value) { //Synchronize on messages so we don't have id collisions lock (messages) { if (messages.ContainsKey(id)) { //Update the message messages[id].message = value.message; messages[id].to = value.message; } return Get(); } } // DELETE api/<controller>/5 public List<SmsResource> Delete(int id) { if (messages.ContainsKey(id)) { messages.Remove(id); } return Get(); } } Once this class is defined, we should be able to access the WebAPI by a simple GET request using the browser: http://localhost:port/api/SmsResource Notice the commented line: //SentlyPlusSmsSender.SendMessage The SentlyPlusSmsSender class is defined in the attached solution. We have shown this line as commented as we want to explain the core Angular concepts. If you load the attached solution, this line is uncommented in the source and an actual SMS will be sent! By default, the API returns XML. For consumption of the API in Angular, we would like it to return JSON. To change the default to JSON, we make the following change to WebApiConfig.cs file located in the App_Start folder. public static class WebApiConfig { public static void Register(HttpConfiguration config) { config.Routes.MapHttpRoute( name: "DefaultApi", routeTemplate: "api/{controller}/{id}", defaults: new { id = RouteParameter.Optional } ); var appXmlType = config.Formatters.XmlFormatter. SupportedMediaTypes. FirstOrDefault( t => t.MediaType == "application/xml"); config.Formatters.XmlFormatter.SupportedMediaTypes.Remove(appXmlType); } } We now have our backend REST Api which we can consume from Angular! 2. Creating the SmsView.html partial This simple partial will define two fields: the destination phone number (international format starting with a +) and the message. These fields will be bound to model.phoneNumber and model.message. We will also add a button that we shall hook up to sendMessage() in the controller. A list of all previously sent messages (bound to model.allMessages) will also be displayed below the form input. The following code shows the code for the partial: <!--­­ If model.errorMessage is defined, then render the error div -­­> <div class="alert alert-­danger alert-­dismissable" style="margin­-top: 30px;" ng­-show="model.errorMessage != undefined"> <button type="button" class="close" data­dismiss="alert" aria­hidden="true">&times;</button> <strong>Error!</strong> <br /> {{ model.errorMessage }} </div> <!--­­ The input fields bound to the model --­­> <div class="well" style="margin-­top: 30px;"> <table style="width: 100%;"> <tr> <td style="width: 45%; text-­align: center;"> <input type="text" placeholder="Phone number (eg; +44 7778 609466)" ng­-model="model.phoneNumber" class="form-­control" style="width: 90%" onkeypress="return checkPhoneInput();" /> </td> <td style="width: 45%; text-­align: center;"> <input type="text" placeholder="Message" ng­-model="model.message" class="form-­control" style="width: 90%" /> </td> <td style="text-­align: center;"> <button class="btn btn-­danger" ng-­click="sendMessage();" ng-­disabled="model.isAjaxInProgress" style="margin­right: 5px;">Send</button> <img src="/Content/ajax-­loader.gif" ng­-show="model.isAjaxInProgress" /> </td> </tr> </table> </div> <!--­­ The past messages ­­--> <div style="margin-­top: 30px;"> <!­­-- The following div is shown if there are no past messages --­­> <div ng­-show="model.allMessages.length == 0"> No messages have been sent yet! </div> <!--­­ The following div is shown if there are some past messages --­­> <div ng-­show="model.allMessages.length == 0"> <table style="width: 100%;" class="table table-­striped"> <tr> <td>Phone Number</td> <td>Message</td> <td></td> </tr> <!--­­ The ng-­repeat directive is line the repeater control in .NET, but as you can see this partial is pure HTML which is much cleaner --> <tr ng-­repeat="message in model.allMessages"> <td>{{ message.to }}</td> <td>{{ message.message }}</td> <td> <button class="btn btn-­danger" ng-­click="delete(message.smsId);" ng­-disabled="model.isAjaxInProgress">Delete</button> </td> </tr> </table> </div> </div> The above code is commented and should be self explanatory. Conditional rendering is achieved through using the ng-­show=”condition” attribute on various div tags. Input fields are bound to the model and the send button is bound to the sendMessage() function in the controller as through the ng­click=”sendMessage()” attribute defined on the button tag. While AJAX calls are taking place, the controller sets model.isAjaxInProgress to true. Based on this variable, buttons are disabled through the ng-­disabled directive which is added as an attribute to the buttons. The ng-­repeat directive added as an attribute to the tr tag causes the table row to be rendered multiple times much like an ASP.NET repeater. 3. Creating the SmsController controller The penultimate piece of our application is the controller which responds to events from our view and interacts with our MVC4 REST WebAPI. The following listing shows the code we need to add to /app/js/controllers.js. Note that controller definitions can be chained. Also note that this controller “asks for” the $http service. The $http service is a simple way in Angular to do AJAX. So far we have only encountered modules, controllers, views and directives in Angular. The $http is new entity in Angular called a service. More information on Angular services can be found at the following URL: http://docs.angularjs.org/guide/dev_guide.services.understanding_services. .controller('SmsController', ['$scope', '$http', function ($scope, $http) { //We define the model $scope.model = {}; //We define the allMessages array in the model //that will contain all the messages sent so far $scope.model.allMessages = []; //The error if any $scope.model.errorMessage = undefined; //We initially load data so set the isAjaxInProgress = true; $scope.model.isAjaxInProgress = true; //Load all the messages $http({ url: '/api/smsresource', method: "GET" }). success(function (data, status, headers, config) { this callback will be called asynchronously //when the response is available $scope.model.allMessages = data; //We are done with AJAX loading $scope.model.isAjaxInProgress = false; }). error(function (data, status, headers, config) { //called asynchronously if an error occurs //or server returns response with an error status. $scope.model.errorMessage = "Error occurred status:" + status; //We are done with AJAX loading $scope.model.isAjaxInProgress = false; }); $scope.delete = function (id) { //We are making an ajax call so we set this to true $scope.model.isAjaxInProgress = true; $http({ url: '/api/smsresource/' + id, method: "DELETE" }). success(function (data, status, headers, config) { // this callback will be called asynchronously // when the response is available $scope.model.allMessages = data; //We are done with AJAX loading $scope.model.isAjaxInProgress = false; }); error(function (data, status, headers, config) { // called asynchronously if an error occurs // or server returns response with an error status. $scope.model.errorMessage = "Error occurred status:" + status; //We are done with AJAX loading $scope.model.isAjaxInProgress = false; }); } $scope.sendMessage = function () { $scope.model.errorMessage = undefined; var message = ''; if($scope.model.message != undefined) message = $scope.model.message.trim(); if ($scope.model.phoneNumber == undefined || $scope.model.phoneNumber == '' || $scope.model.phoneNumber.length < 10 || $scope.model.phoneNumber[0] != '+') { $scope.model.errorMessage = "You must enter a valid phone number in international format. Eg: +44 7778 609466"; return; } if (message.length == 0) { $scope.model.errorMessage = "You must specify a message!"; return; } //We are making an ajax call so we set this to true $scope.model.isAjaxInProgress = true; $http({ url: '/api/smsresource', method: "POST", data: { to: $scope.model.phoneNumber, message: $scope.model.message } }). success(function (data, status, headers, config) { // this callback will be called asynchronously // when the response is available $scope.model.allMessages = data; //We are done with AJAX loading $scope.model.isAjaxInProgress = false; }). error(function (data, status, headers, config) { // called asynchronously if an error occurs // or server returns response with an error status. $scope.model.errorMessage = "Error occurred status:" + status // We are done with AJAX loading $scope.model.isAjaxInProgress = false; }); } }]); We can see from the previous listing how the functions that are called from the view are defined in the controller. It should also be evident how easy it is to make AJAX calls to consume our MVC4 REST WebAPI. Now we are left with the final piece. We need to define a route that associates a particular path with the view we have defined and the controller we have defined. 4. Add a new route that loads the controller and the partial This is the easiest part of the puzzle. We simply define another route in the /app/js/app.js file: $routeProvider.when('/sms', { templateUrl: '/app/partials/smsview.html', controller: 'SmsController' }); Conclusion In this article we have seen how much of the server side functionality in the MVC4 framework can be moved to the browser thus delivering a snappy and fast user interface. We have seen how we can build client side HTML only views that avoid the messy syntax offered by server side Razor views. We have built a functioning app from the ground up. The significant advantage of this approach to building web apps is that the front end can be completely platform independent. Even though we used ASP.NET to create our REST API, we could just easily have used any other language such as Node.js, Ruby etc without changing a single line of our front end code. Angular is a rich framework and we have only touched on basic functionality required to create a SPA. For readers who wish to delve further into the Angular framework, we would recommend the following URL as a starting point: http://docs.angularjs.org/misc/started. To get started with the code for this project: Sign up for an account at http://plus.sent.ly (free) Add your phone number Go to the “My Identies Page” Note Down your Sender ID, Consumer Key and Consumer Secret Download the code for this article at: https://docs.google.com/file/d/0BzjEWqSE31yoZjZlV0d0R2Y3eW8/edit?usp=sharing Change the values of Sender Id, Consumer Key and Consumer Secret in the web.config file Run the project through Visual Studio!

    Read the article

  • Using HTML 5 SessionState to save rendered Page Content

    - by Rick Strahl
    HTML 5 SessionState and LocalStorage are very useful and super easy to use to manage client side state. For building rich client side or SPA style applications it's a vital feature to be able to cache user data as well as HTML content in order to swap pages in and out of the browser's DOM. What might not be so obvious is that you can also use the sessionState and localStorage objects even in classic server rendered HTML applications to provide caching features between pages. These APIs have been around for a long time and are supported by most relatively modern browsers and even all the way back to IE8, so you can use them safely in your Web applications. SessionState and LocalStorage are easy The APIs that make up sessionState and localStorage are very simple. Both object feature the same API interface which  is a simple, string based key value store that has getItem, setItem, removeitem, clear and  key methods. The objects are also pseudo array objects and so can be iterated like an array with  a length property and you have array indexers to set and get values with. Basic usage  for storing and retrieval looks like this (using sessionStorage, but the syntax is the same for localStorage - just switch the objects):// set var lastAccess = new Date().getTime(); if (sessionStorage) sessionStorage.setItem("myapp_time", lastAccess.toString()); // retrieve in another page or on a refresh var time = null; if (sessionStorage) time = sessionStorage.getItem("myapp_time"); if (time) time = new Date(time * 1); else time = new Date(); sessionState stores data that is browser session specific and that has a liftetime of the active browser session or window. Shut down the browser or tab and the storage goes away. localStorage uses the same API interface, but the lifetime of the data is permanently stored in the browsers storage area until deleted via code or by clearing out browser cookies (not the cache). Both sessionStorage and localStorage space is limited. The spec is ambiguous about this - supposedly sessionStorage should allow for unlimited size, but it appears that most WebKit browsers support only 2.5mb for either object. This means you have to be careful what you store especially since other applications might be running on the same domain and also use the storage mechanisms. That said 2.5mb worth of character data is quite a bit and would go a long way. The easiest way to get a feel for how sessionState and localStorage work is to look at a simple example. You can go check out the following example online in Plunker: http://plnkr.co/edit/0ICotzkoPjHaWa70GlRZ?p=preview which looks like this: Plunker is an online HTML/JavaScript editor that lets you write and run Javascript code and similar to JsFiddle, but a bit cleaner to work in IMHO (thanks to John Papa for turning me on to it). The sample has two text boxes with counts that update session/local storage every time you click the related button. The counts are 'cached' in Session and Local storage. The point of these examples is that both counters survive full page reloads, and the LocalStorage counter survives a complete browser shutdown and restart. Go ahead and try it out by clicking the Reload button after updating both counters and then shutting down the browser completely and going back to the same URL (with the same browser). What you should see is that reloads leave both counters intact at the counted values, while a browser restart will leave only the local storage counter intact. The code to deal with the SessionStorage (and LocalStorage not shown here) in the example is isolated into a couple of wrapper methods to simplify the code: function getSessionCount() { var count = 0; if (sessionStorage) { var count = sessionStorage.getItem("ss_count"); count = !count ? 0 : count * 1; } $("#txtSession").val(count); return count; } function setSessionCount(count) { if (sessionStorage) sessionStorage.setItem("ss_count", count.toString()); } These two functions essentially load and store a session counter value. The two key methods used here are: sessionStorage.getItem(key); sessionStorage.setItem(key,stringVal); Note that the value given to setItem and return by getItem has to be a string. If you pass another type you get an error. Don't let that limit you though - you can easily enough store JSON data in a variable so it's quite possible to pass complex objects and store them into a single sessionStorage value:var user = { name: "Rick", id="ricks", level=8 } sessionStorage.setItem("app_user",JSON.stringify(user)); to retrieve it:var user = sessionStorage.getItem("app_user"); if (user) user = JSON.parse(user); Simple! If you're using the Chrome Developer Tools (F12) you can also check out the session and local storage state on the Resource tab:   You can also use this tool to refresh or remove entries from storage. What we just looked at is a purely client side implementation where a couple of counters are stored. For rich client centric AJAX applications sessionStorage and localStorage provide a very nice and simple API to store application state while the application is running. But you can also use these storage mechanisms to manage server centric HTML applications when you combine server rendering with some JavaScript to perform client side data caching. You can both store some state information and data on the client (ie. store a JSON object and carry it forth between server rendered HTML requests) or you can use it for good old HTTP based caching where some rendered HTML is saved and then restored later. Let's look at the latter with a real life example. Why do I need Client-side Page Caching for Server Rendered HTML? I don't know about you, but in a lot of my existing server driven applications I have lists that display a fair amount of data. Typically these lists contain links to then drill down into more specific data either for viewing or editing. You can then click on a link and go off to a detail page that provides more concise content. So far so good. But now you're done with the detail page and need to get back to the list, so you click on a 'bread crumbs trail' or an application level 'back to list' button and… …you end up back at the top of the list - the scroll position, the current selection in some cases even filters conditions - all gone with the wind. You've left behind the state of the list and are starting from scratch in your browsing of the list from the top. Not cool! Sound familiar? This a pretty common scenario with server rendered HTML content where it's so common to display lists to drill into, only to lose state in the process of returning back to the original list. Look at just about any traditional forums application, or even StackOverFlow to see what I mean here. Scroll down a bit to look at a post or entry, drill in then use the bread crumbs or tab to go back… In some cases returning to the top of a list is not a big deal. On StackOverFlow that sort of works because content is turning around so quickly you probably want to actually look at the top posts. Not always though - if you're browsing through a list of search topics you're interested in and drill in there's no way back to that position. Essentially anytime you're actively browsing the items in the list, that's when state becomes important and if it's not handled the user experience can be really disrupting. Content Caching If you're building client centric SPA style applications this is a fairly easy to solve problem - you tend to render the list once and then update the page content to overlay the detail content, only hiding the list temporarily until it's used again later. It's relatively easy to accomplish this simply by hiding content on the page and later making it visible again. But if you use server rendered content, hanging on to all the detail like filters, selections and scroll position is not quite as easy. Or is it??? This is where sessionStorage comes in handy. What if we just save the rendered content of a previous page, and then restore it when we return to this page based on a special flag that tells us to use the cached version? Let's see how we can do this. A real World Use Case Recently my local ISP asked me to help out with updating an ancient classifieds application. They had a very busy, local classifieds app that was originally an ASP classic application. The old app was - wait for it: frames based - and even though I lobbied against it, the decision was made to keep the frames based layout to allow rapid browsing of the hundreds of posts that are made on a daily basis. The primary reason they wanted this was precisely for the ability to quickly browse content item by item. While I personally hate working with Frames, I have to admit that the UI actually works well with the frames layout as long as you're running on a large desktop screen. You can check out the frames based desktop site here: http://classifieds.gorge.net/ However when I rebuilt the app I also added a secondary view that doesn't use frames. The main reason for this of course was for mobile displays which work horribly with frames. So there's a somewhat mobile friendly interface to the interface, which ditches the frames and uses some responsive design tweaking for mobile capable operation: http://classifeds.gorge.net/mobile  (or browse the base url with your browser width under 800px)   Here's what the mobile, non-frames view looks like:   As you can see this means that the list of classifieds posts now is a list and there's a separate page for drilling down into the item. And of course… originally we ran into that usability issue I mentioned earlier where the browse, view detail, go back to the list cycle resulted in lost list state. Originally in mobile mode you scrolled through the list, found an item to look at and drilled in to display the item detail. Then you clicked back to the list and BAM - you've lost your place. Because there are so many items added on a daily basis the full list is never fully loaded, but rather there's a "Load Additional Listings"  entry at the button. Not only did we originally lose our place when coming back to the list, but any 'additionally loaded' items are no longer there because the list was now rendering  as if it was the first page hit. The additional listings, and any filters, the selection of an item all were lost. Major Suckage! Using Client SessionStorage to cache Server Rendered Content To work around this problem I decided to cache the rendered page content from the list in SessionStorage. Anytime the list renders or is updated with Load Additional Listings, the page HTML is cached and stored in Session Storage. Any back links from the detail page or the login or write entry forms then point back to the list page with a back=true query string parameter. If the server side sees this parameter it doesn't render the part of the page that is cached. Instead the client side code retrieves the data from the sessionState cache and simply inserts it into the page. It sounds pretty simple, and the overall the process is really easy, but there are a few gotchas that I'll discuss in a minute. But first let's look at the implementation. Let's start with the server side here because that'll give a quick idea of the doc structure. As I mentioned the server renders data from an ASP.NET MVC view. On the list page when returning to the list page from the display page (or a host of other pages) looks like this: https://classifieds.gorge.net/list?back=True The query string value is a flag, that indicates whether the server should render the HTML. Here's what the top level MVC Razor view for the list page looks like:@model MessageListViewModel @{ ViewBag.Title = "Classified Listing"; bool isBack = !string.IsNullOrEmpty(Request.QueryString["back"]); } <form method="post" action="@Url.Action("list")"> <div id="SizingContainer"> @if (!isBack) { @Html.Partial("List_CommandBar_Partial", Model) <div id="PostItemContainer" class="scrollbox" xstyle="-webkit-overflow-scrolling: touch;"> @Html.Partial("List_Items_Partial", Model) @if (Model.RequireLoadEntry) { <div class="postitem loadpostitems" style="padding: 15px;"> <div id="LoadProgress" class="smallprogressright"></div> <div class="control-progress"> Load additional listings... </div> </div> } </div> } </div> </form> As you can see the query string triggers a conditional block that if set is simply not rendered. The content inside of #SizingContainer basically holds  the entire page's HTML sans the headers and scripts, but including the filter options and menu at the top. In this case this makes good sense - in other situations the fact that the menu or filter options might be dynamically updated might make you only cache the list rather than essentially the entire page. In this particular instance all of the content works and produces the proper result as both the list along with any filter conditions in the form inputs are restored. Ok, let's move on to the client. On the client there are two page level functions that deal with saving and restoring state. Like the counter example I showed earlier, I like to wrap the logic to save and restore values from sessionState into a separate function because they are almost always used in several places.page.saveData = function(id) { if (!sessionStorage) return; var data = { id: id, scroll: $("#PostItemContainer").scrollTop(), html: $("#SizingContainer").html() }; sessionStorage.setItem("list_html",JSON.stringify(data)); }; page.restoreData = function() { if (!sessionStorage) return; var data = sessionStorage.getItem("list_html"); if (!data) return null; return JSON.parse(data); }; The data that is saved is an object which contains an ID which is the selected element when the user clicks and a scroll position. These two values are used to reset the scroll position when the data is used from the cache. Finally the html from the #SizingContainer element is stored, which makes for the bulk of the document's HTML. In this application the HTML captured could be a substantial bit of data. If you recall, I mentioned that the server side code renders a small chunk of data initially and then gets more data if the user reads through the first 50 or so items. The rest of the items retrieved can be rather sizable. Other than the JSON deserialization that's Ok. Since I'm using SessionStorage the storage space has no immediate limits. Next is the core logic to handle saving and restoring the page state. At first though this would seem pretty simple, and in some cases it might be, but as the following code demonstrates there are a few gotchas to watch out for. Here's the relevant code I use to save and restore:$( function() { … var isBack = getUrlEncodedKey("back", location.href); if (isBack) { // remove the back key from URL setUrlEncodedKey("back", "", location.href); var data = page.restoreData(); // restore from sessionState if (!data) { // no data - force redisplay of the server side default list window.location = "list"; return; } $("#SizingContainer").html(data.html); var el = $(".postitem[data-id=" + data.id + "]"); $(".postitem").removeClass("highlight"); el.addClass("highlight"); $("#PostItemContainer").scrollTop(data.scroll); setTimeout(function() { el.removeClass("highlight"); }, 2500); } else if (window.noFrames) page.saveData(null); // save when page loads $("#SizingContainer").on("click", ".postitem", function() { var id = $(this).attr("data-id"); if (!id) return true; if (window.noFrames) page.saveData(id); var contentFrame = window.parent.frames["Content"]; if (contentFrame) contentFrame.location.href = "show/" + id; else window.location.href = "show/" + id; return false; }); … The code starts out by checking for the back query string flag which triggers restoring from the client cache. If cached the cached data structure is read from sessionStorage. It's important here to check if data was returned. If the user had back=true on the querystring but there is no cached data, he likely bookmarked this page or otherwise shut down the browser and came back to this URL. In that case the server didn't render any detail and we have no cached data, so all we can do is redirect to the original default list view using window.location. If we continued the page would render no data - so make sure to always check the cache retrieval result. Always! If there is data the it's loaded and the data.html data is restored back into the document by simply injecting the HTML back into the document's #SizingContainer element:$("#SizingContainer").html(data.html); It's that simple and it's quite quick even with a fully loaded list of additional items and on a phone. The actual HTML data is stored to the cache on every page load initially and then again when the user clicks on an element to navigate to a particular listing. The former ensures that the client cache always has something in it, and the latter updates with additional information for the selected element. For the click handling I use a data-id attribute on the list item (.postitem) in the list and retrieve the id from that. That id is then used to navigate to the actual entry as well as storing that Id value in the saved cached data. The id is used to reset the selection by searching for the data-id value in the restored elements. The overall process of this save/restore process is pretty straight forward and it doesn't require a bunch of code, yet it yields a huge improvement in the usability of the site on mobile devices (or anybody who uses the non-frames view). Some things to watch out for As easy as it conceptually seems to simply store and retrieve cached content, you have to be quite aware what type of content you are caching. The code above is all that's specific to cache/restore cycle and it works, but it took a few tweaks to the rest of the script code and server code to make it all work. There were a few gotchas that weren't immediately obvious. Here are a few things to pay attention to: Event Handling Logic Timing of manipulating DOM events Inline Script Code Bookmarking to the Cache Url when no cache exists Do you have inline script code in your HTML? That script code isn't going to run if you restore from cache and simply assign or it may not run at the time you think it would normally in the DOM rendering cycle. JavaScript Event Hookups The biggest issue I ran into with this approach almost immediately is that originally I had various static event handlers hooked up to various UI elements that are now cached. If you have an event handler like:$("#btnSearch").click( function() {…}); that works fine when the page loads with server rendered HTML, but that code breaks when you now load the HTML from cache. Why? Because the elements you're trying to hook those events to may not actually be there - yet. Luckily there's an easy workaround for this by using deferred events. With jQuery you can use the .on() event handler instead:$("#SelectionContainer").on("click","#btnSearch", function() {…}); which monitors a parent element for the events and checks for the inner selector elements to handle events on. This effectively defers to runtime event binding, so as more items are added to the document bindings still work. For any cached content use deferred events. Timing of manipulating DOM Elements Along the same lines make sure that your DOM manipulation code follows the code that loads the cached content into the page so that you don't manipulate DOM elements that don't exist just yet. Ideally you'll want to check for the condition to restore cached content towards the top of your script code, but that can be tricky if you have components or other logic that might not all run in a straight line. Inline Script Code Here's another small problem I ran into: I use a DateTime Picker widget I built a while back that relies on the jQuery date time picker. I also created a helper function that allows keyboard date navigation into it that uses JavaScript logic. Because MVC's limited 'object model' the only way to embed widget content into the page is through inline script. This code broken when I inserted the cached HTML into the page because the script code was not available when the component actually got injected into the page. As the last bullet - it's a matter of timing. There's no good work around for this - in my case I pulled out the jQuery date picker and relied on native <input type="date" /> logic instead - a better choice these days anyway, especially since this view is meant to be primarily to serve mobile devices which actually support date input through the browser (unlike desktop browsers of which only WebKit seems to support it). Bookmarking Cached Urls When you cache HTML content you have to make a decision whether you cache on the client and also not render that same content on the server. In the Classifieds app I didn't render server side content so if the user comes to the page with back=True and there is no cached content I have to a have a Plan B. Typically this happens when somebody ends up bookmarking the back URL. The easiest and safest solution for this scenario is to ALWAYS check the cache result to make sure it exists and if not have a safe URL to go back to - in this case to the plain uncached list URL which amounts to effectively redirecting. This seems really obvious in hindsight, but it's easy to overlook and not see a problem until much later, when it's not obvious at all why the page is not rendering anything. Don't use <body> to replace Content Since we're practically replacing all the HTML in the page it may seem tempting to simply replace the HTML content of the <body> tag. Don't. The body tag usually contains key things that should stay in the page and be there when it loads. Specifically script tags and elements and possibly other embedded content. It's best to create a top level DOM element specifically as a placeholder container for your cached content and wrap just around the actual content you want to replace. In the app above the #SizingContainer is that container. Other Approaches The approach I've used for this application is kind of specific to the existing server rendered application we're running and so it's just one approach you can take with caching. However for server rendered content caching this is a pattern I've used in a few apps to retrofit some client caching into list displays. In this application I took the path of least resistance to the existing server rendering logic. Here are a few other ways that come to mind: Using Partial HTML Rendering via AJAXInstead of rendering the page initially on the server, the page would load empty and the client would render the UI by retrieving the respective HTML and embedding it into the page from a Partial View. This effectively makes the initial rendering and the cached rendering logic identical and removes the server having to decide whether this request needs to be rendered or not (ie. not checking for a back=true switch). All the logic related to caching is made on the client in this case. Using JSON Data and Client RenderingThe hardcore client option is to do the whole UI SPA style and pull data from the server and then use client rendering or databinding to pull the data down and render using templates or client side databinding with knockout/angular et al. As with the Partial Rendering approach the advantage is that there's no difference in the logic between pulling the data from cache or rendering from scratch other than the initial check for the cache request. Of course if the app is a  full on SPA app, then caching may not be required even - the list could just stay in memory and be hidden and reactivated. I'm sure there are a number of other ways this can be handled as well especially using  AJAX. AJAX rendering might simplify the logic, but it also complicates search engine optimization since there's no content loaded initially. So there are always tradeoffs and it's important to look at all angles before deciding on any sort of caching solution in general. State of the Session SessionState and LocalStorage are easy to use in client code and can be integrated even with server centric applications to provide nice caching features of content and data. In this post I've shown a very specific scenario of storing HTML content for the purpose of remembering list view data and state and making the browsing experience for lists a bit more friendly, especially if there's dynamically loaded content involved. If you haven't played with sessionStorage or localStorage I encourage you to give it a try. There's a lot of cool stuff that you can do with this beyond the specific scenario I've covered here… Resources Overview of localStorage (also applies to sessionStorage) Web Storage Compatibility Modernizr Test Suite© Rick Strahl, West Wind Technologies, 2005-2013Posted in JavaScript  HTML5  ASP.NET  MVC   Tweet !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs"); (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })();

    Read the article

  • iPhone SDK vs Windows Phone 7 Series SDK Challenge, Part 1: Hello World!

    In this series, I will be taking sample applications from the iPhone SDK and implementing them on Windows Phone 7 Series.  My goal is to do as much of an apples-to-apples comparison as I can.  This series will be written to not only compare and contrast how easy or difficult it is to complete tasks on either platform, how many lines of code, etc., but Id also like it to be a way for iPhone developers to either get started on Windows Phone 7 Series development, or for developers in general to learn the platform. Heres my methodology: Run the iPhone SDK app in the iPhone Simulator to get a feel for what it does and how it works, without looking at the implementation Implement the equivalent functionality on Windows Phone 7 Series using Silverlight. Compare the two implementations based on complexity, functionality, lines of code, number of files, etc. Add some functionality to the Windows Phone 7 Series app that shows off a way to make the scenario more interesting or leverages an aspect of the platform, or uses a better design pattern to implement the functionality. You can download Microsoft Visual Studio 2010 Express for Windows Phone CTP here, and the Expression Blend 4 Beta here. Hello World! Of course no first post would be allowed if it didnt focus on the hello world scenario.  The iPhone SDK follows that tradition with the Your First iPhone Application walkthrough.  I will say that the developer documentation for iPhone is pretty good.  There are plenty of walkthoughs and they break things down into nicely sized steps and do a good job of bringing the user along.  As expected, this application is quite simple.  It comprises of a text box, a label, and a button.  When you push the button, the label changes to Hello plus the  word you typed into the text box.  Makes perfect sense for a starter application.  Theres not much to this but it covers a few basic elements: Laying out basic UI Handling user input Hooking up events Formatting text     So, lets get started building a similar app for Windows Phone 7 Series! Implementing the UI: UI in Silverlight (and therefore Windows Phone 7) is defined in XAML, which is a declarative XML language also used by WPF on the desktop.  For anyone thats familiar with similar types of markup, its relatively straightforward to learn, but has a lot of power in it once you get it figured out.  Well talk more about that. This UI is very simple.  When I look at this, I note a couple of things: Elements are arranged vertically They are all centered So, lets create our Application and then start with the UI.  Once you have the the VS 2010 Express for Windows Phone tool running, create a new Windows Phone Project, and call it Hello World: Once created, youll see the designer on one side and your XAML on the other: Now, we can create our UI in one of three ways: Use the designer in Visual Studio to drag and drop the components Use the designer in Expression Blend 4 to drag and drop the components Enter the XAML by hand in either of the above Well start with (1), then kind of move to (3) just for instructional value. To develop this UI in the designer: First, delete all of the markup between inside of the Grid element (LayoutRoot).  You should be left with just this XAML for your MainPage.xaml (i shortened all the xmlns declarations below for brevity): 1: <phoneNavigation:PhoneApplicationPage 2: x:Class="HelloWorld.MainPage" 3: xmlns="...[snip]" 4: FontFamily="{StaticResource PhoneFontFamilyNormal}" 5: FontSize="{StaticResource PhoneFontSizeNormal}" 6: Foreground="{StaticResource PhoneForegroundBrush}"> 7:   8: <Grid x:Name="LayoutRoot" Background="{StaticResource PhoneBackgroundBrush}"> 9:   10: </Grid> 11:   12: </phoneNavigation:PhoneApplicationPage> .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; }   Well be adding XAML at line 9, so thats the important part. Now, Click on the center area of the phone surface Open the Toolbox and double click StackPanel Double click TextBox Double click TextBlock Double click Button That will create the necessary UI elements but they wont be arranged quite right.  Well fix it in a second.    Heres the XAML that we end up with: 1: <StackPanel Height="100" HorizontalAlignment="Left" Margin="10,10,0,0" Name="stackPanel1" VerticalAlignment="Top" Width="200"> 2: <TextBox Height="32" Name="textBox1" Text="TextBox" Width="100" /> 3: <TextBlock Height="23" Name="textBlock1" Text="TextBlock" /> 4: <Button Content="Button" Height="70" Name="button1" Width="160" /> 5: </StackPanel> .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } The designer does its best at guessing what we want, but in this case we want things to be a bit simpler. So well just clean it up a bit.  We want the items to be centered and we want them to have a little bit of a margin on either side, so heres what we end up with.  Ive also made it match the values and style from the iPhone app: 1: <StackPanel Margin="10"> 2: <TextBox Name="textBox1" HorizontalAlignment="Stretch" Text="You" TextAlignment="Center"/> 3: <TextBlock Name="textBlock1" HorizontalAlignment="Center" Margin="0,100,0,0" Text="Hello You!" /> 4: <Button Name="button1" HorizontalAlignment="Center" Margin="0,150,0,0" Content="Hello"/> 5: </StackPanel> .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } Now lets take a look at what weve done there. Line 1: We removed all of the formatting from the StackPanel, except for Margin, as thats all we need.  Since our parent element is a Grid, by default the StackPanel will be sized to fit in that space.  The Margin says that we want to reserve 10 pixels on each side of the StackPanel. Line 2: Weve set the HorizontalAlignment of the TextBox to Stretch, which says that it should fill its parents size horizontally.  We want to do this so the TextBox is always full-width.  We also set TextAlignment to Center, to center the text. Line 3: In contrast to the TextBox above, we dont care how wide the TextBlock is, just so long as it is big enough for its text.  Thatll happen automatically, so we just set its Horizontal alignment to Center.  We also set a Margin above the TextBlock of 100 pixels to bump it down a bit, per the iPhone UI. Line 4: We do the same things here as in Line 3. Heres how the UI looks in the designer: Believe it or not, were almost done! Implementing the App Logic Now, we want the TextBlock to change its text when the Button is clicked.  In the designer, double click the Button to be taken to the Event Handler for the Buttons Click event.  In that event handler, we take the Text property from the TextBox, and format it into a string, then set it into the TextBlock.  Thats it! 1: private void button1_Click(object sender, RoutedEventArgs e) 2: { 3: string name = textBox1.Text; 4:   5: // if there isn't a name set, just use "World" 6: if (String.IsNullOrEmpty(name)) 7: { 8: name = "World"; 9: } 10:   11: // set the value into the TextBlock 12: textBlock1.Text = String.Format("Hello {0}!", name); 13:   14: } .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } We use the String.Format() method to handle the formatting for us.    Now all thats left is to test the app in the Windows Phone Emulator and verify it does what we think it does! And it does! Comparing against the iPhone Looking at the iPhone example, there are basically three things that you have to touch as the developer: 1) The UI in the Nib file 2) The app delegate 3) The view controller Counting lines is a bit tricky here, but to try to keep this even, Im going to only count lines of code that I could not have (or would not have) generated with the tooling.  Meaning, Im not counting XAML and Im not counting operations that happen in the Nib file with the XCode designer tool.  So in the case of the above, even though I modified the XAML, I could have done all of those operations using the visual designer tool.  And normally I would have, but the XAML is more instructive (and less steps!).  Im interested in things that I, as the developer have to figure out in code.  Im also not counting lines that just have a curly brace on them, or lines that are generated for me (e.g. method names that are generated for me when I make a connection, etc.) So, by that count, heres what I get from the code listing for the iPhone app found here: HelloWorldAppDelegate.h: 6 HelloWorldAppDelegate.m: 12 MyViewController.h: 8 MyViewController.m: 18 Which gives me a grand total of about 44 lines of code on iPhone.  I really do recommend looking at the iPhone code for a comparison to the above. Now, for the Windows Phone 7 Series application, the only code I typed was in the event handler above Main.Xaml.cs: 4 So a total of 4 lines of code on Windows Phone 7.  And more importantly, the process is just A LOT simpler.  For example, I was surprised that the User Interface Designer in XCode doesnt automatically create instance variables for me and wire them up to the corresponding elements.  I assumed I wouldnt have to write this code myself (and risk getting it wrong!).  I dont need to worry about view controllers or anything.  I just write my code.  This blog post up to this point has covered almost every aspect of this apps development in a few pages.  The iPhone tutorial has 5 top level steps with 2-3 sub sections of each. Now, its worth pointing out that the iPhone development model uses the Model View Controller (MVC) pattern, which is a very flexible and powerful pattern that enforces proper separation of concerns.  But its fairly complex and difficult to understand when you first walk up to it.  Here at Microsoft weve dabbled in MVC a bit, with frameworks like MFC on Visual C++ and with the ASP.NET MVC framework now.  Both are very powerful frameworks.  But one of the reasons weve stayed away from MVC with client UI frameworks is that its difficult to tool.  We havent seen the type of value that beats double click, write code! for the broad set of scenarios. Another thing to think about is how many of those lines of code were focused on my apps functionality?.  Or, the converse of How many lines of code were boilerplate plumbing?  In both examples, the actual number of functional code lines is similar.  I count most of them in MyViewController.m, in the changeGreeting method.  Its about 7 lines of code that do the work of taking the value from the TextBox and putting it into the label.  Versus 4 on the Windows Phone 7 side.  But, unfortunately, on iPhone I still have to write that other 37 lines of code, just to get there. 10% of the code, 1 file instead of 4, its just much simpler. Making Some Tweaks It turns out, I can actually do this application with ZERO  lines of code, if Im willing to change the spec a bit. The data binding functionality in Silverlight is incredibly powerful.  And what I can do is databind the TextBoxs value directly to the TextBlock.  Take some time looking at this XAML below.  Youll see that I have added another nested StackPanel and two more TextBlocks.  Why?  Because thats how I build that string, and the nested StackPanel will lay things out Horizontally for me, as specified by the Orientation property. 1: <StackPanel Margin="10"> 2: <TextBox Name="textBox1" HorizontalAlignment="Stretch" Text="You" TextAlignment="Center"/> 3: <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="0,100,0,0" > 4: <TextBlock Text="Hello " /> 5: <TextBlock Name="textBlock1" Text="{Binding ElementName=textBox1, Path=Text}" /> 6: <TextBlock Text="!" /> 7: </StackPanel> 8: <Button Name="button1" HorizontalAlignment="Center" Margin="0,150,0,0" Content="Hello" Click="button1_Click" /> 9: </StackPanel> .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } Now, the real action is there in the bolded TextBlock.Text property: Text="{Binding ElementName=textBox1, Path=Text}" .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } That does all the heavy lifting.  It sets up a databinding between the TextBox.Text property on textBox1 and the TextBlock.Text property on textBlock1. As I change the text of the TextBox, the label updates automatically. In fact, I dont even need the button any more, so I could get rid of that altogether.  And no button means no event handler.  No event handler means no C# code at all.  Did you know that DotNetSlackers also publishes .net articles written by top known .net Authors? We already have over 80 articles in several categories including Silverlight. Take a look: here.

    Read the article

  • Javascript Bookmarklet - Opening Multiple Links on a Page

    - by NessDan
    I want to make a bookmarklet so that when I go on Digg, I can simply click it and have the top 10 stories open up in new tabs. The HTML on the page looks like this: <div id="topten-list"> <div class="news-summary img-thumb"> <h3> <a href="/comics_animation/Pokemon_COMIC">Pokemon - (COMIC) <span> <em style="background-image: url(&quot;/comics_animation/Pokemon_COMIC/a.png&quot;);"> thumb</em> </span></a> </h3> <ul class="news-digg"> <li class="digg-count"> <a href="/comics_animation/Pokemon_COMIC"> <strong>1872</strong> </a> </li> </ul> </div> <div class="news-summary img-thumb"> <h3> <a href="/comedy/I_am_never_drinking_with_you_assholes_again_Pic"> I am never drinking with you assholes again [Pic] <span> <em style="background-image: url(&quot;/comedy/I_am_never_drinking_with_you_assholes_again_Pic/a.png&quot;);"> thumb</em> </span></a> </h3> <ul class="news-digg"> <li class="digg-count"> <a href="/comedy/I_am_never_drinking_with_you_assholes_again_Pic"> <strong>1650</strong> </a> </li> </ul> </div> <div class="news-summary news-thumb"> <h3> <a href="/comedy/xkcd_Hell">xkcd: Hell <span> <em style="background-image: url(&quot;/comedy/xkcd_Hell/a.png&quot;);"> thumb</em> </span></a> </h3> <ul class="news-digg"> <li class="digg-count"> <a href="/comedy/xkcd_Hell"> <strong>1407</strong> </a> </li> </ul> </div> <div class="news-summary news-thumb"> <h3> <a href="/arts_culture/6_Ridiculous_History_Myths_You_Probably_Think_Are_True"> 6 Ridiculous History Myths (You Probably Think Are True) <span> <em style="background-image: url(&quot;/arts_culture/6_Ridiculous_History_Myths_You_Probably_Think_Are_True/a.jpg&quot;);"> thumb</em> </span></a> </h3> <ul class="news-digg"> <li class="digg-count"> <a href="/arts_culture/6_Ridiculous_History_Myths_You_Probably_Think_Are_True"> <strong>1216</strong> </a> </li> </ul> </div> <div class="news-summary news-thumb"> <h3> <a href="/people/Why_Every_Chick_Flick_Is_Starting_to_Look_The_Same_CHART"> Why Every Chick Flick Is Starting to Look The Same [CHART] <span> <em style="background-image: url(&quot;/people/Why_Every_Chick_Flick_Is_Starting_to_Look_The_Same_CHART/a.jpg&quot;);"> thumb</em> </span></a> </h3> <ul class="news-digg"> <li class="digg-count"> <a href="/people/Why_Every_Chick_Flick_Is_Starting_to_Look_The_Same_CHART"> <strong>978</strong> </a> </li> </ul> </div> <div class="news-summary img-thumb"> <h3> <a href="/food_drink/WTF_World_of_FAST_FOOD_Graphic">WTF World of FAST FOOD! [Graphic] <span> <em style="background-image: url(&quot;/food_drink/WTF_World_of_FAST_FOOD_Graphic/a.jpg&quot;);"> thumb</em> </span></a> </h3> <ul class="news-digg"> <li class="digg-count"> <a href="/food_drink/WTF_World_of_FAST_FOOD_Graphic"> <strong>874</strong> </a> </li> </ul> </div> <div class="news-summary news-thumb"> <h3> <a href="/people/10_Things_You_Don_t_Know_About_My_Life_As_a_Dominatrix"> 10 Things You Don&#39;t Know About My Life As a Dominatrix <span> <em style="background-image: url(&quot;/people/10_Things_You_Don_t_Know_About_My_Life_As_a_Dominatrix/a.jpg&quot;);"> thumb</em> </span></a> </h3> <ul class="news-digg"> <li class="digg-count"> <a href="/people/10_Things_You_Don_t_Know_About_My_Life_As_a_Dominatrix"> <strong>751</strong> </a> </li> </ul> </div> <div class="news-summary img-thumb"> <h3> <a href="/odd_stuff/Star_Trek_Transporter_Mishap_pic">Star Trek Transporter Mishap (pic) <span> <em>thumb</em> </span></a> </h3> <ul class="news-digg"> <li class="digg-count"> <a href="/odd_stuff/Star_Trek_Transporter_Mishap_pic"> <strong>667</strong> </a> </li> </ul> </div> <div class="news-summary vid-thumb"> <h3> <a href="/pc_games/StarCraft_2_Beta_Breakup_Video">StarCraft 2 Beta Breakup (Video) <span> <em style="background-image: url(&quot;/pc_games/StarCraft_2_Beta_Breakup_Video/a.jpg&quot;);"> thumb</em> </span></a> </h3> <ul class="news-digg"> <li class="digg-count"> <a href="/pc_games/StarCraft_2_Beta_Breakup_Video"> <strong>627</strong> </a> </li> </ul> </div> <div class="news-summary news-thumb"> <h3> <a href="/politics/Jon_Stewart_FL_Doc_Won_t_Touch_Yr_Penis_If_You_Voted_Obama"> Jon Stewart: FL Doc Won&#39;t Touch Yr Penis If You Voted Obama <span> <em style="background-image: url(&quot;/politics/Jon_Stewart_FL_Doc_Won_t_Touch_Yr_Penis_If_You_Voted_Obama/a.jpg&quot;);"> thumb</em> </span></a> </h3> <ul class="news-digg"> <li class="digg-count"> <a href="/politics/Jon_Stewart_FL_Doc_Won_t_Touch_Yr_Penis_If_You_Voted_Obama"> <strong>508</strong> </a> </li> </ul> </div> </div> So within each div with the class "news-summary", there is a link. How can I get javascript to go through the div "topten-list" and open each one?

    Read the article

  • Android - BroadcastReceiver CONNECTIVITY ACTION

    - by Marc Ortiz
    in my project there's a service that listens for changes in the connectivity. When wifi is switched off to on then it gets called. The problem it's that i'm using a fragment and inside a fragment there's a button with the setonclicklistener(); and onclick(); SOMETIMES when i touch the button then the service receives an intent that the connectivity has changed (the method gets called without any reason...). Here's the code of my fragment activity for the viewpager layout: public static class FragmentSelection extends Fragment { int mNum; static FragmentSelection newInstance(int num) { FragmentSelection f = new FragmentSelection(); // Supply num input as an argument. Bundle args = new Bundle(); args.putInt("num", num); f.setArguments(args); return f; } /** * When creating, retrieve this instance's number from its arguments. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); mNum = (getArguments() != null ? getArguments().getInt("num") : 1) + 1; } @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { final View v = inflater.inflate(R.layout.fragment_intro_contenido, container, false); Button btStart = (Button) v.findViewById(R.id.btChanged); final CheckBox cbSMS = (CheckBox) v.findViewById(R.id.checkBoxSms); final CheckBox cbCalls = (CheckBox) v .findViewById(R.id.checkBoxLlamadas); final CheckBox cbApps = (CheckBox) v .findViewById(R.id.checkBoxApps); final CheckBox cbPosition = (CheckBox) v .findViewById(R.id.checkBoxPosicion); final CheckBox cbContacts = (CheckBox) v .findViewById(R.id.checkBoxContactos); final CheckBox cbAll = (CheckBox) v.findViewById(R.id.checkBoxAll); cbSMS.setChecked(true); cbCalls.setChecked(true); cbApps.setChecked(true); cbPosition.setChecked(true); cbContacts.setChecked(true); cbAll.setChecked(true); btStart.setOnClickListener(new View.OnClickListener() { public void onClick(View c) { Intent i = new Intent(); i.setClass(v.getContext(), AnonymeActivity.class); if (!cbSMS.isChecked()) { i.putExtra("sms", 0); } else { i.putExtra("sms", 1); } if (!cbCalls.isChecked()) { i.putExtra("calls", 0); } else { i.putExtra("calls", 1); } if (cbContacts.isChecked()) { i.putExtra("contacts", 1); } else { i.putExtra("contacts", 0); } if (cbApps.isChecked()) { i.putExtra("apps", 1); } else { i.putExtra("apps", 0); } if (!cbPosition.isChecked()) { i.putExtra("gps", 0); } else { i.putExtra("gps", 1); } if (!cbAll.isChecked()) { if (cbSMS.isChecked() && cbCalls.isChecked() && cbContacts.isChecked() && cbApps.isChecked() && cbPosition.isChecked()) { i.putExtra("all", 1); } else { i.putExtra("all", 0); } } else { i.putExtra("all", 1); } startActivity(i); } }); return v; } @Override public void onActivityCreated(Bundle savedInstanceState) { super.onActivityCreated(savedInstanceState); } } My BroadcastReceiver class: class Broadcast_Reciver extends BroadcastReceiver implements Variables { CheckConexion cc; @Override public void onReceive(Context contxt, Intent intent) { // Cuando hay un evento, lo diferenciamos y hacemos una acción. if (intent.getAction().equals(SMS_RECEIVED)) { Sms sms = new Sms(null, contxt); sms.uploadNewSms(intent); } else if (intent.getAction().equals(Intent.ACTION_BATTERY_LOW)) { // st.batterylow(contxt); } else if (intent.getAction().equals(Intent.ACTION_POWER_CONNECTED)) { // st.power(1, contxt); } else if (intent.getAction().equals(Intent.ACTION_POWER_DISCONNECTED)) { // st.power(0, contxt); } else if (intent.getAction().equals(Intent.ACTION_CALL_BUTTON)) { // Notify } else if (intent.getAction().equals(Intent.ACTION_CAMERA_BUTTON)) { // Notify } else if (intent.getAction().equals(Intent.ACTION_PACKAGE_ADDED) || intent.getAction().equals(Intent.ACTION_PACKAGE_CHANGED) || intent.getAction().equals(Intent.ACTION_PACKAGE_REMOVED)) { Database db = new Database(contxt); if (db.open().Preferences(4)) { Uri data = intent.getData(); new ListApps(contxt).import_app(intent, contxt, data, intent.getAction()); } db.close(); } else if (intent.getAction().equals( ConnectivityManager.CONNECTIVITY_ACTION)) { cc = new CheckConexion(contxt); if (cc.isOnline()) { Database db = new Database(contxt); if (db.open().move() == 1) { new UploadOffline(contxt); } db.close(); } } } } And the errors: 9-03 23:20:37.887: E/SqliteDatabaseCpp(2715): CREATE TABLE android_metadata failed 09-03 23:20:37.887: E/SQLiteDatabase(2715): Failed to open the database. closing it. 09-03 23:20:37.887: E/SQLiteDatabase(2715): android.database.sqlite.SQLiteDatabaseLockedException: database is locked 09-03 23:20:37.887: E/SQLiteDatabase(2715): at android.database.sqlite.SQLiteDatabase.native_setLocale(Native Method) 09-03 23:20:37.887: E/SQLiteDatabase(2715): at android.database.sqlite.SQLiteDatabase.setLocale_(SQLiteDatabase.java:2211) 09-03 23:20:37.887: E/SQLiteDatabase(2715): at android.database.sqlite.SQLiteDatabase.setLocale(SQLiteDatabase.java:2199) 09-03 23:20:37.887: E/SQLiteDatabase(2715): at android.database.sqlite.SQLiteDatabase.openDatabase(SQLiteDatabase.java:1130) 09-03 23:20:37.887: E/SQLiteDatabase(2715): at android.database.sqlite.SQLiteDatabase.openDatabase(SQLiteDatabase.java:1081) 09-03 23:20:37.887: E/SQLiteDatabase(2715): at android.database.sqlite.SQLiteDatabase.openOrCreateDatabase(SQLiteDatabase.java:1167) 09-03 23:20:37.887: E/SQLiteDatabase(2715): at android.app.ContextImpl.openOrCreateDatabase(ContextImpl.java:833) 09-03 23:20:37.887: E/SQLiteDatabase(2715): at android.content.ContextWrapper.openOrCreateDatabase(ContextWrapper.java:221) 09-03 23:20:37.887: E/SQLiteDatabase(2715): at android.database.sqlite.SQLiteOpenHelper.getWritableDatabase(SQLiteOpenHelper.java:157) 09-03 23:20:37.887: E/SQLiteDatabase(2715): at com.background.Database.open(Database.java:127) 09-03 23:20:37.887: E/SQLiteDatabase(2715): at <b><b><b><h3>com.background.Broadcast_Reciver.onReceive(BroadcastService.java:100)</h3> 09-03 23:20:37.887: E/SQLiteDatabase(2715): at android.app.LoadedApk$ReceiverDispatcher$Args.run(LoadedApk.java:728) 09-03 23:20:37.887: E/SQLiteDatabase(2715): at android.os.Handler.handleCallback(Handler.java:605) 09-03 23:20:37.887: E/SQLiteDatabase(2715): at android.os.Handler.dispatchMessage(Handler.java:92) 09-03 23:20:37.887: E/SQLiteDatabase(2715): at android.os.Looper.loop(Looper.java:137) 09-03 23:20:37.887: E/SQLiteDatabase(2715): at android.app.ActivityThread.main(ActivityThread.java:4507) 09-03 23:20:37.887: E/SQLiteDatabase(2715): at java.lang.reflect.Method.invokeNative(Native Method) 09-03 23:20:37.887: E/SQLiteDatabase(2715): at java.lang.reflect.Method.invoke(Method.java:511) 09-03 23:20:37.887: E/SQLiteDatabase(2715): at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:790) 09-03 23:20:37.887: E/SQLiteDatabase(2715): at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:557) 09-03 23:20:37.887: E/SQLiteDatabase(2715): at dalvik.system.NativeStart.main(Native Method) 09-03 23:20:37.887: D/AndroidRuntime(2715): Shutting down VM 09-03 23:20:37.887: W/dalvikvm(2715): threadid=1: thread exiting with uncaught exception (group=0x40c3b1f8) 09-03 23:20:37.902: E/AndroidRuntime(2715): FATAL EXCEPTION: main 09-03 23:20:37.902: E/AndroidRuntime(2715): java.lang.RuntimeException: Error receiving broadcast Intent { act=android.net.conn.CONNECTIVITY_CHANGE flg=0x10000010 (has extras) } in com.background.Broadcast_Reciver@415203f8 09-03 23:20:37.902: E/AndroidRuntime(2715): at android.app.LoadedApk$ReceiverDispatcher$Args.run(LoadedApk.java:737) 09-03 23:20:37.902: E/AndroidRuntime(2715): at android.os.Handler.handleCallback(Handler.java:605) 09-03 23:20:37.902: E/AndroidRuntime(2715): at android.os.Handler.dispatchMessage(Handler.java:92) 09-03 23:20:37.902: E/AndroidRuntime(2715): at android.os.Looper.loop(Looper.java:137) 09-03 23:20:37.902: E/AndroidRuntime(2715): at android.app.ActivityThread.main(ActivityThread.java:4507) 09-03 23:20:37.902: E/AndroidRuntime(2715): at java.lang.reflect.Method.invokeNative(Native Method) 09-03 23:20:37.902: E/AndroidRuntime(2715): at java.lang.reflect.Method.invoke(Method.java:511) 09-03 23:20:37.902: E/AndroidRuntime(2715): at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:790) 09-03 23:20:37.902: E/AndroidRuntime(2715): at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:557) 09-03 23:20:37.902: E/AndroidRuntime(2715): at dalvik.system.NativeStart.main(Native Method) 09-03 23:20:37.902: E/AndroidRuntime(2715): Caused by: android.database.sqlite.SQLiteDatabaseLockedException: database is locked 09-03 23:20:37.902: E/AndroidRuntime(2715): at android.database.sqlite.SQLiteDatabase.native_setLocale(Native Method) 09-03 23:20:37.902: E/AndroidRuntime(2715): at android.database.sqlite.SQLiteDatabase.setLocale_(SQLiteDatabase.java:2211) 09-03 23:20:37.902: E/AndroidRuntime(2715): at android.database.sqlite.SQLiteDatabase.setLocale(SQLiteDatabase.java:2199) 09-03 23:20:37.902: E/AndroidRuntime(2715): at android.database.sqlite.SQLiteDatabase.openDatabase(SQLiteDatabase.java:1130) 09-03 23:20:37.902: E/AndroidRuntime(2715): at android.database.sqlite.SQLiteDatabase.openDatabase(SQLiteDatabase.java:1081) 09-03 23:20:37.902: E/AndroidRuntime(2715): at android.database.sqlite.SQLiteDatabase.openOrCreateDatabase(SQLiteDatabase.java:1167) 09-03 23:20:37.902: E/AndroidRuntime(2715): at android.app.ContextImpl.openOrCreateDatabase(ContextImpl.java:833) 09-03 23:20:37.902: E/AndroidRuntime(2715): at android.content.ContextWrapper.openOrCreateDatabase(ContextWrapper.java:221) 09-03 23:20:37.902: E/AndroidRuntime(2715): at android.database.sqlite.SQLiteOpenHelper.getWritableDatabase(SQLiteOpenHelper.java:157) 09-03 23:20:37.902: E/AndroidRuntime(2715): at com.background.Database.open(Database.java:127) 09-03 23:20:37.902: E/AndroidRuntime(2715): at com.background.Broadcast_Reciver.onReceive(BroadcastService.java:100) 09-03 23:20:37.902: E/AndroidRuntime(2715): at android.app.LoadedApk$ReceiverDispatcher$Args.run(LoadedApk.java:728) 09-03 23:20:37.902: E/AndroidRuntime(2715): ... 9 more Checkout that the program goes into BroadcastReceiver class and i don't understand why!

    Read the article

  • css menu <ul><li> dinamically centered or width of buttons that covers the whole page

    - by Tony Stark
    I am building a home page for my minecraft server. Probably in the following 4-6 months I will opend my second and this is why I am in trouble. My first site is 1000 pixel wide, and the second will be 1200. First big difference. My menus are dinamically generated by my php code. It checks on my databases if there is another button or it is over. These buttons can be added or removed directly online. Another big issue is the browser compatibility. In a survey I did on our previous server I had a lot of users using: chrome, internet explorer, safari and firefox. That means that I must find a solution that is compatible with most browsers. What do I have to do? I came up with this CSS, which is touch compatible, it allows menus to be swapped to the left and it is enough to set 1 parameter to fix it for every page width. Sadly it is left aligned. body, nav, ul, li, a {margin: 0; padding: 0;} body {font-family: Verdana,"Helvetica Neue", Helvetica, Arial, sans-serif; } a {text-decoration: none;} .container { max-width: 900px; margin: 0px auto 0px auto; } .toggleMenu { display: none; background: #666; padding: 10px 15px; color: #999999; } .nav { border: 1px solid #424242; background-color: #121212; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#686868', endColorstr='#121212'); background-image: -moz-linear-gradient(#686868, #121212); background-image: -webkit-gradient(linear, left top, left bottom, from(#686868), to(#121212)); background-image: -webkit-linear-gradient(#686868, #121212); background-image: -o-linear-gradient(#686868, #121212); background-image: -ms-linear-gradient(#686868, #121212); background-image: linear-gradient(#686868, #121212); -moz-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset; -webkit-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset; box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset; list-style: none; *zoom: 1; position: relative; } .nav:before,.nav:after { content: " "; display: table; } .nav:after { clear: both; } .nav ul { list-style: none; width: 11em; z-index: 1; background-color: #121212; -moz-box-shadow: 0 -1px rgba(255,255,255,.3); -webkit-box-shadow: 0 -1px 0 rgba(255,255,255,.3); box-shadow: 0 -1px 0 rgba(255,255,255,.3); } .nav a { padding: 10px 15px; color:#999999; text-transform: uppercase; font: bold 11px Arial, Helvetica; text-decoration: none; text-shadow: 0 1px 0 #000; *zoom: 1; } .nav a:hover{ color:#000000; background-color: #B2B2B2; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#D3D3D3', endColorstr='#B2B2B2'); background-image: -moz-linear-gradient(#D3D3D3, #B2B2B2); background-image: -webkit-gradient(linear, left top, left bottom, from(#D3D3D3), to(#B2B2B2)); background-image: -webkit-linear-gradient(#D3D3D3, #B2B2B2); background-image: -o-linear-gradient(#D3D3D3, #B2B2B2); background-image: -ms-linear-gradient(#D3D3D3, #B2B2B2); background-image: linear-gradient(#D3D3D3, #B2B2B2); } /*Delimitazione di ogni tab | HOME | */ .nav li { position: relative; border-right: 1px solid #424242; -moz-box-shadow: 1px 0 0 #686868; -webkit-box-shadow: 1px 0 0 #686868; box-shadow: 1px 0 0 #686868; } .nav > li { float: left; border-top: 1px solid #424242; z-index: 200; } .nav > li > .parent { background-image: url("../downArrow.png"); background-repeat: no-repeat; background-position: center right; } .nav > li li > .parent { background-image: url("../rightArrow.png"); background-repeat: no-repeat; background-position: center right; } .nav > li > a { display: block; } .nav li ul { position: absolute; left: -9999px; z-index: 100; } /* freccetta che indica un sottomenu nell'ultimo tab */ .nav > li:last-child li > .parent{ background-image: url("../leftArrow.png"); background-repeat: no-repeat; background-position: left; } /*flip subsubmenu*/ .nav li.last.hover > ul { left:auto; right: 0; } .nav > li.hover > ul { left: 0; } .nav li li.hover > ul { left: 100%; top: 0; } /* Spostare il 2^ sottomenu a sinistra */ .nav li.last li.hover ul { left:auto; right: 100%; top:0; } .nav li li a { display: block; background-color: #686868; -moz-box-shadow: 0 -1px rgba(255,255,255,.3); -webkit-box-shadow: 0 -1px 0 rgba(255,255,255,.3); box-shadow: 0 -1px 0 rgba(255,255,255,.3); z-index:100; border-top: 1px solid #686868; } .nav li li li a { background-color: #686868; -moz-box-shadow: 0 -1px rgba(255,255,255,.3); -webkit-box-shadow: 0 -1px 0 rgba(255,255,255,.3); box-shadow: 0 -1px 0 rgba(255,255,255,.3); z-index:200; border-top: 1px solid #686868; } .nav li li li li a { display: block; background-color: #686868; -moz-box-shadow: 0 -1px rgba(255,255,255,.3); -webkit-box-shadow: 0 -1px 0 rgba(255,255,255,.3); box-shadow: 0 -1px 0 rgba(255,255,255,.3); z-index:300; border-top: 1px solid #686868; } .nav li li li li a { background-color: #686868; -moz-box-shadow: 0 -1px rgba(255,255,255,.3); -webkit-box-shadow: 0 -1px 0 rgba(255,255,255,.3); box-shadow: 0 -1px 0 rgba(255,255,255,.3); z-index:400; border-top: 1px solid #686868; } @media screen and (max-width: 768px) { .active { display: block; } .nav > li { float: none; } .nav > li > .parent { background-position: 95% 50%; } .nav li li .parent { background-image: url("../downArrow.png"); background-repeat: no-repeat; background-position: 95% 50%; } .nav ul { display: block; width: 100%; } .nav > li.hover > ul , .nav li li.hover ul { position: static; } } My girlfriend (who adapted this code) is really busy for school and cannot help me. Leaving the borders on the whole square (page width), is it possible to make buttons cover the page width dinamically? Or is it possible to center the buttons? Thank you very much!

    Read the article

  • Android Actionbar Tabs + Fragments + Service

    - by Vladimir
    So, I have 3 problems with my code: 1) I want that each tab saves its state. So that a TextView shows changed text if it was changed. 2) if I go to Tab2 then to Tab1 I can't see the content of the fragments. Only if I touch on the already selected tab, it shows me the content 3) I can't correctly connect/bind and unbind service to Fragment Text must be changed from Service. Please help, I don't know how I realize my intent. MyActivity.java package com.example.tabs; import android.app.ActionBar; import android.app.ActionBar.Tab; import android.app.Activity; import android.app.ActivityManager; import android.app.ActivityManager.RunningServiceInfo; import android.app.Fragment; import android.app.FragmentTransaction; import android.content.ComponentName; import android.content.Context; import android.content.Intent; import android.content.ServiceConnection; import android.content.SharedPreferences; import android.os.Bundle; import android.os.Handler; import android.os.IBinder; import android.os.Message; public class MyActivity extends Activity { private static String ACTION_BAR_INDEX = "ACTION_BAR_INDEX"; private Tab tTab1; private Tab tTab2; private static MyService.MyBinder myBinder; private static Intent myServiceIntent; private static MyService myService; private TabListener<Tab1> tab1Listener; private TabListener<Tab2> tab2Listener; private static ServiceConnection myConnection = new ServiceConnection() { public void onServiceConnected(ComponentName name, IBinder binder) { myBinder = (MyService.MyBinder) binder; myService = myBinder.getService(); myBinder.setCallbackHandler(myServiceHandler); } public void onServiceDisconnected(ComponentName name) { myService = null; myBinder = null; } }; /** Callbackhandler. */ private static Handler myServiceHandler = new Handler() { public void handleMessage(Message message) { super.handleMessage(message); Bundle bundle = message.getData(); if (bundle != null) { String text = bundle.getString("Text1", ""); if (!text.equals("")) { } } } }; protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); myServiceIntent = new Intent(this, MyService.class); bindService(myServiceIntent, myConnection, Context.BIND_AUTO_CREATE); if (!isServiceRunning()) { startService(myServiceIntent); } final ActionBar actionBar = getActionBar(); actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS); actionBar.setDisplayShowTitleEnabled(false); tTab1 = actionBar.newTab(); tab1Listener = new TabListener<Tab1>(this, R.id.fl_main, Tab1.class); tTab1.setTag("Tab_1"); tTab1.setText("Tab_1"); tTab1.setTabListener(tab1Listener); tTab2 = actionBar.newTab(); tab2Listener = new TabListener<Tab2>(this, R.id.fl_main, Tab2.class); tTab2.setTag("Tab_2"); tTab2.setText("Tab_2"); tTab2.setTabListener(tab2Listener); actionBar.addTab(tTab1, 0); actionBar.addTab(tTab2, 1); } @Override public void onResume() { super.onResume(); SharedPreferences sp = getPreferences(Activity.MODE_PRIVATE); int actionBarIndex = sp.getInt(ACTION_BAR_INDEX, 0); getActionBar().setSelectedNavigationItem(actionBarIndex); } protected void onSaveInstanceState(Bundle outState) { // Save the current Action Bar tab selection int actionBarIndex = getActionBar().getSelectedTab().getPosition(); SharedPreferences.Editor editor = getPreferences(Activity.MODE_PRIVATE).edit(); editor.putInt(ACTION_BAR_INDEX, actionBarIndex); editor.apply(); // Detach each of the Fragments FragmentTransaction ft = getFragmentManager().beginTransaction(); if (tab2Listener.fragment != null) { ft.detach(tab2Listener.fragment); } if (tab1Listener.fragment != null) { ft.detach(tab1Listener.fragment); } ft.commit(); super.onSaveInstanceState(outState); } protected void onRestoreInstanceState(Bundle savedInstanceState) { // Find the recreated Fragments and assign them to their associated Tab // Listeners. tab1Listener.fragment = getFragmentManager().findFragmentByTag(Tab1.class.getName()); tab2Listener.fragment = getFragmentManager().findFragmentByTag(Tab2.class.getName()); // Restore the previous Action Bar tab selection. SharedPreferences sp = getPreferences(Activity.MODE_PRIVATE); int actionBarIndex = sp.getInt(ACTION_BAR_INDEX, 0); getActionBar().setSelectedNavigationItem(actionBarIndex); super.onRestoreInstanceState(savedInstanceState); } public boolean isServiceRunning() { ActivityManager manager = (ActivityManager) getSystemService(Context.ACTIVITY_SERVICE); for (RunningServiceInfo service : manager.getRunningServices(Integer.MAX_VALUE)) { if (MyService.class.getName().equals(service.service.getClassName())) { return true; } } return false; } @Override protected void onDestroy() { super.onDestroy(); unbindService(myConnection); stopService(myServiceIntent); } public static class TabListener<T extends Fragment> implements ActionBar.TabListener { private Fragment fragment; private Activity activity; private Class<T> fragmentClass; private int fragmentContainer; public TabListener(Activity activity, int fragmentContainer, Class<T> fragmentClass) { this.activity = activity; this.fragmentContainer = fragmentContainer; this.fragmentClass = fragmentClass; } public void onTabReselected(Tab tab, FragmentTransaction ft) { if (fragment != null) { ft.attach(fragment); } } public void onTabSelected(Tab tab, FragmentTransaction ft) { if (fragment == null) { String fragmentName = fragmentClass.getName(); fragment = Fragment.instantiate(activity, fragmentName); ft.add(fragmentContainer, fragment, fragmentName); } else { ft.detach(fragment); } } public void onTabUnselected(Tab tab, FragmentTransaction ft) { if (fragment != null) { ft.detach(fragment); } } } } MyService.java package com.example.tabs; import android.app.Service; import android.content.Intent; import android.os.Binder; import android.os.Bundle; import android.os.Handler; import android.os.IBinder; import android.os.Message; public class MyService extends Service { private final IBinder myBinder = new MyBinder(); private static Handler myServiceHandler; public IBinder onBind(Intent intent) { return myBinder; } public int onStartCommand(Intent intent, int flags, int startId) { super.onStartCommand(intent, flags, startId); return START_STICKY; } public void sendMessage(String sText, int id) { Bundle bundle = new Bundle(); bundle.putString("Text" + id, sText); Message bundleMessage = new Message(); bundleMessage.setData(bundle); myServiceHandler.sendMessage(bundleMessage); } public class MyBinder extends Binder { public MyService getService() { return MyService.this; } public void setCallbackHandler(Handler myActivityHandler) { myServiceHandler = myActivityHandler; } public void removeCallbackHandler() { myServiceHandler = null; } } } Tab1.java package com.example.tabs; import android.app.Activity; import android.app.Fragment; import android.content.ComponentName; import android.content.Context; import android.content.Intent; import android.content.ServiceConnection; import android.os.Bundle; import android.os.Handler; import android.os.IBinder; import android.os.Message; import android.view.LayoutInflater; import android.view.View; import android.view.View.OnClickListener; import android.view.ViewGroup; import android.widget.Button; import android.widget.EditText; import android.widget.TextView; public class Tab1 extends Fragment { public static String TAG = Tab1.class.getClass().getSimpleName(); private static TextView tvText; private EditText editText; private static MyService.MyBinder myBinder; private static Intent myServiceIntent; private static MyService myService; private static ServiceConnection myConnection = new ServiceConnection() { public void onServiceConnected(ComponentName name, IBinder binder) { myBinder = (MyService.MyBinder) binder; myService = myBinder.getService(); myBinder.setCallbackHandler(myServiceHandler); } public void onServiceDisconnected(ComponentName name) { myService = null; myBinder = null; } }; /** Callbackhandler. */ private static Handler myServiceHandler = new Handler() { public void handleMessage(Message message) { super.handleMessage(message); Bundle bundle = message.getData(); if (bundle != null) { String text = bundle.getString("Text1", ""); if (!text.equals("")) { tvText.setText(text); } } } }; public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View view = inflater.inflate(R.layout.tab1, container, false); tvText = (TextView) view.findViewById(R.id.tv_tab1); editText = (EditText) view.findViewById(R.id.editText1); Button btn1 = (Button) view.findViewById(R.id.btn_change_text_1); btn1.setOnClickListener(new OnClickListener() { public void onClick(View v) { myService.sendMessage(String.valueOf(editText.getText()), 1); } }); return view; } @Override public void onAttach(Activity activity) { super.onAttach(activity); myServiceIntent = new Intent(activity, MyService.class); activity.bindService(myServiceIntent, myConnection, Context.BIND_AUTO_CREATE); } @Override public void onDetach() { super.onDetach(); getActivity().unbindService(myConnection); } } Tab2.java package com.example.tabs; import android.app.Activity; import android.app.Fragment; import android.content.ComponentName; import android.content.Context; import android.content.Intent; import android.content.ServiceConnection; import android.os.Bundle; import android.os.Handler; import android.os.IBinder; import android.os.Message; import android.util.Log; import android.view.LayoutInflater; import android.view.View; import android.view.View.OnClickListener; import android.view.ViewGroup; import android.widget.Button; import android.widget.EditText; import android.widget.TextView; public class Tab2 extends Fragment { public static String TAG = Tab2.class.getClass().getSimpleName(); private static TextView tvText; private EditText editText; private static MyService.MyBinder myBinder; private static Intent myServiceIntent; private static MyService myService; private static ServiceConnection myConnection = new ServiceConnection() { public void onServiceConnected(ComponentName name, IBinder binder) { myBinder = (MyService.MyBinder) binder; myService = myBinder.getService(); myBinder.setCallbackHandler(myServiceHandler); } public void onServiceDisconnected(ComponentName name) { myService = null; myBinder = null; } }; /** Callbackhandler. */ private static Handler myServiceHandler = new Handler() { public void handleMessage(Message message) { super.handleMessage(message); Bundle bundle = message.getData(); if (bundle != null) { String text = bundle.getString("Text1", ""); if (!text.equals("")) { tvText.setText(text); } } } }; public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View view = inflater.inflate(R.layout.tab2, container, false); tvText = (TextView) view.findViewById(R.id.tv_tab2); editText = (EditText) view.findViewById(R.id.editText2); Button btn2 = (Button) view.findViewById(R.id.btn_change_text_2); btn2.setOnClickListener(new OnClickListener() { public void onClick(View v) { myService.sendMessage(String.valueOf(editText.getText()), 2); } }); return view; } @Override public void onAttach(Activity activity) { super.onAttach(activity); myServiceIntent = new Intent(activity, MyService.class); activity.bindService(myServiceIntent, myConnection, Context.BIND_AUTO_CREATE); } @Override public void onDetach() { super.onDetach(); getActivity().unbindService(myConnection); } } main.xml <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/main" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@android:color/black" android:orientation="vertical" > </LinearLayout> tab1.xml <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_gravity="center" android:gravity="center" android:orientation="vertical" > <EditText android:id="@+id/editText1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginBottom="10dp" android:ems="10" android:inputType="text" > <requestFocus /> </EditText> <Button android:id="@+id/btn_change_text_1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginBottom="10dp" android:text="Change text" /> <TextView android:id="@+id/tv_tab1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="TAB1\nTAB1\nTAB1" /> </LinearLayout> tab2.xml <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_gravity="center" android:gravity="center" android:orientation="vertical" > <EditText android:id="@+id/editText2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginBottom="10dp" android:ems="10" android:inputType="text" > <requestFocus /> </EditText> <Button android:id="@+id/btn_change_text_2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginBottom="10dp" android:text="Change text" /> <TextView android:id="@+id/tv_tab2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginBottom="10dp" android:text="TAB2\nTAB2\nTAB2" /> </LinearLayout> AndroidManifest.xml <?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.example.tabs" android:versionCode="1" android:versionName="1.0" > <uses-sdk android:minSdkVersion="15" android:targetSdkVersion="17" /> <application android:allowBackup="true" android:icon="@drawable/ic_launcher" android:label="TabsPlusService" android:theme="@android:style/Theme.Holo" > <activity android:name="com.example.tabs.MyActivity" android:configChanges="orientation|keyboardHidden|screenSize" android:label="TabsPlusService" android:theme="@android:style/Theme.Holo" > <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter> </activity> <service android:name=".MyService" android:enabled="true" > </service> </application> </manifest>

    Read the article

  • PHP form auto response

    - by Mark
    Hi, I am using the following php code which has been given to me, it works fine, apart from the auto response bit. I know its not a lot of code I just dont know how to do it or why it snot working. Any help would be appreciated. thanks in advance. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title> - Contact Us</title> <!-- css --> <link rel="stylesheet" type="text/css" href="css/reset.css" /> <link rel="stylesheet" type="text/css" href="css/styles.css" /> <link rel="stylesheet" type="text/css" href="css/colorbox.css" /> <!-- javascript libraries --> <?php require_once('includes/js.php'); ?> </head> <body> <?php //FIll out the settings below before using this script $your_email = "(email address)"; $website = "(website name)"; //BOTS TO BLOCK $bots = "/(Indy|Blaiz|Java|libwww-perl|Python|OutfoxBot|User-Agent|PycURL|AlphaServer|T8Abot|Syntryx|WinHttp|WebBandit|nicebot)/i"; //Check if known bot is visiting if (preg_match($bots, $_SERVER["HTTP_USER_AGENT"])) { exit ("Sorry bots are not allowed here!"); } //Known Exploits $exploits = "/(content-type|bcc:|cc:|from:|reply-to:|javascript|onclick|onload)/i"; //Spam words $spam_words = "/(viagra|poker|blackjack|porn|sex)/i"; // BAD WORDS $words = "/( bitch|dick|pussy|pussies|ass|fuck|cum|cumshot|cum shot| gangbang|gang bang|god dammit|goddammit|viagra|anus|analsex )/i"; //BAD WORD/SPAM WORD/EXPLOIT BLOCKER function wordBlock($word) { //Make variables global global $words; global $exploits; global $spam_words; if (preg_match($words, $word)) { $word = preg_replace($words, "#####", $word); } if(preg_match($exploits,$word)){ $word = preg_replace($exploits,"",$word); } if(preg_match($spam_words,$word)){ $word = preg_replace($spam_words,"$$$$",$word); } return $word; } //CLean data function function dataClean($data) { $data = stripslashes(trim(rawurldecode(strip_tags($data)))); return $data; } //CREATE MAIN VARIABLES $name = (isset ($_POST['name'])) ? dataClean($_POST['name']) : FALSE; $company = (isset ($_POST['company'])) ? dataClean($_POST['company']) : FALSE; $address = (isset ($_POST['address'])) ? dataClean($_POST['address']) : FALSE; $postcode = (isset ($_POST['postcode'])) ? dataClean($_POST['postcode']) : FALSE; $phone = (isset ($_POST['phone'])) ? dataClean($_POST['phone']) : FALSE; $email = (isset ($_POST['email'])) ? dataClean($_POST['email']) : FALSE; $comment = (isset ($_POST['message'])) ? wordBlock(dataClean($_POST['message'])) : FALSE; $submit = (isset ($_POST['send'])) ? TRUE : FALSE; $email_check = "/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,6}$/i"; //$ip = $_SERVER["REMOTE_ADDR"]; $errors = array(); //Check if send button was clicked if ($submit) { if (!$name) { $errors[] = "Please enter a name!"; } if ($name) { if (!ereg("^[A-Za-z' -]*$", $name)) { $errors[] = "You may not use special characters in the name field!"; } } if (!$email) { $errors[] = "Please enter an email address!"; } if ($email) { if (!preg_match($email_check, $email)) { $errors[] = "The E-mail you entered is invalid!"; } } /* if (!$subject) { $errors[] = "Please enter an email subject!"; } */ if (!$comment) { $errors[] = "Please don't leave the message field blank!"; } //Check if any errors are present if (count($errors) > 0) { foreach ($errors AS $error) { print "&bull; $error <br />"; } } else { //MESSAGE TO SEND TO ADMIN //Create main headers $headers = "From: " . $website . " <$your_email> \n"; $headers .= "Reply-to:" . $email . " \n"; $headers .= "MIME-Version: 1.0\n"; $headers .= "Content-Transfer-Encoding: 8bit\n"; $headers .= "Content-Type: text/html; charset=UTF-8\n"; $message = ""; $message .= "<h1>New E-Mail From " . $website . "</h1><br /><br />"; $message .= "<b>Name:</b> " . $name . "<br />"; $message .= "<b>Company:</b> " . $company . "<br />"; $message .= "<b>Address:</b> " . $address . "<br />"; $message .= "<b>Postcode:</b > " . $postcode . "<br />"; $message .= "<b>Phone No:</b> " . $phone . "<br />"; $message .= "<b>E-mail:</b> " . $email . "<br />"; $message .= "<b>Message:</b> " . $comment . "<br />"; //E-mails subject $mail_subject = "Message from " . $website . ""; /* CHECK TO BE SURE FIRST E-MAIL TO ADMIN IS A SUCCESS AND SEND EMAIL TO ADMIN OTHERWISE DON'T SEND AUTO RESPONCE */ if (mail($your_email, $mail_subject, $message, $headers)) { //UNSET ALL VARIABLES unset ($name, $email, $company, $address, $postcode, $phone, $comment, $_REQUEST); //JAVASCRIPT SUCCESS MESSAGE echo " <script type='text/javascript' language='JavaScript'> alert('Your message has been sent'); </script> "; //SUCCESS MESSAGE TO SHOW IF JAVASCRIPT IS DISABLED echo "<noscript><p>THANK YOU YOUR MESSAGE HAS BEEN SENT</p></noscript>"; /* -----------------END MAIL BLOCK FOR SENDING TO ADMIN AND START AUTO RESPONCE SEND----------------- */ //AUTO RESPONCE MESSAGE //Create main headers $headers = "From: " . $website . " <$your_email> \n"; $headers .= "Reply-to:" . $your_email . " \n"; $headers .= "MIME-Version: 1.0\n"; $headers .= "Content-Transfer-Encoding: 8bit\n"; $headers .= "Content-Type: text/html; charset=UTF-8\n"; $message = ""; $message .= "<h1>Thank You For Contacting Us </h1><br /><br />"; $message .= "On behalf of <b>" . $website . "</b> we wanna thank you for contacting us and to let you know we will respond to your message as soon as possible thank you again."; //E-mails subject $mail_subject = "Thank you for contacting " . $website . ""; //Send the email mail($email, $mail_subject, $message, $headers); /* -----------------END MAIL BLOCK FOR SENDING AUTO RESPONCE ----------------- */ } else { echo " <script type='text/javascript' language='JavaScript'> alert('Sorry could not send your message'); </script> "; echo "<noscript><p style='color:red;'>SORRY COULD NOT SEND YOUR MESSAGE</p></noscript>"; } } } ?> <div id="wrapper"> <div id="grad_overlay"> <!-- Header --> <div id="header"> <a href="index.php" title="Regal Balustrades"><img src="images/regal_logo.png" alt="Regal Balustrades" /></a> <div id="strapline"> <img src="images/strapline.png" alt="Architectural metalwork systems" /> </div> </div> <!-- Navigation --> <div id="nav"> <?php require_once('includes/nav.php'); ?> </div> <!-- Content --> <div id="content"> <div id="details"> <p class="getintouch env">Get In Touch</p> <ul class="details"> <li>T. (0117) 935 3888</li> <li>F. (0117) 967 7333</li> <li>E. <a href="mailto:[email protected]" title="Contact via email">[email protected]</a></li> </ul> <p class="whereto hse">Where To Find Us</p> <ul class="details"> <li>Regal Balustrades</li> <li>Regal House, </li> <li>Honey Hill Road,</li> <li>Kingswood, </li> <li>Bristol BS15 4HG</li> </ul> </div> <div id="contact"> <h1>Contact us</h1> <p>Please use this form to request further information about Regal Balustrades and our services. To speak to a member of our staff in person, please call us on 0117 9353888</p> <div id="form"> <form method='POST' action='<?php echo "".$_SERVER['PHP_SELF'].""; ?>'> <p class='form-element'> <label for='name'>Name:</label> <input type='text' name='name' value='<?php echo "" . $_REQUEST['name'] . "";?>' /> </p> <p class='form-element'> <label for='company'>Company:</label> <input type='text' name='company' value='<?php echo "" . $_REQUEST['company'] . "";?>' /> </p> <p class='form-element'> <label for='address'>Address:</label> <textarea name='address' rows='5' id='address' class='address' ><?php echo "" . $_REQUEST['address'] . "";?></textarea> </p> <p class='form-element'> <label for='postcode'>Postcode:</label> <input type='text' name='postcode' value='<?php echo "" . $_REQUEST['postcode'] . "";?>' /> </p> <p class='form-element'> <label for='phone'>Telephone:</label> <input type='text' name='phone' value='<?php echo "" . $_REQUEST['phone'] . "";?>' /> </p> <p class='form-element'> <label for='email'>Email:</label> <input type='text' name='email' value='<?php echo "" . $_REQUEST['email'] . "";?>' /> </p> </div> <div id='form-right'> <p class='form-element'> <label for='message'>Enquiry:</label> <textarea name='message' class='enquiry' id='enquiry' rows='5' cols='40' ><?php echo "" . $_REQUEST['message'] . "";?></textarea> </p> <p class='form-element'> <input type='submit' class='submit' name='send' value='Send message' /> </p> </div> <p class='nb'><em>We will respond as soon as possible.</em></p> </form> </div> </div> </div> </div> </div> <!-- Footer --> <div id="footer-container"> <?php require_once('includes/footer.php'); ?> </div> <!-- js functions --> <script> $(document).ready(function() { $("ul#navig li:nth-child(6)").addClass("navon"); }); </script> </body> </html>

    Read the article

  • Wordpress Template HTML CSS Layout Confusion

    - by Jess McKenzie
    I am having huge confusion with a template that I have purchased and I am trying to modify to handle a widget contact form. I am getting close with this but I have now muddled up the CSS or I have a feeling every page has a different CSS structure. The General Layout: What I Manage To Get: HTML View Source: <div id="innerright"> <div id="home" class="page"> <div id="homeslides"> <div class="welcomeslide"> <h1 class="large">Welcome</h1> </div> </div><!-- end home slides --> </div><!-- end page --> <div id="portfolio" class="page"> <div class="verticalline"> <div class="scrollprevnext"></div> </div> <div class="pageheader"> <h3><span>P</span>ortfolio</h3> </div><!--end pageheader --> <div id="portfolioscroller" class="scrollerenabledpage"> <div class="content"> <h5>Recent Work</h5> <ul class="thumb"> <li><a rel="precision_gallery" href="" title=""><img alt="" src="" /></a></li> </ul> </div> </div><!--end v scroll inner--> </div><!-- end page --> <div id="contact" class="page"> <div class="verticalline"> <div class="scrollprevnext"></div> </div> <div class="pageheader"> <h3><span>C</span>ontact</h3> </div><!--end pageheader --> <div id="contactscroller"> <h5>Get In Touch</h5> <div id="contactform">content</div> </div><!--end v scroll inner--> </div><!-- end page --> </div><!--end innerright--> CSS: CSS index.php: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title><?php bloginfo('name'); ?></title> <link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/style.css" /> <link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/fancybox/jquery.fancybox-1.3.4.css" media="screen" /> <?php // jquery will be included by wp_head function as well as scripts and styles by third party plugins wp_head(); ?> <script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/plugins.js"></script> <script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/script.js"></script> <script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/fancybox/jquery.fancybox-1.3.4.pack.js"></script> <?php // background image if one has been set via options if (function_exists('get_option_tree')) { $background_image = get_option_tree('precision_background_image'); //$background_image = ''; $background_color = get_option_tree('precision_background_color'); if ($background_color != '') { echo '<style>body { background-color:'.$background_color.'; }</style>'; } } ?> <script type="text/javascript"> jQuery(document).ready(function($) { $('.page').each(function(index, element) { $(this).css('left', index * 500); }); <?php // if background is set via the OptionTree then load it first if ($background_image != '') { ?> $.vegas({ src:'<?php echo $background_image; ?>', fade:1000, complete:function() { $("#wrapper").fadeIn(1000); $("#bgpanel").fadeIn(1000); $('#mainslide').crossSlide( { speed: 15, fade: 1 }, [ <?php echo $slides; ?> ] ) $('#homeslides').bxSlider({ mode: 'fade', auto: true, controls:false, speed:1000, pause:5000 }); } }); <?php } else { // if no background has been set then fade-in the page ?> $("#wrapper").fadeIn(1000); $("#bgpanel").fadeIn(1000); $('#mainslide').crossSlide( { speed: 15, fade: 1 }, [ //ENTER YOUR MAIN SLIDESHOW IMAGES HERE\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ <?php echo $slides; ?> ] ) $('#homeslides').bxSlider({ mode: 'fade', auto: true, controls:false, speed:1000, pause:5000 }); <?php } ?> //BX SLIDER INNER PAGE SCROLLERS//////////////////////// $('.scrollerenabledpage').each(function(index, element) { $('#' + $(this).attr('id')).bxSlider({ mode: 'vertical', easing: 'easeInOutQuint', auto: false, controls: true, prevImage:'<?php echo get_template_directory_uri(); ?>/images/up.png', nextImage:'<?php echo get_template_directory_uri(); ?>/images/down.png', infiniteLoop: false, hideControlOnEnd: true, pager: true, pagerType:'short', pagerShortSeparator:'of', speed:800, }); }); //END BX SLIDER INNER PAGE SCROLLERS///////////////// $('#submit').click(function(e) { e.preventDefault(); $('form').submit(); }); // contact form $('form').submit(function(e) { $('#main').append('<img src="<?php echo get_template_directory_uri(); ?>/images/loader.gif" class="loaderIcon" alt="Loading..." />'); $.post("<?php bloginfo('wpurl'); ?>/wp-admin/admin-ajax.php", {action:'precision_contact_form_handler', uname:$('input#uname').val(), uemail:$('input#uemail').val(), ucomments:$('textarea#ucomments').val()}, function(data) { $('#main img.loaderIcon').fadeOut(1000); if (data.status == "success") { $('#response').html("Forum has been successfully submitted."); } else { if (data.response != '') { $('#response').html(data.response); } else { $('#response').html("An error occurred while submitting the form. Please try again."); } } }, "json"); return false; }); }); //hides contact form labels when a field gets focus function initOverLabels () { if (!document.getElementById) return; var labels, id, field; labels = document.getElementsByTagName('label'); for (var i = 0; i < labels.length; i++) { if (labels[i].className == 'overlabel') { id = labels[i].htmlFor || labels[i].getAttribute('for'); if (!id || !(field = document.getElementById(id))) { continue; } labels[i].className = 'overlabel-apply'; if (field.value !== '') { hideLabel(field.getAttribute('id'), true); } field.onfocus = function () { hideLabel(this.getAttribute('id'), true); }; field.onblur = function () { if (this.value === '') { hideLabel(this.getAttribute('id'), false); } }; labels[i].onclick = function () { var id, field; id = this.getAttribute('for'); if (id && (field = document.getElementById(id))) { field.focus(); } }; } } }; function hideLabel(field_id, hide) { var field_for; var labels = document.getElementsByTagName('label'); for (var i = 0; i < labels.length; i++) { field_for = labels[i].htmlFor || labels[i].getAttribute('for'); if (field_for == field_id) { labels[i].style.textIndent = (hide) ? '-1000px' : '0px'; return true; } } } window.onload = function () { setTimeout(initOverLabels, 50); }; </script> <?php if (function_exists('get_option_tree')) { $precision_font_family_1 = get_option_tree('precision_font_family_1'); ?> <link href='http://fonts.googleapis.com/css?family=<?php echo $precision_font_family_1; ?>' rel='stylesheet' type='text/css'> <?php } ?> <style> h1, h2 { font-family:<?php echo $precision_font_family_1; ?>; } </style> </head> <body> <div id="wrapper"> <div id="innerleft"> <div id="header"> <?php if (function_exists('get_option_tree')) { $site_logo = get_option_tree('precision_site_logo'); ?> <a href="/" title="<?php bloginfo('name');?>"><img src="<?php echo $site_logo; ?>" alt="<?php bloginfo('name');?>" /></a> <?php } ?> </div><!--end header--> <?php if (function_exists('get_option_tree')) { $precision_slideshow_image = get_option_tree('precision_slideshow_image'); } ?> <ul id="nav"><!--Navigation--> <?php //instead of using wp_nav_menu, we use wp_get_nav_menu_items so that we can store the data in array and re-use it again //wp_nav_menu(array('theme_location' => 'precision-main-menu', 'container' => 'false')); $slt_menuItems = wp_get_nav_menu_items( "precision-main-menu" ); $menusItems = array(); foreach ($slt_menuItems as $slt_menuItem) { $page_title = $slt_menuItem->title; $menuItem = new stdClass; $menuItem->title = $page_title; $menuItem->page_id = $slt_menuItem->object_id; $menusItems[] = $menuItem; ?> <li id="<?php echo strtolower($page_title); ?>nav"><a href="#<?php echo strtolower($page_title); ?>"><?php echo $page_title; ?></a></li> <?php } ?> </ul> <div id="socialMedia"> <ul class="social"> <?php if (function_exists('get_option_tree')) { $twitter_link = get_option_tree('precision_twitter_link'); $facebook_link = get_option_tree('precision_facebook_link'); $gplus_link = get_option_tree('precision_gplus_link'); $delicious_link = get_option_tree('precision_delicious_link'); $flickr_link = get_option_tree('precision_flickr_link'); $vimeo_link = get_option_tree('precision_vimeo_link'); $youtube_link = get_option_tree('precision_youtube_link'); $linkedin_link = get_option_tree('precision_linkedin_link'); ?> <!-- start linkedin icon --> <?php if($linkedin_link != ''){ ?> <li><a href="<?php echo $linkedin_link;?>" title="Follow <?php bloginfo('name'); ?> on Linkedin"><img src="<?php echo get_template_directory_uri();?>/images/social-icons/linkedin.png" width="49" height="64" alt="<?php bloginfo('name'); ?> Linkedin"/></a><li> <?php } ?> <!-- end linkedin icon --> <!--start twitter icon--> <?php if ($twitter_link != '') { ?> <li><a href="<?php echo $twitter_link; ?>" title="Follow <?php bloginfo('name'); ?> on Twitter"><img src="<?php echo get_template_directory_uri(); ?>/images/social-icons/twitter.png" width="49" height="64" alt="<?php bloginfo('name'); ?> Twitter" /></a></li> <?php } ?> <!--end twitter icon--> <!--start facebook icon--> <?php if ($facebook_link != '') { ?> <li><a href="<?php echo $facebook_link; ?>" title="Follow <?php bloginfo('name'); ?> on Facebook"><img src="<?php echo get_template_directory_uri(); ?>/images/social-icons/facebook.png" width="49" height="64" alt="<?php bloginfo('name'); ?> Facebook" /></a></li> <?php } ?> <!--end facebook icon--> <!--start google plus icon--> <?php if ($gplus_link != '') { ?> <li><a href="<?php echo $gplus_link; ?>"><img src="<?php echo get_template_directory_uri(); ?>/images/social-icons/google_plus.png" width="16" height="16" alt="google+" /></a></li> <?php } ?> <!--end google plus icon--> <!--start delicious icon--> <?php if ($delicious_link != '') { ?> <li><a href="<?php echo $delicious_link; ?>"><img src="<?php echo get_template_directory_uri(); ?>/images/social-icons/delicious.png" width="16" height="16" alt="delicious" /></a></li> <?php } ?> <!--end delicious icon--> <!--start flickr icon--> <?php if ($flickr_link != '') { ?> <li><a href="<?php echo $flickr_link; ?>"><img src="<?php echo get_template_directory_uri(); ?>/images/social-icons/flickr.png" width="16" height="16" alt="flickr" /></a></li> <?php } ?> <!--end flickr icon--> <!--start vimeo icon--> <?php if ($vimeo_link != '') { ?> <li><a href="<?php echo $vimeo_link; ?>"><img src="<?php echo get_template_directory_uri(); ?>/images/social-icons/vimeo.png" width="16" height="16" alt="vimeo" /></a></li> <?php } ?> <!--end vimeo icon--> <!--start youtube icon--> <?php if ($youtube_link != '') { ?> <li><a href="<?php echo $youtube_link; ?>"><img src="<?php echo get_template_directory_uri(); ?>/images/social-icons/youtube.png" width="16" height="16" alt="youtube" /></a></li> <?php } ?> <!--end youtube icon--> <?php } ?> </ul> </div> </div><!--end innerleft--> <div id="innerright"> <?php if (function_exists('get_option_tree')) { $precision_home_page_option = get_option_tree('precision_home_page'); $precision_home_page = strtolower(get_the_title($precision_home_page_option)); if ($precision_home_page == '') { $precision_home_page = 'home'; } $precision_contact_page_option = get_option_tree('precision_contact_page'); $precision_contact_page = strtolower(get_the_title($precision_contact_page_option)); if ($precision_contact_page == '') { $precision_contact_page = 'contact'; } } foreach ($menusItems as $menuItem) { ?> <div id="<?php echo strtolower($menuItem->title); ?>" class="page"> <?php if (strtolower($menuItem->title) == $precision_home_page) { ?> <div id="homeslides"> <?php $page_data = get_page($menuItem->page_id); $content = apply_filters('the_content', $page_data->post_content); echo $content; ?> </div><!-- end home slides --> <?php } else { ?> <div class="verticalline"> <div class="scrollprevnext"></div> </div> <div class="pageheader"> <h3><span><?php echo substr($menuItem->title, 0, 1); ?></span><?php echo substr($menuItem->title, 1); ?></h3> </div><!--end pageheader --> <?php $classes = ''; if (strtolower($menuItem->title) == $precision_contact_page) { ?> <div id="<?php echo strtolower($menuItem->title); ?>scroller"> <?php $page_data = get_page($menuItem->page_id); $content = apply_filters('the_content', $page_data->post_content); echo $content; ?> </div><!--end v scroll inner--> <?php } else { $classes = 'scrollerenabledpage'; ?> <div id="<?php echo strtolower($menuItem->title); ?>scroller" class="<?php echo $classes; ?>"> <?php $page_data = get_page($menuItem->page_id); $content = apply_filters('the_content', $page_data->post_content); echo $content; ?> </div><!--end v scroll inner--> <?php } } ?> </div><!-- end page --> <?php } ?> </div><!--end innerright--> <div id="footer"> <p>&copy; <a href="/"><?php bloginfo('name');?></a> | <?php echo date('Y');?></p> </div> </div><!--end wrapper--> </div> <!--Live Preview--> </body> </html>

    Read the article

  • Performance issues in android game

    - by user1446632
    I am making an android game, but however, the game is functioning like it should, but i am experiencing some performance issues. I think it has something to do with the sound. Cause each time i touch the screen, it makes a sound. I am using the standard MediaPlayer. The method is onTouchEvent() and onPlaySound1(). Could you please help me with an alternate solution for playing the sound? Thank you so much in advance! It would be nice if you also came up with some suggestions on how i can improve my code. Take a look at my code here: package com.mycompany.mygame; import java.util.ArrayList; import android.content.Context; import android.content.Intent; import android.graphics.Bitmap; import android.graphics.BitmapFactory; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; import android.media.MediaPlayer; import android.os.Handler; import android.os.Message; import android.util.Log; import android.view.Menu; import android.view.MenuInflater; import android.view.MenuItem; import android.view.MotionEvent; import android.view.SurfaceHolder; import android.view.SurfaceView; import android.view.View; import android.webkit.WebView; import android.widget.TextView; import android.widget.Toast; public class ExampleView extends SurfaceView implements SurfaceHolder.Callback { class ExampleThread extends Thread { private ArrayList<Parachuter> parachuters; private Bitmap parachuter; private Bitmap background; private Paint black; private boolean running; private SurfaceHolder mSurfaceHolder; private Context mContext; private Context mContext1; private Handler mHandler; private Handler mHandler1; private GameScreenActivity mActivity; private long frameRate; private boolean loading; public float x; public float y; public float x1; public float y1; public MediaPlayer mp1; public MediaPlayer mp2; public int parachuterIndexToResetAndDelete; public int canvasGetWidth; public int canvasGetWidth1; public int canvasGetHeight; public int livesLeftValue; public int levelValue = 1; public int levelValue1; public int parachutersDown; public int difficultySet; public boolean isSpecialAttackAvailible; public ExampleThread(SurfaceHolder sHolder, Context context, Handler handler) { mSurfaceHolder = sHolder; mHandler = handler; mHandler1 = handler; mContext = context; mActivity = (GameScreenActivity) context; parachuters = new ArrayList<Parachuter>(); parachuter = BitmapFactory.decodeResource(getResources(), R.drawable.parachuteman); black = new Paint(); black.setStyle(Paint.Style.FILL); black.setColor(Color.GRAY); background = BitmapFactory.decodeResource(getResources(), R.drawable.gamescreenbackground); running = true; // This equates to 26 frames per second. frameRate = (long) (1000 / 26); loading = true; mp1 = MediaPlayer.create(getContext(), R.raw.bombsound); } @Override public void run() { while (running) { Canvas c = null; try { c = mSurfaceHolder.lockCanvas(); synchronized (mSurfaceHolder) { long start = System.currentTimeMillis(); doDraw(c); long diff = System.currentTimeMillis() - start; if (diff < frameRate) Thread.sleep(frameRate - diff); } } catch (InterruptedException e) { } finally { if (c != null) { mSurfaceHolder.unlockCanvasAndPost(c); } } } } protected void doDraw(Canvas canvas) { canvas.drawRect(0, 0, canvas.getWidth(), canvas.getHeight(), black); //Draw for (int i = 0; i < parachuters.size(); i++) { canvas.drawBitmap(parachuter, parachuters.get(i).getX(), parachuters.get(i).getY(), null); parachuters.get(i).tick(); } //Remove for (int i = 0; i < parachuters.size(); i++) { if (parachuters.get(i).getY() > canvas.getHeight()) { parachuters.remove(i); onPlaySound(); checkLivesLeftValue(); checkAmountOfParachuters(); } else if(parachuters.get(i).isTouched()) { parachuters.remove(i); } else{ //Do nothing } } } public void loadBackground(Canvas canvas) { //Load background canvas.drawBitmap(background, 0, 0, black); } public void checkAmountOfParachuters() { mHandler.post(new Runnable() { @Override public void run() { if(parachuters.isEmpty()) { levelValue = levelValue + 1; Toast.makeText(getContext(), "New level! " + levelValue, 15).show(); if (levelValue == 3) { drawParachutersGroup1(); drawParachutersGroup2(); drawParachutersGroup3(); drawParachutersGroup4(); } else if (levelValue == 5) { drawParachutersGroup1(); drawParachutersGroup2(); drawParachutersGroup3(); drawParachutersGroup4(); drawParachutersGroup5(); } else if (levelValue == 7) { drawParachutersGroup1(); drawParachutersGroup2(); drawParachutersGroup3(); drawParachutersGroup4(); drawParachutersGroup5(); drawParachutersGroup6(); } else if (levelValue == 9) { //Draw 7 groups of parachuters drawParachutersGroup1(); drawParachutersGroup2(); drawParachutersGroup3(); drawParachutersGroup4(); drawParachutersGroup5(); drawParachutersGroup6(); drawParachutersGroup1(); } else if (levelValue > 9) { //Draw 7 groups of parachuters drawParachutersGroup1(); drawParachutersGroup2(); drawParachutersGroup3(); drawParachutersGroup4(); drawParachutersGroup5(); drawParachutersGroup6(); drawParachutersGroup1(); } else { //Draw normal 3 groups of parachuters drawParachutersGroup1(); drawParachutersGroup2(); drawParachutersGroup3(); } } else { //Do nothing } } }); } private void checkLivesLeftValue() { mHandler.post(new Runnable() { @Override public void run() { Log.d("checkLivesLeftValue", "lives = " + livesLeftValue); // TODO Auto-generated method stub if (livesLeftValue == 3) { //Message to display: "You lost! Log.d("checkLivesLeftValue", "calling onMethod now"); parachuters.removeAll(parachuters); onMethod(); } else if (livesLeftValue == 2) { Toast.makeText(getContext(), "Lives left=1", 15).show(); livesLeftValue = livesLeftValue + 1; Log.d("checkLivesLeftValue", "increased lives to " + livesLeftValue); } else if (livesLeftValue == 1) { Toast.makeText(getContext(), "Lives left=2", 15).show(); livesLeftValue = livesLeftValue + 1; Log.d("checkLivesLeftValue", "increased lives to " + livesLeftValue); } else { //Set livesLeftValueText 3 Toast.makeText(getContext(), "Lives left=3", 15).show(); livesLeftValue = livesLeftValue + 1; Log.d("checkLivesLeftValue", "increased lives to " + livesLeftValue); } } }); } public void onMethod() { mHandler.post(new Runnable() { @Override public void run() { try { Toast.makeText(getContext(), "You lost!", 15).show(); livesLeftValue = 0; //Tell the user that he lost: android.content.Context ctx = mContext; Intent i = new Intent(ctx, playerLostMessageActivity.class); i.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK); i.putExtra("KEY","You got to level " + levelValue + " And you shot down " + parachutersDown + " parachuters"); i.putExtra("levelValue", levelValue); ctx.startActivity(i); System.exit(0); } catch (Exception e) { // TODO Auto-generated catch block e.printStackTrace(); //Exit activity and start playerLostMessageActivity Toast.makeText(getContext(), "You lost!", 15).show(); livesLeftValue = 0; //Tell the user that he lost: android.content.Context ctx = mContext; Intent i = new Intent(ctx, playerLostMessageActivity.class); i.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK); i.putExtra("KEY","You got to level " + levelValue + " And you shot down " + parachutersDown + " parachuters"); i.putExtra("levelValue", levelValue); System.exit(0); ctx.startActivity(i); System.exit(0); } } }); } public void onPlaySound() { try { mp1.start(); } catch (Exception e) { e.printStackTrace(); mp1.release(); } } public void onDestroy() { try { parachuters.removeAll(parachuters); mp1.stop(); mp1.release(); } catch (Exception e) { e.printStackTrace(); } } public void onPlaySound1() { try { mp2 = MediaPlayer.create(getContext(), R.raw.airriflesoundeffect); mp2.start(); } catch (Exception e) { e.printStackTrace(); mp2.release(); } } public boolean onTouchEvent(MotionEvent event) { if (event.getAction() != MotionEvent.ACTION_DOWN) releaseMediaPlayer(); x1 = event.getX(); y1 = event.getY(); checkAmountOfParachuters(); removeParachuter(); return false; } public void releaseMediaPlayer() { try { mp1.release(); } catch (Exception e) { e.printStackTrace(); } } public void removeParachuter() { try { for (Parachuter p: parachuters) { if (x1 > p.getX() && x1 < p.getX() + parachuter.getWidth() && y1 > p.getY() && y1 < p.getY() + parachuter.getHeight()) { p.setTouched(true); onPlaySound1(); parachutersDown = parachutersDown + 1; p.setTouched(false); } } } catch (Exception e) { e.printStackTrace(); } } public void initiateDrawParachuters() { drawParachutersGroup1(); } public void drawParachutersGroup1() { // TODO Auto-generated method stub //Parachuter group nr. 1 //Parachuter nr. 2 x = 75; y = 77; Parachuter p1 = new Parachuter(x, y); parachuters.add(p1); //Parachuter nr.1 x = 14; y = 28; Parachuter p = new Parachuter(x, y); parachuters.add(p); //Parachuter nr. 3 x = 250; y = 94; Parachuter p3 = new Parachuter(x, y); parachuters.add(p3); //Parachuter nr. 3 x = 275; y = 80; Parachuter p2 = new Parachuter(x, y); parachuters.add(p2); //Parachuter nr. 5 x = 280; y = 163; Parachuter p5 = new Parachuter(x, y); parachuters.add(p5); x = 125; y = 118; Parachuter p4 = new Parachuter(x, y); parachuters.add(p4); //Parachuter nr. 7 x = 126; y = 247; Parachuter p7 = new Parachuter(x, y); parachuters.add(p7); //Parachuter nr. 6 x = 123; y = 77; Parachuter p6 = new Parachuter(x, y); parachuters.add(p6); } public void drawParachutersGroup2() { // TODO Auto-generated method stub //Parachuter group nr. 2 //Parachuter nr. 5 x = 153; y = 166; Parachuter p5 = new Parachuter(x, y); parachuters.add(p5); x = 133; y = 123; Parachuter p4 = new Parachuter(x, y); parachuters.add(p4); //Parachuter nr. 7 x = 170; y = 213; Parachuter p7 = new Parachuter(x, y); parachuters.add(p7); //Parachuter nr. 6 x = 190; y = 121; Parachuter p6 = new Parachuter(x, y); parachuters.add(p6); } public void drawParachutersGroup3() { // TODO Auto-generated method stub //Parachuter group nr. 3 //Parachuter nr. 2 x = 267; y = 115; Parachuter p1 = new Parachuter(x, y); parachuters.add(p1); //Parachuter nr.1 x = 255; y = 183; Parachuter p = new Parachuter(x, y); parachuters.add(p); //Parachuter nr. 3 x = 170; y = 280; Parachuter p3 = new Parachuter(x, y); parachuters.add(p3); //Parachuter nr. 3 x = 116; y = 80; Parachuter p2 = new Parachuter(x, y); parachuters.add(p2); //Parachuter nr. 5 x = 67; y = 112; Parachuter p5 = new Parachuter(x, y); parachuters.add(p5); x = 260; y = 89; Parachuter p4 = new Parachuter(x, y); parachuters.add(p4); //Parachuter nr. 7 x = 260; y = 113; Parachuter p7 = new Parachuter(x, y); parachuters.add(p7); //Parachuter nr. 6 x = 178; y = 25; Parachuter p6 = new Parachuter(x, y); parachuters.add(p6); } public void drawParachutersGroup4() { // TODO Auto-generated method stub //Parachuter group nr. 1 //Parachuter nr. 2 x = 75; y = 166; Parachuter p1 = new Parachuter(x, y); parachuters.add(p1); //Parachuter nr.1 x = 118; y = 94; Parachuter p = new Parachuter(x, y); parachuters.add(p); //Parachuter nr. 3 x = 38; y = 55; Parachuter p3 = new Parachuter(x, y); parachuters.add(p3); //Parachuter nr. 3 x = 57; y = 18; Parachuter p2 = new Parachuter(x, y); parachuters.add(p2); //Parachuter nr. 5 x = 67; y = 119; Parachuter p5 = new Parachuter(x, y); parachuters.add(p5); x = 217; y = 113; Parachuter p4 = new Parachuter(x, y); parachuters.add(p4); //Parachuter nr. 7 x = 245; y = 234; Parachuter p7 = new Parachuter(x, y); parachuters.add(p7); //Parachuter nr. 6 x = 239; y = 44; Parachuter p6 = new Parachuter(x, y); parachuters.add(p6); } public void drawParachutersGroup5() { // TODO Auto-generated method stub //Parachuter group nr. 1 //Parachuter nr. 2 x = 59; y = 120; Parachuter p1 = new Parachuter(x, y); parachuters.add(p1); //Parachuter nr.1 x = 210; y = 169; Parachuter p = new Parachuter(x, y); parachuters.add(p); //Parachuter nr. 3 x = 199; y = 138; Parachuter p3 = new Parachuter(x, y); parachuters.add(p3); //Parachuter nr. 3 x = 22; y = 307; Parachuter p2 = new Parachuter(x, y); parachuters.add(p2); //Parachuter nr. 5 x = 195; y = 22; Parachuter p5 = new Parachuter(x, y); parachuters.add(p5); x = 157; y = 132; Parachuter p4 = new Parachuter(x, y); parachuters.add(p4); //Parachuter nr. 7 x = 150; y = 183; Parachuter p7 = new Parachuter(x, y); parachuters.add(p7); //Parachuter nr. 6 x = 130; y = 20; Parachuter p6 = new Parachuter(x, y); parachuters.add(p6); } public void drawParachutersGroup6() { // TODO Auto-generated method stub //Parachuter group nr. 1 //Parachuter nr. 2 x = 10; y = 10; Parachuter p1 = new Parachuter(x, y); parachuters.add(p1); //Parachuter nr.1 x = 20; y = 20; Parachuter p = new Parachuter(x, y); parachuters.add(p); //Parachuter nr. 3 x = 30; y = 30; Parachuter p3 = new Parachuter(x, y); parachuters.add(p3); //Parachuter nr. 3 x = 60; y = 60; Parachuter p2 = new Parachuter(x, y); parachuters.add(p2); //Parachuter nr. 5 x = 90; y = 90; Parachuter p5 = new Parachuter(x, y); parachuters.add(p5); x = 120; y = 120; Parachuter p4 = new Parachuter(x, y); parachuters.add(p4); //Parachuter nr. 7 x = 150; y = 150; Parachuter p7 = new Parachuter(x, y); parachuters.add(p7); //Parachuter nr. 6 x = 180; y = 180; Parachuter p6 = new Parachuter(x, y); parachuters.add(p6); } public void drawParachuters() { Parachuter p = new Parachuter(x, y); parachuters.add(p); Toast.makeText(getContext(), "x=" + x + " y=" + y, 15).show(); } public void setRunning(boolean bRun) { running = bRun; } public boolean getRunning() { return running; } } /** Handle to the application context, used to e.g. fetch Drawables. */ private Context mContext; /** Pointer to the text view to display "Paused.." etc. */ private TextView mStatusText; /** The thread that actually draws the animation */ private ExampleThread eThread; public ExampleView(Context context) { super(context); // register our interest in hearing about changes to our surface SurfaceHolder holder = getHolder(); holder.addCallback(this); // create thread only; it's started in surfaceCreated() eThread = new ExampleThread(holder, context, new Handler() { @Override public void handleMessage(Message m) { // mStatusText.setVisibility(m.getData().getInt("viz")); // mStatusText.setText(m.getData().getString("text")); } }); setFocusable(true); } @Override public boolean onTouchEvent(MotionEvent event) { return eThread.onTouchEvent(event); } public ExampleThread getThread() { return eThread; } @Override public void surfaceChanged(SurfaceHolder arg0, int arg1, int arg2, int arg3) { // TODO Auto-generated method stub } public void surfaceCreated(SurfaceHolder holder) { if (eThread.getState() == Thread.State.TERMINATED) { eThread = new ExampleThread(getHolder(), getContext(), getHandler()); eThread.start(); } else { eThread.start(); } } @Override public void surfaceDestroyed(SurfaceHolder holder) { boolean retry = true; eThread.setRunning(false); while (retry) { try { eThread.join(); retry = false; } catch (InterruptedException e) { } } } }

    Read the article

< Previous Page | 179 180 181 182 183